/*
 * RFL Cargo — hoja de estilos compartida del panel y de las páginas de validación.
 *
 * Consolida las variables y clases que hasta ahora vivían duplicadas (casi idénticas)
 * en <style> inline dentro de:
 *   - facturacion_usa/templates/facturacion_usa/base.html
 *   - core/templates/core/base_shell.html
 *   - facturacion_usa/templates/facturacion_usa/panel/login.html
 *
 * No se ha cambiado ningún valor existente: es una consolidación, no un rediseño.
 * Las clases nuevas (marcadas como tal) siguen la paleta ya definida abajo.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  --petrol:#00567d; --petrol-dark:#004869; --petrol-pale:#e8f2f8; --petrol-line:#bcd4e2;
  --orange:#e57f22; --orange-dark:#9a4e0c;

  --ink:#171c21; --ink-soft:#39424b; --muted:#67727e; --muted-soft:#8c98a5;
  --line:#d9dfe6; --line-soft:#e9edf2;
  --surface:#ffffff; --surface-alt:#f4f6f9; --page:#fafbfc;
  --navy:#002335;

  --success-bg:#f4f9e4; --success-border:#cde68a; --success-fg:#5e7c11;
  --warning-bg:#fdf2e7; --warning-border:#f6c28b; --warning-fg:#9a4e0c;
  --danger-bg:#fdedec;  --danger-border:#f4aaa6;  --danger-fg:#98201b;
  --info-bg:#e8f2f8;    --info-border:#bcd4e2;    --info-fg:#004869;

  --font-sans:"Archivo","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
  --shadow-xs:0 1px 1px rgba(0,34,53,.04),0 0 0 1px rgba(0,34,53,.04);
  --shadow-sm:0 1px 2px rgba(0,34,53,.06),0 1px 3px rgba(0,34,53,.05);
  --shadow-md:0 2px 4px rgba(0,34,53,.05),0 6px 16px -4px rgba(0,34,53,.10);
}

/* ==========================================================================
   Reset base
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-sans); color:var(--ink); background:var(--page); -webkit-font-smoothing:antialiased}
/* panel/base_panel.html: <body> es el flex row de nav + main. base.html usa .shell
   internamente y no tiene <nav> como hijo directo, así que no le afecta esta regla. */
body:has(> nav){display:flex; min-height:100vh}
h1,h2,h3{font-family:var(--font-sans); margin:0}
a{color:var(--petrol)}
p{margin:0}

/* ==========================================================================
   Marca / topbar (base.html) — usada también por panel vía topbar_titulo/subtitulo
   ========================================================================== */
.shell{min-height:100vh; display:flex; flex-direction:column}
.topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:16px 28px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.topbar-left{display:flex; align-items:center; gap:16px; min-width:0}
.topbar-titles h1{font-size:18px; font-weight:700; color:var(--ink); line-height:1.25}
.topbar-titles .sub{margin-top:2px; font-size:13px; color:var(--muted)}
.topbar-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.brand{display:flex; align-items:baseline; gap:6px; flex:none}
.brand .mark{font-family:var(--font-sans); font-weight:800; font-size:19px; color:var(--petrol); letter-spacing:-.01em}
.brand .sub{font-family:var(--font-sans); font-weight:700; font-size:10px; letter-spacing:.14em; color:var(--orange); text-transform:uppercase}

/* NUEVO: <img> del logotipo en la topbar/nav (logo.png ya trae su propio fondo blanco,
   se coloca tal cual, sin placa ni contenedor extra). */
img.brand-logo{height:44px; width:auto; display:block}

/* NUEVO: indicador de usuario logueado */
.user-chip{display:flex; align-items:center; gap:8px}
.user-chip .avatar{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--petrol-pale); color:var(--petrol);
  font-family:var(--font-sans); font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.user-chip .name{font-size:13px; font-weight:600; color:var(--ink)}

/* NUEVO: menú de usuario (dropdown de logout) en la topbar */
.user-menu{position:relative}
.user-menu summary{
  list-style:none; cursor:pointer; padding:4px 6px; border-radius:var(--radius-md);
}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu summary:hover{background:var(--surface-alt)}
.user-menu summary .chev{flex:none; color:var(--muted-soft); transition:transform .15s ease}
.user-menu[open] summary .chev{transform:rotate(180deg)}
.user-menu-panel{
  position:absolute; right:0; top:calc(100% + 6px); min-width:180px; z-index:20;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); padding:6px;
}
.user-menu-panel form{margin:0}
.user-menu-panel button{
  width:100%; display:flex; align-items:center; gap:8px; text-align:left;
  background:transparent; border:none; border-radius:var(--radius-sm); padding:8px 10px;
  font-size:13px; font-family:var(--font-sans); color:var(--ink); cursor:pointer;
}
.user-menu-panel button:hover{background:var(--surface-alt)}
.user-menu-panel button svg{flex:none; color:var(--muted)}

