@import url('marca.css');

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* El atributo hidden lo aplica el navegador con `[hidden] { display: none }`,
   que pierde contra cualquier regla de autor que fije display —un `#id` o una
   clase—. Sin esto, ocultar algo desde JavaScript no tiene efecto visible.
   Va primero para que cualquier componente nuevo lo herede. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--fuente);
  background: var(--gris);
  color: var(--tinta);
  font-size: 17px;
  line-height: 1.45;
}

h1, h2, h3 { margin: 0; font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: -.01em; }

button { font: inherit; cursor: pointer; }

/* ====================================================== pantalla de reposo */

/* Estado de descanso de la tablet: logo sobre azul corporativo. Cualquier
   toque la despierta. */
#reposo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--azul-inko);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 34px;
  text-align: center;
  padding: 40px;
  cursor: pointer;
  animation: aparecer .4s ease;
}

/* Trama sutil derivada del contraforma del logotipo. No lleva imágenes
   externas: es un degradado repetido. */
#reposo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 15%, rgba(255, 255, 255, .07), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(255, 255, 255, .05), transparent 38%);
  pointer-events: none;
}

#reposo img {
  width: min(360px, 62vw);
  max-width: 100%;
  display: block;
  padding: var(--aire-logo);
}

#reposo .lema {
  font-family: var(--fuente-titulo);
  font-size: clamp(15px, 2.4vw, 21px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  max-width: 22ch;
  line-height: 1.6;
}

#reposo .toque {
  position: absolute;
  bottom: 44px;
  left: 0;
  right: 0;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  animation: latir 2.4s ease-in-out infinite;
}

@keyframes latir { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

body.en-reposo { overflow: hidden; }

/* ------------------------------------------------------------ estructura */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  background: var(--azul-inko);
  color: var(--blanco);
}

.barra .marca { display: flex; align-items: center; flex: none; }
.barra .marca img { height: 30px; width: auto; display: block; padding: var(--aire-logo); }

.barra .titulo { flex: 1; min-width: 0; }
.barra .titulo h1 { font-size: 18px; color: var(--blanco); }
.barra .titulo .sub {
  display: block;
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, .72);
}

.barra nav { display: flex; gap: 8px; flex-wrap: wrap; }

.barra .btn {
  background: transparent;
  border-color: rgba(255, 255, 255, .32);
  color: var(--blanco);
  padding: 9px 15px;
}

.barra .btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }

.envoltorio { max-width: 1120px; margin: 0 auto; padding: 24px 20px 130px; }

.panel {
  background: var(--blanco);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  margin-bottom: 18px;
}

.panel > h2 {
  font-family: var(--fuente);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--azul-inko);
  padding: 14px 18px;
  border-bottom: 1px solid var(--azul-borde);
  background: var(--gris);
}

/* ------------------------------------------------------------- botones */

.btn {
  border: 1.5px solid var(--azul-borde);
  background: var(--blanco);
  color: var(--azul-inko);
  border-radius: 10px;
  padding: 11px 18px;
  font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
}

.btn:hover { background: var(--azul-claro); border-color: var(--azul-inko); }
.btn.primario { background: var(--azul-inko); border-color: var(--azul-inko); color: var(--blanco); }
.btn.primario:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); }
.btn.peligro { color: var(--alerta); border-color: #E8C4C0; }
.btn.peligro:hover { background: var(--alerta-suave); border-color: var(--alerta); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.grande { padding: 16px 26px; font-size: 18px; width: 100%; }

/* ========================================================= menú principal */

.rejilla-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.modulo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 186px;
  padding: 24px;
  background: var(--blanco);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  text-align: left;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}

.modulo:not(:disabled):hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--azul-inko); }
.modulo:not(:disabled):active { transform: translateY(0); }

.modulo .simbolo {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 14px;
  background: var(--azul-claro);
  color: var(--azul-inko);
  display: grid;
  place-items: center;
}

.modulo .simbolo svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.modulo b { font-family: var(--fuente-titulo); font-size: 20px; }
.modulo span { font-size: 14.5px; color: var(--tinta-suave); }

.modulo.proximamente { background: #FAFCFE; cursor: not-allowed; }
.modulo.proximamente .simbolo { background: var(--gris); color: #9BAAB9; }
.modulo.proximamente b, .modulo.proximamente span { opacity: .62; }

.modulo .marca-esquina {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--gris);
  color: var(--tinta-suave);
}

.modulo .marca-esquina.candado { background: var(--azul-claro); color: var(--azul-inko); }

/* ------------------------------------------------- selección de persona */

.rejilla-usuarios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
  padding: 18px;
}

.tarjeta-usuario {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  background: var(--blanco);
  border: 1.5px solid var(--azul-borde);
  border-radius: var(--radio);
  text-align: left;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}

.tarjeta-usuario:hover { border-color: var(--azul-inko); box-shadow: var(--sombra); transform: translateY(-2px); }

.inicial {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--azul-inko);
  color: var(--blanco);
  display: grid;
  place-items: center;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 19px;
}

.tarjeta-usuario b { display: block; font-family: var(--fuente); font-weight: 600; }
.tarjeta-usuario small { color: var(--tinta-suave); }
.tarjeta-usuario .llave { margin-left: auto; color: var(--tinta-suave); font-size: 15px; }

/* --- teclado numérico de la clave --- */

.pin-zona { padding: 20px; display: grid; justify-items: center; gap: 16px; }
.pin-zona .quien { font-size: 15px; color: var(--tinta-suave); }

.pin-campo {
  width: min(280px, 100%);
  border: 1.5px solid var(--azul-borde);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 26px;
  letter-spacing: .28em;
  text-align: center;
  background: var(--blanco);
  color: var(--azul-inko);
}

