/* ============================================================
   Sistema de Panadería — sistema de diseño
   ------------------------------------------------------------
   Para quién es esto: gente que trabaja de pie, apurada, a las
   3 de la mañana, con las manos con harina y a veces mirando un
   teléfono. No es un panel de analista.

   Reglas que mandan, en este orden:

   1. LEGIBLE PRIMERO. Texto de 15px, no 13. Números grandes.
      Contraste alto. Nada gris claro sobre blanco.
   2. EL DATO IMPORTANTE SE VE SOLO. En cada pantalla hay UNA
      cifra que importa; el resto la acompaña, no le compite.
   3. TOCABLE. Todo lo que se aprieta mide 40px o más de alto,
      también en el escritorio: se usa con prisa.
   4. SIN DECORACIÓN. Ni degradados, ni sombras de colores, ni
      animaciones. Cada línea y cada color dicen algo.
   5. EL COLOR ES SEMÁFORO, NO ADORNO. Verde = está bien.
      Rojo = falta plata o falta pan. Ámbar = ojo con esto.
      Si un color no significa nada, no se usa.
   ============================================================ */

:root {
    /* --- neutros --- */
    --n-0:   #ffffff;
    --n-25:  #fafbfc;
    --n-50:  #f4f6f7;
    --n-100: #edf0f2;
    --n-200: #dce1e4;
    --n-300: #c5cdd2;
    --n-400: #89949b;
    --n-500: #647079;
    --n-600: #4d5960;
    --n-700: #384248;
    --n-800: #293238;
    --n-900: #1e262b;

    /* --- marca: rojo discreto y detalles dorados --- */
    --acento:        #b6323c;
    --acento-fuerte: #92252e;
    --acento-suave:  #fcf0f1;
    --acento-borde:  #ebc8cc;
    --marca-oro:     #876716;
    --marca-oro-suave: #fff7dc;

    /* --- semáforo --- */
    --ok:           #15803d;
    --ok-fuerte:    #14532d;
    --ok-suave:     #eef8f1;
    --ok-borde:     #c3e3cd;

    --alerta:       #be1c1c;
    --alerta-fuerte:#7f1d1d;
    --alerta-suave: #fdf2f2;
    --alerta-borde: #f2ccc9;

    --aviso:        #96620a;
    --aviso-fuerte: #6b4708;
    --aviso-suave:  #fdf7e9;
    --aviso-borde:  #eedfb6;

    --info:         #1d4ed8;
    --info-fuerte:  #1e3a8a;
    --info-suave:   #f0f4fd;
    --info-borde:   #d1ddf7;

    /* --- medidas --- */
    --lateral-ancho: 226px;
    --alto-toque: 40px;         /* alto mínimo de todo lo que se aprieta */

    --r-sm: 6px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-full: 999px;

    --sombra-sm: 0 1px 2px rgba(26, 23, 19, .06);
    --sombra-md: 0 1px 3px rgba(26, 23, 19, .08), 0 6px 16px rgba(26, 23, 19, .05);
    --sombra-lg: 0 10px 40px rgba(26, 23, 19, .18);

    --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    /* Cifras: siempre en columnas alineadas, nunca bailando */
    --cifras: tabular-nums lining-nums;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/*
 * `hidden` significa oculto. Punto.
 *
 * El navegador lo aplica con `[hidden] { display: none }`, que tiene la misma
 * especificidad que cualquier clase. Basta con que una regla de acá abajo diga
 * `display: flex` para que el atributo deje de servir, y el JS crea que ocultó
 * algo que en realidad sigue a la vista.
 *
 * Pasó dos veces: los botones Guardar de la tabla del día salían en todas las
 * filas, y el autocompletado de clientes no filtraba nada. Con esto no vuelve
 * a pasar: es la única línea del archivo que usa !important, y se la gana.
 */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--n-50);
    color: var(--n-800);
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Cualquier número, en cualquier parte, se lee alineado. */
.num, .valor, input[type=number], .cuadre, table.tabla td.num,
.indicador .valor, .codigo { font-variant-numeric: var(--cifras); }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: 0; color: var(--n-900); }
h1 { font-size: 1.5rem; line-height: 1.25; }
h2 { font-size: 1.0625rem; margin: 2rem 0 .875rem; }
h3 { font-size: .9375rem; }

p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }

small { font-size: .8125rem; }

.icono { width: 19px; height: 19px; flex: 0 0 19px; }

/* ============================================================
   Armazón
   ============================================================ */

