/* Paleta: los colores de marca viven solo aquí (los gráficos de Reportes también los leen).
   Tomada de la app de solicitudes de diseño de RIO (rio-solicitudes-diseno). */
:root {
  /* Marca */
  --primario: #00742b; --primario-osc: #005e21; --primario-claro: #e4f1e8; /* --primario-claro: fondo de activo/seleccionado */
  --primario-borde: #a6d1b3; --primario-foco: #6fbf86; --primario-tenue: #f1f6f2; /* borde de activo, anillo de foco, hover de filas */
  --acento: #eddd39; --resalte: #8cee38; /* amarillo y lima: solo sobre fondo oscuro o decorativos */
  --logo-1: #e5307e; --logo-2: #8cc63f; --logo-3: #f7931e; --logo-4: #0098d8; /* colores del carrito del logo: franja de la barra lateral */
  /* Barra lateral y encabezado de página */
  --lateral: #004516; --lateral-borde: #1f5b32; --lateral-texto: #ccdad0; --lateral-suave: #99b5a2;
  --lateral-activo: var(--lateral); --lateral-activo-bg: #ffffff;
  --hero-desde: #004516; --hero-hasta: #005e21; --hero-texto: #ffffff; --hero-suave: #d3e3d8; --hero-enlace: #c4f29a;
  /* Mapa de calor de cupos, de menos a más ocupación */
  --mapa-1: #e8f3eb; --mapa-2: #bfe0c8; --mapa-3: #7fc093; --mapa-4: var(--primario);
  /* Neutros */
  --bg: #f2f4f1; --panel: #ffffff; --borde: #e1e4e2; --borde-control: #ccd1ce; --texto: #1c1f26; --suave: #4a505c;
  /* Estados (semánticos: no cambian con la marca) */
  --ok: #1f8a4c; --ok-bg: #e5f5ea; --falla: #c0392b; --falla-bg: #fbe9e7; --aviso: #b8650a; --aviso-bg: #fdf1e1;
  --ok-texto: #17703d; --aviso-texto: #9a5307; /* texto sobre --ok-bg / --aviso-bg con contraste AA (≥ 4,5:1) */
  --info-bg: #e8f0fb;
  /* Tipografía y forma */
  --fuente: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: Poppins, var(--fuente);
  --radio: 12px; --radio-control: 8px; --sombra: none;
  --ancho-lateral: 256px;
}
/* Poppins alojada en el portal (la CSP no permite fuentes externas); el texto usa la fuente del sistema. */
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 var(--fuente); background: var(--bg); color: var(--texto); }
a { color: var(--primario); }
h1, h2, h3 { font-family: var(--fuente-titulos); }
h1 { font-size: 1.5rem; margin: .2rem 0; }
h2 { font-size: 1.08rem; font-weight: 600; margin: 0 0 .8rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1.2rem 0 .6rem; }
code { background: #eef1f4; padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.sub { color: var(--suave); font-size: .85rem; font-weight: normal; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* App shell: barra lateral fija desde 1024 px (cajón por debajo), barra superior y contenido */
.lateral { position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--ancho-lateral); display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem .8rem; border-top: 4px solid; border-image: linear-gradient(90deg, var(--logo-1) 25%, var(--logo-2) 0 50%, var(--logo-3) 0 75%, var(--logo-4) 0) 1; background: var(--lateral); color: var(--lateral-texto); overflow-y: auto; }
.marca { display: flex; align-items: center; gap: .7rem; padding: .2rem .4rem 1rem; border-bottom: 1px solid var(--lateral-borde); color: #fff; text-decoration: none; font: 700 1rem/1.2 var(--fuente-titulos); }
.marca img { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.marca small { display: block; margin-top: .2rem; font: 400 .78rem/1.3 var(--fuente); color: var(--lateral-suave); }
.lateral nav { display: grid; gap: .15rem; }
.lateral-grupo { margin: 0 0 .35rem; padding: 0 .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lateral-suave); }
.lateral nav a { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: var(--radio-control); color: var(--lateral-texto); text-decoration: none; font-size: .92rem; }
.lateral nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lateral nav a.activo { background: var(--lateral-activo-bg); color: var(--lateral-activo); font-weight: 600; }
/* Contador de pendientes junto a una sección (sugerencias nuevas) */
.insignia { margin-left: auto; min-width: 1.4rem; padding: .05rem .45rem; border-radius: 999px; background: var(--logo-3); color: #1c1c1c; font-size: .75rem; font-weight: 700; text-align: center; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; padding: .65rem 1.5rem; background: var(--panel); border-bottom: 1px solid var(--borde); }
.btn-menu { display: none; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: var(--panel); color: var(--texto); cursor: pointer; }
.btn-menu .ico { width: 20px; height: 20px; }
.sesion { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.sesion form { margin: 0; }
.btn-sesion { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; color: var(--texto); text-decoration: none; font-weight: 500; }
.btn-sesion:hover { background: var(--primario-tenue); }
.btn-salir { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.05rem; border: 0; border-radius: 999px; background: var(--texto); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.btn-salir:hover { background: var(--primario-osc); }

@media (min-width: 1024px) {
  body.con-lateral { padding-left: var(--ancho-lateral); }
}
@media (max-width: 1023.98px) {
  .lateral { width: min(280px, 85vw); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
  .menu-abierto .lateral { transform: none; visibility: visible; }
  .menu-abierto::before { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(14, 20, 17, .5); }
  .btn-menu { display: inline-grid; }
  .topbar { padding: .6rem 1rem; gap: .6rem; }
}
@media (max-width: 600px) {
  .btn-sesion .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .btn-sesion { padding: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .lateral { transition: none; } }

.contenido { max-width: 1400px; margin: 0 auto; padding: 1.4rem 1.5rem 3rem; min-width: 0; }
.contenido-login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }

/* Encabezado de página: panel oscuro de marca; todo lo que lleva dentro se recolorea para el fondo oscuro */
.encabezado { margin: 0 0 1.2rem; padding: 1.3rem 1.6rem; border-radius: 18px; background: linear-gradient(120deg, var(--hero-desde), var(--hero-hasta)); color: var(--hero-texto); }
.encabezado h1 { font-size: 1.65rem; }
.encabezado p { margin: .2rem 0; color: var(--hero-suave); }
.encabezado .sub, .encabezado .estados { color: var(--hero-suave); }
.encabezado a:not(.btn) { color: var(--hero-enlace); }
.encabezado .barra-acciones { margin-top: 0; }
.encabezado.fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.volver { font-size: .85rem; text-decoration: none; }
.estados { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .9rem; color: var(--suave); }
@media (max-width: 600px) {
  .encabezado { padding: 1rem 1.1rem; border-radius: var(--radio); }
  .encabezado h1 { font-size: 1.35rem; }
}

/* Tarjetas */
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem 1.3rem; margin-bottom: 1rem; box-shadow: var(--sombra); }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.tarjeta-cab h2 { margin: 0; }
.vacio { color: var(--suave); font-style: italic; }
.nota { color: var(--suave); font-size: .9rem; }

/* Login */
.login-caja { width: 100%; max-width: 400px; }
.login-marca { text-align: center; margin-bottom: 1rem; }
.login-marca img { width: 112px; height: 112px; border-radius: 22px; box-shadow: var(--sombra); }
.login-marca p { color: var(--suave); margin: .2rem 0 0; }
.form-login { display: grid; gap: .9rem; padding: 1.5rem; }
.error-caja { max-width: 560px; margin: 3rem auto; text-align: center; }

/* Formularios */
label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 600; color: #34434e; }
input, select, textarea { font: inherit; padding: .5rem .65rem; border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: #fff; color: var(--texto); width: 100%; font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario-foco); border-color: var(--primario); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; align-items: end; }
.busqueda { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; }
.busqueda label { min-width: 160px; }
.busqueda .grow { flex: 1; min-width: 240px; }
.ayuda-totales { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.barra-acciones { display: flex; justify-content: flex-end; gap: .7rem; margin-top: .8rem; flex-wrap: wrap; }
.archivo input { padding: .6rem; background: #fafbfc; border-style: dashed; }
.form-decision label { margin-bottom: .2rem; }
.falta-paso { margin: 0 auto 0 0; align-self: center; color: var(--aviso-texto); }
/* Revisión en tres pasos (CS-06/09): diferencias con Compras → Prevalidar → Validar */
.pasos { display: flex; gap: .5rem; list-style: none; padding: 0; margin: .2rem 0 1rem; flex-wrap: wrap; }
.pasos li { display: flex; align-items: center; gap: .5rem; color: var(--suave); }
.pasos li + li::before { content: ''; width: 28px; height: 1px; background: var(--borde-control); margin-right: .2rem; }
.pasos .num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--borde-control); font-size: .8rem; }
.pasos .actual { color: var(--texto); font-weight: 600; }
.pasos .actual .num { border: 2px solid var(--primario); color: var(--primario); }
.pasos .hecho .num { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-texto); }
.tabla-diferencias { table-layout: fixed; min-width: 640px; }
.tabla-diferencias .c-estado { width: 40px; } .tabla-diferencias .c-concepto { width: 26%; } .tabla-diferencias .c-valor { width: 15%; }
.tabla-diferencias td { border-bottom: 0; vertical-align: middle; overflow-wrap: anywhere; }
.tabla.tabla-diferencias .n { white-space: normal; }
.tabla-diferencias tbody { border-bottom: 1px solid var(--borde); }
.tabla-diferencias .dif { color: var(--aviso-texto); }
.tabla-diferencias tbody.aprobada .dif { color: var(--suave); }
.tabla-diferencias tbody.no-aprobada .dif { color: var(--falla); }
.tabla-diferencias .resultado-dif { display: inline-block; margin-bottom: .2rem; }
.tabla-diferencias .fila-form td { padding-top: 0; }
.mini.aviso { background: var(--aviso); }
.form-diferencia { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .3rem 0; }
.form-diferencia .check { display: flex; gap: .4rem; align-items: center; white-space: nowrap; }
.form-diferencia .check input { width: auto; }
.form-diferencia select { width: 210px; }
.form-diferencia input[name=comentario] { flex: 1 1 160px; width: auto; }
.form-diferencia button { margin-left: auto; }
.tabla-diferencias details summary, .plegado summary { cursor: pointer; color: var(--primario); }
.plegado { margin-bottom: .4rem; }
.condiciones { list-style: none; padding: 0; margin: .3rem 0 .6rem; }
.condiciones li { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.condiciones li.falta { color: var(--suave); }
#resultado { margin-top: .8rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .5rem 1rem; border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: #fff; color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #f1f4f6; }
.btn-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-primario:hover { background: var(--primario-osc); }
.btn-peligro { background: #fff; border-color: var(--falla); color: var(--falla); }
.btn-peligro:hover { background: var(--falla-bg); }
.btn.ocupado { opacity: .7; cursor: progress; }
.btn-sm { padding: .3rem .65rem; font-size: .82rem; }
.btn-link { background: none; border: 0; color: var(--suave); cursor: pointer; font: inherit; padding: .2rem .4rem; }
.btn-link.quitar:hover { color: var(--falla); }
.acciones { display: flex; gap: .5rem; }
.acciones-fila { display: flex; gap: .5rem; flex-wrap: wrap; }
.acciones-fila form { margin: 0; }
.en-linea { display: flex; gap: .3rem; }
.en-linea input { width: 160px; padding: .3rem .5rem; font-size: .85rem; }

/* Alertas */
.alerta { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid transparent; }
.alerta ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.alerta-ok { background: var(--ok-bg); border-color: #b9e2c6; color: #145c33; }
.alerta-error { background: var(--falla-bg); border-color: #f2c1bb; color: #8e2318; }
.alerta-aviso { background: var(--aviso-bg); border-color: #f3d3a6; color: #7a4306; }
.alerta-info { background: var(--info-bg); border-color: #c8d9f2; color: #1f3f6e; }

/* Tablas */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); background: #f7f9fa; padding: .55rem .6rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: .55rem .6rem; border-bottom: 1px solid #edf0f2; vertical-align: top; }
.tabla tfoot td { border-bottom: 0; background: #fafbfc; }
.tabla .n { text-align: right; white-space: nowrap; }
.tabla .c { text-align: center; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: var(--primario-tenue); }
.tabla .ref { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; color: #3b4a55; }
.tabla .detalle { max-width: 520px; word-break: break-word; }
.tabla.editable td { padding: .3rem; }
.tabla.editable input { padding: .35rem .5rem; }
.tabla.editable input.n { text-align: right; width: 110px; }
.tabla.editable input.ancho { min-width: 240px; }
.importe { padding-top: .7rem !important; }

/* Chips de estado */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Prevalidada en azul: junto a "Entregado" y "Aprobada" (verdes) se leía como validada. */
.chip-prevalidada { background: var(--info-bg); color: #1f4f8e; }
.chip-aprobada { background: var(--ok-bg); color: var(--ok-texto); }
.chip-con_diferencias { background: var(--aviso-bg); color: var(--aviso-texto); }
.chip-rechazada { background: var(--falla-bg); color: var(--falla); }
.chip-vencida { background: var(--aviso-bg); color: var(--aviso-texto); }
.chip-pendiente { background: #eef1f4; color: #55636e; }
.chip-entrega-parcial { background: var(--info-bg); color: #1f4f8e; }
.chip-entrega-total { background: #eef1f4; color: #55636e; }
.pendientes-parcial ul { margin: .35rem 0 0; padding-left: 1.2rem; }
/* Cruce con la OC (CS-08): Conciliada / Con diferencia; el estatus del documento usa las clases de arriba. */
.chip-cruce-prevalidada { background: var(--primario-claro); color: var(--primario-osc); }
.chip-cruce-con_diferencias { background: var(--aviso-bg); color: var(--aviso-texto); }
.chip-cerrada { background: #eef1f4; color: #55636e; margin-left: .4rem; }

/* Checklist */
.marcador { display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.marcador strong { font-size: 1.4rem; }
.marcador.prevalidada strong { color: var(--ok); }
.marcador.con_diferencias strong { color: var(--aviso); }
.barra { height: 8px; background: #edf0f2; border-radius: 99px; overflow: hidden; margin-bottom: 1rem; }
.barra span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .4s; }
.barra-prevalidada { background: var(--ok); }
.barra-con_diferencias { background: var(--aviso); }
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .7rem; }
.lista-check li { display: flex; gap: .7rem; padding: .7rem .8rem; border-radius: 8px; border: 1px solid; }
.lista-check li.ok { background: #f4fbf6; border-color: #cbe9d4; }
.lista-check li.falla { background: #fff6f4; border-color: #f2c9c3; }
.lista-check li.omitido { background: #f6f6f6; border-color: #dddddd; color: #555; }
.icono { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .85rem; }
li.ok .icono { background: var(--ok); }
li.falla .icono { background: var(--falla); }
li.omitido .icono { background: #9aa5ad; }
.check-titulo { font-weight: 700; }
.check-valores { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .85rem; color: #34434e; }
.check-detalle { font-size: .8rem; color: var(--suave); margin-top: .15rem; }
.mini { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .75rem; font-weight: 700; color: #fff; }
.mini.ok { background: var(--ok); }
.mini.falla { background: var(--falla); }
.fila-dif td { background: #fffaf8; }
tr.notas td { background: #fff6f4; color: #8e2318; font-size: .82rem; padding-top: .3rem; }
.falla-txt { color: var(--falla); font-weight: 600; }
.totales { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: flex-end; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--borde); }
.totales div { display: flex; flex-direction: column; align-items: flex-end; }
.totales span { font-size: .75rem; color: var(--suave); text-transform: uppercase; }

/* Datos clave */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem 1rem; margin: 0 0 1rem; }
.datos dt { font-size: .72rem; text-transform: uppercase; color: var(--suave); letter-spacing: .03em; }
.datos dd { margin: 0; font-weight: 500; }

/* Vista lado a lado */
.pestanas { display: flex; gap: .3rem; margin-bottom: .6rem; }
.pestana { border: 1px solid var(--borde); background: #fff; padding: .4rem .9rem; border-radius: var(--radio-control); cursor: pointer; font: inherit; font-size: .88rem; }
.pestana.activa { background: var(--primario-claro); border-color: var(--primario-borde); color: var(--primario-osc); font-weight: 600; }
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lado-a-lado .tarjeta { margin-bottom: 0; min-width: 0; }
.lado-a-lado .doc-original { grid-column: 1 / -1; }
.lado-a-lado.solo-original .doc-oc, .lado-a-lado.solo-original .doc-factura { display: none; }
.lado-a-lado + .tarjeta { margin-top: 1rem; }
.visor { width: 100%; height: 75vh; border: 1px solid var(--borde); border-radius: 8px; }
.visor-img { max-width: 100%; border: 1px solid var(--borde); border-radius: 8px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem; border-left: 4px solid #9aa8b2; box-shadow: var(--sombra); }
.kpi span { display: block; font-size: .8rem; color: var(--suave); }
.kpi b { font: 700 1.6rem/1.3 var(--fuente-titulos); }
.kpi.ok { border-left-color: var(--ok); }
.kpi.aviso { border-left-color: var(--aviso); }
.kpi.falla { border-left-color: var(--falla); }
/* Tarjetas que filtran las tablas (inicio del proveedor, CS-13). */
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { background: var(--primario-tenue); }
a.kpi.activa { background: var(--primario-claro); box-shadow: 0 0 0 2px var(--primario); }
a.kpi:focus-visible { outline: 3px solid var(--primario-foco); outline-offset: 2px; }

details summary { cursor: pointer; color: var(--primario); margin: .6rem 0; }

@media (max-width: 960px) {
  .lado-a-lado { grid-template-columns: 1fr; }
  .contenido { padding: 1rem; }
}

/* Carga de factura PDF */
.zona-pdf { display: grid; gap: .3rem; padding: 1.4rem; border: 2px dashed var(--primario-borde); border-radius: 10px; background: var(--primario-tenue); text-align: center; justify-items: center; cursor: pointer; }
.zona-pdf:hover { background: var(--primario-claro); }
.zona-titulo { font-size: 1rem; color: var(--primario-osc); }
.zona-pdf input { max-width: 360px; background: #fff; }
.subir { display: grid; gap: .9rem; }
.titulo-seccion { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin: 0 0 .5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.totales-form { margin-top: 1rem; }
.revisar { margin-bottom: 0; }
.revisar .visor { height: 680px; }
.tabla.editable.compacta input.n { width: 84px; }
.tabla.editable.compacta input.ancho { min-width: 170px; }
.chip-leido { background: var(--info-bg); color: #1f4f8e; }
.chip-ocr { background: var(--info-bg); color: #1f4f8e; }
.revisar .visor-img { display: block; max-height: 680px; width: auto; max-width: 100%; }
.lectura.con-ediciones { border-color: #f3d3a6; }
.lista-simple { margin: .3rem 0; padding-left: 1.2rem; font-size: .88rem; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr; } }
.tabla.editable.compacta td:first-child input { min-width: 150px; }

/* Empresa del usuario y notificación de entrega */
.usuario-sesion { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.usuario-sesion b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-sesion small { font-size: .78rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-chip { display: inline-block; vertical-align: middle; margin-left: .6rem; padding: .2rem .7rem; border-radius: 999px; background: var(--primario-claro); color: var(--primario-osc); font-size: .85rem; font-weight: 600; }
fieldset.entrega { border: 1px solid var(--borde); border-radius: 10px; padding: .8rem 1rem 1rem; margin: 0; }
fieldset.entrega legend { font-weight: 700; padding: 0 .4rem; color: var(--primario-osc); }
/* Interruptores bloquea / solo alerta de Administración → Parámetros */
fieldset.interruptores { grid-column: 1 / -1; display: grid; gap: .55rem; border: 1px solid var(--borde); border-radius: 10px; padding: .8rem 1rem 1rem; margin: 0; }
fieldset.interruptores legend { font-weight: 700; padding: 0 .4rem; color: var(--primario-osc); }
.interruptor { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.interruptor input[type=checkbox] { appearance: none; flex: none; width: 2.4rem; height: 1.35rem; margin: 0; border-radius: 999px; background: var(--borde); position: relative; cursor: pointer; transition: background .15s; }
.interruptor input[type=checkbox]::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff; transition: transform .15s; }
.interruptor input[type=checkbox]:checked { background: var(--primario); }
.interruptor input[type=checkbox]:checked::after { transform: translateX(1.05rem); }
.interruptor input[type=checkbox]:focus-visible { outline: 2px solid var(--primario-osc); outline-offset: 2px; }
/* Tiendas de un validador (alta y edición en Administración › Usuarios) */
.casillas { border: 1px solid var(--borde); border-radius: 10px; padding: .5rem .8rem .7rem; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.casillas legend { font-size: .85rem; font-weight: 600; color: #34434e; padding: 0 .3rem; }
.casillas label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; white-space: nowrap; }
.casillas input { width: auto; margin: 0; }
.grid-4 .tiendas-alta { grid-column: 1 / -1; }
.tiendas-validador summary { margin: 0; }
.perfil-lectura summary { margin: 0; white-space: nowrap; }
.perfil-lectura label { margin-top: .4rem; min-width: 180px; }
.chip-tiendas { white-space: normal; max-width: 100%; }
.tiendas-validador form { display: grid; gap: .5rem; justify-items: start; margin-top: .4rem; min-width: 240px; }
.alerta-titulo { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
input[readonly] { background: #f1f4f6; color: var(--suave); }

/* Ventana emergente de alerta */
.modal { border: 0; border-radius: 14px; padding: 1.6rem 1.8rem 1.2rem; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 20px 50px rgba(16, 24, 40, .25); color: var(--texto); border-top: 6px solid var(--falla); }
.modal::backdrop { background: rgba(16, 24, 40, .55); }
.modal h2 { color: var(--falla); font-size: 1.25rem; margin: .3rem 0 .6rem; }
.modal ul { margin: .2rem 0 .6rem; padding-left: 1.2rem; color: #8e2318; }
.modal-icono { width: 44px; height: 44px; border-radius: 50%; background: var(--falla-bg); color: var(--falla); display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; }

/* Alerta crítica (no bloquea el proceso) */
.alerta-critica { background: #fff1f0; border: 2px solid var(--falla); border-radius: var(--radio); padding: .9rem 1.1rem; margin-bottom: 1rem; color: #7f1d14; }
.alerta-critica-cab { display: flex; align-items: center; gap: .6rem; }
.alerta-critica h2 { margin: 0; font-size: 1.05rem; color: var(--falla); }
.alerta-critica ul { margin: .5rem 0 .3rem; padding-left: 1.4rem; }
.alerta-critica-icono { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--falla); color: #fff; font-weight: 800; flex: none; }
.chip-critica { background: var(--falla); color: #fff; margin-left: .4rem; }
.kpi.critica { border-left-color: var(--falla); }
.kpi.critica b { color: var(--falla); }
.modal-critica { border-top-color: #e5484d; }

/* Revisión de solo lectura */
.solo-lectura input[readonly] { background: #f7f9fa; color: var(--texto); cursor: text; }
.tabla.copiable td { user-select: text; }
.copiable td, .copiable dd, .copiable input[readonly] { cursor: copy; transition: background .2s; }
.copiable td:hover, .copiable dd:hover, .copiable input[readonly]:hover { background: var(--primario-claro); }
.copiable .copiado { background: #c9ecd9 !important; outline: 2px solid var(--ok); }
.copiar-barra { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .6rem; }

/* Fecha de cita (proveedor) */
.cita { display: inline-block; padding: .15rem .55rem; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.cita-ok { background: var(--ok-bg); color: var(--ok-texto); border: 1px solid #b9e2c6; }
.cita-excedida { background: var(--falla-bg); color: var(--falla); border: 1px solid #f2c1bb; }
.input-cupo { width: 110px; text-align: right; }
.aviso-campo { display: block; margin-top: .25rem; color: var(--falla); font-size: .82rem; font-weight: normal; }
.tabla-tiendas input, .tabla-tiendas select, .tabla-editable input { width: 100%; min-width: 110px; padding: .3rem .5rem; font-size: .85rem; }

/* Tablero de citas (gestor) */
.filtro-citas { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.filtro-citas input, .filtro-citas select { width: auto; padding: .35rem .5rem; }
.contadores-citas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: .8rem; }
.contador { background: #0f1b24; color: #fff; border-radius: var(--radio); padding: .9rem 1.1rem; }
.contador span { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.contador b { font: 700 2.6rem/1.1 ui-monospace, Menlo, Consolas, monospace; }
.contador.asignadas b { color: #ffd23f; }
.contador.disponibles b { color: #4ade80; }
.contador.cupo b { color: #e2e8f0; }
.resumen-dia { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-bottom: .8rem; }
.contador span em { float: right; font-style: normal; color: #4ade80; font-weight: 700; }
.contador small { display: block; margin-top: .2rem; font-size: .85rem; opacity: .85; }
.contador .barra { background: #22313d; margin: .6rem 0 0; }
.contador.esperado b { color: #e2e8f0; }
.contador.recibido b { color: #4ade80; }
.cupos-sucursal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.cupo-sucursal { background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .8rem; }
.cupo-sucursal.excedido { border-color: var(--falla); }
.cupo-sucursal .barra { margin: .4rem 0 .25rem; }
.cupo-cab { display: flex; justify-content: space-between; gap: .5rem; }
.tablero { background: #0b141b; border-radius: 12px; overflow: hidden; color: #f5f7fa; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.tablero-cab, .tablero-pie { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1.1rem; background: #111f29; font-family: ui-monospace, Menlo, Consolas, monospace; }
.tablero-titulo { color: #ffd23f; font-weight: 700; letter-spacing: .12em; }
.tablero-reloj { color: #ffd23f; font-size: 1.3rem; font-weight: 700; }
.tablero-pie { font-size: .8rem; color: #94a3b8; }
.tablero-tabla { overflow-x: auto; }
.tablero table { width: 100%; border-collapse: collapse; }
.tablero th { text-align: left; font: 600 .72rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; padding: .6rem .9rem; border-bottom: 1px solid #22313d; }
.tablero td { padding: .65rem .9rem; border-bottom: 1px solid #1a2833; font-size: .95rem; text-transform: uppercase; }
.tablero tbody tr:nth-child(even) td { background: #0f1a22; }
.tablero .n { text-align: right; }
.tablero .mono { font-family: ui-monospace, Menlo, Consolas, monospace; color: #ffd23f; }
.tablero-vacio { text-align: center; color: #94a3b8; padding: 2rem !important; letter-spacing: .15em; }
.tablero-estado { font: 700 .78rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; padding: .2rem .5rem; border-radius: 4px; }
.tablero-estado.ok { color: #0b141b; background: #4ade80; }
.tablero-estado.aviso { color: #0b141b; background: #fbbf24; }
@media (max-width: 760px) { .contadores-citas, .resumen-dia { grid-template-columns: 1fr; } }
.tablero-estado.sobre { color: #fff; background: #ef4444; }
.tablero tr.sobrecupo td { box-shadow: inset 0 -1px 0 #7f1d1d; }
.tablero tr.sobrecupo td:first-child { border-left: 4px solid #ef4444; }
.tablero .mono { white-space: nowrap; }
.btn[disabled] { opacity: 1; cursor: not-allowed; background: #eef1f4; border-color: #d5dce2; color: #7a8790; }

/* Panel de cupos del gestor */
.panel-cupos { margin-top: 1rem; }
.tabla-cupos .input-cupo { width: 80px; text-align: center; }
.tabla-cupos .input-dia { width: 64px; text-align: center; padding: .3rem .25rem; }
.tabla-cupos .input-dia.con-excepcion { font-weight: 700; border-color: var(--primario); }
.tabla-cupos .cupo-fijo { min-width: 0; }
.fila-propia td { background: var(--primario-tenue); }
.cupo-fijo { display: inline-block; min-width: 90px; text-align: center; font-weight: 700; color: var(--suave); }

/* Calendario de cupos por fecha (receptor y administrador) */
.niveles-cupo { margin: .2rem 0 .6rem; padding-left: 1.3rem; }
.meses-cupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 1rem; }
.calendario-cupos { table-layout: fixed; min-width: 500px; }
.calendario-cupos caption { text-align: left; font-weight: 700; padding: .3rem 0 .5rem; }
.calendario-cupos caption::first-letter { text-transform: uppercase; }
.calendario-cupos td { padding: .35rem .3rem; border: 1px solid #edf0f2; }
.dia-num { display: block; font-size: .78rem; color: var(--suave); }
.dia-efectivo { display: block; white-space: nowrap; }
.dia-efectivo .sub { font-size: .72rem; }
.dia-cupo .input-dia { width: 100%; text-align: center; padding: .25rem .2rem; margin-top: .2rem; }
.dia-cupo .input-dia.con-excepcion { font-weight: 700; border-color: var(--primario); }
.dia-cupo.fuente-fecha { background: var(--primario-claro); }
.dia-cupo.fuente-feriado { background: #eef1f4; }
.dia-cupo.pasado { background: #f7f9fa; }
.dia-cupo.es-hoy .dia-num { color: var(--primario-osc); font-weight: 700; }

/* Calendario de disponibilidad al pedir la cita (proveedor) */
.cal-entrega { margin-top: .8rem; }
.cal-meses { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.cal-mes { flex: 1 1 15rem; max-width: 20rem; }
.cal-titulo { margin: 0 0 .3rem; font-weight: 700; font-size: .9rem; }
.cal-titulo::first-letter { text-transform: uppercase; }
.cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; }
.cal-sem { text-align: center; font-size: .72rem; color: var(--suave); }
.cal-dia { font: inherit; font-size: .82rem; padding: .3rem 0; border: 1px solid transparent; border-radius: 6px; cursor: pointer; background: #fff; color: var(--texto); }
.cal-dia[disabled] { cursor: not-allowed; background: transparent; color: #8a969f; }
.cal-dia[aria-pressed="true"] { outline: 2px solid var(--primario-osc); outline-offset: 1px; font-weight: 700; }
.nivel-disponible { background: var(--ok-bg); color: var(--ok-texto); border-color: #b9e2c7; }
.nivel-limitada { background: var(--aviso-bg); color: var(--aviso-texto); border-color: #f3d3a6; }
.nivel-sin_cupo { background: var(--falla-bg); color: #a93226; border-color: #f2b8b0; }
.nivel-feriado { background: #eef1f4; color: #55636e; border-color: #ccd1ce; text-decoration: line-through; }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; padding: 0; margin: .5rem 0 0; font-size: .8rem; }
.cal-muestra { display: inline-block; width: .9rem; height: .9rem; border: 1px solid; border-radius: 3px; vertical-align: -2px; margin-right: .3rem; }
.aviso-sin-cupo { margin: .6rem 0 0; }

/* Marca de llegada de la entrega (gestor de citas) */
.marcar-llegada { display: inline-flex; gap: .35rem; }
.btn-llegada { font: 700 .78rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; padding: .35rem .6rem; border-radius: 5px; cursor: pointer; background: transparent; white-space: nowrap; }
.btn-llegada.llego { color: #4ade80; border: 1px solid #2f6b45; }
.btn-llegada.no-llego { color: #f87171; border: 1px solid #7f1d1d; }
.btn-llegada.llego.activo { background: #22c55e; border-color: #22c55e; color: #052e14; }
.btn-llegada.no-llego.activo { background: #ef4444; border-color: #ef4444; color: #fff; }
.btn-llegada:hover:not(.activo) { background: rgba(255,255,255,.08); }
.btn-llegada.atencion { color: #fbbf24; border: 1px solid #854d0e; }
.btn-llegada.deshacer { color: #cbd5e1; border: 1px solid #475569; font-weight: 600; }
.marcar-llegada { vertical-align: middle; }
.tablero tr.recepcion-en_atencion td { background: rgba(251, 191, 36, .14) !important; }
.tablero tr.llegada-llego td { background: rgba(34, 197, 94, .14) !important; }
.tablero tr.llegada-no_llego td { background: rgba(239, 68, 68, .16) !important; }
.tablero-estado.pend { color: #cbd5e1; background: #334155; }
.llegada-detalle, .recepcion-rio { font-size: .7rem; color: #94a3b8; margin-top: .25rem; text-transform: none; }
.tablero-pie .t-ok { color: #4ade80; } .tablero-pie .t-no { color: #f87171; }
.chip-entregado { background: var(--ok-texto); color: #fff; }
.chip-no-entregado { background: var(--falla); color: #fff; }
.chip-entregado::before, .chip-no-entregado::before { display: none; }

/* Paginación y submenú de administración */
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.paginacion .paginas { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.paginacion .activa { background: var(--primario-claro); border-color: var(--primario-borde); color: var(--primario-osc); cursor: default; }
.submenu { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.submenu a { padding: .4rem .9rem; border: 1px solid var(--borde); border-radius: var(--radio-control); background: #fff; color: var(--texto); text-decoration: none; font-size: .9rem; }
.submenu a.activo { background: var(--primario-claro); border-color: var(--primario-borde); color: var(--primario-osc); font-weight: 600; }
.submenu a .sub { margin-left: .25rem; }

/* Reportes */
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 1rem; }
.graficos .tarjeta { margin-bottom: 0; min-width: 0; }
.grafico { height: 320px; width: 100%; }
.kpi .variacion { display: block; font-size: .78rem; font-weight: 600; color: var(--suave); }
.kpi .variacion.bueno { color: var(--ok-texto); }
.kpi .variacion.malo { color: var(--falla); }
.kpi .detalle { display: block; font-size: .78rem; color: var(--suave); }
.graficos.indicadores { margin-bottom: 1rem; }
.sin-corte { white-space: nowrap; }
.filtro-activo { margin: .6rem 0 0; }
.chip-filtro { background: var(--primario-claro); color: var(--primario-osc); }
.chip-filtro a { color: inherit; text-decoration: none; margin-left: .2rem; }
.tabla tr.seleccionada td { background: var(--primario-claro); }
#scorecard { margin-top: 1rem; }
/* Fila de KPIs de las pestañas: tarjetas más anchas para que 10 queden en dos filas parejas */
#kpis { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.kpi .meta-kpi { display: block; font-size: .78rem; color: var(--suave); }
.meta-kpi.ok strong { color: var(--ok-texto); }
.meta-kpi.aviso strong { color: var(--aviso-texto); }
.meta-kpi.falla strong { color: var(--falla); }
.tabla .variacion { font-size: .8rem; font-weight: 600; }
.tabla .variacion.bueno { color: var(--ok-texto); }
.tabla .variacion.malo { color: var(--falla); }
.texto-falla { color: var(--falla); font-weight: 600; }
.chip-p1 { background: var(--falla-bg); color: var(--falla); }
.chip-p2 { background: var(--aviso-bg); color: var(--aviso-texto); }
.chip-p3 { background: #eef1f4; color: #55636e; }
#bandeja, #mapa-cupos, #puntaje { margin-bottom: 1rem; }
/* Mapa de calor de cupos: tonos de ocupación con contraste AA para el texto */
.leyenda-mapa { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.leyenda-mapa .celda-mapa { padding: .15rem .5rem; border-radius: 5px; font-size: .78rem; }
.mapa-cupos th[scope=row] { text-align: left; white-space: nowrap; }
.mapa-cupos td.celda-mapa { text-align: center; min-width: 3.2rem; font-size: .8rem; }
.celda-mapa.n1 { background: var(--mapa-1); }
.celda-mapa.n2 { background: var(--mapa-2); }
.celda-mapa.n3 { background: var(--mapa-3); }
.celda-mapa.n4 { background: var(--mapa-4); color: #fff; }
.celda-mapa.sobre { background: var(--falla); color: #fff; font-weight: 700; }
.celda-mapa.cerrado { background: #f4f6f8; color: var(--suave); }

/* Doble factor */
.login-caja-ancha { max-width: 460px; }
.login-cancelar { text-align: center; margin-top: .6rem; }
.input-codigo { font: 600 1.3rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .25em; text-align: center; }
.pasos-mfa { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .92rem; }
.mfa-qr { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.mfa-qr img { border: 1px solid var(--borde); border-radius: 8px; background: #fff; padding: 6px; }
.mfa-secreto { font: 600 .95rem/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; background: #f1f4f6; border-radius: 6px; padding: .35rem .6rem; overflow-wrap: anywhere; }
.mfa-codigos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .8rem; }
.mfa-codigos code { font: 600 1rem/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }
.estado-mfa { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.form-mfa { display: grid; gap: .8rem; max-width: 420px; }
.acciones-mfa { margin-top: 1rem; gap: 1.5rem; align-items: start; }
/* Semáforo de entregas (el texto dice el nivel: no depende solo del color) */
.chip-semaforo-rojo { background: var(--falla-bg); color: var(--falla); }
.chip-semaforo-amarillo { background: var(--aviso-bg); color: var(--aviso-texto); }
.chip-semaforo-verde { background: var(--ok-bg); color: var(--ok-texto); }
.chip-notificacion-enviada { background: var(--ok-bg); color: var(--ok-texto); }
.chip-notificacion-error { background: var(--falla-bg); color: var(--falla); }
.chip-notificacion-pendiente, .chip-notificacion-sin_transporte { background: #eef1f4; color: #55636e; }

/* Unidades recibidas (recepción) */
.recibido-resumen { font-size: .7rem; color: #94a3b8; margin-top: .25rem; text-transform: none; }
.recibido-resumen { color: #4ade80; }
.recibido-resumen.con-diferencia { color: #fbbf24; font-weight: 700; }
.btn-llegada.registrar { display: inline-block; margin-top: .35rem; color: #93c5fd; border: 1px solid #1e3a8a; text-decoration: none; }
.recibido-cifra.con-diferencia, .tabla tr.con-diferencia td { background: var(--aviso-bg); color: var(--aviso-texto); }
.tabla.recepcion input.n { text-align: right; width: 110px; }

/* Sugerencias y reportes de problemas (CS-17) */
.form-feedback { display: grid; gap: .9rem; max-width: 720px; }
.form-feedback fieldset { display: flex; gap: 1.2rem; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.form-feedback fieldset label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.form-feedback fieldset input { width: auto; }
.texto-feedback { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 16rem; max-width: 40rem; }
.form-estado-feedback { display: grid; gap: .4rem; min-width: 14rem; }
.form-estado-feedback textarea { min-height: 3.2rem; }
.chip-feedback-nuevo { background: var(--aviso-bg); color: var(--aviso-texto); }
.chip-feedback-en_revision { background: var(--info-bg); color: #1f4f8e; }
.chip-feedback-resuelto { background: var(--ok-bg); color: var(--ok-texto); }
@media (max-width: 1200px) { .btn-feedback .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .btn-feedback { padding: .5rem; } }