.pin-campo:focus { outline: 2px solid var(--azul-inko); outline-offset: -1px; border-color: var(--azul-inko); }

.teclado {
  display: grid;
  grid-template-columns: repeat(3, 82px);
  gap: 12px;
}

.teclado button {
  height: 68px;
  border: 1.5px solid var(--azul-borde);
  border-radius: 14px;
  background: var(--blanco);
  font-family: var(--fuente-titulo);
  font-size: 25px;
  color: var(--azul-inko);
}

.teclado button:hover { background: var(--azul-claro); }
.teclado button:active { background: var(--azul-inko); color: var(--blanco); }
.teclado button.tenue { font-family: var(--fuente); font-size: 15px; font-weight: 600; color: var(--tinta-suave); }

/* ------------------------------------------------------- lista de tareas */

.rejilla-tareas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.tarea {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--blanco);
  border: 1px solid var(--azul-borde);
  border-left: 4px solid var(--azul-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-align: left;
  transition: transform .12s, box-shadow .12s;
}

.tarea:hover:not(:disabled) { border-left-color: var(--azul-inko); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
/* Aviso de procesos abiertos, arriba de la lista de checklists. */
.aviso.pendientes {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--azul-borde);
  background: var(--azul-claro);
  color: var(--azul-inko);
  padding: 16px 18px;
  cursor: pointer;
}

.aviso.pendientes:hover { border-color: var(--azul-inko); }
.aviso.pendientes small { color: var(--tinta-suave); font-weight: 500; }

.aviso.pendientes .cuenta {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--azul-inko);
  color: var(--blanco);
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 700;
}

.aviso.pendientes > span:nth-child(2) { flex: 1; }
.aviso.pendientes .flecha { font-size: 26px; line-height: 1; opacity: .55; }

.tarea.multiple { border-left-color: var(--azul-inko); }
.tarea.cerrado { border-left-color: var(--ok); }
.tarea.borrador { border-left-color: var(--ambar); }
.tarea.en_ruta { border-left-color: var(--azul-inko); background: #F7FAFD; }
.tarea.nuevo { border-left-color: var(--azul-inko); border-style: dashed; background: var(--azul-claro); }
.tarea.nuevo b { color: var(--azul-inko); }
.tarea.resumen { opacity: .7; cursor: default; }

/* Sección ya registrada en una etapa anterior: se consulta, no se edita. */
.panel.congelada { background: #FAFBFD; }
.panel.congelada .item { opacity: .72; }
.panel.congelada > h2 { display: flex; align-items: center; gap: 10px; }
.tarea b { font-family: var(--fuente-titulo); font-size: 18px; }
.tarea .meta { font-size: 14px; color: var(--tinta-suave); }

.etiqueta {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gris);
  color: var(--tinta-suave);
}

.etiqueta.verde { background: var(--ok-suave); color: var(--ok); }
.etiqueta.ambar { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta.roja { background: var(--alerta-suave); color: var(--alerta); }
.etiqueta.azul { background: var(--azul-claro); color: var(--azul-inko); }

/* ------------------------------------------------------------- ítems */

.item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--azul-borde);
}

.item:last-child { border-bottom: 0; }
.item .texto { flex: 1 1 260px; min-width: 0; }
.item.marcado-problema { background: var(--alerta-suave); }

.opciones { display: flex; gap: 8px; flex: none; }

.opcion {
  border: 1.5px solid var(--azul-borde);
  background: var(--blanco);
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 600;
  min-width: 96px;
  color: var(--tinta-suave);
}

.opcion[aria-pressed="true"].buena { background: var(--ok); border-color: var(--ok); color: var(--blanco); }
.opcion[aria-pressed="true"].mala { background: var(--alerta); border-color: var(--alerta); color: var(--blanco); }

.obs {
  flex: 1 1 100%;
  border: 1px solid var(--azul-borde);
  border-radius: 9px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  resize: vertical;
  min-height: 44px;
}

.obs:focus { outline: 2px solid var(--azul-inko); outline-offset: -1px; border-color: var(--azul-inko); }
.obs.requerida { border-color: var(--alerta); background: var(--blanco); }

/* --------------------------------------------------- evidencia fotográfica */

.evidencia { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* --------------------------------------------------- ítems de documento */

.item.documento { align-items: flex-start; gap: 10px 14px; }
.item.documento .texto b { display: block; font-weight: 600; }
.item.documento .texto small { display: block; color: var(--tinta-suave); margin-top: 3px; }
.item.documento .texto .etiqueta { margin-top: 6px; }
.item.documento .estado-doc { flex: none; }
.item.documento.pendiente { background: #FFFDF7; border-left: 4px solid var(--ambar); }

.mini .pdf {
  width: 78px;
  height: 78px;
  border-radius: 9px;
  border: 1px solid var(--azul-borde);
  background: var(--azul-claro);
  color: var(--azul-inko);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  cursor: pointer;
}

.mini .pdf:hover { background: var(--azul-inko); color: var(--blanco); }

.miniaturas { display: flex; flex-wrap: wrap; gap: 8px; }
.mini { position: relative; margin: 0; }

.mini img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--azul-borde);
  background: var(--gris);
  display: block;
  cursor: zoom-in;
}

.mini .quitar {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--blanco);
  background: var(--alerta);
  color: var(--blanco);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  display: grid;
  place-items: center;
}

.btn-camara {
  border: 1.5px dashed var(--azul-inko);
  background: var(--azul-claro);
  color: var(--azul-inko);
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 600;
  white-space: nowrap;
}