.marco { display: flex; min-height: 100vh; }
.columna { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- barra lateral ---------- */

.lateral {
    width: var(--lateral-ancho);
    flex: 0 0 var(--lateral-ancho);
    background: var(--n-900);
    color: var(--n-300);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lateral-marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.lateral-marca a {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: var(--n-0);
    text-decoration: none;
    min-width: 0;
}
.lateral-marca a:hover { text-decoration: none; }

/* La espiga, en una placa del color de la marca. Reemplaza al emoji 🥖,
   que cada sistema operativo dibujaba distinto y se veía pegado. */
.marca-emblema {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--r-md);
    background: var(--acento);
    color: #fff;
}
.marca-emblema svg { width: 22px; height: 22px; display: block; }

.marca-texto { min-width: 0; line-height: 1.2; }
.marca-texto strong {
    display: block;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.marca-texto small {
    display: block;
    font-size: .71875rem;
    color: var(--n-400);
    letter-spacing: 0;
    margin-top: .0625rem;
}

.lateral-cerrar {
    display: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--n-400);
    cursor: pointer;
    padding: 0 .25rem;
}

.lateral-nav { flex: 1; padding: .875rem .625rem 1.25rem; }

.nav-grupo + .nav-grupo { margin-top: 1.375rem; }
.nav-grupo-titulo {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--n-500);
    padding: 0 .75rem .5rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: .6875rem;
    min-height: var(--alto-toque);
    padding: .5rem .75rem;
    border-radius: var(--r-md);
    color: var(--n-300);
    font-size: .9375rem;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: var(--n-0); text-decoration: none; }
.nav-item .icono { color: var(--n-500); transition: color .12s; }
.nav-item:hover .icono { color: var(--n-300); }

/* La sección en la que estás: barra de color al costado, no solo un fondo. */
.nav-item.activo {
    background: rgba(255, 255, 255, .1);
    color: var(--n-0);
    font-weight: 550;
    position: relative;
}
.nav-item.activo::before {
    content: '';
    position: absolute;
    left: -.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--acento);
}
.nav-item.activo .icono { color: var(--acento); }

.lateral-pie { padding: .875rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.usuario-ficha { display: flex; align-items: center; gap: .6875rem; padding: 0 .25rem .75rem; }
.usuario-inicial {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: var(--r-full);
    background: var(--acento);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .875rem;
}
.usuario-datos { min-width: 0; }
.usuario-nombre {
    color: var(--n-0);
    font-size: .875rem;
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.usuario-rol { color: var(--n-500); font-size: .78125rem; }

.lateral-acciones { display: flex; gap: .375rem; }
.lateral-acciones a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .07);
    color: var(--n-300);
    font-size: .8125rem;
    text-decoration: none;
}
.lateral-acciones a:hover { background: rgba(255, 255, 255, .14); color: var(--n-0); text-decoration: none; }

/* ---------- barra superior ---------- */

.superior {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 0 1.75rem;
    height: 60px;
    background: var(--n-0);
    border-bottom: 1px solid var(--n-200);
    position: sticky;
    top: 0;
    z-index: 20;
}
.superior-titulo { font-size: 1rem; font-weight: 650; flex: 1; min-width: 0; }
.superior-fecha { color: var(--n-500); font-size: .875rem; white-space: nowrap; }

.menu-boton {
    display: none;
    cursor: pointer;
    color: var(--n-700);
    padding: .5rem;
    margin-left: -.5rem;
}
.menu-boton svg { width: 24px; height: 24px; display: block; }
.menu-abierto, .menu-velo { display: none; }

.contenido { padding: 1.75rem; max-width: 1440px; width: 100%; }
.contenido-impresion { padding: 1.5rem 1.75rem 3rem; }

/* Pantallas de UN formulario, no de tablas: se acotan a un ancho
   cómodo de leer. A 1400px, un campo estirado de borde a borde
   obliga a recorrer el monitor entero para llenarlo. */
.columna-angosta { max-width: 780px; }

/* ---------- menú lateral en pantallas chicas ---------- */

@media (max-width: 900px) {
    .lateral {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--sombra-lg);
    }
    .menu-abierto:checked ~ .marco .lateral { transform: translateX(0); }
    .menu-abierto:checked ~ .menu-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(26, 23, 19, .5);
    }
    .lateral-cerrar { display: block; }
    .menu-boton { display: block; }
    .superior { padding: 0 1rem; }
    .superior-fecha { display: none; }
    .contenido { padding: 1rem; }
}

/* ============================================================
   Encabezado de página
   ============================================================ */

.encabezado-seccion {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--n-200);
}
.encabezado-seccion h1 { margin-bottom: .3125rem; }
.bajada { color: var(--n-600); margin: 0; font-size: .9375rem; max-width: 72ch; }

/* ============================================================
   Superficies
   ============================================================ */

.tarjeta {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    padding: 1.375rem 1.5rem;
    box-shadow: var(--sombra-sm);
    margin-bottom: 1.25rem;
}
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }

.rejilla {
    display: grid;
    gap: .875rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 1.25rem;
}
.dos-columnas {
    display: grid;
    gap: 0 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* ---------- indicadores: la cifra manda ---------- */

.indicador {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-left: 4px solid var(--n-300);
    border-radius: var(--r-lg);
    padding: 1rem 1.125rem;
    box-shadow: var(--sombra-sm);
}
.indicador .valor {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--n-900);
}
.indicador .etiqueta {
    color: var(--n-600);
    font-size: .8125rem;
    line-height: 1.4;
    margin-top: .3125rem;
}