/* NUEVO: buscador de tabla (icono de lupa como <svg> inline a cargo de la plantilla) */
.table-search{
  display:flex; align-items:center; gap:8px; min-width:220px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:0 12px;
}
.table-search:focus-within{border-color:var(--petrol); box-shadow:0 0 0 3px rgba(0,86,125,.15)}
.table-search svg{flex:none; color:var(--muted-soft)}
.table-search input{
  flex:1; border:none; outline:none; background:transparent;
  padding:8px 0; font-size:13.5px; font-family:var(--font-sans); color:var(--ink);
}
.table-search input::placeholder{color:var(--muted-soft)}

/* NUEVO: buscador + rango de fechas de las páginas de listado (Operaciones, Historial) */
.filtros-listado{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.filtro-fecha{
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);
  font-family:var(--font-sans);
}
.filtro-fecha input[type="date"]{
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface);
  padding:6px 8px; font-size:12.5px; font-family:var(--font-sans); color:var(--ink);
}
.btn-filtrar{
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface);
  padding:7px 14px; font-size:12.5px; font-weight:600; font-family:var(--font-sans);
  color:var(--ink); cursor:pointer;
}
.btn-filtrar:hover{background:var(--surface-alt)}

/* NUEVO: paginación de las páginas de listado (Operaciones, Historial) */
.paginacion{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; border-top:1px solid var(--line-soft);
}
.paginacion-info{font-size:12px; color:var(--muted)}
.paginacion-nav{display:flex; gap:8px}
.btn-paginacion{
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface);
  padding:6px 12px; font-size:12.5px; font-weight:600; font-family:var(--font-sans);
  color:var(--ink); text-decoration:none;
}
.btn-paginacion:hover{background:var(--surface-alt)}
.btn-paginacion.disabled{color:var(--muted-soft); cursor:default; opacity:.6}

.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--muted); background:var(--surface-alt); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:5px 12px; white-space:nowrap;
}
.pill svg{flex:none}

/* NUEVO: modificadores de tono sobre .pill (solo color, se combinan con .pill o .status-badge) */
.pill-info{background:var(--info-bg); border-color:var(--info-border); color:var(--info-fg)}
.pill-success{background:var(--success-bg); border-color:var(--success-border); color:var(--success-fg)}
.pill-warning{background:var(--warning-bg); border-color:var(--warning-border); color:var(--warning-fg)}
.pill-danger{background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-fg)}
.pill-neutral{background:var(--surface-alt); border-color:var(--line); color:var(--muted)}

/* NUEVO: estado de la Operación — misma lógica de tono que .pill (combínese con .pill-*) */
.status-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--radius-sm); padding:4px 10px;
}

.main{flex:1; padding:26px 28px 90px}
.main-narrow{max-width:640px; margin:0 auto; padding:56px 20px}

/* ---- centered card screens (confirmación, token inválido) ---- */
.center-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 34px; box-shadow:var(--shadow-md); text-align:center;
}
.center-card .icon{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.center-card .icon.ok{background:var(--success-bg); color:var(--success-fg)}
.center-card .icon.warn{background:var(--warning-bg); color:var(--warning-fg)}
.center-card h1{font-size:22px; margin-bottom:8px}
.center-card .sub{font-size:14px; color:var(--ink-soft); line-height:1.55}
.center-card .sub strong{color:var(--ink); font-weight:700}

/* ---- layout: sidebar + viewer, used by revisar_expediente ---- */
.layout{display:grid; grid-template-columns:380px 1fr; gap:0; align-items:stretch}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
.sidebar{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg) 0 0 var(--radius-lg);
         border-right:none; padding:22px 24px 26px; box-shadow:var(--shadow-sm)}
@media (max-width:900px){.sidebar{border-radius:var(--radius-lg); border-right:1px solid var(--line)}}
.viewer{background:var(--navy); border:1px solid var(--line); border-radius:0 var(--radius-lg) var(--radius-lg) 0;
        min-height:520px; display:flex; flex-direction:column; overflow:hidden}
