/* ==========================================================================
   AHUMADOS ORIENTE - Hoja de estilos unica

   Los colores salen del Manual de identidad de la marca (resumen en el vault
   de ARKESIZ: «Ahumados el Oriente - Manual de marca»).

   Decisiones del dueño (19 de octubre de 2026):
     - Todo OSCURO: el claro le cansaba la vista. El panel va en carbon
       calido, cerca del negro de la marca (#202020) pero sin llegar al negro
       puro; las tarjetas un punto mas claras que el fondo. El menu, el login y
       el kiosco, igual de oscuros.
     - La letra de siempre (Segoe UI y Cascadia Mono para cifras de tabla),
       tambien en los titulos. Playfair Display y Montserrat (las del manual)
       quedan SOLO en lo que se imprime: reportes, remision, cuenta de cobro y
       documento de venta. Por eso los @font-face siguen aqui: declarar una
       fuente no la descarga; solo se baja cuando se imprime.

   Color: el ROJO de la marca #9e0105 es fondo de botones y del menu activo,
   siempre con texto blanco. Como texto o acento sobre oscuro no alcanza
   contraste (2:1), asi que ahi va un rojo aclarado (--ambar, 4.9:1). El
   DORADO #ce9c3b es filo: lineas finas, regla bajo los titulos, foco. Los
   estados (bien / mal / aviso) van aclarados para pasar AA sobre las
   tarjetas. La impresion sigue saliendo en blanco con texto negro.
   ========================================================================== */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: block;
  font-weight: 400 900;
  src: url('/fonts/playfair-display-latin.woff2') format('woff2-variations'),
       url('/fonts/playfair-display-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url('/fonts/montserrat-latin.woff2') format('woff2-variations'),
       url('/fonts/montserrat-latin.woff2') format('woff2');
}

:root {
  /* --- Paleta del manual (p. 8), tal cual ------------------------------- */
  --marca-rojo:    #9e0105;
  --marca-negro:   #202020;
  --marca-dorado:  #ce9c3b;
  --marca-marfil:  #e5d1ba;
  --marca-verde:   #04300b;
  --marca-cafe:    #511a04;
  --marca-crema:   #f7f4ee;   /* el fondo de las paginas del manual */
  --rojo-hondo:    #7a0104;   /* hover del rojo: mas oscuro, el texto gana */

  /* --- Superficies (carbon calido) ----------------------------------- */
  color-scheme: dark;
  --fondo:        #1b1918;    /* el fondo de la pagina */
  --fondo-2:      #151312;    /* lo hundido: casillas, rieles, cajas de totales */
  --panel:        #252220;    /* tarjetas */
  --panel-2:      #2e2a27;    /* cajas dentro de tarjetas, hover */
  --borde:        #3a3532;
  --borde-suave:  #2f2b28;
  --borde-control:#4a443f;    /* casillas y botones: un punto mas visible */
  --fila-hover:   #2b2724;
  --cabeza-tabla: #2a2623;

  --texto:        #efe7dd;    /* 13.6:1 sobre las tarjetas */
  --texto-medio:  #c9bcae;    /*  9.0:1 */
  --texto-suave:  #9a8d80;    /*  4.9:1 sobre tarjetas, 5.3:1 sobre el fondo */

  /* --ambar es el acento de la interfaz desde siempre (enlaces, subtitulos,
     barras de las graficas, foco). Sobre oscuro es el rojo de la marca
     aclarado hasta pasar AA como texto. El rojo puro de la marca va en los
     FONDOS (botones, menu activo) como --marca-rojo, con texto blanco. */
  --ambar:        #f0736a;    /* 4.9:1 sobre tarjetas */
  --ambar-claro:  #f59a92;    /* 6.6:1: el total que importa */
  --naranja:      #e2ae5c;    /* codigos de lote: dorado aclarado, 7.9:1 */
  --dorado-texto: #d9ab55;

  /* Estados: siempre con texto que diga que significan. */
  --verde:        #5fbf7d;
  --verde-texto:  #7fd09a;    /* 8.4:1 */
  --rojo:         #ef6b62;    /* negativo y error */
  --rojo-texto:   #f4877f;    /* 6.0:1 */
  --azul:         #6aaed8;
  --azul-texto:   #8cc3e6;
  --morado:       #b294e0;
  --morado-texto: #c3a6e8;

  --radio:        6px;
  --radio-sm:     4px;
  --sombra:       0 16px 40px rgba(0, 0, 0, .5);
  /* La letra de siempre en pantalla (decision del dueño). */
  --fuente:       "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fuente-titulo: var(--fuente);
  --mono:         "Cascadia Mono", Consolas, "Courier New", monospace;
  /* Las del manual: solo en papel (ver @media print al final). */
  --fuente-papel:        'Montserrat', "Segoe UI", Arial, sans-serif;
  --fuente-papel-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--ambar); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--marca-rojo); color: #fff; }
::placeholder { color: #7d7166; }

/* Foco visible con teclado: el dorado pasa 3:1 contra el carbon. */
:focus-visible { outline: 2px solid var(--marca-dorado); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: #3f3a36; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #4f4943; }


/* ---- Recursos de la marca ------------------------------------------------ */

/* La curva del manual: banda roja con filo dorado y, debajo, el color de lo
   que sigue. SVG en linea (ver login.html y kiosco.html); el filo no engorda
   al estirarse por vector-effect. */
.curva { pointer-events: none; line-height: 0; }
.curva svg { display: block; width: 100%; height: 100%; }
.curva__banda   { fill: var(--marca-rojo); }
.curva__relleno { fill: var(--curva-relleno, var(--marca-negro)); }
.curva__filo    { fill: none; stroke: var(--marca-dorado); stroke-width: 2; }

/* Los grabados (paisaje, cerdo) se pintan como mascara: toman el color que
   se les pida y nunca llevan texto encima. */
.grabado {
  display: block;
  background-color: var(--grabado-color, var(--marca-marfil));
  -webkit-mask: var(--grabado) center / contain no-repeat;
          mask: var(--grabado) center / contain no-repeat;
  pointer-events: none;
}


/* ==========================================================================
   1. KIOSCO  -  pantalla donde el empleado digita la cedula
   Zona oscura: se redefinen los tokens para todo lo que hay en la pagina
   (tambien el modal de «Elegir otra marcacion»).
   ========================================================================== */

.cuerpo-kiosco {
  color-scheme: dark;
  --fondo:        var(--marca-negro);
  --fondo-2:      #191919;
  --panel:        #2a2826;
  --panel-2:      #34312e;
  --borde:        #45403b;
  --borde-suave:  #33302c;
  --fila-hover:   #302d2a;
  --cabeza-tabla: #2a2826;
  --texto:        var(--marca-crema);
  --texto-medio:  #ddd3c6;
  --texto-suave:  #b5aa9c;    /* 7.4:1 sobre el negro */
  --ambar:        var(--marca-rojo);
  --ambar-claro:  #b8070c;
  --verde:        #74c98f;    /* sobre negro: 9:1 */
  --verde-texto:  #8fd6a5;
  --rojo:         #f08077;    /* sobre negro: 6.6:1 */
  --rojo-texto:   #f4958d;
  --azul:         #8cc3e6;
  --morado:       #c3a6e8;
  --naranja:      var(--marca-dorado);
  --dorado-texto: var(--marca-dorado);
  --sombra:       0 18px 44px rgba(0, 0, 0, .55);
  background: var(--fondo);
}

.kiosco {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  position: relative;
  background: var(--marca-negro);
  /* Lo que mide la curva del pie: nada se pinta debajo de ella. */
  --curva-alto: clamp(34px, 5vh, 54px);
}

.kiosco__izquierda {
  padding: 36px 48px calc(var(--curva-alto) + 18px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
  height: 100vh;
  border-right: 1px solid var(--borde-suave);
}

.kiosco__marca { display: flex; align-items: center; gap: 22px; }

/* Logo en negativo (blanco) sobre negro, sin sombras ni efectos. La caja
   deja el area de reserva del manual alrededor. */
.kiosco__logo { height: 92px; width: auto; display: block; flex: none; }

.kiosco__marca > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.kiosco__empresa {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  color: var(--texto-suave);
}
.kiosco__subtitulo {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 32px; line-height: 1.1; color: var(--texto);
}
/* La regla corta del manual: roja con filo dorado (el rojo solo no se ve
   sobre negro). */
.kiosco__subtitulo::after {
  content: ''; display: block; width: 44px; height: 3px; margin-top: 10px;
  background: var(--marca-rojo); box-shadow: 0 2px 0 var(--marca-dorado);
}

.reloj { margin: 26px 0 0; }
.reloj__hora {
  font-size: clamp(64px, min(8.6vw, 13vh), 132px);
  font-weight: 200;
  line-height: .95;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.reloj__fecha {
  margin-top: 10px;
  font-size: 19px;
  color: var(--texto-medio);
}
.reloj__fecha::first-letter { text-transform: uppercase; }

/* ---- Carrusel de fotos (columna izquierda, entre la fecha y la actividad)
   Ocupa el espacio que sobra y nada mas: flex 1 con min-height 0. Si la
   pantalla es baja se encoge; si es muy baja, desaparece (ver abajo). */
.carrusel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radio);
  background: #191919;
  box-shadow: inset 0 0 0 1px var(--borde-suave);
}
.carrusel__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.carrusel__foto.visible { opacity: 1; }

/* La franja con el nombre del producto: negro de la marca, filo dorado. */
.carrusel__nombre {
  position: absolute; left: 0; bottom: 0;
  max-width: calc(100% - 24px);
  padding: 10px 20px 11px 18px;
  background: rgba(32, 32, 32, .88);
  border-top: 2px solid var(--marca-dorado);
  border-top-right-radius: var(--radio);
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(18px, 1.5vw, 26px); line-height: 1.2;
  color: var(--marca-crema);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .6s ease;
}
.carrusel__nombre[hidden] { display: block; opacity: 0; }

/* Sin fotos en la carpeta: el cerdo grabado de la marca, en marfil tenue. */
.carrusel__vacio {
  position: absolute; inset: 14% 12%;
  --grabado: url('/img/marca/cerdo-grabado.png');
  --grabado-color: rgba(229, 209, 186, .22);
}
.carrusel__vacio[hidden] { display: none; }

.actividad { flex: none; }
.actividad__titulo {
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--texto-suave); margin-bottom: 10px;
}
.actividad__lista { display: flex; flex-direction: column; gap: 6px; max-height: 210px; overflow: hidden; }
.actividad__item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 13px;
  background: var(--panel);
  border: 1px solid var(--borde-suave);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: 14px;
  animation: aparecer .35s ease;
}
.actividad__item[data-tipo="entrada"]          { border-left-color: var(--verde); }
.actividad__item[data-tipo="salida_almuerzo"]  { border-left-color: var(--marca-dorado); }
.actividad__item[data-tipo="regreso_almuerzo"] { border-left-color: var(--marca-marfil); }
.actividad__item[data-tipo="salida"]           { border-left-color: var(--rojo); }
.actividad__nombre { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actividad__tipo   { font-size: 11.5px; color: var(--texto-suave); letter-spacing: .02em; }
.actividad__hora   { font-size: 13.5px; font-weight: 600; color: var(--texto-medio); white-space: nowrap; }
.actividad__vacio  { color: var(--texto-suave); font-size: 14px; padding: 10px 0; }

.kiosco__pie { flex: none; font-size: 12.5px; color: var(--texto-suave); display: flex; gap: 18px; align-items: center; }
.kiosco__pie a { color: var(--texto-suave); border-bottom: 1px dotted var(--texto-suave); }
.kiosco__pie a:hover { color: var(--marca-dorado); border-color: var(--marca-dorado); text-decoration: none; }

.kiosco__derecha {
  padding: 36px 46px calc(var(--curva-alto) + 18px);
  display: flex; flex-direction: column; justify-content: center;
  background: #1b1b1b;
}

.instruccion { text-align: center; margin-bottom: 22px; }
.instruccion__titulo {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 34px; line-height: 1.15; margin-bottom: 8px;
}
.instruccion__texto  { font-size: 15px; color: var(--texto-suave); }

.campo-cedula {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 22px 14px;
  transition: border-color .18s, box-shadow .18s;
}
.campo-cedula:focus-within {
  border-color: var(--marca-dorado);
  box-shadow: 0 0 0 4px rgba(206, 156, 59, .18);
}
.campo-cedula__etiqueta {
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--texto-suave); margin-bottom: 4px;
}
/* Con la clase del contenedor delante: la regla general de input[type=text]
   le ganaba y le ponia caja y relleno dentro de la caja. */
