/* =========================================================
   SISTEMA DE GESTIÓN - SAN FERMÍN (EJECUTIVO + RESPONSIVO)
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&display=swap');

:root {
    --primario: #112A46;
    --fondo-sitio: #ECEFF4;
    --blanco: #FFFFFF;
    --texto-oscuro: #2C3E50;
    --texto-claro: #7F8C8D;
    --lineas: #D5DBE4;
    --exito: #1E8449;
    --alerta: #C0392B;
    --radio: 4px;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--fondo-sitio);
    color: var(--texto-oscuro);
    margin: 0;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* 1. CAJAS Y PANELES */
.contenedor,
.caja,
.login-box {
    background-color: var(--blanco);
    padding: 40px;
    border-radius: var(--radio);
    box-shadow: 0 10px 30px rgba(17, 42, 70, 0.08);
    border-top: 5px solid var(--primario);
    margin: 0 auto;
    box-sizing: border-box;
}

.contenedor {
    max-width: 1100px;
}

.caja {
    max-width: 450px;
}

.login-box {
    max-width: 400px;
    text-align: center;
    margin-top: 5vh;
}

/* 2. TEXTOS Y TÍTULOS */
h2,
h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--primario);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 0;
    font-size: 22px;
}

.login-box h2 {
    font-size: 26px;
    margin-bottom: 5px;
}

label {
    display: block;
    margin-top: 20px;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--texto-oscuro);
    font-size: 13px;
}

/* 3. FORMULARIOS */
input,
select,
textarea {
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--lineas);
    border-radius: var(--radio);
    box-sizing: border-box;
    font-size: 16px;
    /* Evita el zoom automático en celulares */
    font-family: 'Open Sans', sans-serif;
    background-color: #F8F9FA;
    transition: border-color 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primario);
    background-color: var(--blanco);
}

input[readonly] {
    background-color: var(--fondo-sitio);
    color: var(--texto-claro);
    cursor: not-allowed;
}

/* 4. BOTONES */
.btn,
.btn-guardar,
.btn-cambiar,
button[type="submit"] {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: var(--radio);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
    box-sizing: border-box;
}

.btn-azul,
button[type="submit"] {
    background-color: var(--primario);
    color: white;
}

.btn-azul:hover,
button[type="submit"]:hover {
    background-color: #0A192A;
}

.btn-verde,
.btn-guardar,
.btn-cambiar {
    background-color: var(--exito);
    color: white;
}

.btn-verde:hover,
.btn-guardar:hover,
.btn-cambiar:hover {
    background-color: #145A32;
}

.btn-rojo {
    background-color: white;
    color: var(--alerta);
    border: 1px solid var(--lineas);
}

.btn-rojo:hover {
    background-color: #FDEDEC;
    border-color: var(--alerta);
}

.btn-naranja,
.btn-editar {
    background-color: white;
    color: var(--texto-oscuro);
    border: 1px solid var(--lineas);
}

.btn-naranja:hover {
    background-color: #F2F3F4;
}

.btn-gris {
    background-color: #BDC3C7;
    color: #2C3E50;
}

.btn-gris:hover {
    background-color: #95A5A6;
}

.btn-accion {
    padding: 8px 15px;
    width: auto;
    font-size: 12px;
    margin-right: 4px;
}

/* 5. TABLAS */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
    background-color: white;
}

th,
td {
    padding: 18px 15px;
    border-bottom: 1px solid var(--lineas);
    text-align: left;
    font-size: 14px;
}

th {
    font-family: 'Montserrat', sans-serif;
    color: var(--texto-claro);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--primario);
}

tr:hover td {
    background-color: #F8F9FA;
}

/* 6. ETIQUETAS */
.badge {
    padding: 6px 12px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entregado {
    background-color: #EAFAF1;
    color: var(--exito);
    border: 1px solid #A9DFBF;
}

.pendiente {
    background-color: #FDEDEC;
    color: var(--alerta);
    border: 1px solid #F5B7B1;
}

.admin {
    background-color: #F4F6F9;
    color: var(--primario);
    border: 1px solid var(--lineas);
}

.bodega {
    background-color: #EBF5FB;
    color: #2874A6;
    border: 1px solid #AED6F1;
}

/* 7. PANELES */
.nav-superior {
    max-width: 450px;
    margin: 0 auto 30px auto;
    display: flex;
    gap: 10px;
}

.nav-superior .btn-nav {
    flex: 1;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: var(--texto-oscuro);
    border: 1px solid var(--lineas);
}

.nav-superior .btn-nav:hover {
    background-color: var(--fondo-sitio);
    border-color: var(--primario);
}

.panel-filtros {
    background-color: #F8F9FA;
    padding: 30px;
    border-radius: var(--radio);
    border: 1px solid var(--lineas);
    margin-bottom: 30px;
}

.grid-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    align-items: flex-end;
}

.grid-filtros input,
.grid-filtros select,
.grid-filtros button {
    margin-bottom: 0;
}

/* =========================================================
   8. ADAPTACIÓN PARA CELULARES (MAGIA RESPONSIVA)
========================================================= */
@media (max-width: 768px) {

    /* Reducimos los márgenes enormes de la pantalla completa */
    body {
        padding: 15px 10px;
    }

    /* Achicamos el relleno blanco de las cajas */
    .contenedor,
    .caja,
    .login-box {
        padding: 20px 15px;
    }

    /* Hacemos que los botones superiores se apilen si no caben */
    .nav-superior {
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 20px;
    }

    .nav-superior .btn-nav {
        font-size: 11px;
        padding: 10px 5px;
    }

    /* El truco de la tabla: si es muy ancha, se podrá deslizar con el dedo hacia el lado */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Los botones de acción dentro de la tabla */
    .btn-accion {
        display: inline-block;
        margin-bottom: 5px;
    }

    /* El panel de filtros se apila verticalmente */
    .panel-filtros {
        padding: 15px;
    }

    .grid-filtros {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Títulos un poco más pequeños */
    h2,
    h3 {
        font-size: 18px;
    }

    .login-box h2 {
        font-size: 22px;
    }
}

/* 9. IMPRESIÓN LIMPIA */
@media print {
    body {
        background-color: white;
        padding: 0;
        margin: 0;
    }

    .contenedor {
        box-shadow: none;
        border: none;
        padding: 0;
        max-width: 100%;
    }

    .panel-filtros,
    .btns-nav,
    .acciones-col,
    .nav-superior,
    .btn-limpiar {
        display: none !important;
    }

    table {
        border: 2px solid #000;
    }

    th {
        border-bottom: 2px solid #000;
        color: black;
    }

    td {
        border-bottom: 1px solid #ccc;
    }

    .badge {
        border: 1px solid #000;
        background-color: transparent !important;
        color: black !important;
    }
}