.fondo {
    background-image: url('/static/imagenes/fondo.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.derecha {
    position: absolute;
    top: 50%;
    right: 0; 
    transform: translate(0, -50%);
    width: 30%; 
    max-width: 75%; 
    margin-left: 20px; 
    font-style: italic;
    font-size: 2em;
}

.navbar {
    background-color: #4384bf !important; /* Change this to your desired color */
  }

.fondo-blanco {
    background-color: white;
    color: black; /* Asegúrate de que el texto sea visible sobre el fondo blanco */
    display: inline;
    padding: 5px;
    border:#000000 3px solid;
}

.abajo {
    position: fixed;
    bottom: 100px;
    width: 50%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    padding: 20px;
}

.abajo p {
    margin: 0;
}

main {
    flex: 1;
    margin-bottom: 50px;
}

.izquierda {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 40%; 
    max-width: 75%; 
    margin-right: 20px;
    font-style: italic;
    font-size: 2em;
}

.cerrar-sesion{
    background-color: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 0.375rem 0.75rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cerrar-sesion:hover {
    background-color: #dc3545;
    color: white;
}

.iniciar-sesion{
    background-color: transparent;
    border: 1px solid #000000;
    color: #000000;
    padding: 0.375rem 0.75rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.iniciar-sesion:hover{
    background-color: #000000;
    color: white;
}

.form {
    background-color: #f9f9f9; /* Light background color */
    padding: 20px; /* Padding around the form */
    border: 1px solid #ccc; /* Light border */
    border-radius: 10px; /* Rounded corners */
    max-width: auto; /* Maximum width of the form */
    margin: 20px auto; /* Center the form horizontally */
}

.form label {
    display: block; /* Make the label a block element */
    margin-bottom: 10px; /* Space below the label */
    font-weight: bold; /* Bold text */
}

.form select {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside the select */
    margin-bottom: 20px; /* Space below the select */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
}

.form .button {
    display: block; /* Make the button a block element */
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside the button */
    background-color: #79a5ff; /* Button background color */
    color: #000000; /* Button text color */
    border: 3px solid black; /* Button border */
    border-radius: 10px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    text-align: center; /* Center text horizontally */
    font-size: 26px; /* Font size */
    font-weight: bold; /* Bold text */
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.button {
    background-color: #79a5ff;  
    color: #000000;
    padding: 10px 20px;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    font-size: 26px;
    margin: 10px;
    font-weight: bold;
    text-align: center; /* Center text horizontally */
    display: flex; /* Enable flexbox for centering */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
}

#button2 {
    background-color: #22c01d;  
    color: #000000;
    padding: 10px 10px;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    font-size: 18px;
    margin: 10px;
    font-weight: bold;
    text-align: center; /* Center text horizontally */
    display: flex; /* Enable flexbox for centering */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
}

#button3 {
    background-color: #e02323;  
    color: #ffffff;
    padding: 10px 10px;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    font-size: 18px;
    margin: 10px;
    font-weight: bold;
    text-align: center; /* Center text horizontally */
    display: flex; /* Enable flexbox for centering */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
}

#button3:disabled {
            background-color: #ffcccc !important; /* rojo pálido */
            color: #a94442 !important;           /* texto rojo suave */
            border-color: #ffcccc !important;
            cursor: not-allowed;
            opacity: 1;
        }

#button-warning {
    background-color: orange;  
    color: #000000;
    padding: 10px 10px;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    margin: 10px;
    font-weight: bold;
    text-align: center; /* Center text horizontally */
    display: flex; /* Enable flexbox for centering */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
}

#button-produccion {
    background-color: #22c01d;  
    color: #000000;
    padding: 10px 10px;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    font-size: 150px;
    margin: 10px;
    font-weight: bold;
    text-align: center; /* Center text horizontally */
    display: flex; /* Enable flexbox for centering */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
}

.fused-button {
    background-color: #79a5ff; /* Button background color */
    color: #000000; /* Button text color */
    border: 3px solid black; /* Button border */
    padding: 10px; /* Padding inside the button */
    font-size: 26px; /* Font size */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer cursor on hover */
    text-align: center; /* Center text horizontally */
}

.button-container {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap to the next line */
    gap: 10px; /* Space between buttons */
}

.button-container button {
    flex: 1 1 auto; /* Allow buttons to grow and shrink */
    min-width: 100px; /* Minimum width for buttons */
}

.contenedor-centrado{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.fondo-login {
    background-image: url('/static/imagenes/fondo.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.contenedor-mision {
    width: 40%; 
    margin: 0 auto; 
}

.tabla {
    overflow-y: auto;
    border-collapse: collapse;
    margin-top: 20px;
}

.tabla th, .tabla td {
    margin: 0; 
    font-size: 20px;
}

.contenedor-categorias {
margin-top: 0;
margin-bottom: 0;
}

.tabla tbody tr {
    margin: 0;
    padding: 0;
}

.tamaño-lista{
    font-size: 20px;
    height: 300px;
}

.margen-superior {
    margin-top: 100px;
}

.full-width {
    width: 100%;
    box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
}

.factura-inicio td {
    font-weight: bold;
    border-top: 2px solid black;
}

.button:disabled {
    background-color: #c7dbfa !important;
    color: #4d4b4b !important;
    border-color: #c7dbfa !important;
    cursor: not-allowed;
    opacity: 1;
}

h1{
    color: #486cae;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    background-color: #f0f0f0; /* Add background color */
    padding: 10px;
    margin-bottom: 20px;
}