@media (max-width:900px){.viewer{border-radius:var(--radius-lg); min-height:360px}}
.viewer-head{
  display:flex; justify-content:space-between; gap:12px; padding:12px 18px; font-size:12px;
  color:rgba(255,255,255,.6); border-bottom:1px solid rgba(255,255,255,.12); font-family:var(--font-mono);
}
.viewer-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:rgba(255,255,255,.85)}
.viewer-body p{font-family:var(--font-mono); font-size:13px; color:rgba(255,255,255,.6)}
.viewer .empty{color:rgba(255,255,255,.55); font-size:13px; padding:40px; text-align:center; margin:auto}

.eyebrow{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-soft); margin:22px 0 8px}
.sidebar > .eyebrow:first-child{margin-top:0}
.op-ref{font-family:var(--font-mono); font-size:28px; font-weight:600; letter-spacing:-.02em; color:var(--ink); margin-bottom:16px}

/* table.datos: en el sidebar de revisar_expediente (base.html) */
table.datos{width:100%; border-collapse:collapse; margin:0 0 4px}
table.datos td{padding:7px 0; font-size:13.5px}
table.datos td:first-child{color:var(--muted); width:44%}
table.datos td:last-child{font-family:var(--font-mono); color:var(--ink); text-align:right}
/* table.datos: en el contenido principal del panel (detalle_operacion, base_panel.html) */
main table.datos{margin:16px 0}
main table.datos td{padding:10px 16px}
main table.datos td:first-child{color:var(--muted); width:40%; font-family:var(--font-sans)}
main table.datos td:last-child{font-family:var(--font-mono); text-align:left}

.checks{list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:8px}
.checks li{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink-soft)}
.check-pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.02em;
  border-radius:var(--radius-sm); padding:3px 8px; text-transform:uppercase; flex:none;
}
.check-pill.ok{background:var(--success-bg); color:var(--success-fg); border:1px solid var(--success-border)}
.check-pill.fail{background:var(--danger-bg); color:var(--danger-fg); border:1px solid var(--danger-border)}
/* legacy hooks kept so existing template logic (.check.ok/.check.fail) still renders sensibly */
td.check{font-weight:700; text-align:right}
td.check.ok{color:var(--success-fg)}
td.check.fail{color:var(--danger-fg)}

/* .documentos: versión detallada usada en el sidebar de revisar_expediente (base.html) */
.documentos{list-style:none; padding:0; margin:0 0 4px; display:flex; flex-direction:column; gap:8px}
.documentos li{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:10px 12px;
  display:flex; align-items:flex-start; gap:10px; font-size:13px; background:var(--surface);
}
.doc-num{
  flex:none; width:22px; height:22px; border-radius:var(--radius-sm); background:var(--petrol-pale);
  color:var(--petrol); font-family:var(--font-mono); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.doc-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.doc-body .titulo{display:block; font-weight:600; color:var(--ink); font-size:13.5px}
.doc-body .sub{display:block; color:var(--muted); font-size:12px; font-family:var(--font-mono); word-break:break-word}
.documentos li .tag{
  flex:none; font-size:9.5px; font-weight:700; letter-spacing:.08em; color:var(--muted-soft);
  text-transform:uppercase; margin-top:3px;
}
/* .documentos: versión simple usada en el contenido principal del panel (detalle_operacion) */
main .documentos{margin:16px 0 0; max-width:560px}
main .documentos li{padding:10px 14px; font-size:13.5px; display:block}

.nota{font-size:12.5px; color:var(--muted); line-height:1.5; margin:14px 0}
.descarga a{font-weight:600; text-decoration:none}
.descarga a:hover{text-decoration:underline}

/* ---- manual page selection (mockup 1c) ---- */
.doc-groups{display:flex; flex-direction:column; gap:16px; max-width:760px}
.doc-group{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden}
.doc-group__head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
                  padding:14px 18px; border-bottom:1px solid var(--line-soft); background:var(--surface-alt)}
.doc-group__head strong{font-size:13.5px; color:var(--ink)}
.doc-group__head .filename{font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-left:8px}
.doc-group__head .tag{font-size:9.5px; font-weight:700; letter-spacing:.08em; color:var(--muted-soft); text-transform:uppercase; flex:none}
.paginas{list-style:none; margin:0; padding:6px 8px}
.paginas li{border-top:1px solid var(--line-soft)}
.paginas li:first-child{border-top:none}
.paginas label{display:flex; align-items:center; gap:10px; padding:9px 10px; font-size:13px; color:var(--ink-soft); cursor:pointer; border-radius:var(--radius-sm)}
.paginas label:hover{background:var(--surface-alt)}
.paginas input[type=checkbox]{width:16px; height:16px; accent-color:var(--petrol); flex:none}
.paginas .num{font-family:var(--font-mono); color:var(--muted)}