/* El semáforo: solo tres estados, y cada uno quiere decir algo. */
.indicador.ok     { border-left-color: var(--ok); }
.indicador.ok     .valor { color: var(--ok-fuerte); }
.indicador.aviso  { border-left-color: var(--aviso); }
.indicador.aviso  .valor { color: var(--aviso-fuerte); }
.indicador.alerta { border-left-color: var(--alerta); background: var(--alerta-suave); }
.indicador.alerta .valor { color: var(--alerta); }

/* ============================================================
   Tablas
   ============================================================ */

.tabla-envoltura { overflow-x: auto; border-radius: var(--r-lg); }
.tarjeta > .tabla-envoltura { margin: -1.375rem -1.5rem; }
.tarjeta.sin-relleno > .tabla-envoltura { margin: 0; }

table.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    background: var(--n-0);
}

table.tabla thead th {
    background: var(--n-50);
    border-bottom: 1px solid var(--n-200);
    padding: .625rem .875rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--n-600);
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
table.tabla thead th.num { text-align: right; }

table.tabla td {
    padding: .75rem .875rem;
    border-bottom: 1px solid var(--n-100);
    vertical-align: middle;
}
table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover { background: var(--n-25); }

table.tabla .num { text-align: right; white-space: nowrap; }

table.tabla tfoot td {
    font-weight: 650;
    background: var(--n-50);
    border-top: 2px solid var(--n-300);
    border-bottom: 0;
    color: var(--n-900);
}

.fila-inactiva { color: var(--n-400); }
.fila-inactiva strong { font-weight: 500; }

/* ============================================================
   Estado y pago dentro de la tabla
   ------------------------------------------------------------
   La tabla se mira mucho más de lo que se edita: durante el día
   se pasa a ver "quién falta" y "quién no ha pagado". Por eso los
   selects van pintados del color de su estado, igual que los
   chips: verde = está bien, rojo = falta, ámbar = a medias.

   Así se lee de un vistazo, sin tener que ir renglón por renglón.
   ============================================================ */

select.select-estado {
    min-height: 34px;
    padding: .25rem 1.75rem .25rem .5rem;
    font-size: .84375rem;
    font-weight: 600;
    border-width: 1px;
    background-size: 16px;
    background-position: right .25rem center;
}

select.es-entregado, select.es-pagado {
    background-color: var(--ok-suave);
    border-color: var(--ok-borde);
    color: var(--ok-fuerte);
}
select.es-pendiente, select.es-no_entregado {
    background-color: var(--alerta-suave);
    border-color: var(--alerta-borde);
    color: var(--alerta-fuerte);
}
select.es-parcial {
    background-color: var(--aviso-suave);
    border-color: var(--aviso-borde);
    color: var(--aviso-fuerte);
}
select.es-planificado, select.es-armado {
    background-color: var(--n-50);
    border-color: var(--n-300);
    color: var(--n-700);
}

/* Bloque que aparece al marcar "No entregado": qué pasó con el pan. */
.no-entrega {
    margin-top: .5rem;
    padding: .5rem .625rem;
    background: var(--alerta-suave);
    border: 1px solid var(--alerta-borde);
    border-radius: var(--r-md);
    min-width: 190px;
}
.no-entrega label { margin-bottom: .25rem; }
.no-entrega .select-estado { background-color: var(--n-0); border-color: var(--n-300); color: var(--n-800); }

.casilla-mini {
    margin-top: .5rem;
    padding: .375rem .5rem;
    background: var(--n-0);
    font-size: .8125rem;
    min-height: 0;
    align-items: flex-start;
}
.casilla-mini span { line-height: 1.3; }

/* ---------- fila con cambios sin guardar ----------
   Tiene que verse desde el otro lado de la pantalla: si alguien movió
   un select sin querer, lo que importa es que se dé cuenta. */

table.tabla tr.fila-sin-guardar > td {
    background: var(--aviso-suave);
    border-bottom-color: var(--aviso-borde);
}
table.tabla tr.fila-sin-guardar:hover > td { background: var(--aviso-suave); }
table.tabla tr.fila-sin-guardar > td:first-child {
    box-shadow: inset 3px 0 0 var(--aviso);
}

/* El campo que cambió, marcado aparte: en una fila con dos selects
   hay que poder ver cuál de los dos se movió. */
select.campo-cambiado {
    border-color: var(--aviso);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(150, 98, 10, .12);
}

/*
 * Guardar / Deshacer viven en la columna de acciones y solo existen
 * mientras la fila tiene cambios. Se controlan con la clase de la
 * fila, no con el atributo hidden: una regla `display:flex` sobre la
 * clase le gana a `[hidden]` y los botones quedaban visibles siempre.
 */
.celda-acciones .fila-guardar { display: none; }
.celda-acciones .fila-normal  { display: flex; justify-content: flex-end; }

tr.fila-sin-guardar .celda-acciones .fila-guardar {
    display: flex;
    gap: .375rem;
    justify-content: flex-end;
}
tr.fila-sin-guardar .celda-acciones .fila-normal { display: none; }

