/* ═══════════════════════════════════════════════════════════════════════════════
   QR 2.0 — sistema de diseño

   Todo color, espaciado y radio sale de un token. Dos razones concretas:

   · La marca del cliente entra pisando UN token (`--acento`) desde el servidor. Sin
     tokens, personalizar sería buscar el violeta en cuarenta reglas.
   · El modo oscuro se define redefiniendo tokens, no escribiendo reglas nuevas. Un
     color que solo existe dentro de un @media es el que después se olvida.

   Denso y sobrio a propósito: es una herramienta de trabajo diario, no una landing.
   La tabla es el elemento central y tiene que entrar la mayor cantidad de filas
   legibles por pantalla.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root{
  --acento:#4f46e5; --acento-osc:#4338ca; --acento-suave:#eef2ff;
  --ok:#0f766e; --ok-suave:#ecfdf5;
  --alerta:#b45309; --alerta-suave:#fffbeb;
  --error:#b91c1c; --error-suave:#fef2f2;
  --info:#1d4ed8; --info-suave:#eff6ff;

  --tinta:#111827; --tinta-2:#4b5563; --tinta-3:#9ca3af;
  --fondo:#f3f4f6; --panel:#ffffff; --panel-2:#f9fafb; --borde:#e5e7eb;
  --barra:#111827; --barra-tinta:#f9fafb;

  --r:10px; --r-chico:7px;
  --sombra:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}
:root[data-tema="oscuro"], :root:not([data-tema="claro"]) {
  /* nada acá: el oscuro va en el @media de abajo y en el [data-tema] explícito */
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --acento-suave:#1e1b4b; --ok-suave:#052e2b; --alerta-suave:#2b1f05;
    --error-suave:#2d0f0f; --info-suave:#0b1e3d;
    --tinta:#f3f4f6; --tinta-2:#c3c9d4; --tinta-3:#7c8598;
    --fondo:#0b1020; --panel:#151b2d; --panel-2:#1b2237; --borde:#28304a;
    --barra:#070b16; --barra-tinta:#e7eaf2;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  }
}
:root[data-tema="oscuro"]{
  --acento-suave:#1e1b4b; --ok-suave:#052e2b; --alerta-suave:#2b1f05;
  --error-suave:#2d0f0f; --info-suave:#0b1e3d;
  --tinta:#f3f4f6; --tinta-2:#c3c9d4; --tinta-3:#7c8598;
  --fondo:#0b1020; --panel:#151b2d; --panel-2:#1b2237; --borde:#28304a;
  --barra:#070b16; --barra-tinta:#e7eaf2;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font:14px/1.5 var(--fuente);
  display:flex; flex-direction:column;
}