/* NUEVO: grid de miniaturas de página para la selección manual */
.paginas-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; padding:16px 18px}
.pagina-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs); overflow:hidden;
}
.pagina-thumb{position:relative; background:var(--surface-alt); border-bottom:1px solid var(--line-soft)}
.pagina-thumb::before{
  content:""; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
  border:2.5px solid var(--line); border-top-color:var(--petrol); border-radius:50%;
  animation:girar-miniatura .7s linear infinite;
}
.pagina-thumb.cargada::before{display:none}
.pagina-card img{width:100%; aspect-ratio:3/4; object-fit:contain; display:block}
@keyframes girar-miniatura{to{transform:rotate(360deg)}}
.pagina-card .pie{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; font-size:12px; color:var(--ink-soft);
}
.pagina-card .pie input[type=checkbox]{width:15px; height:15px; accent-color:var(--petrol); flex:none}
.pagina-card.seleccionada{outline:2px solid var(--petrol); outline-offset:-1px; border-color:var(--petrol)}

/* NUEVO: panel lateral con el recuento del expediente final durante la selección manual */
.expediente-final{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:18px 20px; position:sticky; top:20px;
}
.expediente-final .contador{font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--petrol); margin-bottom:10px}
.expediente-final .lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.expediente-final .lista li{font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:8px}

/* NUEVO: filtros por estado dentro de la página de Colas (antes eran las 4 pestañas del sidebar) */
.filtros-cola{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.filtro-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:6px 14px; text-decoration:none;
}
.filtro-pill:hover{background:var(--surface-alt)}
.filtro-pill.activo{background:var(--petrol); border-color:var(--petrol); color:#fff}
.filtro-pill .contador{
  font-family:var(--font-mono); font-size:11px; font-weight:500; border-radius:var(--radius-pill);
  padding:1px 7px; background:var(--surface-alt); color:var(--muted);
}
.filtro-pill.activo .contador{background:rgba(255,255,255,.18); color:#fff}

.aviso{
  display:flex; gap:10px; align-items:flex-start; border-radius:var(--radius-md);
  padding:14px 16px; font-size:13px; line-height:1.5; margin:0 0 20px; max-width:760px;
}
.aviso.warning{background:var(--warning-bg); border:1px solid var(--warning-border); color:var(--warning-fg)}
.aviso.info{background:var(--info-bg); border:1px solid var(--info-border); color:var(--info-fg)}
.aviso.danger{background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger-fg)}
.aviso.success{background:var(--success-bg); border:1px solid var(--success-border); color:var(--success-fg)}
.aviso strong{display:block; margin-bottom:2px; color:inherit}
.aviso .icon{flex:none; margin-top:1px}

.toast-viewport{
  position:fixed; top:20px; right:20px; z-index:1000; display:flex; flex-direction:column;
  gap:10px; max-width:360px; pointer-events:none;
}
.toast{
  display:flex; gap:10px; align-items:flex-start; justify-content:space-between; border-radius:var(--radius-md);
  padding:12px 14px; font-size:13px; line-height:1.5; box-shadow:0 6px 20px rgba(0,0,0,.15);
  pointer-events:auto; opacity:0; transform:translateX(16px);
  transition:opacity .2s ease, transform .2s ease;
}
.toast.toast-visible{opacity:1; transform:translateX(0)}
.toast-warning{background:var(--warning-bg); border:1px solid var(--warning-border); color:var(--warning-fg)}
.toast-info{background:var(--info-bg); border:1px solid var(--info-border); color:var(--info-fg)}
.toast-danger{background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger-fg)}
.toast-success{background:var(--success-bg); border:1px solid var(--success-border); color:var(--success-fg)}
.toast-cerrar{
  background:none; border:none; cursor:pointer; font-size:16px; line-height:1; color:inherit; opacity:.6; padding:0 0 0 8px;
}
.toast-cerrar:hover{opacity:1}