.detalle-linea { color: var(--n-500); font-size: .8125rem; line-height: 1.4; }

/* Pantalla vacía: dice qué pasa y qué hacer, no solo "no hay datos". */
.vacio { text-align: center; color: var(--n-600); padding: 3rem 1.5rem; }
.vacio h2 { margin-top: 0; }
.vacio .bajada { margin: 0 auto; }

/* ============================================================
   Formularios
   ============================================================ */

label {
    display: block;
    font-weight: 550;
    font-size: .875rem;
    color: var(--n-700);
    margin: 0 0 .375rem;
}

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=tel], input[type=email], select, textarea {
    width: 100%;
    min-height: var(--alto-toque);
    padding: .5rem .75rem;
    border: 1px solid var(--n-300);
    border-radius: var(--r-md);
    background: var(--n-0);
    color: var(--n-900);
    font: inherit;
    font-size: .9375rem;
    transition: border-color .12s, box-shadow .12s;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover { border-color: var(--n-400); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(182, 50, 60, .15);
}
input[readonly], input:disabled, select:disabled {
    background: var(--n-100);
    color: var(--n-600);
    cursor: not-allowed;
}
input::placeholder { color: var(--n-400); }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237a7164' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 20px;
    padding-right: 2rem;
}

.campos {
    display: grid;
    gap: 1.125rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.campos > div { min-width: 0; }

.pista { color: var(--n-500); font-size: .8125rem; line-height: 1.45; margin: .375rem 0 0; }
.pista strong { color: var(--n-700); }
.ancho-total { width: 100%; }

.acciones { display: flex; gap: .625rem; flex-wrap: wrap; margin-top: 1.5rem; }
.acciones-fila { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Aviso de campo mal escrito: se marca el campo, no solo el mensaje de arriba. */
.campo-malo input, .campo-malo select { border-color: var(--alerta); }
.campo-malo .pista { color: var(--alerta); font-weight: 550; }

/* ---------- filtros ---------- */

.filtros {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    padding: 1rem 1.125rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--sombra-sm);
}
.filtros label { margin: 0 0 .3125rem; font-size: .78125rem; color: var(--n-600); }
.filtros .campo { min-width: 150px; }

/* ============================================================
   Botones
   ============================================================ */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    min-height: var(--alto-toque);
    padding: .5rem 1rem;
    border: 1px solid var(--n-300);
    border-radius: var(--r-md);
    background: var(--n-0);
    color: var(--n-800);
    font: inherit;
    font-size: .9375rem;
    font-weight: 550;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--sombra-sm);
    transition: background .12s, border-color .12s, color .12s;
}
.boton:hover { background: var(--n-50); border-color: var(--n-400); text-decoration: none; }
.boton:active { background: var(--n-100); }
.boton:disabled, .boton[disabled] {
    opacity: .5;
    cursor: not-allowed;
    background: var(--n-100);
}

/* La acción principal de la pantalla. Una sola por pantalla. */
.boton-principal {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--n-0);
}
.boton-principal:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

.boton-acento {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
}
.boton-acento:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

.boton-peligro { color: var(--alerta); border-color: var(--alerta-borde); background: var(--n-0); }
.boton-peligro:hover { background: var(--alerta-suave); border-color: var(--alerta); }

.boton-mini {
    min-height: 32px;
    padding: .25rem .625rem;
    font-size: .8125rem;
    box-shadow: none;
}

/* La acción que se aprieta cien veces al día merece ser grande. */
.boton-grande {
    min-height: 48px;
    padding: .625rem 1.5rem;
    font-size: 1rem;
}

/* ============================================================
   Avisos
   ------------------------------------------------------------
   Un aviso siempre dice qué pasa y qué hacer. Lleva una barra
   de color al costado para reconocerlo sin leerlo.
   ============================================================ */

.aviso {
    padding: .875rem 1.125rem;
    border-radius: var(--r-md);
    margin-bottom: 1.25rem;
    border: 1px solid;
    border-left-width: 4px;
    font-size: .9375rem;
    line-height: 1.5;
}
.aviso strong { font-weight: 650; }
.aviso a { text-decoration: underline; font-weight: 550; }

.aviso-exito { background: var(--ok-suave);     border-color: var(--ok-borde);     border-left-color: var(--ok);     color: var(--ok-fuerte); }
.aviso-error { background: var(--alerta-suave); border-color: var(--alerta-borde); border-left-color: var(--alerta); color: var(--alerta-fuerte); }
.aviso-info  { background: var(--info-suave);   border-color: var(--info-borde);   border-left-color: var(--info);   color: var(--info-fuerte); }
.aviso-aviso { background: var(--aviso-suave);  border-color: var(--aviso-borde);  border-left-color: var(--aviso);  color: var(--aviso-fuerte); }

/* ============================================================
   Etiquetas de estado
   ============================================================ */