.btn-camara:disabled { opacity: .6; }

.nota-foto { font-size: 13.5px; color: var(--tinta-suave); }
.nota-foto.obligatoria { color: var(--alerta); font-weight: 700; }
.evidencia.falta .btn-camara { border-color: var(--alerta); background: var(--alerta-suave); color: var(--alerta); }

table.captura .evidencia { margin-top: 7px; }
table.captura .mini img { width: 46px; height: 46px; }
table.captura .btn-camara { padding: 6px 10px; font-size: 13px; }

.visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 29, 58, .92);
  display: grid;
  place-items: center;
  gap: 18px;
  padding: 24px;
  cursor: zoom-out;
}

.visor img { max-width: 100%; max-height: 82vh; border-radius: var(--radio); }

/* ------------------------------------------------------------- tablas */

.desliza { overflow-x: auto; }

table.captura { border-collapse: collapse; width: 100%; font-size: 15px; }

table.captura th,
table.captura td { border: 1px solid var(--azul-borde); padding: 8px 10px; text-align: center; }

table.captura th {
  background: var(--gris);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--azul-inko);
  white-space: nowrap;
}

table.captura td.fila-titulo,
table.captura th.fila-titulo { text-align: left; min-width: 230px; position: sticky; left: 0; background: var(--blanco); z-index: 1; }
table.captura th.fila-titulo { background: var(--gris); }
table.captura tr.grupo td { background: var(--azul-claro); font-weight: 700; text-align: left; color: var(--azul-inko); }
/* Matriz de permisos: encabezados verticales para que quepan las columnas. */
table.matriz-permisos th.vertical {
  height: 132px;
  vertical-align: bottom;
  padding: 6px 2px 10px;
  min-width: 42px;
}

table.matriz-permisos th.vertical span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-weight: 600;
  font-size: 12.5px;
}

table.matriz-permisos td.ajustado { background: var(--azul-claro); }

/* Cambio tocado pero todavía sin guardar. */
table.matriz-permisos td.pendiente-guardar {
  background: #FFF6E5;
  box-shadow: inset 0 0 0 2px var(--ambar);
}
table.matriz-permisos td.ajustado .casilla { border-color: var(--azul-inko); }
table.matriz-permisos .fila-titulo { min-width: 190px; }

table.captura td.con-problema { background: var(--alerta-suave); font-weight: 700; color: var(--alerta); }

table.captura input[type="number"],
table.captura input[type="text"] {
  width: 100%;
  min-width: 74px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: center;
  padding: 8px 2px;
}

table.captura input:focus { outline: 2px solid var(--azul-inko); border-radius: 6px; }

.casilla {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--azul-borde);
  border-radius: 8px;
  background: var(--blanco);
  color: transparent;
  font-size: 19px;
  line-height: 1;
  padding: 0;
}

.casilla[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: var(--blanco); }

/* ------------------------------------------------------------- firma */

.firma-caja { padding: 18px; }
.firma-caja canvas {
  width: 100%;
  height: 170px;
  border: 2px dashed var(--azul-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  touch-action: none;
  display: block;
}
.firma-caja .acciones { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.firma-lista { display: flex; gap: 18px; flex-wrap: wrap; padding: 18px; }
.firma-lista figure { margin: 0; }
.firma-lista img { height: 78px; border-bottom: 1px solid var(--tinta); display: block; }
.firma-lista figcaption { font-size: 13px; color: var(--tinta-suave); padding-top: 5px; }

/* --------------------------------------------------------- comparativa */

.selector-semanas { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--azul-borde);
  border-radius: 999px;
  cursor: pointer;
  font-size: 14.5px;
  user-select: none;
}

.chip:has(input:checked) { border-color: var(--azul-inko); background: var(--azul-claro); color: var(--azul-inko); font-weight: 600; }
.chip input { width: 18px; height: 18px; accent-color: var(--azul-inko); }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; padding: 18px; }

.indicador { border: 1px solid var(--azul-borde); border-radius: var(--radio); padding: 16px; background: var(--gris); }
.indicador .rotulo { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.indicador b { display: block; font-family: var(--fuente-titulo); font-size: 34px; line-height: 1.1; margin: 4px 0 6px; color: var(--azul-inko); }
.indicador .pie-ind { font-size: 13.5px; color: var(--tinta-suave); display: block; }

.delta { font-weight: 700; margin-left: 6px; white-space: nowrap; }
.delta.buena { color: var(--ok); }
.delta.mala { color: var(--alerta); }
.delta.neutra { color: var(--tinta-suave); font-weight: 400; }

.tendencia { display: flex; align-items: flex-end; gap: 12px; padding: 8px 18px 18px; min-height: 150px; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 130px; justify-content: flex-end; }
.barra-col .valor { font-size: 14px; font-weight: 700; color: var(--azul-inko); }
.barra-col .barra { width: 100%; max-width: 62px; min-height: 3px; background: var(--azul-inko); border-radius: 6px 6px 0 0; }
.barra-col .eje { font-size: 12.5px; color: var(--tinta-suave); }

.explica { margin: 0; padding: 14px 18px 0; color: var(--tinta-suave); font-size: 14.5px; }

/* --------------------------------------------------- configuración: pestañas */

.pestanas {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  background: var(--blanco);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 18px;
  overflow-x: auto;
}

.pestanas button {
  border: 0;
  background: transparent;
  padding: 16px 18px;
  font-weight: 600;
  color: var(--tinta-suave);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.pestanas button:hover { color: var(--azul-inko); }
.pestanas button[aria-selected="true"] { color: var(--azul-inko); border-bottom-color: var(--azul-inko); }

.bloque-form { padding: 18px; border-top: 1px solid var(--azul-borde); background: var(--gris); }
.bloque-form h3 { font-size: 15px; margin-bottom: 14px; color: var(--azul-inko); }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }

/* ------------------------------------------------------ editor de personas */

.icono {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--azul-borde);
  border-radius: 9px;
  background: var(--blanco);
  font-size: 17px;
  line-height: 1;
  color: var(--azul-inko);
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.icono:hover { background: var(--azul-claro); border-color: var(--azul-inko); }

table.captura tr.inactiva td { opacity: .55; }
table.captura tr.inactiva td.fila-titulo { text-decoration: line-through; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 29, 58, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.caja-modal {
  background: var(--blanco);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-alta);
  width: min(560px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.caja-modal > h2 { font-size: 18px; padding: 18px 22px; border-bottom: 1px solid var(--azul-borde); background: var(--gris); color: var(--azul-inko); }
.cuerpo-modal { padding: 22px; overflow-y: auto; }
.pie-modal { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--azul-borde); background: var(--gris); }

.casilla-texto { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500; cursor: pointer; margin-top: 6px; }
.casilla-texto input { width: 20px; height: 20px; flex: none; accent-color: var(--azul-inko); margin-top: 1px; }

/* --------------------------------------------------------- pie de acción */

.pie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--blanco);
  border-top: 1px solid var(--azul-borde);
  box-shadow: 0 -4px 18px rgba(0, 47, 93, .08);
}