/* NUEVO: línea de tiempo de trazabilidad (hitos de la Operación) */
.timeline{list-style:none; margin:0; padding:0}
.timeline li{position:relative; padding:0 0 18px 22px; border-left:2px solid var(--line-soft)}
.timeline li:last-child{border-left-color:transparent; padding-bottom:0}
.timeline li::before{
  content:""; position:absolute; left:-6px; top:2px; width:10px; height:10px;
  border-radius:50%; background:var(--petrol); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--petrol-line);
}
.timeline .titulo{display:block; font-size:13.5px; font-weight:600; color:var(--ink)}
.timeline .descripcion{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
.timeline .fecha{display:block; font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:4px}

/* ---- action bar ---- */
.actionbar{
  position:sticky; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--line);
  padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.actionbar .nota{margin:0; max-width:560px}
.acciones{display:flex; gap:10px; flex:none}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--radius-md);
  border:1px solid transparent; font-family:var(--font-sans); font-size:14px; font-weight:600;
  cursor:pointer; text-decoration:none; box-shadow:var(--shadow-xs); line-height:1.2;
}
.btn-primario{background:var(--petrol); color:#fff}
.btn-primario:hover{background:var(--petrol-dark)}
.btn-secundario{background:var(--surface); color:var(--ink); border-color:var(--line)}
.btn-secundario:hover{background:var(--surface-alt)}

footer.foot{margin-top:24px; font-size:12px; color:var(--muted-soft); text-align:center}

/* ==========================================================================
   Nav lateral del shell compartido (core/base_shell.html)
   ========================================================================== */
nav{
  width:248px; flex:none; background:var(--navy); color:#fff; display:flex; flex-direction:column; padding:20px 0;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
nav .marca{padding:0 20px 18px; display:flex; align-items:baseline; gap:6px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:16px}
nav .marca a{display:block; line-height:0}
nav .marca .mark{font-weight:800; font-size:17px; color:#fff}
nav .marca .sub{font-weight:700; font-size:9px; letter-spacing:.14em; color:var(--orange); text-transform:uppercase}
nav .grupo-titulo{color:rgba(255,255,255,.4); font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:0 20px; margin:14px 0 8px}
nav .navlist{padding:0 12px; display:flex; flex-direction:column; gap:2px}
nav a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-md);
  color:rgba(255,255,255,.74); text-decoration:none; font-size:14px; font-weight:500;
}
nav a:hover{background:rgba(255,255,255,.06)}
nav a.activo{background:var(--petrol); color:#fff; font-weight:600}
nav a .ico{flex:none; opacity:.9; display:flex}
nav a .lbl{flex:1; min-width:0}
nav a .contador{
  flex:none; font-family:var(--font-mono); font-size:11.5px; font-weight:500; border-radius:var(--radius-pill);
  padding:1px 7px; background:rgba(255,255,255,.14); color:rgba(255,255,255,.74);
}
nav a.activo .contador{background:var(--petrol-pale); color:var(--petrol); border-radius:var(--radius-sm); font-weight:600}
nav .spacer{flex:1}

main{flex:1; padding:30px 36px 60px; min-width:0}
main h1{color:var(--ink); font-size:21px; font-weight:600; margin:0 0 4px}
main .sub{color:var(--muted); font-size:13px; margin-bottom:22px}

/* ==========================================================================
   Tarjetas y tablas del panel (colas, detalle de operación)
   ========================================================================== */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden}

/* NUEVO: cabecera de conteo dentro de .card (colas) */
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--line-soft); background:var(--surface-alt);
}
.card-head .count{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-pill); padding:2px 10px;
}

table{width:100%; border-collapse:collapse}
th,td{padding:11px 16px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--line-soft)}
th{color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em; background:var(--surface-alt)}
tr:last-child td{border-bottom:none}
tr.fila:hover{background:var(--surface-alt)}
a.fila-link{color:var(--ink); text-decoration:none; display:block; font-family:var(--font-mono); font-size:13px}
.vacio{color:var(--muted); font-size:14px; padding:24px 16px}
.check{font-weight:700}
.check.ok{color:var(--success-fg)}
.check.fail{color:var(--danger-fg)}

a.volver{color:var(--muted); font-size:13px; text-decoration:none; display:inline-block; margin-bottom:14px}

/* ==========================================================================
   NUEVO: Estado del sistema (panel/estado_sistema.html)
   ========================================================================== */
.sys-banner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 22px;
  margin:0 0 20px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.sys-banner.operativo{border-top-color:var(--success-fg)}