.chip {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    border-radius: var(--r-full);
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.6;
}
.chip-planificado  { background: var(--n-100);        color: var(--n-600);   border-color: var(--n-200); }
.chip-armado       { background: var(--info-suave);   color: var(--info);    border-color: var(--info-borde); }
.chip-entregado    { background: var(--ok-suave);     color: var(--ok);      border-color: var(--ok-borde); }
.chip-no_entregado { background: var(--alerta-suave); color: var(--alerta);  border-color: var(--alerta-borde); }
.chip-pendiente    { background: var(--alerta-suave); color: var(--alerta);  border-color: var(--alerta-borde); }
.chip-parcial      { background: var(--aviso-suave);  color: var(--aviso);   border-color: var(--aviso-borde); }
.chip-pagado       { background: var(--ok-suave);     color: var(--ok);      border-color: var(--ok-borde); }
.chip-neutro       { background: var(--n-100);        color: var(--n-600);   border-color: var(--n-200); }

/* Código de producto: B, H, C… Se lee como sigla, no como texto. */
.codigo {
    display: inline-block;
    min-width: 1.625rem;
    text-align: center;
    background: var(--acento-suave);
    color: var(--acento-fuerte);
    border: 1px solid var(--acento-borde);
    border-radius: var(--r-sm);
    padding: 0 .3125rem;
    font-family: var(--mono);
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.6;
}

.texto-rojo  { color: var(--alerta); }
.texto-verde { color: var(--ok); }
.texto-gris  { color: var(--n-500); }

/* ============================================================
   Piezas específicas
   ============================================================ */

.tabla-cantidades input[type=number] {
    max-width: 108px;
    text-align: right;
    min-height: 36px;
    padding: .375rem .5rem;
}

/* ---------- tarjetas de planilla ---------- */

.planillas {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    margin-bottom: 1rem;
}
.planilla-tarjeta {
    display: block;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-left: 4px solid var(--n-300);
    border-radius: var(--r-lg);
    padding: .875rem 1rem;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--sombra-sm);
    transition: border-color .12s, box-shadow .12s;
}
.planilla-tarjeta:hover { border-color: var(--n-400); box-shadow: var(--sombra-md); text-decoration: none; }
.planilla-tarjeta.activa { border-left-color: var(--acento); background: var(--acento-suave); }
.planilla-ruta { font-weight: 650; color: var(--n-900); }
.planilla-dia { font-size: .8125rem; color: var(--n-500); margin-top: .125rem; }
.planilla-cifras { font-size: .875rem; color: var(--n-600); margin-top: .5rem; }

/* ============================================================
   Accesos grandes de la portada
   ------------------------------------------------------------
   Lo primero que se ve al entrar. Son tres, no ocho: si todo es
   importante, nada lo es.

   El primero ("Nuevo pedido") ocupa el doble de ancho y lleva el
   color de la marca, porque es a lo que la gente entra el 90% de
   las veces. Los otros dos siguen el orden del día.

   Cada uno lleva un color distinto a propósito: se reconocen por
   el color antes de leerlos, que es como se usa una pantalla que
   se abre veinte veces al día.
   ============================================================ */

.acciones-grandes {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: .875rem;
    margin-bottom: 1.75rem;
}

.accion-grande {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-height: 88px;
    padding: 1rem 1.25rem;
    border-radius: var(--r-lg);
    border: 1px solid transparent;
    text-decoration: none;
    box-shadow: var(--sombra-sm);
    transition: transform .12s, box-shadow .12s, filter .12s;
}
.accion-grande:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
    filter: brightness(1.06);
}
.accion-grande:active { transform: translateY(0); }

.accion-icono {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .18);
}
.accion-icono .icono { width: 24px; height: 24px; flex: 0 0 24px; }

.accion-texto { min-width: 0; }
.accion-texto strong {
    display: block;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}
.accion-texto small {
    display: block;
    font-size: .8125rem;
    opacity: .85;
    margin-top: .1875rem;
    line-height: 1.35;
}

/* --- el principal: color de la marca, y más grande --- */
.accion-principal {
    background: var(--acento);
    color: #fff;
}
.accion-principal .accion-texto strong { font-size: 1.375rem; }
.accion-principal .accion-icono { width: 52px; height: 52px; flex: 0 0 52px; }