.pie .resumen { flex: 1; font-size: 14.5px; color: var(--tinta-suave); }

/* Aviso en el pie cuando la acción final no le corresponde a quien captura. */
.nota-mando {
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-inko);
  background: var(--azul-claro);
  border: 1px solid var(--azul-borde);
  border-radius: 999px;
  padding: 9px 16px;
  white-space: nowrap;
}

/* ------------------------------------------------------------- varios */

.aviso { padding: 13px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; }
.aviso.error { background: var(--alerta-suave); color: #7C1A13; }
.aviso.exito { background: var(--ok-suave); color: #0E4E2E; }
.aviso.info { background: var(--azul-claro); color: var(--azul-inko); }

.vacio { padding: 40px 20px; text-align: center; color: var(--tinta-suave); }

.guardado { font-size: 13.5px; color: var(--ok); font-weight: 600; opacity: 0; transition: opacity .2s; }
.guardado.visible { opacity: 1; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 13.5px; font-weight: 700; color: var(--azul-inko); }
.campo input, .campo select, .campo textarea {
  border: 1.5px solid var(--azul-borde);
  border-radius: 9px;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;
  background: var(--blanco);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--azul-inko); outline-offset: -1px; border-color: var(--azul-inko); }

.fila-botones { display: flex; gap: 10px; flex-wrap: wrap; }

.migaja { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-suave); margin-bottom: 16px; }
.migaja button { border: 0; background: none; color: var(--azul-inko); font-weight: 600; padding: 0; }
.migaja button:hover { text-decoration: underline; }

/* En monitor de escritorio hay ancho de sobra: las tablas de Reportes y
   Comparativa se leen mucho mejor sin el corsé pensado para tablet. */
@media (min-width: 1240px) {
  .envoltorio { max-width: 1340px; }
  .rejilla-modulos { grid-template-columns: repeat(3, 1fr); }
}

/* Con mouse los objetivos pueden ser más chicos; con dedo, no. */
@media (pointer: fine) {
  .teclado { grid-template-columns: repeat(3, 70px); }
  .teclado button { height: 58px; font-size: 22px; }
  .modulo { min-height: 168px; }
}

@media (max-width: 640px) {
  .item { padding: 12px 14px; }
  .opciones { width: 100%; }
  .opcion { flex: 1; min-width: 0; }
  .envoltorio { padding: 16px 12px 130px; }
  .barra { gap: 12px; padding: 10px 14px; }
  .barra .marca img { height: 24px; }
  .barra .titulo h1 { font-size: 16px; }
}

/* ------------------------------------------------------------- calidad */

/* Un lote del muestreo. En papel era un renglón larguísimo de 19 columnas;
   aquí se abre en vertical, por bloques numerados, para que quepa en tablet. */
.lote {
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  margin-bottom: 16px;
  overflow: hidden;
}

.lote > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--gris);
  border-bottom: 1px solid var(--azul-borde);
}

.lote > header b { font-family: var(--fuente-titulo); font-size: 17px; flex: 1; min-width: 0; }
.lote.aprobado { border-color: #BFE3CE; }
.lote.aprobado > header { background: var(--ok-suave); }
.lote.rechazado { border-color: #E8C4C0; }
.lote.rechazado > header { background: var(--alerta-suave); }

.lote > header .quitar {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--azul-borde);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--tinta-suave);
  font-size: 18px;
  line-height: 1;
}
.lote > header .quitar:hover { border-color: var(--alerta); color: var(--alerta); background: var(--alerta-suave); }

.lote .cuerpo { padding: 16px; display: grid; gap: 18px; }
.lote .meta { font-size: 14px; color: var(--tinta-suave); }

.rotulo-bloque {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  margin-bottom: 10px;
}

.campos-linea { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.campos-linea .campo { margin-bottom: 0; min-width: 130px; }

/* El número que contesta el sistema: cuántos rollos hay que revisar. Era la
   columna verde de la hoja y es lo único que la persona necesita leer de un
   vistazo antes de ir por la muestra. */
.muestra {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--azul-claro);
  border-radius: 10px;
  padding: 12px 18px;
}