.campo-cedula input.campo-cedula__input,
.campo-cedula input.campo-cedula__input:focus {
  width: 100%;
  min-height: 0;
  padding: 0;
  background: none; border: none; outline: none; box-shadow: none;
  font-size: clamp(32px, 3.3vw, 46px); font-weight: 600;
  letter-spacing: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  caret-color: var(--marca-dorado);
}
.campo-cedula input.campo-cedula__input::placeholder { color: #5c554e; letter-spacing: 6px; }

.teclado {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 18px;
}
.tecla {
  height: clamp(58px, 8.4vh, 78px);
  border-radius: var(--radio);
  background: var(--panel);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-size: 30px; font-weight: 600;
  transition: transform .07s, background .15s, border-color .15s;
  user-select: none;
}
.tecla:hover  { background: var(--panel-2); border-color: #5a534c; }
.tecla:active { transform: scale(.96); background: #3d3935; }
.tecla--borrar { font-size: 19px; color: var(--marca-dorado); }
.tecla--enviar {
  background: var(--marca-rojo);
  border-color: var(--marca-rojo); color: #fff; font-weight: 700; font-size: 18px;
  letter-spacing: .06em;
}
.tecla--enviar:hover  { background: #b8070c; border-color: #b8070c; }
.tecla--enviar:active { background: var(--rojo-hondo); }

.kiosco__acciones { margin-top: 16px; display: flex; justify-content: center; }
.enlace-discreto {
  font-size: 14px; color: var(--texto-suave);
  padding: 9px 16px; border-radius: var(--radio-sm); border: 1px solid transparent;
}
.enlace-discreto:hover { color: var(--marca-dorado); border-color: var(--borde); }

/* La curva del pie del kiosco: roja con filo dorado, de lado a lado. */
.kiosco__curva {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--curva-alto);
  --curva-relleno: #141414;
}


/* ---- Resultado a pantalla completa del kiosco --------------------------- */

.resultado {
  position: fixed; inset: 0; z-index: 50;
  display: none; place-items: center;
  padding: 24px;
  background: rgba(20, 20, 20, .94);
}
.resultado.visible { display: grid; animation: aparecer .22s ease; }

.resultado__tarjeta {
  --estado: var(--verde);
  width: min(680px, 100%);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-top: 6px solid var(--estado);
  border-radius: 10px;
  padding: 38px 42px 30px;
  box-shadow: var(--sombra);
  text-align: center;
  animation: subir .3s cubic-bezier(.16, 1, .3, 1);
}
.resultado__tarjeta[data-estado="error"] { --estado: var(--rojo); }
.resultado__tarjeta[data-estado="aviso"] { --estado: var(--marca-dorado); }

.resultado__icono {
  width: 86px; height: 86px; margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 42px;
  background: rgba(116, 201, 143, .13);
  border: 2px solid var(--estado);
}
/* El error lleva el rojo de la marca en el filo y el circulo; el texto, el
   rojo aclarado que si se lee sobre oscuro. */
.resultado__tarjeta[data-estado="error"] { border-top-color: var(--marca-rojo); }
.resultado__tarjeta[data-estado="error"] .resultado__icono { background: var(--marca-rojo); border-color: var(--marca-rojo); color: #fff; }
.resultado__tarjeta[data-estado="aviso"] .resultado__icono { background: rgba(206, 156, 59, .14); }

.resultado__accion {
  font-size: 15px; letter-spacing: .12em;
  color: var(--estado); font-weight: 700; margin-bottom: 10px;
}

.resultado__nombre {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 36px; margin-bottom: 4px; line-height: 1.2;
}
.resultado__cargo  { font-size: 15px; color: var(--texto-suave); margin-bottom: 18px; }
.resultado__hora   { font-size: 62px; font-weight: 200; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.resultado__mensaje { font-size: 18px; color: var(--texto-medio); margin-top: 10px; }

.resultado__alerta {
  margin-top: 18px; padding: 12px 16px; border-radius: var(--radio-sm);
  background: rgba(206, 156, 59, .12);
  border: 1px solid rgba(206, 156, 59, .45);
  color: var(--marca-dorado); font-size: 15px; font-weight: 600;
}

.resultado__resumen {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--borde);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.resumen-celda { text-align: center; }
.resumen-celda__etiqueta {
  font-size: 12px; letter-spacing: .02em;
  color: var(--texto-suave); margin-bottom: 5px; line-height: 1.35; min-height: 32px;
}
.resumen-celda__valor { font-size: 16px; font-weight: 700; }
.resumen-celda__valor.pendiente { color: #6a625a; }

.resultado__progreso { margin-top: 20px; }
.barra { height: 8px; background: var(--fondo-2); border-radius: 5px; overflow: hidden; border: 1px solid var(--borde); }
.barra__relleno {
  height: 100%; border-radius: 5px;
  background: var(--marca-dorado);
  transition: width .5s ease;
}
.resultado__progreso-texto { font-size: 13.5px; color: var(--texto-suave); margin-top: 8px; }

.resultado__cerrar { margin-top: 20px; font-size: 13px; color: var(--texto-suave); }


/* ==========================================================================
   2. LOGIN
   ========================================================================== */

.login {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 32px 24px 150px;
  position: relative;
  overflow: hidden;
  background: var(--fondo);
}
/* El paisaje grabado del manual, tenue, sobre la curva del pie. */
.login__paisaje {
  position: absolute; left: 0; right: 0; bottom: 46px;
  height: 150px;
  --grabado: url('/img/marca/paisaje-grabado.png');
  --grabado-color: rgba(229, 209, 186, .09);
  -webkit-mask-position: center bottom; mask-position: center bottom;
  -webkit-mask-size: auto 100%; mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.login__curva {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60px;
  --curva-relleno: #121110;
}
.login__tarjeta {
  position: relative; z-index: 1;
  width: min(410px, 100%);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 34px 36px 30px;
  box-shadow: var(--sombra);
}
/* Logo principal, sin sombra ni efecto; el aire de alrededor es su reserva. */
.login__logo {
  height: 124px; width: auto; display: block; margin: 0 auto 22px;
}
.login__titulo {
  text-align: center;
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 25px; line-height: 1.2;
}
.login__titulo::after {
  content: ''; display: block; width: 40px; height: 3px;
  margin: 10px auto 0; background: var(--marca-dorado);
}
.login__texto  { text-align: center; font-size: 13.5px; color: var(--texto-suave); margin: 10px 0 24px; }
.login__pie    { text-align: center; margin-top: 22px; font-size: 13px; color: var(--texto-suave); }


/* ==========================================================================
   3. FORMULARIOS
   ========================================================================== */

.campo { margin-bottom: 15px; }
.campo__etiqueta {
  display: block; font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em;
  color: var(--texto-medio); margin-bottom: 6px;
}
.campo__control,
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="email"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--fondo-2);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-sm);
  font-size: 14px;
  color: var(--texto);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo__control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--marca-dorado);
  box-shadow: 0 0 0 3px rgba(206, 156, 59, .18);
}
input:disabled, select:disabled, textarea:disabled { background: var(--panel-2); color: var(--texto-medio); }
.campo__ayuda { font-size: 12px; color: var(--texto-suave); margin-top: 5px; }
select { cursor: pointer; }
input[type="date"], input[type="time"] { color-scheme: dark; }
.cuerpo-kiosco input[type="date"], .cuerpo-kiosco input[type="time"] { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--marca-rojo); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px;
  border-radius: var(--radio-sm);
  font-size: 13.5px; font-weight: 600;
  background: var(--panel-2);
  color: var(--texto);
  border: 1px solid var(--borde-control);
  transition: background .15s, border-color .15s, transform .07s;
  white-space: nowrap;
}
.boton:hover  { background: #37322e; border-color: #5d554e; }
.boton:active { transform: scale(.98); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton--principal {
  background: var(--marca-rojo);
  border-color: var(--marca-rojo); color: #fff; font-weight: 700;
}
.boton--principal:hover { background: #b8070c; border-color: #b8070c; }
.boton--peligro { color: var(--rojo-texto); border-color: rgba(239, 107, 98, .45); }
.boton--peligro:hover { background: rgba(239, 107, 98, .12); border-color: var(--rojo); }
.boton--bloque { width: 100%; }
.boton--pequeno { padding: 6px 11px; font-size: 12.5px; }

/* En el kiosco los botones del modal van sobre oscuro. */
.cuerpo-kiosco .boton { background: var(--panel-2); border-color: var(--borde); color: var(--texto); }
.cuerpo-kiosco .boton:hover { background: #3d3935; }
.cuerpo-kiosco .boton--principal { background: var(--marca-rojo); border-color: var(--marca-rojo); color: #fff; }
.cuerpo-kiosco .boton--principal:hover { background: #b8070c; }
.cuerpo-kiosco .modal input[type="text"] { background: var(--fondo-2); border-color: var(--borde); }

.aviso {
  padding: 11px 14px; border-radius: var(--radio-sm);
  font-size: 13.5px; margin-bottom: 15px; display: none;
}
.aviso.visible { display: block; animation: aparecer .2s ease; }
.aviso--error { background: rgba(239, 107, 98, .12); border: 1px solid rgba(239, 107, 98, .38); color: #f7bcb6; }
.aviso--exito { background: rgba(95, 191, 125, .12); border: 1px solid rgba(95, 191, 125, .36); color: #a9dfb9; }
/* Advertencia: algo que hay que atender, pero que no impide seguir trabajando. */
.aviso--alerta { background: rgba(206, 156, 59, .12); border: 1px solid rgba(206, 156, 59, .4); color: #ebcb8b; }
.cuerpo-kiosco .aviso--error { background: rgba(158, 1, 5, .25); border-color: rgba(240, 128, 119, .5); color: #ffd0cb; }


/* ==========================================================================
   4. PANEL ADMINISTRATIVO
   ========================================================================== */

.panel { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

/* El menu es la franja negra de la marca: tokens de zona oscura. */
.barra-lateral {
  --texto:        var(--marca-crema);
  --texto-medio:  #ddd3c6;
  --texto-suave:  #b0a596;    /* 7:1 sobre el negro */
  --borde:        #45403b;
  --borde-suave:  #34302c;
  --panel:        #2a2826;
  --panel-2:      #34312e;
  color: var(--texto);
  background: #141211;
  border-right: 1px solid var(--marca-dorado);
  padding: 22px 14px 0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-color: #4a4540 #141211;
}
.barra-lateral::-webkit-scrollbar-track { background: #141211; }
.barra-lateral::-webkit-scrollbar-thumb { background: #4a4540; }

/* Logo arriba con su aire; debajo, quien entro y con que rol. */
.barra-lateral__marca {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: 14px 8px; padding: 0 8px 18px; margin-bottom: 6px;
  border-bottom: 1px solid var(--borde-suave);
}
.barra-lateral__logo { grid-column: 1; grid-row: 1; height: 86px; width: auto; display: block; }
.barra-lateral__marca > div { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.barra-lateral__nombre { font-size: 14px; font-weight: 700; line-height: 1.25; }
.barra-lateral__rol { font-size: 12px; color: var(--marca-dorado); font-weight: 600; margin-top: 2px; }

.menu { display: flex; flex-direction: column; gap: 1px; flex: 1; }
/* El grupo del menu lleva su nombre y, debajo, para que sirve. Esa segunda
   linea es lo unico que lee alguien que abre el panel por primera vez, asi
   que dice el proposito y no la categoria. */
.menu__grupo { padding: 14px 10px 5px; }
.menu__grupo:first-child { padding-top: 6px; }
.menu__titulo {
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--marca-dorado);
}
.menu__nota { font-size: 11.5px; color: var(--texto-suave); margin-top: 1px; line-height: 1.35; }

/* Los iconos se callan: veinte emoji de colores distintos compiten entre si y
   no agrupan nada. En gris quedan como marcas de posicion y el unico color
   del menu pasa a ser el de la pantalla donde estas. */
.menu__icono { filter: grayscale(1); opacity: .6; transition: filter .15s, opacity .15s; }
.menu__item:hover .menu__icono { opacity: .85; }
.menu__item.activo .menu__icono { filter: none; opacity: 1; }
.menu__item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; border-radius: var(--radio-sm);
  font-size: 13.5px; color: var(--texto-medio);
  text-align: left; width: 100%;
  transition: background .14s, color .14s;
}
.menu__item:hover { background: rgba(247, 244, 238, .06); color: var(--texto); }
.menu__item.activo {
  background: var(--marca-rojo);
  color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--marca-dorado);
}
.menu__item:focus-visible { outline-color: var(--marca-dorado); }
.menu__icono { width: 19px; text-align: center; font-size: 15px; }

.barra-lateral__pie {
  position: relative;
  border-top: 1px solid var(--borde-suave); padding: 12px 0 64px;
  margin-top: 10px;
}
/* El paisaje grabado del manual cierra el menu, tenue, debajo de los botones. */
.barra-lateral__pie::after {
  content: ''; position: absolute; left: -14px; right: -14px; bottom: 0; height: 56px;
  background-color: rgba(229, 209, 186, .14);
  -webkit-mask: url('/img/marca/paisaje-grabado.png') center bottom / auto 100% repeat-x;
          mask: url('/img/marca/paisaje-grabado.png') center bottom / auto 100% repeat-x;
  pointer-events: none;
}

.contenido { padding: 26px 32px 46px; overflow-x: hidden; }

.cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.cabecera__titulo {
  font-family: var(--fuente-titulo);
  font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.3px;
}
/* La regla corta del manual bajo el titulo de cada pantalla. Sobre oscuro
   va en dorado: el rojo de la marca no se distingue del fondo. */
.cabecera__titulo::after {
  content: ''; display: block; width: 40px; height: 3px;
  margin: 9px 0 2px; background: var(--marca-dorado);
}
.cabecera__subtitulo { font-size: 13.5px; color: var(--texto-suave); margin-top: 5px; }
.cabecera__acciones { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

.vista { display: none; }
.vista.activa { display: block; animation: aparecer .22s ease; }


/* ---- Tarjetas de indicador --------------------------------------------- */

/* El piso de 205px no es arbitrario: es lo que mide "$ 13.270.000" a 28px en
   negrilla de Montserrat. Con menos, una cifra de millones se parte. */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.indicador {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px 16px 21px;
  position: relative; overflow: hidden;
}
.indicador::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--borde);
}
.indicador[data-color="verde"]::after  { background: var(--verde); }
.indicador[data-color="ambar"]::after  { background: var(--marca-dorado); }
.indicador[data-color="azul"]::after   { background: var(--azul); }
.indicador[data-color="rojo"]::after   { background: var(--rojo); }
.indicador[data-color="morado"]::after { background: var(--morado); }

.indicador__etiqueta {
  font-size: 12.5px; font-weight: 600;
  color: var(--texto-medio); margin-bottom: 8px;
}
.indicador__valor { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.indicador__detalle { font-size: 12px; color: var(--texto-suave); margin-top: 7px; }


/* ---- Tarjetas / bloques ------------------------------------------------- */

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 18px;
  overflow: hidden;
}
.tarjeta__cabecera {
  padding: 14px 19px;
  border-bottom: 1px solid var(--borde-suave);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.tarjeta__titulo { font-family: var(--fuente-titulo); font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.tarjeta__subtitulo { font-size: 12.5px; color: var(--texto-suave); margin-top: 3px; }
.tarjeta__cuerpo { padding: 19px; }
.tarjeta__cuerpo--sin-relleno { padding: 0; }

.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }


/* ---- Tablas ------------------------------------------------------------- */

.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
  text-align: left; padding: 10px 14px;
  font-size: 12px; letter-spacing: .01em;
  color: var(--texto-medio); font-weight: 700;
  background: var(--cabeza-tabla);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.tabla td { padding: 10px 14px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
.tabla tbody tr:hover { background: var(--fila-hover); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla__numero { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla__hora   { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.tabla__nombre { font-weight: 600; }
.tabla__secundario { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.tabla tfoot td {
  padding: 11px 14px; font-weight: 700;
  background: var(--cabeza-tabla);
  border-top: 2px solid var(--borde);
}
.tabla--comoda td { padding: 13px 14px; }

.vacio { padding: 46px 20px; text-align: center; color: var(--texto-suave); }
.vacio__icono { font-size: 38px; opacity: .5; margin-bottom: 10px; }
.vacio__texto { font-size: 14px; }


/* ---- Etiquetas de estado ------------------------------------------------ */
/* Fondo tenue y texto oscuro del mismo tono: todas pasan 4.5:1. «Ambar» es el
   dorado de la marca oscurecido (pendiente, en proceso), distinto del rojo. */

.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiqueta--verde  { background: rgba(95, 191, 125, .15);  color: #8fd6a5; }
.etiqueta--ambar  { background: rgba(206, 156, 59, .17);  color: #e5bb68; }
.etiqueta--azul   { background: rgba(106, 174, 216, .16); color: #9ccbea; }
.etiqueta--rojo   { background: rgba(239, 107, 98, .16);  color: #f6a39c; }
.etiqueta--gris   { background: rgba(201, 188, 174, .12); color: #c9bcae; }
.etiqueta--morado { background: rgba(178, 148, 224, .16); color: #cdb5ee; }

.positivo { color: var(--verde-texto); }
.negativo { color: var(--rojo-texto); }
.neutro   { color: var(--texto-suave); }


/* ---- Filtros ------------------------------------------------------------ */

.filtros {
  display: flex; gap: 11px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 18px;
}
.filtros .campo { margin-bottom: 0; }
.filtros__crecer { flex: 1; min-width: 190px; }


/* ---- Grafica de barras (SVG generado en JS) ----------------------------- */

.grafica { width: 100%; height: 216px; display: block; }
.grafica__barra { fill: #c8322b; opacity: .95; transition: opacity .15s; }
.grafica__barra:hover { opacity: 1; }
.grafica__eje { stroke: var(--borde); stroke-width: 1; }
.grafica__texto { fill: var(--texto-suave); font-size: 10px; font-family: var(--fuente); }
.grafica__linea-meta { stroke: var(--verde); stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; }


/* ---- Modal -------------------------------------------------------------- */

.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none; place-items: center; padding: 22px;
  background: rgba(8, 7, 6, .72);
  overflow-y: auto;
}
.modal.visible { display: grid; animation: aparecer .18s ease; }
.modal__caja {
  width: min(560px, 100%);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--marca-dorado);
  border-radius: 8px;
  box-shadow: var(--sombra);
  animation: subir .25s cubic-bezier(.16, 1, .3, 1);
  margin: auto;
}
.modal__cabecera {
  padding: 18px 23px; border-bottom: 1px solid var(--borde-suave);
  display: flex; align-items: center; justify-content: space-between;
}
.modal__titulo { font-family: var(--fuente-titulo); font-size: 18px; font-weight: 700; line-height: 1.25; }
.modal__cerrar { font-size: 21px; color: var(--texto-suave); line-height: 1; padding: 4px 8px; border-radius: var(--radio-sm); }
.modal__cerrar:hover { background: var(--panel-2); color: var(--texto); }
.modal__cuerpo { padding: 23px; }
.modal__pie {
  padding: 14px 23px; border-top: 1px solid var(--borde-suave);
  display: flex; justify-content: flex-end; gap: 9px;
}
.rejilla-formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rejilla-formulario .ancho-completo { grid-column: 1 / -1; }


/* ---- Notificacion flotante ---------------------------------------------- */

.notificacion {
  position: fixed; bottom: 22px; right: 22px; z-index: 200;
  padding: 13px 19px; border-radius: var(--radio-sm);
  background: var(--panel-2); color: var(--texto);
  border: 1px solid var(--borde-control);
  box-shadow: var(--sombra);
  font-size: 14px; max-width: 380px;
  transform: translateY(120%); opacity: 0;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .3s;
}
.notificacion.visible { transform: translateY(0); opacity: 1; }
.notificacion--exito { border-left: 4px solid #74c98f; }
.notificacion--error { border-left: 4px solid #f08077; }


/* ---- Utilidades --------------------------------------------------------- */

.cargando { padding: 44px; text-align: center; color: var(--texto-suave); font-size: 14px; }
.oculto { display: none !important; }
.mini { font-size: 12px; color: var(--texto-suave); }
.derecha { text-align: right; }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }



/* ==========================================================================
   PANTALLAS CHICAS  -  celular y tablet

   Tres cortes, cada uno por una razon concreta:

     1024px  El menu no cabe al lado del contenido. Se vuelve un cajon que
             se abre con el boton de arriba. (Tablet acostada sigue con el
             menu fijo: ahi si cabe.)
      720px  Las tablas de ocho columnas no caben. Cada fila se vuelve un
             bloque con sus datos uno debajo del otro, y el modal pasa a
             ocupar toda la pantalla.
      560px  Celular parado. Se aprietan margenes y numeros.
   ========================================================================== */

/* ---- La barra de arriba y el boton del menu ------------------------------ */

.barra-superior { display: none; }

.barra-superior__logo { height: 26px; width: auto; display: block; flex: none; }

.barra-superior__titulo {
  font-family: var(--fuente-titulo);
  font-size: 17px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

.boton-menu {
  display: grid; gap: 5px; place-content: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--panel);
}
.boton-menu:hover { background: var(--panel-2); }
.boton-menu__raya {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--texto-medio);
  transition: transform .2s ease, opacity .15s ease;
}
/* Con el menu abierto las tres rayas se vuelven una equis. */
.boton-menu[aria-expanded="true"] .boton-menu__raya:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.boton-menu[aria-expanded="true"] .boton-menu__raya:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded="true"] .boton-menu__raya:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cortina {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(32, 32, 32, .5);
  backdrop-filter: blur(2px);
  animation: aparecer .18s ease;
}
.cortina[hidden] { display: none; }

/* Las columnas que se esconden segun la modalidad (el costo por kilo solo
   en lo propio) o segun la operacion (paquetes solo al porcionar). El
   atributo hidden lo pierde cualquier regla de display de las tablas: con
   esto no hay forma de que una columna escondida vuelva a aparecer. */
[data-col-costo][hidden], [data-col-paquetes][hidden], [data-col-gramaje][hidden],
[data-col-piezas][hidden], [data-col-listo][hidden], [data-col-abona][hidden] {
  display: none !important;
}

/* En pantalla grande el menu no se cierra, asi que este boton no existe. */
.barra-lateral__cerrar { display: none; }


/* ---- 1024px: el menu se vuelve cajon ------------------------------------ */

@media (max-width: 1024px) {
  .barra-superior {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 60;
    padding: 9px 14px;
    background: #141211;
    border-bottom: 1px solid var(--borde);
    box-shadow: inset 0 -1px 0 var(--marca-dorado);
  }

  /* minmax(0, 1fr) y no 1fr: por defecto una columna de rejilla no se encoge
     por debajo del contenido mas ancho que tenga adentro, y una tabla o un
     numero largo terminan estirando toda la pagina. */
  .panel { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .contenido { min-width: 0; max-width: 100%; }

  .barra-lateral {
    position: fixed; top: 0; left: 0;
    width: min(286px, 86vw);
    height: 100vh; height: 100dvh;
    z-index: 80;
    padding: 18px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.16, 1, .3, 1);
    border-right: 1px solid var(--marca-dorado);
  }
  .barra-lateral.abierta { transform: translateX(0); box-shadow: var(--sombra); }

  .barra-lateral__marca { align-items: start; }
  .barra-lateral__logo { height: 72px; }
  .barra-lateral__cerrar {
    display: block; margin-left: auto;
    font-size: 19px; line-height: 1; color: var(--texto-suave);
    padding: 7px 10px; border-radius: var(--radio-sm);
    border: 1px solid var(--borde);
  }
  .barra-lateral__cerrar:hover { background: rgba(255, 255, 255, .06); color: var(--texto); }

  /* El menu se queda en columna. Ponerlo en fila era justo lo que hacia que
     diecinueve botones taparan la primera pantalla. */
  .menu { flex-direction: column; }

  .contenido { padding: 18px 16px 44px; }

  /* Con el menu escondido, el titulo de la pagina ya lo dice la barra de
     arriba: aqui abajo sobra repetirlo tan grande. */
  .cabecera { margin-bottom: 18px; }
  .cabecera__titulo { font-size: 23px; }

  .rejilla-formulario { grid-template-columns: 1fr; }
}

/* Mientras el cajon esta abierto, el fondo no se mueve. */
body.menu-abierto { overflow: hidden; }


/* ---- 720px: tablas apiladas y modal a pantalla completa ------------------ */

@media (max-width: 720px) {
  .contenido { padding: 16px 12px 40px; }

  /* Cada fila pasa a ser un bloque. La etiqueta de cada dato la pone el
     panel solo, leyendo el encabezado de su columna (ver admin.js). */
  .tabla-contenedor { overflow-x: visible; }
  .tabla, .tabla tbody, .tabla tfoot, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { display: none; }

  .tabla tr {
    padding: 13px 15px;
    border-bottom: 1px solid var(--borde);
  }
  .tabla tbody tr:last-child { border-bottom: none; }

  .tabla tbody td {
    border: none;
    padding: 4px 0;
    display: grid;
    grid-template-columns: minmax(84px, 38%) minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
  }
  .tabla td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    font-size: 12px; letter-spacing: .01em;
    color: var(--texto-suave); font-weight: 600;
    line-height: 1.5;
  }
  /* Casi toda celda trae dos cosas dentro: el dato y su línea secundaria. Sin
     esto la segunda se iría debajo de la etiqueta en vez de debajo del dato. */
  .tabla td[data-etiqueta] > * { grid-column: 2; }
  /* Una etiqueta de estado tiene que medir lo que dice, no estirarse de lado
     a lado: estirada parece una barra de color y deja de leerse como etiqueta. */
  .tabla td[data-etiqueta] > .etiqueta { justify-self: start; }

  /* La celda sin encabezado es la de los botones: van en fila y ocupan ancho. */
  .tabla tbody td:not([data-etiqueta]) {
    display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px;
  }
  .tabla tbody td:not([data-etiqueta]) .boton { flex: 1 1 auto; }
  .tabla tbody td[colspan] { display: block; }

  .tabla__numero { text-align: left; }

  /* El pie de tabla es el total: se deja en bloque, sin etiquetas. */
  .tabla tfoot td { display: block; background: none; border-top: none; padding: 3px 0; }
  .tabla tfoot tr { background: var(--cabeza-tabla); border-top: 2px solid var(--borde); }

  /* Las tablas de captura de los modales SI siguen siendo tablas: son una
     rejilla de casillas y apilarlas las volveria ilegibles. Se deslizan de
     lado, que en un formulario de varias columnas es lo honesto. */
  .lineas-envoltura { -webkit-overflow-scrolling: touch; }
  .lineas-envoltura table { min-width: 620px; }
  .lineas th { white-space: nowrap; }
  .lineas-total { gap: 10px 18px; font-size: 13px; }

  /* Modal a pantalla completa, con cabecera y pie siempre a la vista. */
  .modal { padding: 0; place-items: stretch; }
  .modal__caja {
    width: 100%; max-width: none;
    max-height: 100vh; max-height: 100dvh;
    border-radius: 0; border: none;
    margin: 0;
    display: flex; flex-direction: column;
  }
  .modal__cabecera { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 15px 17px; }
  .modal__cuerpo { flex: 1; overflow-y: auto; padding: 17px; }
  .modal__pie {
    position: sticky; bottom: 0; z-index: 2; background: var(--panel);
    padding: 12px 17px; flex-wrap: wrap;
  }
  .modal__pie .boton { flex: 1 1 130px; }

  /* Los filtros en dos columnas, y el boton de consultar abajo, ancho. */
  .filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 14px; }
  .filtros .campo, .filtros__crecer { min-width: 0; }
  .filtros__crecer { grid-column: 1 / -1; }
  .filtros > .boton { grid-column: 1 / -1; }

  .cabecera__acciones { width: 100%; }
  .cabecera__acciones .boton { flex: 1 1 auto; }

  .tarjeta__cuerpo { padding: 15px; }
  .tarjeta__cabecera { padding: 13px 15px; }

  .notificacion { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}


/* ---- 560px: celular parado ---------------------------------------------- */

@media (max-width: 560px) {
  /* A 20px, "$ 13.270.000" mide unos 130px: caben dos tarjetas en un celular
     parado sin que se parta ninguna cifra. */
  .indicadores { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
  .indicador { padding: 13px 14px; }
  .indicador__valor { font-size: 19px; }
  .indicador__etiqueta { font-size: 11.5px; }
  .indicador__detalle { font-size: 11px; }

  .filtros { grid-template-columns: 1fr; }
  .filtros__crecer { grid-column: auto; }

  .cabecera__titulo { font-size: 21px; }
  .rejilla-2 { grid-template-columns: 1fr; }
}

/* Un numero largo de plata no puede romper la tarjeta: parte la linea. */
.indicador__valor { overflow-wrap: anywhere; }


/* ---- Dedos en vez de mouse ---------------------------------------------- */

@media (pointer: coarse) {
  .boton { min-height: 44px; }
  .boton--pequeno { min-height: 36px; padding: 8px 13px; }
  .menu__item { padding: 13px 12px; font-size: 15px; }
  input[type="text"], input[type="password"], input[type="number"],
  input[type="date"], input[type="time"], input[type="email"], select { min-height: 46px; }
  /* Menos de 16px hace que el navegador del celular acerque la pantalla al
     tocar una casilla, y despues no la devuelve. */
  input, select, textarea { font-size: 16px; }
  .modal__cerrar { min-width: 40px; min-height: 40px; }
}


/* ---- Kiosco en tablet ---------------------------------------------------- */

@media (max-width: 980px) {
  .kiosco { grid-template-columns: 1fr; }
  .kiosco__izquierda { height: auto; border-right: none; border-bottom: 1px solid var(--borde-suave); padding: 26px; gap: 16px; }
  .kiosco__derecha { padding: 26px 26px calc(var(--curva-alto) + 22px); }
  /* En una columna el carrusel quedaria encima del teclado y lo empujaria:
     aqui no va. */
  .actividad, .carrusel, .kiosco__pie { display: none; }
  .kiosco__logo { height: 64px; }
  .kiosco__subtitulo { font-size: 26px; }
}

@media (max-width: 560px) {
  .reloj { margin: 16px 0; }
  .teclado { gap: 9px; }
  .tecla { height: 58px; font-size: 24px; }
  .tecla--enviar { font-size: 15px; letter-spacing: .02em; }
  .tecla--borrar { font-size: 16px; }
  .kiosco__izquierda { padding: 20px 18px; }
  .kiosco__derecha { padding: 20px 18px calc(var(--curva-alto) + 18px); }
  .instruccion__titulo { font-size: 27px; }
  .campo-cedula input.campo-cedula__input { font-size: 36px; letter-spacing: 4px; }
}


@media (prefers-reduced-motion: reduce) {
  .barra-lateral, .boton-menu__raya { transition: none; }
  .cortina, .modal.visible, .vista.activa, .aviso.visible { animation: none; }
  .carrusel__foto, .carrusel__nombre { transition: none; }
}

@media print {
  .barra-lateral, .barra-superior, .cortina,
  .cabecera__acciones, .filtros, .boton { display: none !important; }
  body, .panel, .tarjeta { background: #fff !important; color: #000 !important; }
  .tabla td, .tabla th { color: #000 !important; border-color: #ccc !important; }
}


/* ==========================================================================
   MODULO DE PRODUCCION  -  recepcion, lotes y trazabilidad
   ========================================================================== */

/* El formulario de recepcion lleva una tabla de productos adentro: necesita
   mas ancho que un modal normal. */
.modal__caja--ancha { width: min(980px, 100%); }

/* La lista de precios lleva dos juegos de precios (crudo y ahumado) y, con
   un cliente elegido, sus dos precios negociados: no cabe en 980 px. */
.modal__caja--muy-ancha { width: min(1340px, 100%); min-width: 0; }
/* Diez columnas con un cliente elegido: celdas mas juntas y titulos en dos
   renglones para que quepa sin barra horizontal. */
#tablaPrecios .tabla th { white-space: normal; padding-left: 9px; padding-right: 9px; }
#tablaPrecios .tabla td { padding-left: 9px; padding-right: 9px; }
#tablaPrecios .tabla input[type="number"] { padding: 9px 7px; font-size: 13.5px; }
/* Las columnas del ahumado, con un tono de horno para no confundirlas con las del crudo. */
.tabla .celda-ahumado { background: rgba(206, 156, 59, .07); }

/* ---- Editor de lineas de la remision ------------------------------------ */

.lineas { width: 100%; border-collapse: collapse; font-size: 13px; }
.lineas th {
  text-align: left; padding: 7px 7px 9px;
  font-size: 12px; letter-spacing: .01em;
  color: var(--texto-medio); font-weight: 700; white-space: nowrap;
}
.lineas td { padding: 4px 4px; vertical-align: middle; }
.lineas td input, .lineas td select { padding: 8px 9px; font-size: 13.5px; }
.lineas tbody tr + tr td { border-top: 1px solid var(--borde-suave); }
.lineas__numero {
  width: 26px; text-align: center; color: var(--texto-suave);
  font-size: 12px;
}
.lineas__quitar {
  width: 32px; height: 32px; border-radius: var(--radio-sm);
  background: transparent; border: 1px solid var(--borde);
  color: var(--texto-suave); font-size: 15px; line-height: 1;
}
.lineas__quitar:hover { border-color: var(--rojo); color: var(--rojo-texto); background: rgba(239, 107, 98, .12); }
.lineas-envoltura { overflow-x: auto; margin: 0 -4px; }
.lineas-envoltura table { min-width: 700px; }

.lineas-total {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 12px 14px; margin-top: 12px;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: 13px;
}
.lineas-total strong { font-size: 15px; }

/* ---- Codigo de lote ----------------------------------------------------- */

.codigo-lote {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: var(--naranja);
  background: rgba(206, 156, 59, .1);
  border: 1px solid rgba(206, 156, 59, .3);
  border-radius: 3px; padding: 2px 7px;
}

/* ---- Barra de participacion por marca ----------------------------------- */

.barra-marca {
  height: 6px; width: 110px; border-radius: 999px;
  background: var(--fondo-2); overflow: hidden; margin-top: 5px;
}
.barra-marca__relleno { height: 100%; background: var(--ambar); border-radius: 999px; }

/* ---- Linea de tiempo del lote (la trazabilidad) ------------------------- */

.rastro { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.rastro::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--borde);
}
.rastro__paso { position: relative; padding: 0 0 18px 0; }
.rastro__paso::before {
  content: ''; position: absolute; left: -22px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--ambar);
}
.rastro__paso:last-child { padding-bottom: 0; }
.rastro__etapa { font-weight: 700; font-size: 13.5px; }
.rastro__cuando { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.rastro__datos { font-size: 12.5px; color: var(--texto-medio); margin-top: 4px; }

/* ---- Ficha de datos en dos columnas (detalle de recepcion y de lote) ---- */

.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.ficha__dato { min-width: 0; }
.ficha__etiqueta {
  font-size: 12px; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 3px;
}
.ficha__valor { font-size: 14px; font-weight: 600; word-break: break-word; }


/* ---- Cadena de proceso: el tablero de etapas de la planta --------------- */

.cadena {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.cadena__paso {
  position: relative; overflow: hidden; text-align: left;
  padding: 14px 15px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color .15s, background .15s;
}
.cadena__paso:hover { border-color: var(--ambar); }
.cadena__paso.activo { border-color: var(--ambar); background: var(--panel-2); }
.cadena__paso.activo::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--ambar);
}
.cadena__paso[data-vacio="1"]:not(.activo) { opacity: .48; }
.cadena__nombre {
  font-size: 12.5px; font-weight: 600;
  color: var(--texto-medio); margin-bottom: 7px;
}
.cadena__lotes { font-size: 25px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cadena__peso { font-size: 12px; color: var(--texto-suave); margin-top: 5px; }

/* ---- Barra de acciones sobre una seleccion de lotes --------------------- */

.barra-acciones {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 14px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}
.barra-acciones__texto { flex: 1; min-width: 160px; font-size: 13px; color: var(--texto-medio); }

/* Campito suelto dentro de la barra, para la temperatura de la cadena de frio */
.barra-acciones__campo { display: flex; align-items: center; gap: 6px; }
.barra-acciones__campo span {
  font-size: 12px; font-weight: 600; color: var(--texto-medio); white-space: nowrap;
}
.barra-acciones__campo input { width: 78px; margin: 0; text-align: right; }

/* Casilla de seleccion dentro de las tablas */
.tabla input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.tabla th:first-child input[type="checkbox"] { vertical-align: middle; }

/* ---- Calculo en vivo dentro del formulario de salida del horno ---------- */

.calculo { font-size: 12px; white-space: nowrap; line-height: 1.5; }
.calculo strong { font-size: 13px; }


/* ---- Panel de estadisticas ---------------------------------------------- */

/* Grupo de botones que funcionan como pestañas (dia / mes / año) */
.grupo-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.grupo-botones .boton.activo {
  background: var(--marca-rojo); border-color: var(--marca-rojo); color: #fff;
}
.grupo-botones .boton.activo:hover { background: #b8070c; border-color: #b8070c; }

/* Comparacion contra el periodo anterior dentro de cada indicador */
.variacion { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.variacion--sube  { color: var(--verde-texto); }
.variacion--baja  { color: var(--rojo-texto); }
.variacion--igual { color: var(--texto-suave); }

/* Leyenda de la grafica de dos series */
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--texto-medio); }
.leyenda__item { display: inline-flex; align-items: center; gap: 6px; }

/* Barras horizontales del desglose de costo: cuanto pesa cada pedazo. */
/* Fila de una agenda con algo vencido: tiene que saltar a la vista. */
.fila-alerta > td { background: rgba(239, 107, 98, .08); }

.barras-costo { display: flex; flex-direction: column; gap: 12px; }
.barra-costo__fila {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 5px; font-size: 13px;
}
.barra-costo__nombre { color: var(--texto-suave); }
.barra-costo__valor { font-weight: 600; white-space: nowrap; }
.barra-costo__riel {
  height: 9px; border-radius: 5px; background: var(--fondo-2); overflow: hidden;
}
.barra-costo__relleno { height: 100%; border-radius: 5px; transition: width .25s ease; }
.leyenda__color { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.leyenda__color[data-serie="recibido"] { background: var(--azul); }
.leyenda__color[data-serie="horneado"] { background: #c8322b; }

.grafica__barra--recibido { fill: var(--azul); }
.grafica__barra--horneado { fill: #c8322b; }   /* rojo de la marca aclarado lo justo: 3:1 sobre la tarjeta */


/* ==========================================================================
   GRAFICAS DE DATOS  -  dona, medidor y barras de proporcion
   Las series se validaron contra el fondo oscuro (tonos medios, distintos
   en claridad). La rampa de etapas va del rojo de la marca aclarado al
   dorado y al marfil: de oscuro (recien llegado) a claro (casi terminado). Si algun dia se cambia un color, hay que volver a validarla; no
   basta con que "se vea distinto".
   ========================================================================== */

:root {
  /* Colores de identidad (que cliente, que producto). Orden fijo: se asignan
     en secuencia y NUNCA se reciclan ni se inventan colores nuevos. Cuando
     hay mas de seis, el resto se agrupa en "Otros". */
  --serie-1: #3987e5;   /* azul     */
  --serie-2: #d95926;   /* naranja  */
  --serie-3: #199e70;   /* aqua     */
  --serie-4: #c98500;   /* amarillo */
  --serie-5: #d55181;   /* magenta  */
  --serie-6: #008300;   /* verde    */

  /* Rampa de las etapas de la planta. Aqui el orden SI significa algo (la
     carne va de una a la siguiente), asi que es un solo tono que va de
     oscuro (recien llegado) a claro (casi terminado). */
  --etapa-1: #a8301e;   /* rojo de la marca aclarado: recien llegado */
  --etapa-2: #bb4a2a;
  --etapa-3: #c96637;
  --etapa-4: #d18345;
  --etapa-5: #ce9c3b;   /* dorado de la marca */
  --etapa-6: #dcbd7f;
  --etapa-7: #e8d6b0;   /* marfil: casi terminado */

  /* Estado. Reservados para bueno/malo: nunca se usan para identificar una
     serie, y siempre van acompañados de un texto que dice que significan. */
  --estado-bueno:  #5fbf7d;   /* 7:1 sobre las tarjetas: tambien sirve de texto */
  --estado-alerta: #e0a93f;
  --estado-malo:   #ef6b62;
}

/* ---- Contenedores -------------------------------------------------------- */

.viz-par {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 0;
}
.viz-par__grafica { padding: 16px 4px 16px 14px; }
@media (max-width: 700px) {
  .viz-par { grid-template-columns: 1fr; }
  .viz-par__grafica { padding: 16px 16px 4px; justify-self: center; max-width: 220px; }
}

.viz-centro { display: grid; place-items: center; padding: 6px 0 2px; }
.viz-svg { display: block; width: 100%; height: auto; max-width: 100%; }

/* Las porciones se aclaran al pasar el mouse: confirma cual se esta leyendo */
.viz-porcion { transition: opacity .12s; }
.viz-porcion:hover { opacity: .78; }

/* Textos dentro de las graficas: siempre en color de texto, nunca del color
   de la serie (el color lo lleva la marca, no la letra). */
.viz-num   { fill: var(--texto); font-size: 27px; font-weight: 700; }
.viz-num--sm { fill: var(--texto); font-size: 15px; font-weight: 700; }
.viz-rotulo { fill: var(--texto-suave); font-size: 10.5px; letter-spacing: .06em; }
.viz-eje    { fill: var(--texto-suave); font-size: 10px; }
.viz-pista  { stroke: var(--fondo-2); }
.viz-marca-limite { stroke: var(--texto-suave); stroke-width: 2; }

/* ---- Chip de color que conecta la tabla con la gráfica ------------------- */

.chip {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; margin-right: 8px; flex: none;
  vertical-align: baseline;
}
.tabla__nombre--chip { display: flex; align-items: center; }

/* ---- Barra de proporción (dos o más tramos en una sola línea) ------------ */

.proporcion { display: flex; flex-direction: column; gap: 10px; }
.proporcion__barra { display: flex; gap: 2px; height: 26px; border-radius: 5px; overflow: hidden; }
.proporcion__tramo { min-width: 2px; }
.proporcion__leyenda { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.proporcion__item { display: flex; align-items: baseline; gap: 7px; font-size: 13px; }
.proporcion__item .chip { margin-right: 0; align-self: center; }
.proporcion__valor { font-weight: 600; color: var(--texto); }
.proporcion__pct { color: var(--texto-suave); font-size: 12px; }

/* ---- Medidor de rendimiento --------------------------------------------- */

.medidor { display: grid; place-items: center; gap: 10px; }
/* Sin tope, el circulo se estira a todo el ancho de la tarjeta y la deja tan
   alta que la tarjeta de al lado queda medio vacia. */
.medidor .viz-svg { max-width: 290px; }
.medidor__pie {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; text-align: center;
}
.medidor__icono { font-size: 14px; line-height: 1; }

/* Explicacion de la marca del 100 % del medidor. Va en HTML y no dentro del
   SVG porque la marca cambia de sitio segun la escala, y el texto terminaba
   montandose sobre el arco. */
.medidor__escala {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--texto-suave); text-align: center;
}
.medidor__tramo {
  width: 2px; height: 13px; background: var(--texto-suave); border-radius: 1px; flex: none;
}


/* ---- Totales de la cuenta de cobro -------------------------------------- */

.totales-cuenta {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 14px; padding: 15px 18px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  margin-left: auto; max-width: 330px;
}
.totales-cuenta__fila { display: flex; justify-content: space-between; gap: 18px; font-size: 13.5px; }
.totales-cuenta__fila span:last-child { font-variant-numeric: tabular-nums; }
.totales-cuenta__fila--total {
  border-top: 1px solid var(--borde);
  padding-top: 8px; margin-top: 3px;
  font-size: 16px; font-weight: 700;
}
.totales-cuenta__fila--total span:last-child { font-size: 17px; }

/* Situacion de una cuenta de cobro */
.etiqueta--pagada    { background: rgba(95, 191, 125, .15);  color: #8fd6a5; }
.etiqueta--abonada   { background: rgba(206, 156, 59, .17);  color: #e5bb68; }
.etiqueta--pendiente { background: rgba(239, 107, 98, .16);  color: #f6a39c; }

/* Celda de tarifa editable dentro del modal de tarifas */
.tabla input[type="number"].tarifa {
  width: 120px; padding: 7px 9px; font-size: 13.5px;
  text-align: right;
}


/* ==========================================================================
   INVENTARIO  -  lo propio y lo de maquila, nunca sumados
   ========================================================================== */

/* Las dos tarjetas de arriba llevan un borde de color distinto: el color dice
   de quien es antes de leer una sola letra. */
.tarjeta--propio  { border-left: 3px solid var(--verde); }
.tarjeta--maquila { border-left: 3px solid var(--azul); }

.cifra-inv__valor {
  font-size: 34px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.cifra-inv__nota { font-size: 12.5px; color: var(--texto-suave); margin-top: 5px; }

/* Separador entre crudo y terminado dentro de la cadena. */
.fila-fase > td {
  background: var(--fondo-2);
  font-size: 12px; letter-spacing: .01em;
  color: var(--texto-medio); font-weight: 700;
  padding: 8px 15px;
}


/* Titulo de cada bloque dentro de un modal largo, como el de produccion. */
.sub-titulo {
  font-family: var(--fuente-titulo);
  font-size: 16px; font-weight: 700;
  color: var(--ambar); margin: 22px 0 4px; padding-top: 14px;
  border-top: 1px solid var(--borde);
}

/* Una fila anulada sigue ahi para poder consultarla, pero se apaga. */
.fila-anulada > td { opacity: .5; text-decoration: line-through; }
.fila-anulada > td:last-child, .fila-anulada .etiqueta { text-decoration: none; }


/* ==========================================================================
   LA ESCALERA DEL LOTE  -  a donde se fue cada kilo

   El saldo interno va en la bascula en que llego el producto. Esto lo traduce
   a kilos de carne, que es lo que ve un operario en la balanza.
   ========================================================================== */

.escalera {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo-2);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.escalera__titulo {
  font-family: var(--fuente-titulo);
  font-size: 16px; font-weight: 700;
  color: var(--ambar); margin-bottom: 10px;
}

.escalon {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--borde-suave);
}
.escalon:last-of-type { border-bottom: none; }

.escalon__concepto { font-size: 13.5px; min-width: 0; }

.escalon__detalle {
  display: block; font-size: 11.5px; color: var(--texto-suave); margin-top: 1px;
}

.escalon__kilos {
  font-size: 14px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.escalon--resta .escalon__kilos { color: var(--texto-suave); }
.escalon--suma  { border-top: 1px solid var(--borde); }
.escalon--suma  .escalon__kilos { font-weight: 600; }

/* El renglon que de verdad importa: lo que queda para trabajar. */
.escalon--total {
  border-top: 2px solid var(--ambar); margin-top: 4px; padding-top: 9px;
}
.escalon--total .escalon__concepto { font-weight: 700; }
.escalon--total .escalon__kilos { font-size: 17px; font-weight: 700; color: var(--ambar-claro); }

.escalera__nota {
  font-size: 11.5px; color: var(--texto-suave); line-height: 1.5;
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--borde);
}


/* ---- Comparar el margen entre formas de vender -------------------------- */
/*  El ahumado gana peso en el horno y el crudo no, asi que los totales no se
    pueden poner uno al lado del otro: lo unico comparable es lo que deja el
    kilo. Por eso esa cifra es la grande de cada caja.                       */

.comparar { padding: 16px 16px 4px; border-bottom: 1px solid var(--borde); }
.comparar__titulo {
  font-family: var(--fuente-titulo);
  font-size: 16px; font-weight: 700; color: var(--texto); margin-bottom: 12px;
}
.comparar__fila { display: flex; gap: 12px; flex-wrap: wrap; }
.comparar__caja {
  flex: 1 1 170px; min-width: 0;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}
.comparar__caja--mejor { border-color: var(--verde, #4ade80); }
/* El servicio de maquila que cuesta mas de lo que se cobra: en rojo. */
.comparar__caja--mala { border-color: var(--rojo); }
.comparar__caja--mala .comparar__cifra { color: var(--rojo-texto); }
.comparar__cifra {
  font-size: 22px; font-weight: 700;
  margin: 8px 0 2px; letter-spacing: -.01em;
}
.comparar__caja--mejor .comparar__cifra { color: var(--verde-texto); }
.comparar__pie { font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
.comparar__nota {
  margin: 12px 0 12px; font-size: 12px; color: var(--texto-suave); max-width: 70ch;
}


/* ==========================================================================
   AJUSTES DEL 19 DE OCTUBRE DE 2026 (revision de todas las pantallas)
   ========================================================================== */

/* Los encabezados de las columnas de numeros van a la derecha, encima de su
   numero. ".tabla th" ganaba por especificidad a ".derecha" y todos los
   encabezados quedaban a la izquierda, lejos de la cifra. */
.tabla th.derecha, .tabla td.derecha { text-align: right; }

/* La linea secundaria de una celda de numero si puede partirse: con nowrap,
   una nota como "1 a media semana (1.167 dias)" ensanchaba la columna entera
   y empujaba la tabla fuera de la pantalla. */
.tabla__numero .tabla__secundario { white-space: normal; }

/* Tablas de muchas columnas (nomina): celdas mas juntas. */
.tabla--densa { font-size: 12px; }
.tabla--densa th, .tabla--densa td { padding-left: 5px; padding-right: 5px; }
.tabla--densa th { white-space: normal; letter-spacing: 0; font-size: 11.5px; }
.tabla--densa .tabla__nombre { min-width: 100px; }
.tabla--densa .entrada-descuento { width: 92px !important; }
/* Un botón chico que se lee como enlace, debajo del nombre. */
.boton--enlace { margin-top: 5px; padding: 3px 9px; font-size: 11.5px; }

/* ---- Lote de maquila con adelanto: tres cifras ------------------------- */
.ficha--tres { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ficha--tres .ficha__valor strong { font-size: 18px; }

/* ---- Los dos rendimientos de una produccion ---------------------------- */
.rendimiento-par { font-size: 13px; line-height: 1.45; }
.rendimiento-par strong { white-space: nowrap; }
.rendimiento-par__etiqueta { color: var(--texto-medio); }
.rendimiento-par--compacto { font-size: 12px; }
.celda-rendimientos { min-width: 210px; }
.resumen__rendimientos { flex: 1 1 100%; }
.rendimientos-detalle {
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--borde); border-radius: var(--radio-sm);
}

/* ---- El costo por kilo que aprende -------------------------------------- */
.comparar__caja--pendiente { border-style: dashed; }
.comparar__cifra--pendiente { font-family: var(--fuente); font-size: 17px; color: var(--naranja); }
.comparar__estimado {
  margin: 4px 0 8px; padding: 8px 10px; font-size: 12px; line-height: 1.45;
  color: #ebcb8b; background: rgba(206, 156, 59, .1); border: 1px solid rgba(206, 156, 59, .3); border-radius: var(--radio-sm);
}
.comparar__tendencia {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde); color: var(--texto-medio);
}

/* ---- Carne cruda al cliente de maquila ---------------------------------- */
.etiqueta--crudo { margin-left: 6px; white-space: nowrap; }
.fila-cruda td { background: rgba(239, 107, 98, .06); }
.fila-separador td {
  padding: 9px 8px; font-size: 12px; font-weight: 700; letter-spacing: .01em;
  color: var(--rojo-texto); border-top: 2px solid rgba(239, 107, 98, .4);
}

/* ---- Reponer el faltante de maquila con producto propio (script 46) ---- */
.tarjeta--reponer { border-left: 3px solid var(--marca-dorado); }
.reponer__faltante {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px;
  padding: 10px 0; border-bottom: 1px dashed rgba(206, 156, 59, .35);
}
.reponer__faltante:last-child { border-bottom: 0; margin-bottom: 8px; }
.reponer__cuenta { text-align: right; }
.reponer__cuenta .boton { margin-top: 6px; }
.fila-reposicion td { background: rgba(206, 156, 59, .07); }

/* ---- La contadora: solo consulta ---------------------------------------- */
.solo-lectura input:disabled, .solo-lectura select:disabled { opacity: .8; cursor: not-allowed; }

/* Las cifras van en la monoespaciada de siempre (Cascadia Mono), como antes
   del cambio de marca. */
.actividad__hora, .resumen-celda__valor, .lineas__numero, .lineas-total strong,
.codigo-lote, .cadena__peso, .calculo, .proporcion__valor,
.totales-cuenta__fila span:last-child, .tabla input[type="number"].tarifa,
.escalon__kilos, .comparar__cifra, .ficha--tres .ficha__valor strong,
.rendimiento-par strong { font-family: var(--mono); }
.comparar__cifra--pendiente { font-family: var(--fuente); }

/* El encabezado de los reportes impresos: en pantalla no existe. */
.encabezado-impresion { display: none; }


/* ==========================================================================
   IMPRIMIR Y GUARDAR EN PDF (todo reporte del panel)

   Lo arma imprimirReporte() en admin.js: pone el encabezado (empresa, reporte,
   periodo y fecha de generacion), le pone nombre al archivo (document.title)
   y la hoja (carta horizontal para los reportes, vertical para los detalles).
   Aqui se quita todo lo que es de pantalla: menu, botones, filtros, fondos
   oscuros, y se cuida que ninguna fila se parta entre dos hojas.
   ========================================================================== */
/* Lo que solo va en el papel (las firmas de la remision, M6). */
.solo-papel { display: none; }

@media print {
  html, body { height: auto !important; background: #fff !important; color: #111 !important; }
  /* Los colores que SI se imprimen: barras, leyendas y gráficas (los que
     llevan su color en el style). Todo fondo oscuro de pantalla, fuera. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body *:not([style*="background"]) { background-color: transparent !important; background-image: none !important; }
  body * { color: #111 !important; box-shadow: none !important; text-shadow: none !important; }
  .barra-costo__riel, .lineas-total { border: 1px solid #ccc !important; }
  .positivo, .positivo * { color: #146c2e !important; }
  .negativo, .negativo * { color: #b42318 !important; }
  .neutro { color: #555 !important; }

  .barra-lateral, .barra-superior, .cortina, .notificacion, .boton-menu,
  .cabecera__acciones, .filtros, .boton, .lineas__quitar, .modal__cerrar, .modal__pie,
  .vista:not(.activa), [data-no-imprimir] { display: none !important; }

  .panel { display: block !important; min-height: 0 !important; }
  .contenido { padding: 0 !important; margin: 0 !important; overflow: visible !important; max-width: none !important; }
  .cabecera { margin-bottom: 8px !important; }
  .cabecera__titulo { font-size: 17pt !important; }

  .tarjeta, .indicador, .comparar__caja, .escalera, .aviso, .rendimientos-detalle {
    background: #fff !important; border: 1px solid #bbb !important;
  }
  .tarjeta { break-inside: auto; margin-bottom: 10px !important; border-radius: 6px !important; }
  .tarjeta__cabecera { break-after: avoid; }
  .indicador, .comparar__caja, .ficha__dato, .escalon, .barra-costo, .rastro__paso { break-inside: avoid; }
  .indicadores { gap: 6px !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
  .indicador { padding: 7px 9px !important; }
  .indicador__valor { font-size: 15pt !important; }

  /* Las tablas, siempre como tablas (la vista de celular las apila) y sin
     barra horizontal: lo que no cabe se ajusta, no se corta. */
  .tabla-contenedor, [id^="tabla"] { overflow: visible !important; max-height: none !important; }
  .tabla { display: table !important; width: 100% !important; font-size: 8.5pt !important; border-collapse: collapse !important; }
  .tabla thead { display: table-header-group !important; }   /* se repite en cada hoja */
  .tabla tbody { display: table-row-group !important; }
  .tabla tfoot { display: table-row-group !important; }       /* el total va una vez, al final */
  .tabla tr { display: table-row !important; break-inside: avoid; page-break-inside: avoid; }
  .tabla th, .tabla td {
    display: table-cell !important; width: auto !important;
    padding: 3px 5px !important; border-bottom: 1px solid #ccc !important;
    position: static !important; background: none !important;
  }
  .tabla th { background: #eee !important; font-size: 7pt !important; letter-spacing: .3px !important; white-space: normal !important; }
  .tabla td[data-etiqueta]::before { content: none !important; display: none !important; }
  .tabla tfoot td { border-top: 2px solid #666 !important; font-weight: 700 !important; }
  .tabla__secundario { font-size: 7pt !important; color: #555 !important; }
  .tabla input, .tabla select { border: none !important; background: none !important; padding: 0 !important; text-align: right; }
  .codigo-lote { background: none !important; border: none !important; padding: 0 !important; }
  .etiqueta { background: none !important; border: 1px solid #999 !important; padding: 0 4px !important; }
  svg { max-width: 100% !important; }
  /* Los números dentro de las gráficas (el centro de la dona, el medidor)
     están en crema para el fondo oscuro: en papel blanco no se veían. */
  svg text, .grafica__texto { fill: #222 !important; }

  /* El encabezado del reporte: quien, que, de cuando y cuando se saco. */
  .encabezado-impresion {
    display: flex !important; align-items: center; gap: 12px;
    border-bottom: 2px solid var(--marca-rojo); padding-bottom: 6px; margin-bottom: 10px;
  }
  .encabezado-impresion img { height: 54px; }
  .encabezado-impresion__empresa { font-family: var(--fuente-papel-titulo); font-size: 14pt; font-weight: 700; }
  .encabezado-impresion__titulo { font-family: var(--fuente-papel-titulo); font-size: 11.5pt; font-weight: 700; }
  /* En papel van las dos letras del manual: Montserrat y Playfair en titulos. */
  body, body * { font-family: var(--fuente-papel) !important; }
  .cabecera__titulo, .tarjeta__titulo, .modal__titulo, .sub-titulo, .escalera__titulo,
  .comparar__titulo, .encabezado-impresion__empresa, .encabezado-impresion__titulo {
    font-family: var(--fuente-papel-titulo) !important;
  }
  .cabecera__subtitulo { color: #444 !important; }
  .tabla td, .tabla th, .tarjeta__cabecera, .modal__cabecera { border-color: #ccc !important; }
  .codigo-lote { color: #111 !important; }
  /* La regla roja del titulo tambien sale en el papel. */
  .cabecera__titulo::after { background: var(--marca-rojo) !important; height: 2px; margin-top: 5px; }
  .modal__caja { border-top-color: #bbb !important; }
  .encabezado-impresion__datos { font-size: 8pt; color: #444 !important; }

  /* Lo que solo va en el papel (las firmas de la remision, M6). */
  .solo-papel { display: block !important; }
  .firmas-remision { display: grid !important; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; break-inside: avoid; }
  .firma-remision__titulo { font-weight: 700; font-size: 9pt; margin-bottom: 8px; }
  .firma-remision__renglon { border-bottom: 1px solid #555; padding: 14px 0 2px; font-size: 8.5pt; color: #333 !important; }
  .firma-remision__renglon--firma { padding-top: 34px; }

  /* Imprimir un modal (la remision, el detalle de una produccion...): solo el. */
  body.imprimiendo-modal .panel { display: none !important; }
  body.imprimiendo-modal .modal:not(.modal--imprimir) { display: none !important; }
  body.imprimiendo-modal .modal--imprimir {
    display: block !important; position: static !important; padding: 0 !important;
    background: none !important; backdrop-filter: none !important; overflow: visible !important;
  }
  body.imprimiendo-modal .modal--imprimir .modal__caja {
    width: 100% !important; max-width: none !important; max-height: none !important;
    border: none !important; border-radius: 0 !important; margin: 0 !important; display: block !important;
    animation: none !important;
  }
  body.imprimiendo-modal .modal--imprimir .modal__cuerpo { overflow: visible !important; padding: 0 !important; }
  body.imprimiendo-modal .modal--imprimir .modal__cabecera { padding: 0 0 6px !important; border: none !important; position: static !important; }
}


/* ==========================================================================
   KIOSCO EN PANTALLAS BAJAS (1366 x 768 y menos)
   El carrusel toma lo que sobra; aqui se le deja aire achicando el logo y
   mostrando tres registros en vez de cinco. Si la pantalla es tan baja que
   el carrusel quedaria como una tira, se quita: el teclado y los registros
   mandan.
   ========================================================================== */
@media (min-width: 981px) and (max-height: 860px) {
  .kiosco__izquierda { padding-top: 26px; gap: 16px; }
  .kiosco__derecha { padding-top: 26px; }
  .kiosco__logo { height: 70px; }
  .kiosco__subtitulo { font-size: 27px; }
  .reloj__hora { font-size: clamp(60px, min(7.4vw, 12vh), 104px); }
  .reloj { margin-top: 14px; }
  .reloj__fecha { font-size: 17px; margin-top: 6px; }
  .actividad__lista { max-height: 128px; }
  .instruccion { margin-bottom: 16px; }
  .instruccion__titulo { font-size: 30px; }
}
@media (min-width: 981px) and (max-height: 620px) {
  .carrusel { display: none; }
  .kiosco__izquierda { justify-content: space-between; }
}