.sys-banner.caido{border-top-color:var(--danger-fg)}
.sys-banner.sin-datos{border-top-color:var(--petrol)}
.sys-banner h2{font-size:19px; font-weight:600; color:var(--ink); margin:0}
.sys-banner .msg{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-top:6px}
.sys-banner .reloj{text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.sys-banner .reloj .btn-recargar{padding:6px 14px; font-size:12.5px}
.sys-banner .reloj .marca .lbl{display:block; font-size:11px; color:var(--muted-soft)}
.sys-banner .reloj .hora{font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--ink); margin-top:2px}
.sys-banner.caido .reloj .hora{color:var(--danger-fg)}
.sys-banner .reloj .fecha{font-size:11.5px; color:var(--muted); margin-top:2px}

.sys-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px; align-items:stretch}
@media (max-width:1100px){.sys-grid{grid-template-columns:minmax(0,1fr)}}

.sys-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.sys-card__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:13px 18px;
  border-bottom:1px solid var(--line-soft); background:var(--surface-alt);
}
.sys-card__head strong{font-size:13px; color:var(--ink)}
.sys-card__head span{font-size:11.5px; color:var(--muted)}

.chart-lineas{padding:20px 18px 16px; flex:1; min-height:220px; position:relative}

.cifras{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line-soft)}
.cifras div{background:var(--surface); padding:14px 18px; min-width:0}
.cifras .k{font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-soft)}
.cifras .v{font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--ink); margin-top:4px}
.cifras .s{font-size:11.5px; color:var(--muted); margin-top:2px}
.cifras .s a{font-weight:600; color:var(--petrol); text-decoration:none}
.cifras .s a:hover{text-decoration:underline}

.pasos{flex:1; display:flex; flex-direction:column}
.paso{display:grid; grid-template-columns:26px 1fr auto; gap:12px; align-items:center; padding:13px 18px; border-bottom:1px solid var(--line-soft); flex:1}
.paso:last-child{border-bottom:none}
.paso .n{
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--petrol); background:var(--petrol-pale);
  border-radius:var(--radius-sm); width:22px; height:22px; display:flex; align-items:center; justify-content:center;
}
.paso .t{font-size:13.5px; font-weight:600; color:var(--ink)}
.paso .m{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-soft); margin-top:4px}

.atencion{list-style:none; margin:0; padding:0; flex:1; min-height:0; display:flex; flex-direction:column}
.atencion li{display:flex; gap:10px; align-items:flex-start; padding:22px 18px; min-height:101px; border-bottom:1px solid var(--line-soft)}
.atencion li:last-child{border-bottom:none}
.atencion .qty{font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--ink); min-width:22px}
.atencion .txt{font-size:13px; color:var(--ink-soft); line-height:1.45}
.atencion a{font-weight:600; text-decoration:none}
.atencion a:hover{text-decoration:underline}
.atencion li.ok .qty{color:var(--success-fg)}
.atencion li.ok .txt{color:var(--muted)}

table.tareas td{font-size:13px}
table.tareas td.cmd{font-size:13px; font-weight:600; color:var(--ink)}
table.tareas td.ts{font-family:var(--font-mono); font-size:12.5px; color:var(--muted)}
table.tareas.tareas--distribuidas{height:100%}
table.tareas.tareas--distribuidas th,
table.tareas.tareas--distribuidas td{padding:10px 8px}
table.tareas.tareas--distribuidas th:first-child,
table.tareas.tareas--distribuidas td:first-child{padding-left:18px}
table.tareas.tareas--distribuidas th:last-child,
table.tareas.tareas--distribuidas td:last-child{padding-right:18px}
table.tareas td.forzar{width:1%; white-space:nowrap}
.sys-card > .tabla-scroll{flex:1; overflow-x:auto}
.btn-forzar{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none;
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface);
  color:var(--muted); cursor:pointer;
}
.btn-forzar:hover{background:var(--surface-alt); color:var(--ink)}
a.volver:hover{color:var(--petrol)}

/* ==========================================================================
   NUEVO: página que intenta ocupar el viewport sin scroll (panel/inicio.html).
   overflow-y:auto (no hidden) es el respaldo: si el contenido no cabe (zoom alto,
   ventana baja), se desplaza en vez de recortarse.
   ========================================================================== */
body.pagina-fit{height:100vh; overflow-x:hidden; overflow-y:auto}
body.pagina-fit main{display:flex; flex-direction:column; overflow-x:hidden; overflow-y:auto}
body.pagina-fit .sys-grid{flex:1; min-height:0}
@media (max-width:640px){body.pagina-fit{height:auto; overflow-y:visible}}