.muestra .dato { display: flex; flex-direction: column; }
.muestra .rotulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.muestra .dato b { font-family: var(--fuente-titulo); font-size: 26px; line-height: 1.1; color: var(--azul-inko); }
.muestra .destacado b { font-size: 32px; color: var(--ok); }
.muestra .pie-muestra { font-size: 13.5px; color: var(--tinta-suave); }

/* La especificación del catálogo. Es lo que en el Excel se llenaba solo y venía
   en gris: no se escribe, se compara contra el producto que está en la mano. */
.spec { display: flex; flex-wrap: wrap; gap: 8px; }
.spec .etiqueta { background: var(--gris); color: var(--tinta); text-transform: none; letter-spacing: 0; }
.spec .etiqueta i { font-style: normal; font-weight: 500; color: var(--tinta-suave); }

.grupo-opciones { display: flex; flex-direction: column; gap: 7px; }
.rotulo-opciones { font-size: 13.5px; font-weight: 700; color: var(--azul-inko); }

.zona-rechazo { display: grid; gap: 12px; }

/* ------------------------------------------------- ítems de fecha/vigencia */

.item.fecha { align-items: center; gap: 12px 16px; }
.item.fecha .texto b { display: block; font-weight: 600; }
.item.fecha .texto small { display: block; color: var(--tinta-suave); margin-top: 3px; }

.captura-fecha { display: flex; flex-direction: column; gap: 4px; flex: none; }
.captura-fecha label { font-size: 12.5px; font-weight: 600; color: var(--tinta-suave); }
.captura-fecha input {
  border: 1.5px solid var(--linea);
  border-radius: 9px;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;
  min-width: 168px;
  background: var(--blanco);
}
.captura-fecha input:focus { outline: 2px solid var(--azul-inko); border-color: var(--azul-inko); }

.estado-vigencia { flex: none; }
.item.fecha.vencida, .item.fecha.vence_hoy { background: var(--alerta-suave); }
.item.fecha.por_vencer { background: #FFFDF7; }

table.captura tr.vigencia-vencida td { background: var(--alerta-suave); }

/* Encabezados de la matriz de permisos por módulo. Al mostrar un módulo a la
   vez las columnas son pocas, así que el texto va horizontal y se lee de
   corrido — antes iba en vertical porque no cabía de otra forma. */
table.matriz-permisos th.accion {
  min-width: 118px;
  max-width: 170px;
  vertical-align: bottom;
  padding: 10px 8px;
  text-align: center;
  white-space: normal;
  font-size: 13px;
  line-height: 1.3;
}

/* ------------------------------------------------------------- almacén */

/* Las cifras de la portada. En el DASHBOARD del Excel eran celdas sueltas con
   una fórmula cada una; aquí es una tira que se acomoda sola en la tablet. */
.cifras-almacen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.cifra {
  background: var(--blanco);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
}

.cifra b {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 26px;
  line-height: 1.1;
  color: var(--azul-inko);
}

.cifra span { font-size: 13.5px; color: var(--tinta-suave); }
.cifra.alerta b { color: var(--alerta); }

.filtros-almacen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--azul-borde);
}

.filtros-almacen input[type="search"] { flex: 1 1 240px; min-width: 0; }

.filtros-almacen input,
.filtros-almacen select {
  padding: 10px 12px;
  border: 1px solid var(--azul-borde);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  background: var(--blanco);
}

/* Alta de un renglón: producto y cantidad en la misma línea, para que capturar
   una entrega de ocho productos no obligue a abrir ocho ventanas. */
.agregar-renglon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 18px;
  border-top: 1px solid var(--azul-borde);
  background: var(--gris);
}

.agregar-renglon input[type="search"] { flex: 1 1 280px; min-width: 0; }
.agregar-renglon input[type="number"] { flex: 0 0 130px; }

.agregar-renglon input {
  padding: 11px 12px;
  border: 1px solid var(--azul-borde);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
}

.acciones-almacen { margin-top: 20px; display: grid; gap: 12px; }

/* Un dato obligatorio que sigue vacío se marca en la propia celda: quien captura
   no debería tener que leer el aviso de arriba para saber cuál le falta. */
table.captura input.falta-dato {
  border: 1px solid var(--alerta);
  background: var(--alerta-suave);
}

table.captura .fuera-odt { color: var(--alerta); }

.tarea.en_calidad { border-left-color: var(--azul-inko); }
.tarea.por_autorizar { border-left-color: var(--azul-inko); }
.tarea.aplicada, .tarea.aplicado { border-left-color: var(--ok); }
.tarea.cancelada, .tarea.cancelado { border-left-color: var(--alerta); opacity: .7; }

/* La tarjeta del módulo de Notificaciones avisa desde el menú cuántas cosas
   esperan una decisión. Va en rojo porque es lo único del menú que reclama algo
   de quien lo está mirando; el resto son puertas, esto es un recado. */
.modulo .marca-esquina.cuenta-pendientes {
  background: var(--alerta);
  color: var(--blanco);
}

/* La pestaña de Limpieza destruye en vez de configurar; su bloque más delicado
   —la carga inicial de existencias— se marca para que no se toque de pasada. */
.panel.peligroso { border-color: var(--alerta); }
.panel.peligroso > h2 { color: var(--alerta); }
.btn.peligro {
  background: var(--alerta);
  border-color: var(--alerta);
  color: var(--blanco);
}

/* La caja de carga de la ODT: un botón grande y su explicación al lado, con
   espacio debajo para el resumen de lo que se leyó del archivo. */
.cargar-odt { position: relative; padding: 0 18px 18px; }
.cargar-odt .resumen { display: block; margin-top: 8px; }
.cargar-odt #avance-odt:not(:empty) { margin-top: 14px; }