/* --- vales: azul, es "papel que sale de la impresora" --- */
.accion-vales { background: var(--info); color: #fff; }

/* --- cobrar: rojo si hay plata afuera, verde si está todo al día --- */
.accion-cobrar { background: var(--alerta); color: #fff; }
.accion-al-dia { background: var(--ok); color: #fff; }

@media (max-width: 900px) {
    /* En el teléfono se apilan y el principal queda arriba de todo. */
    .acciones-grandes { grid-template-columns: 1fr; gap: .75rem; }
    .accion-grande { min-height: 76px; }
}

/* ============================================================
   Autocompletado
   ------------------------------------------------------------
   El <datalist> del navegador no se puede estilizar: cada navegador
   lo dibuja distinto, lo posiciona donde quiere —a veces pegado al
   borde derecho de la pantalla— y con 40 clientes suelta una lista
   larguísima encima del formulario.

   Esta va anclada bajo el campo, tiene el mismo ancho, muestra como
   máximo 8 resultados y se recorre con las flechas.
   ============================================================ */

.autocompletar { position: relative; }

.autocompletar-lista {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: .25rem;
    list-style: none;
    background: var(--n-0);
    border: 1px solid var(--n-300);
    border-radius: var(--r-md);
    box-shadow: var(--sombra-md);
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.autocompletar-lista li[data-valor] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .875rem;
    min-height: 38px;
    padding: .4375rem .625rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: .9375rem;
    line-height: 1.35;
}

/* Marcada con el teclado o con el mouse: el mismo aspecto para las dos,
   si no parecen dos cosas distintas. */
.autocompletar-lista li[data-valor]:hover,
.autocompletar-lista li[data-valor].activa {
    background: var(--acento-suave);
}
.autocompletar-lista li[data-valor].activa {
    box-shadow: inset 0 0 0 1px var(--acento-borde);
}

.autocompletar-lista .ac-nombre { font-weight: 550; color: var(--n-900); }
.autocompletar-lista .ac-detalle {
    color: var(--n-500);
    font-size: .78125rem;
    white-space: nowrap;
    text-align: right;
}

/* Cuando no hay ninguno: dice qué hacer, no solo "sin resultados". */
.autocompletar-vacio {
    padding: .75rem .625rem;
    color: var(--n-600);
    font-size: .875rem;
    line-height: 1.45;
}
.autocompletar-vacio small { display: block; color: var(--n-500); margin-top: .1875rem; }

/* ---------- digitación rápida ----------
   Se usa con WhatsApp en la otra mitad de la pantalla: todo tiene que
   caber en una ventana angosta y llegarse solo con el teclado. */

/* Día y reparto: se tocan una vez al empezar la tanda y después no se
   miran más, así que van arriba, chicos y separados por una línea del
   resto del formulario, que es lo que sí se llena en cada pedido. */
.digitar-cabecera {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.125rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--n-200);
}
.digitar-cabecera > div { flex: 0 1 200px; }
.digitar-cabecera label { font-size: .78125rem; color: var(--n-600); }

.digitar .digitar-cliente {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.digitar .digitar-cliente > .autocompletar { flex: 1 1 260px; }
.digitar #cliente { font-size: 1.1875rem; min-height: 48px; padding: .625rem .875rem; }

.casilla {
    display: flex;
    align-items: center;
    gap: .5625rem;
    margin: 0;
    min-height: var(--alto-toque);
    padding: .5rem .875rem;
    border: 1px solid var(--n-300);
    border-radius: var(--r-md);
    background: var(--n-25);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.casilla:hover { border-color: var(--n-400); background: var(--n-50); }
.casilla input { width: auto; min-height: 0; accent-color: var(--acento); }

/* ---------- cantidades ----------
   Fichas chicas y juntas, no columnas estiradas a lo ancho de la
   pantalla: cargar cinco panes no puede ser un viaje de ojo. Se
   acomodan solas en dos o tres filas y se llenan con Tab. */

.digitar-cantidades {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin: 1.5rem 0 .5rem;
    padding: 1rem;
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    background: var(--n-25);
}
.digitar-cantidades legend {
    padding: 0 .375rem;
    font-size: .78125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--n-500);
}

/* No crecen para llenar el ancho: se quedan juntas a la izquierda.
   Estiradas volvían al problema de tener que recorrer la pantalla. */
.cantidad-ficha {
    position: relative;
    flex: 0 1 132px;
    min-width: 106px;
}
.cantidad-ficha label {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: .3125rem;
    min-width: 0;
}
.cantidad-nombre {
    font-size: .75rem;
    font-weight: 500;
    color: var(--n-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cantidad-ficha input {
    text-align: right;
    font-size: 1.25rem;
    font-weight: 600;
    min-height: 52px;
    padding: .5rem 2.25rem .5rem .625rem;
    background: var(--n-0);
}
/* La unidad va dentro del campo, en gris: ocupa cero espacio y
   siempre está a la vista al escribir. */
.cantidad-unidad {
    position: absolute;
    right: .625rem;
    bottom: 1rem;
    font-size: .75rem;
    color: var(--n-400);
    pointer-events: none;
}
/* Con algo escrito la ficha se enciende: se ve qué lleva el pedido
   sin leer los números. */
.cantidad-ficha input:not(:placeholder-shown) {
    border-color: var(--acento);
    background: var(--acento-suave);
    color: var(--acento-fuerte);
}

/* En el teléfono, dos por fila exactas. Con el ancho fijo quedaba una
   sola por fila —faltaban 13px— y el pedido se volvía un rollo largo. */
@media (max-width: 620px) {
    .digitar-cantidades { padding: .875rem; gap: .5rem; }
    .cantidad-ficha { flex: 1 1 calc(50% - .25rem); min-width: 0; }
}

/* ---------- cuadre de caja ---------- */

.cuadre {
    margin-top: 1.5rem;
    border-top: 1px solid var(--n-200);
    padding-top: 1rem;
    max-width: 380px;
    font-variant-numeric: var(--cifras);
}
.cuadre div {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: .3125rem 0;
}
.cuadre span { color: var(--n-600); }

.cuadre-total {
    border-top: 2px solid var(--n-800);
    margin-top: .5rem;
    padding-top: .625rem !important;
    font-size: 1.1875rem;
}
.cuadre-total span { color: var(--n-900); font-weight: 650; }

/* El arqueo: si falta plata tiene que saltar a la vista, no leerse. */
.cuadre-falta { color: var(--alerta); }
.cuadre-falta span, .cuadre-falta strong { color: var(--alerta); }
.cuadre-sobra { color: var(--aviso); }
.cuadre-sobra span, .cuadre-sobra strong { color: var(--aviso-fuerte); }

/* ---------- gráfico de barras ---------- */

.grafico-barras {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 190px;
    overflow-x: auto;
    padding-top: .5rem;
}
.barra-envoltura {
    flex: 1 0 28px;
    min-width: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.barra {
    width: 100%;
    background: var(--acento);
    border-radius: 4px 4px 0 0;
    min-height: 3px;
    opacity: .88;
    transition: opacity .12s;
}
.barra-envoltura:hover .barra { opacity: 1; }
.barra-etiqueta {
    font-size: .6875rem;
    color: var(--n-500);
    padding-top: .375rem;
    font-variant-numeric: var(--cifras);
}

/* ---------- pantalla de ingreso ---------- */

.pantalla-simple {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--n-100);
}
.caja-centrada { width: 100%; max-width: 380px; }
.marca-login { text-align: center; margin-bottom: 1.75rem; }
.marca-login .emblema {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: var(--r-lg);
    background: var(--acento);
    color: #fff;
    box-shadow: var(--sombra-md);
}
.marca-login .emblema svg { width: 34px; height: 34px; display: block; }
.titulo-login { text-align: center; font-size: 1.375rem; margin: .625rem 0 .25rem; }
.sub-login { text-align: center; color: var(--n-500); margin: 0 0 1.5rem; font-size: .9375rem; }
.logo-asturias { display: block; position: relative; width: 100%; aspect-ratio: 2.5; overflow: hidden; background: #fff; }
.logo-asturias img { position: absolute; display: block; width: 100%; max-width: none; height: auto; left: 0; top: 50%; transform: translateY(-50%); }
.lateral-marca { border-bottom-color: var(--n-200); }
.lateral-marca a { flex: 1; }
.lateral-marca .logo-asturias { max-width: 192px; }
.lateral-cerrar { flex: 0 0 20px; margin-left: 8px; }
.marca-login .logo-asturias { max-width: 310px; margin: 0 auto 18px; }
.pantalla-simple { background: #fff; border-top: 3px solid var(--acento); }
.caja-centrada .tarjeta { padding: 1.75rem; margin-bottom: 0; }
.caja-centrada label:first-of-type { margin-top: 0; }
.caja-centrada label { margin-top: 1.125rem; }
.caja-centrada .boton { margin-top: 1.75rem; width: 100%; min-height: 46px; }

/* ============================================================
   Impresión: el papel no lleva ni menú ni botones
   ============================================================ */

.lateral { background: #fff; border-right: 1px solid var(--n-200); color: var(--n-700); }
.lateral-marca a, .usuario-nombre { color: var(--n-900); }
.marca-texto small, .usuario-rol, .nav-grupo-titulo { color: var(--n-500); }
.nav-grupo-titulo { text-transform: none; font-size: 12px; font-weight: 600; }
.nav-item { color: var(--n-600); border-radius: 4px; font-size: 14px; }
.nav-item .icono { color: var(--n-500); }
.nav-item:hover { background: var(--n-50); color: var(--n-900); }
.nav-item:hover .icono { color: var(--n-700); }
.nav-item.activo { background: var(--acento-suave); color: var(--acento-fuerte); }
.nav-item.activo::before { display: none; }
.nav-plegable { margin-top: 20px; }
.nav-plegable summary { padding: 8px 12px; color: var(--n-500); cursor: pointer; font-size: 12px; font-weight: 600; }
.nav-plegable[open] summary { margin-bottom: 6px; }
.lateral-pie { border-color: var(--n-200); }
.lateral-acciones a { background: var(--n-50); color: var(--n-600); }
.lateral-acciones a:hover { background: var(--n-100); color: var(--n-900); }
.marca-emblema { background: var(--acento-suave); color: var(--acento); }
.contenido { max-width: 1320px; padding: 28px 32px 48px; }
.superior { height: 56px; }
.boton-volver { flex: 0 0 auto; min-height: 36px; padding: 6px 10px; font-size: 13px; }
.superior-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.encabezado-seccion { gap: 16px; flex-wrap: wrap; }
.encabezado-seccion h1 { font-size: 24px; }
.encabezado-seccion .bajada { margin-top: 6px; }
.tarjeta { border: 0; border-bottom: 1px solid var(--n-200); border-radius: 0; background: transparent; box-shadow: none; padding: 20px 0; }
.tabla-envoltura { border: 1px solid var(--n-200); border-radius: 6px; background: white; }
.tabla-envoltura.tarjeta { padding: 0; }
.tarjeta > .tabla-envoltura { margin: 0; }
.tabla th { text-transform: none; background: var(--n-25); color: var(--n-600); font-size: 12px; }
.tabla td { padding-top: 12px; padding-bottom: 12px; }
.indicador { background: transparent; border: 0; border-bottom: 1px solid var(--n-200); border-radius: 0; box-shadow: none; }
.indicador .valor { font-size: 26px; overflow-wrap: anywhere; }
.filtros { background: transparent; border: 0; padding: 0; gap: 12px; }
.boton { box-shadow: none; border-radius: 5px; gap: 7px; }
.boton-principal { font-weight: 600; }
.ficha-cliente { max-width: 720px; }
.ficha-cliente input:not([type]), .filtros input:not([type]) { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--n-300); border-radius: 5px; background: #fff; color: var(--n-900); font: inherit; }
.ficha-cliente input:not([type]):focus, .filtros input:not([type]):focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.cliente-basicos { grid-template-columns: 1fr 1fr; padding: 12px 0 24px; }
.opciones-ficha { border-top: 1px solid var(--n-200); padding: 16px 0; }
.opciones-ficha summary { cursor: pointer; font-weight: 550; color: var(--n-600); }
.opciones-ficha[open] summary { margin-bottom: 18px; }
.campo-completo { grid-column: 1 / -1; }
.ficha-continuar { margin-top: 28px; }
.permiso-financiero { padding: 16px 0; }
.permiso-financiero label { display: flex; align-items: center; gap: 10px; }
.permiso-financiero input { width: 18px; height: 18px; accent-color: var(--acento); }
.resumen-operativo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 0 24px; border-bottom: 1px solid var(--n-200); }
.resumen-operativo > div { border-left: 1px solid var(--n-200); padding: 0 24px; }
.resumen-operativo > div:first-child { border: 0; padding-left: 0; }
.resumen-operativo strong { display: block; font-size: 30px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.resumen-operativo span { color: var(--n-500); font-size: 13px; }
.accesos-inicio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.accesos-inicio > form { margin: 0; display: flex; min-width: 0; }
.acceso-inicio { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 112px; padding: 22px; border: 1px solid var(--n-200); border-radius: 8px; background: #fff; color: var(--n-900); font-family: var(--fuente); font-size: 18px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; text-decoration: none; }
.acceso-inicio > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.acceso-inicio:hover { border-color: var(--acento); background: var(--n-25); text-decoration: none; }
.acceso-inicio:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.acceso-icono { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; color: var(--acento); background: var(--acento-suave); border-radius: 8px; }
.acceso-icono .icono { width: 27px; height: 27px; }
.icono-papel { color: #356d91; background: #edf3f8; }
.icono-preparar { color: var(--marca-oro); background: var(--marca-oro-suave); }
.acceso-destacado { background: var(--acento); border-color: var(--acento); color: #fff; }
.acceso-destacado:hover { background: var(--acento-fuerte); color: #fff; }
.acceso-destacado .acceso-icono { color: #fff; background: rgba(255, 255, 255, .14); }
@media (max-width: 1150px) { .accesos-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .accesos-inicio { grid-template-columns: 1fr; gap: 10px; } .acceso-inicio { min-height: 88px; padding: 16px 20px; font-size: 17px; } }
.atajos-trabajo { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 20px 0; }
.atajos-trabajo a { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 40px; }
.seccion-trabajo { padding: 20px 0; border-bottom: 1px solid var(--n-200); }
.seccion-trabajo h2 { margin: 0 0 16px; }
.seccion-trabajo .encabezado-seccion { margin-bottom: 14px; }
.seccion-trabajo .encabezado-seccion h2 { margin: 0; }
.saldo-resumen { font-size: 24px; font-weight: 600; }
.saldo-resumen span { font-size: 14px; font-weight: 400; color: var(--n-500); }
.caja-centrada .tarjeta { border: 1px solid var(--n-200); border-radius: 8px; background: #fff; padding: 28px; }
@media (max-width: 900px) { .contenido { padding: 22px 20px 40px; } }
@media (max-width: 560px) {
    .contenido { padding: 20px 16px 32px; }
    .encabezado-seccion h1 { font-size: 22px; }
    .cliente-basicos { grid-template-columns: 1fr; }
    .resumen-operativo { grid-template-columns: 1fr 1fr; gap: 20px 0; }
    .resumen-operativo > div { padding: 0 16px; }
    .resumen-operativo > div:nth-child(odd) { border: 0; padding-left: 0; }
    .resumen-operativo strong { font-size: 26px; }
    .superior-fecha { display: none; }
    .filtros .campo { min-width: 0; flex-basis: 100%; }
}

@media print {
    .lateral, .superior, .menu-velo, .no-imprimir { display: none !important; }
    .marco { display: block; }
    body { background: #fff; font-size: 12px; }
    .tarjeta { box-shadow: none; border: 0; }
}