/* ── barra superior ────────────────────────────────────────────────── */
header{
  background:var(--barra); color:var(--barra-tinta); padding:0 16px;
  display:flex; align-items:center; gap:6px; flex:0 0 auto; height:52px;
}
header .logo{display:flex; align-items:center; gap:9px; margin-right:14px}
header .logo img{height:24px}
header .logo b{font-size:15.5px; letter-spacing:-.2px}
header nav{display:flex; gap:2px; overflow-x:auto}
header nav button{
  background:transparent; border:0; color:#9ca3af; padding:9px 13px;
  border-radius:var(--r-chico); font:600 13.5px var(--fuente); cursor:pointer;
  white-space:nowrap;
}
header nav button:hover{background:rgba(255,255,255,.07); color:var(--barra-tinta)}
header nav button.activa{background:rgba(255,255,255,.13); color:#fff}
header .derecha{margin-left:auto; display:flex; align-items:center; gap:10px}
header .quien{font-size:12.5px; color:#9ca3af}
header .icono{background:transparent; border:0; color:#9ca3af; cursor:pointer;
  font-size:15px; padding:6px 8px; border-radius:var(--r-chico)}
header .icono:hover{background:rgba(255,255,255,.07)}

/* ── layout: el alto lo manda la ventana, no el contenido ──────────────
   La cadena main → .vista → .caja → .tabla-wrap es toda flex para que
   `.tabla-wrap` sea el ÚNICO scroll vertical. Con dos barras verticales,
   el encabezado sticky se pega al contenedor equivocado y a la tercera
   pantalla ya no se sabe qué columna es cuál.
   `main` queda en auto y no hidden a propósito: con una ventana muy baja
   nada entra, y ahí main recupera su barra para que el paginador no quede
   inalcanzable. */
main{flex:1 1 auto; min-height:0; overflow:auto; padding:14px}
.vista{display:none; height:100%; flex-direction:column; min-height:0}
.vista.activa{display:flex}
body.documento main{overflow:auto}
body.documento .vista.activa{height:auto; display:block}

/* ── piezas ────────────────────────────────────────────────────────── */
.caja{background:var(--panel); border:1px solid var(--borde); border-radius:var(--r);
  box-shadow:var(--sombra); padding:14px; margin-bottom:12px}
.caja.grilla{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  margin-bottom:0; padding-bottom:0}
h2{font-size:16px; margin:0 0 3px; letter-spacing:-.2px}
h3{font-size:13.5px; margin:18px 0 8px; color:var(--tinta-2)}
.ayuda{color:var(--tinta-3); font-size:12.5px; margin:0 0 10px; line-height:1.5}
.ayuda b{color:var(--tinta-2)}

.kpis{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; flex:0 0 auto}
.kpi{background:var(--panel); border:1px solid var(--borde); border-radius:var(--r);
  padding:11px 15px; min-width:118px; box-shadow:var(--sombra)}
.kpi b{display:block; font-size:23px; line-height:1.15; letter-spacing:-.6px}
.kpi span{font-size:11.5px; color:var(--tinta-3); display:block; margin-top:1px}
.kpi.clic{cursor:pointer}
.kpi.clic:hover{border-color:var(--acento)}
.kpi.rojo{border-color:var(--error)} .kpi.rojo b{color:var(--error)}
.kpi.ambar{border-color:var(--alerta)} .kpi.ambar b{color:var(--alerta)}

.fila{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.fila.acciones{margin-bottom:11px}

input[type=text], input[type=date], input[type=password], input[type=number],
select, textarea{
  padding:8px 11px; border:1.5px solid var(--borde); border-radius:var(--r-chico);
  background:var(--panel); color:var(--tinta); font:14px var(--fuente); min-width:0;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--acento)}
textarea{width:100%; min-height:80px; resize:vertical; line-height:1.5}
label.etq{display:block; font-size:12px; color:var(--tinta-2); font-weight:600;
  margin:12px 0 5px}

.btn{padding:8px 14px; border:0; border-radius:var(--r-chico); background:var(--acento);
  color:#fff; font:600 13.5px var(--fuente); cursor:pointer; white-space:nowrap}
.btn:hover{background:var(--acento-osc)}
.btn:disabled{opacity:.5; cursor:default}
.btn.sec{background:var(--panel-2); color:var(--tinta); border:1.5px solid var(--borde)}
.btn.sec:hover{border-color:var(--acento); background:var(--panel-2)}
.btn.gris{background:transparent; color:var(--tinta-3); border:1.5px solid var(--borde)}
.btn.peligro{background:var(--error)}
.btn.chico{padding:4px 9px; font-size:12px}
.mini{background:transparent; border:1px solid var(--borde); border-radius:6px;
  padding:3px 6px; cursor:pointer; font-size:12.5px; line-height:1.2; color:var(--tinta-2)}
.mini:hover{border-color:var(--acento)}

/* ── tabla ─────────────────────────────────────────────────────────── */
.tabla-wrap{flex:1 1 auto; min-height:0; overflow:auto; margin:0 -14px}
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{
  position:sticky; top:0; z-index:2; background:var(--panel-2);
  text-align:left; padding:8px 10px; font-size:11px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:var(--tinta-3);
  border-bottom:1.5px solid var(--borde); white-space:nowrap;
}
tbody td{padding:7px 10px; border-bottom:1px solid var(--borde); vertical-align:middle}
tbody tr:hover{background:var(--panel-2)}
td.nowrap{white-space:nowrap}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.mono{font-family:var(--mono); font-size:12.5px}

.paginador{display:flex; gap:9px; align-items:center; justify-content:center;
  padding:10px; flex:0 0 auto; font-size:13px; color:var(--tinta-2);
  border-top:1px solid var(--borde); margin:0 -14px}

/* ── chips de estado ───────────────────────────────────────────────── */
.e{display:inline-block; padding:2px 8px; border-radius:99px; font-size:11px;
  font-weight:700; letter-spacing:.2px; white-space:nowrap}
.e-PENDIENTE{background:var(--alerta-suave); color:var(--alerta)}
.e-ENTREGADO{background:var(--ok-suave); color:var(--ok)}
.e-REVISAR{background:var(--info-suave); color:var(--info)}
.e-ANULADO{background:var(--panel-2); color:var(--tinta-3)}
.e-mal{background:var(--error-suave); color:var(--error)}

.aviso{padding:10px 13px; border-radius:var(--r-chico); font-size:13px; margin-bottom:11px;
  line-height:1.5}
.aviso.info{background:var(--info-suave); color:var(--info)}
.aviso.alerta{background:var(--alerta-suave); color:var(--alerta)}
.aviso.mal{background:var(--error-suave); color:var(--error)}
.aviso.bien{background:var(--ok-suave); color:var(--ok)}

/* ── selector de punto: un buscador, no un desplegable ─────────────────
   Con miles de puntos, una lista desplegable deja de servirle a una persona:
   nadie encuentra «SAN MARTIN 1856 – ROSARIO» bajando siete mil renglones. */
.col-punto{cursor:pointer; position:relative; min-width:180px; max-width:280px}
.punto-txt{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.punto-buscador{position:absolute; z-index:20; left:4px; right:4px; top:2px;
  background:var(--panel); border:1.5px solid var(--acento); border-radius:var(--r-chico);
  box-shadow:0 8px 24px rgba(0,0,0,.18); padding:5px}
.punto-buscador input{width:100%; border:0; padding:5px}
.punto-lista{max-height:240px; overflow:auto; margin-top:4px}
.punto-op{padding:6px 8px; border-radius:5px; font-size:12.5px; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.punto-op:hover{background:var(--acento-suave)}
.punto-cabeza{padding:5px 8px; font-size:11px; font-weight:700; color:var(--acento);
  text-transform:uppercase; letter-spacing:.5px}
.punto-mas{padding:5px 8px; font-size:11.5px; color:var(--tinta-3)}

/* ── modal ─────────────────────────────────────────────────────────── */
.fondo-modal{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:18px}
.modal{background:var(--panel); border-radius:var(--r); box-shadow:0 20px 50px rgba(0,0,0,.3);
  width:min(620px, 100%); max-height:88vh; overflow:auto; padding:20px}
.modal h2{margin-bottom:12px}
.modal .pie{display:flex; gap:9px; justify-content:flex-end; margin-top:18px}

.oculto{display:none !important}
.vacio{padding:40px; text-align:center; color:var(--tinta-3)}
.cargando{padding:30px; text-align:center; color:var(--tinta-3)}

/* ── módulo de transporte ──────────────────────────────────────────── */
/* Sin el módulo, sus pestañas no existen; con el módulo, la carga genérica tampoco. */
body:not(.con-transporte) .trn{display:none !important}
body.con-transporte .no-trn{display:none !important}

.sub{font-size:11.5px; color:var(--tinta-3); line-height:1.3}
.dos-col{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start}
.form-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:10px 12px}
.form-grid label{display:flex; flex-direction:column; gap:4px; font-size:12px;
  color:var(--tinta-2); font-weight:600}
.form-grid label small{font-weight:400; color:var(--tinta-3)}
.form-grid label.ancho{grid-column:span 2}
.form-grid input, .form-grid select{width:100%}
@media (max-width:520px){ .form-grid label.ancho{grid-column:auto} }
.chk-linea{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--tinta-2)}
.cotiz{position:sticky; top:0}
.cz{display:flex; justify-content:space-between; gap:10px; padding:5px 0;
  border-bottom:1px solid var(--borde); font-size:13px}
.cz span{color:var(--tinta-2)}
.cz.total{font-size:16px; border-bottom:2px solid var(--tinta)}
.cz.cobrar b{color:var(--error)}
.sub-nav .btn.activo-sub{border-color:var(--acento); background:var(--acento-suave);
  color:var(--acento)}
.modal{width:min(980px, 100%)}

body.con-transporte header .quien{display:none}
/* Una caja «Cargando…» que ya recibió su contenido deja de estar centrada y en gris. */
.cargando:has(*){padding:0; text-align:left; color:inherit}

/* El pie legal: derechos reservados y política de privacidad. */
footer.pie-legal{flex:0 0 auto; text-align:center; font-size:11px; color:var(--tinta-3);
  padding:4px 10px 6px}
footer.pie-legal a{color:var(--tinta-2)}

/* ── encabezados numéricos alineados con sus datos ─────────────────── */
thead th.num{text-align:right}

/* ── evidencia y revisión de eventos ───────────────────────────────── */
.miniatura{height:38px; width:auto; border-radius:5px; border:1px solid var(--borde);
  vertical-align:middle; background:#fff}
.miniatura.firma{height:30px}
tr.fila-pendiente td{background:var(--error-suave)}

/* ── aviso en la solapa: algo para revisar ─────────────────────────── */
header nav button{position:relative}
.aviso-tab{display:block; font-size:10.5px; line-height:1; color:#fff; background:var(--error);
  border-radius:99px; padding:2px 6px; margin:2px auto 0; width:max-content;
  animation:latido 1.6s ease-in-out infinite}
@keyframes latido{50%{opacity:.55}}

/* ── ventana del despacho ──────────────────────────────────────────── */
body.con-ventana{overflow:hidden}
.fondo-modal{z-index:50}
#modal .fondo-modal{z-index:70}          /* el «+ Alta» va encima de la ventana del despacho */
.modal.ventana-desp{width:min(1180px, 100%); max-height:94vh; padding:0; display:flex;
  flex-direction:column; overflow:hidden}
.vd-cabeza{display:flex; align-items:flex-end; gap:14px; padding:14px 18px 12px;
  border-bottom:1px solid var(--borde); flex:0 0 auto}
.vd-cabeza h2{margin:0 auto 4px 0; font-size:20px}
.vd-num{display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:600;
  color:var(--tinta-2)}
.vd-num input{width:170px}
.vd-num input:disabled{background:var(--panel-2); color:var(--tinta); font-family:var(--mono);
  font-size:13px; opacity:1}
.cerrar{background:transparent; border:0; font-size:26px; line-height:1; cursor:pointer;
  color:var(--tinta-2); padding:2px 6px; border-radius:var(--r-chico); align-self:flex-start}
.cerrar:hover{background:var(--panel-2); color:var(--tinta)}
.vd-cuerpo{display:flex; gap:0; min-height:0; flex:1 1 auto; overflow:hidden}
.vd-form{flex:1 1 auto; overflow:auto; padding:6px 18px 14px}
.vd-cotiz{flex:0 0 300px; overflow:auto; padding:14px 16px; background:var(--panel-2);
  border-left:1px solid var(--borde)}
.vd-cotiz h3{margin:0 0 8px; font-size:15px; color:var(--tinta)}
.ventana-desp .pie{padding:12px 18px; margin:0; border-top:1px solid var(--borde);
  background:var(--panel); flex:0 0 auto}
.ventana-desp #msgDespacho .aviso{margin:10px 0 0}
fieldset{border:0; margin:0; padding:12px 0 6px; border-bottom:1px dashed var(--borde)}
fieldset:last-of-type{border-bottom:0}
legend{font-weight:700; font-size:14px; padding:0; margin-bottom:8px; color:var(--tinta)}
.form-grid label.ancho3{grid-column:span 3}
.form-grid.dom{grid-template-columns:2.4fr 1fr .7fr .7fr}
.form-grid.dom label.ancho{grid-column:span 3}
.con-alta{display:flex; gap:5px}
.con-alta input{flex:1 1 auto}
.alta{flex:0 0 auto; border:1.5px solid var(--borde); background:var(--panel); color:var(--tinta);
  border-radius:var(--r-chico); font:600 12px var(--fuente); padding:0 9px; cursor:pointer;
  white-space:nowrap}
.alta:hover{border-color:var(--acento); color:var(--acento)}
.atajos{display:flex; gap:12px; font-weight:400; font-size:12px}
.atajos a{color:var(--tinta-2)}
.campo{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--tinta-2);
  font-weight:600}
.campo small{font-weight:400; color:var(--tinta-3); line-height:1.35}
.segmentado{display:inline-flex; border:1.5px solid var(--borde); border-radius:var(--r-chico);
  overflow:hidden; width:max-content}
.segmentado label{display:flex; align-items:center; gap:6px; padding:7px 14px; cursor:pointer;
  font-size:13.5px; color:var(--tinta); font-weight:600}
.segmentado label + label{border-left:1.5px solid var(--borde)}
.segmentado input{accent-color:var(--acento); margin:0}
.segmentado label:has(input:checked){background:var(--acento); color:#fff}
.cz-mayor{margin:2px 0 4px; font-size:12px}
.cz-mayor div{display:grid; grid-template-columns:1fr auto auto; gap:8px; padding:3px 0;
  color:var(--tinta-3)}
.cz-mayor div b{min-width:84px; text-align:right; font-variant-numeric:tabular-nums}
.cz-mayor div.gana{color:var(--tinta); font-weight:600}
.cz-mayor div.gana span:first-child::before{content:"▸ "; color:var(--acento)}
@media (max-width:860px){
  .vd-cuerpo{flex-direction:column; overflow:auto}
  .vd-form, .vd-cotiz{overflow:visible}
  .vd-cotiz{flex:0 0 auto; border-left:0; border-top:1px solid var(--borde)}
  .form-grid.dom{grid-template-columns:1fr 1fr}
  .form-grid label.ancho3, .form-grid.dom label.ancho{grid-column:auto}
  .vd-cabeza{flex-wrap:wrap}
}

/* ── zonas para filtrar ────────────────────────────────────────────── */
.zonas-chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 10px}
.zonas-chips .rotulo{font-size:12px; font-weight:700; color:var(--tinta-2); margin-right:4px}
.chip-zona{border:1.5px solid var(--borde); background:var(--panel); color:var(--tinta);
  border-radius:99px; padding:4px 11px; font:600 12.5px var(--fuente); cursor:pointer}
.chip-zona b{display:inline-block; min-width:18px; padding:0 5px; margin-left:3px;
  border-radius:99px; background:var(--panel-2); font-size:11px}
.chip-zona:hover{border-color:var(--tinta-2)}
.chip-zona.on{background:var(--tinta); border-color:var(--tinta); color:var(--panel)}
.chip-zona.on b{background:var(--acento); color:#fff}
.chip-zona.limpiar{border-style:dashed; color:var(--tinta-2)}

/* ── seguimiento ───────────────────────────────────────────────────── */
.etapas{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.etapa{display:flex; align-items:baseline; gap:7px; border:1.5px solid var(--borde);
  background:var(--panel); border-radius:var(--r-chico); padding:6px 12px; cursor:pointer;
  font:600 13px var(--fuente); color:var(--tinta-2)}
.etapa b{font-size:19px; color:var(--tinta); font-variant-numeric:tabular-nums}
.etapa:hover{border-color:var(--tinta-2)}
.etapa.on{border-color:var(--tinta); box-shadow:inset 0 -3px 0 var(--acento); color:var(--tinta)}
.etapa.alerta b{color:var(--error)}
tr.clic{cursor:pointer}
.avance-th{min-width:330px}
.txt-mal{color:var(--error)}
/* La barra de avance: cuatro tramos como las franjas del logo. Hecho = lleno, el
   tramo actual se marca más fuerte, y si se desvió el tramo queda en rojo. */
.ruta{display:flex; gap:3px; min-width:320px; padding:0 4px}
.tramo{flex:1 1 0; position:relative; height:24px; transform:skewX(-18deg);
  background:var(--panel-2); border:1px solid var(--borde); display:flex; align-items:center;
  justify-content:center; overflow:hidden}
.tramo i{transform:skewX(18deg); font-style:normal; font-size:11px; font-weight:600;
  color:var(--tinta-3); white-space:nowrap}
.tramo.hecho{background:var(--seg-hecho, #d4d4d4); border-color:transparent}
.tramo.hecho i{color:var(--tinta)}
.tramo.actual{background:var(--tinta); border-color:var(--tinta)}
.tramo.actual i{color:var(--panel)}
.tramo.mal{background:var(--error); border-color:var(--error)}
.tramo.mal i{color:#fff}
.ruta.anulada .tramo{opacity:.45; border-style:dashed}
.modal .ruta{margin:6px 0 4px}
.linea-tiempo{list-style:none; margin:16px 0 0; padding:0 0 0 18px; border-left:3px solid var(--borde)}
.linea-tiempo li{position:relative; padding:0 0 14px 12px; display:flex; flex-direction:column}
.linea-tiempo li::before{content:""; position:absolute; left:-27px; top:3px; width:13px; height:13px;
  transform:skewX(-18deg); background:var(--tinta-3)}
.linea-tiempo time{font-size:12px; color:var(--tinta-3); font-variant-numeric:tabular-nums}
.linea-tiempo span{font-size:12.5px; color:var(--tinta-2)}
.linea-tiempo .h-ruta::before{background:var(--naranja, #F58634)}
.linea-tiempo .h-ok::before, .linea-tiempo .h-qr::before{background:var(--ok)}
.linea-tiempo .h-mal::before{background:var(--error)}
.linea-tiempo .h-alta::before{background:var(--tinta)}

/* ── tarifas ───────────────────────────────────────────────────────── */
table.tarifas input.precio, .tabla-wrap input.precio{width:110px; text-align:right}
tr.fila-zona td{background:var(--panel-2); font-weight:700; border-top:1.5px solid var(--borde)}
tr.fila-general td{font-weight:700}
.sangria{display:inline-block; width:16px}
.e-especial{background:var(--acento); color:#fff}
.lista-checks{columns:3 200px; max-height:46vh; overflow:auto}
.lista-checks label{break-inside:avoid}
.modal h3{margin:18px 0 6px; color:var(--tinta)}

/* ═══════════════════════════════════════════════════════════════════
   TEMA DE MARCA: GODOY — amarillo, letras negras, toques rojos.
   La idea sale del propio logo: la G roja con franjas inclinadas amarillo y naranja,
   y la marca en negro, condensada y pesada. Eso se lleva a la herramienta así:
     · tipografía condensada (Barlow Condensed) para lo que se lee de un vistazo —
       solapas, títulos, números— y Barlow para el texto y las tablas;
     · las franjas inclinadas son EL gesto: la solapa activa es una chapa roja
       inclinada y el avance del seguimiento son cuatro franjas. No hay otro adorno;
     · fondo amarillo, cajas blancas, tinta negra pura. El rojo solo marca: lo activo,
       la acción principal y lo que está mal.
   Se prende con marca.tema = "godoy" (data-marca en <html>). Va al final para ganarle
   al modo oscuro: el tema de la marca es claro siempre.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Barlow"; font-weight:400; font-display:swap;
  src:url(/static/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow"; font-weight:500; font-display:swap;
  src:url(/static/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow"; font-weight:600; font-display:swap;
  src:url(/static/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow"; font-weight:700; font-display:swap;
  src:url(/static/fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed"; font-weight:500; font-display:swap;
  src:url(/static/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed"; font-weight:600; font-display:swap;
  src:url(/static/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed"; font-weight:700; font-display:swap;
  src:url(/static/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed"; font-weight:700; font-style:italic; font-display:swap;
  src:url(/static/fonts/barlow-condensed-latin-700-italic.woff2) format("woff2")}

:root[data-marca="godoy"]{
  --godoy-amarillo:#FFED00; --godoy-rojo:#CE2E30; --naranja:#F58634;
  --acento:#CE2E30; --acento-osc:#A92326; --acento-suave:#FBE3E3;
  --ok:#11703F; --ok-suave:#E2F3E8;
  --alerta:#8A4B00; --alerta-suave:#FFE9C7;
  --error:#CE2E30; --error-suave:#FBE3E3;
  --info:#1F4FBF; --info-suave:#E5ECFB;
  --tinta:#000000; --tinta-2:#2E2E2E; --tinta-3:#5E5844;
  --fondo:#FFF4A6; --panel:#FFFFFF; --panel-2:#FFF9D6; --borde:#E3CF62;
  --barra:#FFED00; --barra-tinta:#000000;
  --seg-hecho:#FFE04D;
  --r:6px; --r-chico:4px;
  --sombra:0 1px 0 rgba(90,70,0,.12);
  --fuente:"Barlow", "Segoe UI", system-ui, sans-serif;
  --titular:"Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  color-scheme: light;
}
:root[data-marca="godoy"] body{font-size:14.5px}

/* barra: amarillo de la marca, con la línea negra y roja abajo */
:root[data-marca="godoy"] header{height:60px; padding:0 18px; gap:10px;
  border-bottom:4px solid #000; box-shadow:0 3px 0 var(--godoy-rojo)}
:root[data-marca="godoy"] header .logo{margin-right:18px}
:root[data-marca="godoy"] header .logo img{height:42px}
:root[data-marca="godoy"] header .logo b{display:none}
:root[data-marca="godoy"] header nav{gap:0; align-self:stretch; align-items:stretch}
:root[data-marca="godoy"] header nav button{font:700 16.5px var(--titular); color:#000;
  padding:0 15px; border-radius:0; letter-spacing:.1px; position:relative; z-index:0}
:root[data-marca="godoy"] header nav button::before{content:""; position:absolute; inset:12px 3px;
  transform:skewX(-18deg); z-index:-1; border-radius:2px}
:root[data-marca="godoy"] header nav button:hover{background:transparent}
:root[data-marca="godoy"] header nav button:hover::before{background:rgba(0,0,0,.09)}
:root[data-marca="godoy"] header nav button.activa{background:transparent; color:#fff}
:root[data-marca="godoy"] header nav button.activa::before{background:var(--godoy-rojo);
  box-shadow:4px 0 0 var(--naranja)}
:root[data-marca="godoy"] header nav button:focus-visible{outline:2px solid #000; outline-offset:-6px}
:root[data-marca="godoy"] .aviso-tab{position:absolute; top:4px; right:0; margin:0; font:700 11px var(--fuente);
  background:#000; color:var(--godoy-amarillo); border-radius:3px}
:root[data-marca="godoy"] header .quien, :root[data-marca="godoy"] header .icono{color:#000}
:root[data-marca="godoy"] header .icono:hover{background:rgba(0,0,0,.08)}
:root[data-marca="godoy"] #btnTema{display:none}
:root[data-marca="godoy"] .btn.nuevo-desp{font:700 15px var(--titular); padding:8px 16px;
  background:#000; color:var(--godoy-amarillo); letter-spacing:.2px}
:root[data-marca="godoy"] .btn.nuevo-desp:hover{background:var(--godoy-rojo); color:#fff}

/* títulos y números en la condensada */
:root[data-marca="godoy"] h2{font:700 21px/1.15 var(--titular); letter-spacing:0; margin-bottom:4px}
:root[data-marca="godoy"] h3, :root[data-marca="godoy"] legend{font:700 16.5px var(--titular)}
:root[data-marca="godoy"] .kpi b, :root[data-marca="godoy"] .etapa b{font-family:var(--titular);
  font-weight:700; letter-spacing:0}
:root[data-marca="godoy"] .kpi b{font-size:28px}
:root[data-marca="godoy"] .kpi span{font-size:12.5px; color:var(--tinta-2)}
:root[data-marca="godoy"] .ayuda{color:var(--tinta-2); font-size:13px}
:root[data-marca="godoy"] .ayuda b{color:#000}

/* cajas blancas planas sobre el amarillo */
:root[data-marca="godoy"] main{padding:18px}
:root[data-marca="godoy"] .caja, :root[data-marca="godoy"] .kpi{border-color:var(--borde)}
:root[data-marca="godoy"] .kpi.clic:hover{border-color:#000}
:root[data-marca="godoy"] .kpi.rojo, :root[data-marca="godoy"] .kpi.ambar{border-color:var(--godoy-rojo);
  box-shadow:inset 4px 0 0 var(--godoy-rojo)}
:root[data-marca="godoy"] .kpi.ambar b{color:var(--godoy-rojo)}

/* tablas: encabezado en negro sobre amarillo claro, en tipo normal (nada de mayúsculas) */
:root[data-marca="godoy"] thead th{background:#FFF1A1; color:#000; text-transform:none;
  font:700 14px var(--titular); letter-spacing:.1px; border-bottom:2px solid #000}
:root[data-marca="godoy"] tbody td{border-bottom-color:#F0E3A0}
:root[data-marca="godoy"] tbody tr:hover{background:#FFFBE3}
:root[data-marca="godoy"] .mono{font-size:13px}

/* botones */
:root[data-marca="godoy"] .btn{font:700 15px var(--titular); letter-spacing:.2px; padding:7px 15px}
:root[data-marca="godoy"] .btn.chico{font-size:13.5px; padding:3px 10px}
:root[data-marca="godoy"] .btn.sec{background:#fff; color:#000; border:1.5px solid #000}
:root[data-marca="godoy"] .btn.sec:hover{background:#000; color:var(--godoy-amarillo)}
:root[data-marca="godoy"] .btn.gris{color:var(--tinta-2); border-color:#BFAE55}
:root[data-marca="godoy"] .mini{border-color:#CDBB5A; color:#000}
:root[data-marca="godoy"] .mini:hover{border-color:#000; background:#FFF6BF}
:root[data-marca="godoy"] .sub-nav .btn.activo-sub{background:#000; color:var(--godoy-amarillo);
  border-color:#000}
:root[data-marca="godoy"] input:focus, :root[data-marca="godoy"] select:focus,
:root[data-marca="godoy"] textarea:focus{border-color:#000; box-shadow:0 0 0 3px rgba(255,237,0,.8)}
:root[data-marca="godoy"] input, :root[data-marca="godoy"] select{border-color:#D8C463}

/* estados como chapas: rectángulos, sin píldora */
:root[data-marca="godoy"] .e{border-radius:3px; font:700 12.5px var(--titular); letter-spacing:.2px;
  padding:2px 8px}
:root[data-marca="godoy"] .e-PENDIENTE{background:var(--godoy-amarillo); color:#000}
:root[data-marca="godoy"] .e-REVISAR{background:var(--naranja); color:#000}
:root[data-marca="godoy"] .e-ENTREGADO{background:var(--ok); color:#fff}
:root[data-marca="godoy"] .e-mal{background:var(--godoy-rojo); color:#fff}
:root[data-marca="godoy"] .e-ANULADO{background:#E9E4CC; color:#5E5844}

/* ventana del despacho */
:root[data-marca="godoy"] .fondo-modal{background:rgba(30,24,0,.55)}
:root[data-marca="godoy"] .modal{border-radius:6px; border-top:6px solid var(--godoy-amarillo);
  box-shadow:0 0 0 1px #000, 0 24px 60px rgba(0,0,0,.35)}
:root[data-marca="godoy"] .vd-cabeza h2{font-size:26px}
:root[data-marca="godoy"] .vd-cotiz{background:#FFFBE0}
:root[data-marca="godoy"] .cz.total{font:700 22px var(--titular); border-bottom:3px solid #000}
:root[data-marca="godoy"] .cz.total b{color:#000}
:root[data-marca="godoy"] .chip-zona{font:600 14px var(--titular); border-color:#CDBB5A}
:root[data-marca="godoy"] .chip-zona.on{background:#000; color:var(--godoy-amarillo); border-color:#000}
:root[data-marca="godoy"] .etapa{font:600 14.5px var(--titular); border-color:#CDBB5A}
:root[data-marca="godoy"] .etapa b{font-size:22px}
:root[data-marca="godoy"] .etapa.on{border-color:#000; box-shadow:inset 0 -4px 0 var(--godoy-rojo)}
:root[data-marca="godoy"] .tramo{border-color:#E8D883; background:#FFFCEB}
:root[data-marca="godoy"] .tramo i{font:600 12.5px var(--titular)}
:root[data-marca="godoy"] .tramo.hecho{background:var(--godoy-amarillo)}
:root[data-marca="godoy"] .tramo.actual{background:#000}
:root[data-marca="godoy"] .tramo.actual i{color:var(--godoy-amarillo)}
:root[data-marca="godoy"] footer.pie-legal{color:#3a3a3a}
:root[data-marca="godoy"] tr.fila-zona td{background:#FFF3B0}
@media (prefers-reduced-motion: reduce){ .aviso-tab{animation:none} }

/* ── fichas de maestros: grilla de 6 ───────────────────────────────── */
.form-grid.ficha{grid-template-columns:repeat(6, 1fr)}
.form-grid.ficha > label{grid-column:span var(--s, 2)}
@media (max-width:700px){
  .form-grid.ficha{grid-template-columns:1fr}
  .form-grid.ficha > label{grid-column:auto}
}
/* el «Paga» es un interruptor de dos: el círculo del radio sobra */
.segmentado input{position:absolute; opacity:0; width:1px; height:1px}
.segmentado label:has(input:focus-visible){outline:2px solid var(--tinta); outline-offset:-4px}
.segmentado label{position:relative; min-width:84px; justify-content:center}

/* ── barra superior compacta y que no se corta ─────────────────────── */
:root[data-marca="godoy"] header nav button{font-size:15.5px; padding:0 11px}
:root[data-marca="godoy"] #quien{display:none}
:root[data-marca="godoy"] #usuarioActual{font-size:12.5px; max-width:110px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
:root[data-marca="godoy"] header .derecha{gap:8px; flex:0 0 auto}
@media (max-width:1180px){
  :root[data-marca="godoy"] header{height:auto; flex-wrap:wrap; padding-top:6px}
  :root[data-marca="godoy"] header nav{order:3; flex:1 0 100%; height:46px; overflow-x:auto}
  :root[data-marca="godoy"] header .derecha{margin-left:auto}
}
:root[data-marca="godoy"] .tramo.mal{background:var(--godoy-rojo); border-color:var(--godoy-rojo)}
:root[data-marca="godoy"] .tramo.mal i{color:#fff}

/* ── verificación del domicilio con georef ─────────────────────────── */
.geo-fila{display:flex; gap:10px; align-items:flex-start; margin-top:10px}
.geo-fila .alta{padding:7px 10px}
.geo-estado{flex:1 1 auto; font-size:12.5px; color:var(--tinta-3); line-height:1.45;
  padding:6px 10px; border-radius:var(--r-chico); border:1px dashed var(--borde)}
.geo-estado.bien{border:0; background:var(--ok-suave); color:var(--ok)}
.geo-estado.bien b{color:var(--ok)}
.geo-estado.alerta{border:0; background:var(--alerta-suave); color:var(--alerta)}
.geo-estado.mal{border:0; background:var(--error-suave); color:var(--error)}
.geo-estado a{color:inherit; font-weight:600}
.geo-opciones{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}

/* ── la firma que desarrolló el sistema, al margen derecho de la barra ─ */
.firma-by{display:flex; align-items:center; gap:7px; background:#fff; border-radius:5px;
  padding:4px 10px 4px 9px; margin-left:4px; box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.firma-by span{font:italic 600 12px var(--fuente); color:#5b6470; letter-spacing:.2px}
.firma-by img{height:28px; width:auto; display:block}
@media (max-width:700px){ .firma-by img{height:20px} .firma-by{padding:3px 7px} }
.etapa.dato{cursor:default; margin-left:auto; border-style:dashed}
.etapa.dato:hover{border-color:var(--borde)}
:root[data-marca="godoy"] .etapa.dato{border-color:#000}
/* con la firma a la derecha no entra el nombre del usuario: va en el «Salir» */
:root[data-marca="godoy"] #usuarioActual{display:none !important}
@media (max-width:1380px){ :root[data-marca="godoy"] .firma-by img{height:22px} }
.oculto-siempre{display:none !important}