/* El camino de un traspaso: los cuatro pasos, con el andado marcado. Se pinta
   completo aunque falten pasos, para que se vea a dónde va y no solo dónde está. */
.camino {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 0; padding: 0 18px 18px;
}
.camino li {
  flex: 1 1 150px; min-width: 150px;
  border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 12px; background: var(--fondo-suave);
}
.camino li b { display: block; font-size: 14.5px; }
.camino li .meta { display: block; font-size: 12.5px; color: var(--tinta-suave); margin-top: 2px; }
.camino li.hecho { border-color: var(--exito); background: var(--exito-suave, var(--fondo-suave)); }
.camino li.hecho b { color: var(--exito); }
.camino li.en-curso { border-color: var(--azul-inko); border-width: 2px; }
.camino li.en-curso b { color: var(--azul-inko); }

.tira-fotos { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 14px; }
.tira-fotos figure { margin: 0; }
.tira-fotos img {
  width: 130px; height: 130px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--borde);
}

/* El renglón del Administrador en la matriz de permisos: todo encendido y sin
   nada que tocar. Puede todo por el cargo, no porque se lo hayan otorgado. */
.matriz-permisos .casilla.por-cargo {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--exito); cursor: default; opacity: .75;
}

/* La hoja de incidencias: un renglón por persona, como el papel. Quien no tiene
   nada se pinta apagado pero se pinta — un nombre limpio también es información. */
.hoja-incidencias { padding: 0 18px 18px; }
.renglon-persona {
  display: grid; grid-template-columns: 200px 1fr; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--borde);
}
.renglon-persona:last-child { border-bottom: 0; }
.renglon-persona .quien b { display: block; }
.renglon-persona .quien small { color: var(--tinta-suave); }
.renglon-persona.limpio { opacity: .55; }
.renglon-persona .sin-nada { color: var(--tinta-suave); font-size: 14px; }

.anotacion {
  border-left: 3px solid var(--borde); padding: 6px 0 6px 12px; margin-bottom: 10px;
}
.anotacion:last-child { margin-bottom: 0; }
.anotacion.autorizada { border-left-color: var(--alerta); }
.anotacion.por_autorizar { border-left-color: var(--ambar, #d99100); }
.anotacion.rechazada, .anotacion.cancelada { opacity: .6; text-decoration-color: var(--tinta-suave); }
.anotacion .cabeza { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.anotacion .fecha { font-weight: 600; font-size: 14px; }
.anotacion p { margin: 5px 0; }
.anotacion small { color: var(--tinta-suave); }
.anotacion .fila-botones { margin-top: 8px; }

@media (max-width: 700px) {
  .renglon-persona { grid-template-columns: 1fr; gap: 6px; }
}

/* Dinero en la unidad: el monto con signo de pesos y, debajo, la foto obligatoria. */
.item.dinero { flex-wrap: wrap; }
.item.dinero.pendiente { border-left: 3px solid var(--alerta); }
.captura-dinero { display: flex; flex-direction: column; gap: 4px; }
.captura-dinero label { font-size: 12.5px; color: var(--tinta-suave); }
.captura-dinero .moneda { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.captura-dinero input { width: 140px; font-size: 16px; padding: 8px 10px; }
.item.dinero .evidencia { flex-basis: 100%; }

/* Editor de preguntas: un renglón por pregunta, con sus controles a la derecha. */
.editor-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.editor-titulo { flex: 1 1 260px; font-weight: 700; font-size: 16px; min-height: auto; }
.editor-items { padding: 8px 18px 18px; }
.editor-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--borde); }
.editor-item input.obs { flex: 1 1 280px; min-height: auto; }
.editor-item select, .editor-nuevo select { padding: 8px; }
.editor-num { width: 24px; text-align: right; color: var(--tinta-suave); font-size: 13px; }
.editor-acciones { display: inline-flex; gap: 6px; margin-left: auto; }
.editor-acciones .btn { padding: 6px 10px; }
.editor-oblig { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; }
.editor-nota { flex-basis: 100%; padding-left: 32px; color: var(--tinta-suave); }
.editor-nuevo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.editor-nuevo input.obs { flex: 1 1 280px; min-height: auto; }

/* Editor de preguntas: la barra de guardar va fija hasta abajo, a la vista aunque
   el checklist sea largo. Se enciende en cuanto hay algo sin guardar. */
.barra-guardar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 18px; padding: 12px 18px;
  background: var(--blanco, #fff); border-top: 2px solid var(--borde);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
}
.barra-guardar #estado-cambios { margin-right: auto; color: var(--tinta-suave); }
.barra-guardar.pendiente { border-top-color: var(--alerta); }
.barra-guardar.pendiente #estado-cambios { color: var(--alerta); font-weight: 600; }
.editor-seccion.nueva, .editor-item.nuevo { background: var(--fondo-suave); }

/* Reporte de Tránsito: el rango de fechas y sus atajos. */
.rango-fechas { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 0 18px 18px; }
.rango-fechas label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--tinta-suave); }
.rango-fechas input[type="date"] { font: inherit; padding: 8px 10px; border: 1px solid var(--linea, #d0d4da); border-radius: 8px; }

/* Tránsito: lo que se escribe (placas, chofer, proveedor) y la hora de arribo. */
.captura-libre { display: flex; flex: 1 1 220px; min-width: 0; }
.captura-libre input { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--linea, #d0d4da); border-radius: 8px; background: #fff; }
.captura-libre input:disabled { background: transparent; }
.item.libre.pendiente .captura-libre input { border-color: var(--alerta, #c0392b); }

/* --- la lista de partidas al mandar a contar --- */
/* Una casilla por producto, con su propio alto para que se pueda tocar con el
   dedo en la tablet. Lo que ya está en otro conteo abierto se ve apagado y no
   se deja marcar: dos personas contando lo mismo producen dos ajustes. */
.lista-partidas {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 6px;
  background: var(--fondo-suave, #fff);
}
.lista-partidas .partida {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.lista-partidas .partida:hover { background: var(--realce, #f3f5f8); }
.lista-partidas .partida input { width: 22px; height: 22px; flex: none; }
.lista-partidas .partida span { display: flex; flex-direction: column; line-height: 1.25; }
.lista-partidas .partida small { color: var(--tinta-suave); }
.lista-partidas .partida.bloqueada { opacity: .5; cursor: not-allowed; }
.lista-partidas .partida .ocupado {
  margin-left: auto;
  font-size: .78rem;
  color: var(--tinta-suave);
}

/* --- el detalle de cajas de un conteo --- */
.fila-caja {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.fila-caja input { max-width: 110px; }
.fila-caja span { color: var(--tinta-suave); }
.celda-cajas small { display: inline-block; line-height: 1.3; }

/* --- la bandeja: pestañas arriba, luego un bloque por módulo --- */
.pestanas-avisos {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px;
  background: var(--blanco); border: 1px solid var(--azul-borde); border-radius: 14px;
}
.pestanas-avisos button {
  border: 0; background: none; border-radius: 10px; padding: 10px 20px;
  font-weight: 700; color: var(--tinta-suave); text-align: left;
}
.pestanas-avisos button small { display: block; font-weight: 600; font-size: 12px; opacity: .8; }
.pestanas-avisos button .cuenta {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px;
  background: var(--azul-claro); color: var(--azul-inko); font-size: 13px;
}
.pestanas-avisos button[aria-selected="true"] { background: var(--azul-inko); color: var(--blanco); }
.pestanas-avisos button[aria-selected="true"] .cuenta { background: rgba(255, 255, 255, .2); color: var(--blanco); }

.chips-filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-filtro {
  border: 1px solid var(--azul-borde); background: var(--blanco); color: var(--azul-inko);
  border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 14px;
}
.chip-filtro[aria-pressed="true"] { background: var(--azul-claro); border-color: var(--azul-inko); }

.bloque-avisos {
  background: var(--blanco); border: 1px solid var(--azul-borde); border-radius: var(--radio);
  box-shadow: var(--sombra); margin-bottom: 14px; overflow: hidden;
}
.bloque-avisos > h2 {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  font-size: 17px; color: var(--azul-inko); border-bottom: 1px solid var(--azul-borde);
}
.grupo-avisos + .grupo-avisos { border-top: 1px solid var(--azul-borde); }
.rotulo-grupo {
  margin: 0; padding: 9px 16px 4px; font-size: 13px; color: var(--tinta-suave);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rotulo-grupo .tipo {
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
  padding: 2px 8px; border-radius: 999px; background: var(--azul-claro); color: var(--azul-inko);
}
.rotulo-grupo .tipo-vigilar { background: var(--ambar-suave); color: var(--ambar); }
.rotulo-grupo .tipo-capturar { background: var(--gris); color: var(--tinta); border: 1px solid var(--azul-borde); }
.rotulo-grupo span:last-child { font-weight: 600; color: var(--tinta); }
.fila-aviso {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: none; text-align: left; padding: 10px 16px;
  border-top: 1px solid #EDF1F6;
}
.rotulo-grupo + .fila-aviso { border-top: 0; }
.fila-aviso:hover { background: var(--gris); }
.fila-aviso .que { flex: 1; min-width: 0; }
.fila-aviso .que b { display: block; font-weight: 700; }
.fila-aviso .que small { display: block; color: var(--tinta-suave); font-size: 13.5px; }
.fila-aviso .cuando { font-size: 13px; color: var(--tinta-suave); white-space: nowrap; }
.marca-fila { width: 8px; height: 8px; border-radius: 50%; background: var(--azul-inko); flex: none; }
.marca-fila.urgente { background: var(--alerta); }
.marca-fila.hecho { background: var(--ok); }

/* Un renglón de inventario que lleva a algún lado tiene que decirlo. */
tr.clicable { cursor: pointer; }
tr.clicable:hover { background: var(--realce, #f3f5f8); }

/* La ventana de las partidas necesita más ancho que una de dos campos. */
.caja-modal.ancha { max-width: 720px; }

/* --- Permisos: la lista de una persona en un módulo --- */
/* Un renglón por permiso, tocable entero: en la tablet la casilla sola era un
   blanco demasiado chico. Encendido, la casilla se pone verde como en el resto. */
.lista-permisos { display: grid; gap: 8px; padding: 0 18px 18px; }
.renglon-permiso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid var(--azul-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  font: inherit;
  color: var(--tinta);
  cursor: pointer;
}
.renglon-permiso:hover:not(:disabled) { border-color: var(--azul-inko); }
.renglon-permiso:disabled { cursor: default; opacity: .75; }
.renglon-permiso .casilla { flex: none; display: grid; place-items: center; }
.renglon-permiso[aria-pressed="true"] .casilla { background: var(--ok); border-color: var(--ok); color: var(--blanco); }
.renglon-permiso .texto { display: flex; flex-direction: column; gap: 3px; }
.renglon-permiso .texto small { color: var(--tinta-suave); }
.renglon-permiso.ajustado { background: var(--azul-claro); }
.renglon-permiso.pendiente-guardar { background: #FFF6E5; box-shadow: inset 0 0 0 2px var(--ambar); }

/* --- la imagen de una unidad o de un material --- */
.celda-imagen { min-width: 130px; }
.imagen-catalogo { display: block; width: 96px; height: 72px; object-fit: cover; border-radius: 8px; margin: 0 auto 6px; background: var(--gris); }
.sin-imagen { display: block; color: var(--tinta-suave); font-size: 13px; margin-bottom: 6px; }
.celda-imagen .fila-botones { justify-content: center; gap: 6px; }
.tarea.con-imagen { position: relative; padding-left: 104px; min-height: 96px; }
.tarea .imagen-tarjeta {
  position: absolute; left: 12px; top: 12px;
  width: 80px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--gris);
}
.ficha-unidad {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; margin-bottom: 14px;
  border: 1px solid var(--azul-borde); border-radius: var(--radio); background: var(--blanco);
}
.ficha-unidad img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--gris); }
.ficha-unidad span { display: flex; flex-direction: column; }
.ficha-unidad small { color: var(--tinta-suave); }
.imagen-lote { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; margin-right: 8px; vertical-align: middle; }
.imagen-renglon { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; margin-right: 8px; vertical-align: middle; float: left; }

/* --- la devolución: su motivo, a la vista de quien aprueba --- */
.motivo-destacado {
  margin: 0; padding: 12px 14px;
  border-left: 4px solid var(--ambar); background: var(--ambar-suave);
  border-radius: 8px; white-space: pre-wrap;
}

/* --- la salida por calidad: foto de cada producto --- */
.celda-foto-renglon { min-width: 150px; }
.celda-foto-renglon .miniaturas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 6px; }
table.captura textarea { width: 100%; font: inherit; border: 1px solid var(--azul-borde); border-radius: 8px; padding: 6px 8px; }
table.captura textarea.falta-dato { border-color: var(--alerta); background: var(--alerta-suave); }

/* --- re-ingreso: una tarjeta por caja, con lo que trae dentro --- */
.cajas-reingreso { display: grid; gap: 12px; padding: 0 18px 12px; }
.caja-reingreso { border: 1.5px solid var(--azul-borde); border-radius: var(--radio); background: var(--blanco); overflow: hidden; }
.caja-reingreso header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--gris); }
.caja-reingreso.vacia { border-style: dashed; }
.caja-reingreso.sobra { border-color: var(--alerta); }
.caja-reingreso .agregar-renglon { padding: 10px 14px; }


/* --- Producción: la barra de avance --- */
.barra-avance {
  display: inline-block; width: 90px; height: 10px; vertical-align: middle;
  background: var(--azul-claro); border-radius: 6px; overflow: hidden; margin-right: 6px;
}
.barra-avance span { display: block; height: 100%; background: var(--ok); border-radius: 6px; }
.acciones-partida { white-space: nowrap; }
.acciones-partida .btn { padding: 7px 10px; font-size: 13.5px; }
.tabla-reparto input { min-width: 64px; border: 1px solid var(--azul-borde) !important; border-radius: 6px; background: var(--blanco) !important; }

/* --- modo de pruebas: la cinta que lo recuerda mientras se prueba --- */
.cinta-prueba {
  position: sticky; top: 54px; z-index: 19;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--ambar-suave); color: var(--ambar);
  border-bottom: 2px solid var(--ambar); font-size: 14.5px;
}
.cinta-prueba .marca-prueba {
  font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12px;
  background: var(--ambar); color: var(--blanco); padding: 3px 9px; border-radius: 999px;
}
.cinta-prueba .texto { flex: 1; min-width: 220px; color: var(--tinta); }
.cinta-prueba .btn { padding: 7px 12px; font-size: 14px; }
.lista-breve { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* --- puestos --- */
.rejilla-puestos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; padding: 0 18px 18px;
}
.tarjeta-puesto {
  border: 1px solid var(--azul-borde); border-radius: var(--radio); padding: 14px;
  display: grid; gap: 8px; align-content: start; background: var(--blanco);
}
.tarjeta-puesto.retirado { opacity: .65; border-style: dashed; }
.tarjeta-puesto .cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tarjeta-puesto .cabeza b { font-size: 16.5px; color: var(--azul-inko); margin-right: auto; }
.tarjeta-puesto small { color: var(--tinta-suave); }
.tarjeta-puesto .fila-botones .btn { padding: 7px 11px; font-size: 14px; }
.personas-prueba { display: flex; flex-wrap: wrap; gap: 6px; }
.personas-prueba .chip-filtro { padding: 5px 10px; font-size: 13px; }
.subtitulo-panel { padding: 4px 18px 10px; font-size: 14px; color: var(--tinta-suave); }
.nota-campo { display: block; color: var(--tinta-suave); margin: 4px 0 12px; }

/* --- permisos: los tres pasos en una fila --- */
.pasos-permisos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 18px 10px;
}
@media (max-width: 760px) { .pasos-permisos { grid-template-columns: 1fr; } }

/* --- enlaces entre módulos --- */
.tira-conexiones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--blanco); border: 1px solid var(--azul-borde); border-radius: var(--radio);
}
.tira-conexiones > span:first-child {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave);
}
.liga-doc {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--azul-borde); background: var(--azul-claro); color: var(--azul-inko);
  font-weight: 700; font-size: 14px; text-decoration: none;
}
a.liga-doc::after { content: '↗'; font-size: 12px; opacity: .7; }
a.liga-doc:hover { border-color: var(--azul-inko); }
.liga-doc.sin-acceso { background: var(--gris); color: var(--tinta-suave); }
.dato-conexion { font-size: 14px; color: var(--tinta-suave); display: inline-flex; gap: 6px; align-items: center; }