/* Diseño estándar de «Costeo por barco» (v0.3): la única fuente de colores, medidas y componentes compartidos.
   Sigue el lenguaje del tablero de costos (streamlit/tablero: tema.css y marca.css) con verde TISUR de acento, y principios de interfaz
   de Apple: tipografía del sistema, material translúcido en la cabecera, respuesta al presionar, movimiento corto y respeto por
   las preferencias del equipo (menos movimiento, menos transparencia, más contraste).
   Se carga antes de styles.css; styles.css solo usa estas variables. */

/* ---------- tokens: claro ---------- */
:root{
  color-scheme:light;
  /* superficies y texto */
  --bg:#f9f9f7; --surface:#ffffff; --ink:#0b0b0b; --muted:#696863;
  --line:rgba(11,11,11,.10); --line-strong:rgba(11,11,11,.24);
  /* verde TISUR */
  --accent:#307c29; --accent-strong:#113909; --accent-soft:#e7f1e4; --accent-ink:#ffffff;
  --ring:rgba(48,124,41,.28);
  /* estados */
  --ok:#006300; --ok-soft:#e2f0df; --warn:#734500; --warn-soft:#f7edd9; --bad:#8e2626; --bad-soft:#f8e5e3;
  --later:#2f5da8; --later-soft:#e5edf8; --grey:#696863; --grey-soft:#efeeea;
  --info:#2f5da8; --info-soft:#e5edf8;
  /* rubros del costo (mismos colores que el tablero) */
  --rub-per:#2a78d6; --rub-equ:#eda100; --rub-ter:#6250d6; --rub-mov:#eb6834; --rub-mes:#8aa383;
  /* tipo de carga: tres claridades del verde TISUR */
  --tipo-granel:#104a0b; --tipo-fracc:#307c29; --tipo-cont:#75b255;
  /* material translúcido (cabecera) */
  --material:rgba(255,255,255,.72); --material-solid:#ffffff;
  --material-thick:rgba(255,255,255,.92);
  /* forma */
  --r-s:8px; --r-m:12px; --r-l:16px; --r-pill:999px;
  --sh-card:0 1px 2px rgba(0,0,0,.04),0 8px 30px rgba(0,0,0,.06);
  --sh-float:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);
  /* movimiento */
  --dur-fast:100ms; --dur:220ms; --ease:cubic-bezier(.2,.8,.2,1);
  --dur-hoja:320ms;
  /* tipografía */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --track-tight:-0.02em; --track-snug:-0.01em; --track-caps:.08em;
}

/* ---------- tokens: oscuro (por preferencia del equipo, salvo que se fije claro; o fijado a mano) ---------- */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0b0b0b; --surface:#1a1a19; --ink:#f0efec; --muted:#9c9a93;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.24);
  --accent:#5aa847; --accent-strong:#a8d894; --accent-soft:#1c2e18; --accent-ink:#0b0b0b;
  --ring:rgba(90,168,71,.38);
  --ok:#0ca30c; --ok-soft:#12260f; --warn:#db9300; --warn-soft:#2e2208; --bad:#ec7e7e; --bad-soft:#3a1a1a;
  --later:#86a9ea; --later-soft:#17243b; --grey:#9c9a93; --grey-soft:#262624;
  --info:#86a9ea; --info-soft:#17243b;
  --rub-per:#3987e5; --rub-equ:#c98500; --rub-ter:#9085e9; --rub-mov:#d95926; --rub-mes:#5f7d59;
  --tipo-granel:#8dcc6e; --tipo-fracc:#499442; --tipo-cont:#235b1e;
  --material:rgba(26,26,25,.72); --material-solid:#1a1a19;
  --material-thick:rgba(30,30,29,.92);
  --sh-card:0 1px 2px rgba(0,0,0,.30),0 8px 30px rgba(0,0,0,.35);
  --sh-float:0 8px 24px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.20);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0b0b; --surface:#1a1a19; --ink:#f0efec; --muted:#9c9a93;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.24);
  --accent:#5aa847; --accent-strong:#a8d894; --accent-soft:#1c2e18; --accent-ink:#0b0b0b;
  --ring:rgba(90,168,71,.38);
  --ok:#0ca30c; --ok-soft:#12260f; --warn:#db9300; --warn-soft:#2e2208; --bad:#ec7e7e; --bad-soft:#3a1a1a;
  --later:#86a9ea; --later-soft:#17243b; --grey:#9c9a93; --grey-soft:#262624;
  --info:#86a9ea; --info-soft:#17243b;
  --rub-per:#3987e5; --rub-equ:#c98500; --rub-ter:#9085e9; --rub-mov:#d95926; --rub-mes:#5f7d59;
  --tipo-granel:#8dcc6e; --tipo-fracc:#499442; --tipo-cont:#235b1e;
  --material:rgba(26,26,25,.72); --material-solid:#1a1a19;
  --material-thick:rgba(30,30,29,.92);
  --sh-card:0 1px 2px rgba(0,0,0,.30),0 8px 30px rgba(0,0,0,.35);
  --sh-float:0 8px 24px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.20);
}

/* ---------- tipografía ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.5;letter-spacing:0;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{font-family:var(--font);font-weight:700;line-height:1.1;margin:0;text-wrap:balance}
h1,h2{letter-spacing:var(--track-tight)}
h3{letter-spacing:var(--track-snug)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
table,output,.num{font-variant-numeric:tabular-nums}
.caps{font-size:12px;font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted)}

/* ---------- foco: anillo visible de 3 px en verde ---------- */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- respuesta al presionar: se nota al apretar, no al soltar ----------
   Solo se animan transform, opacity y background-color. */
button,.btn,a.tab{transition:transform var(--dur-fast) ease-out,background-color var(--dur) var(--ease),opacity var(--dur) var(--ease)}
button:active:not(:disabled),a.tab:active{transform:scale(.97)}

/* ---------- material translúcido de la cabecera ---------- */
.material{background:var(--material);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);color:var(--ink)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.material{background:var(--material-solid)}}

/* ---------- campos ---------- */
.field-ring:focus,.inp:focus,.mini:focus,input.gin:focus{box-shadow:0 0 0 3px var(--ring)}

/* ---------- logo TISUR en la cabecera ---------- */
.brand-logo{display:block;height:28px;width:auto}
/* en oscuro el logo (verde oscuro) va sobre una placa blanca, como en el tablero */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand-logo,:root:not([data-theme="light"]) #login .lg-logo{background:#fff;border-radius:var(--r-s);padding:3px 7px;box-sizing:content-box}}
:root[data-theme="dark"] .brand-logo,:root[data-theme="dark"] #login .lg-logo{background:#fff;border-radius:var(--r-s);padding:3px 7px;box-sizing:content-box}

/* ---------- pantalla de ingreso (igual a la del tablero de costos) ---------- */
#login{position:fixed;inset:0;z-index:50;display:flex;overflow:auto;background:var(--bg);color:var(--ink);
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
#login .card{margin:auto;width:min(380px,100%);display:grid;gap:12px;padding:28px 24px;border-radius:14px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-card);font-size:14px;line-height:1.45}
#login .lg-logo{display:block;height:34px;width:auto;justify-self:start}
#login h1{margin:4px 0 0;font-size:22px;line-height:1.2;letter-spacing:var(--track-snug)}
#login p{margin:0;color:var(--muted)}
#login .lg-form{display:grid;gap:6px;margin-top:4px}
#login label{display:block;font-weight:600;font-size:13px;margin-top:6px}
#login input{display:block;width:100%;font:inherit;font-size:16px;padding:9px 11px;border-radius:var(--r-s);color:inherit;background:transparent;border:1px solid var(--line-strong)}
#login input:focus{outline:2px solid var(--accent);outline-offset:1px}
#login input.cod{font-size:24px;letter-spacing:.35em;text-align:center;padding:8px 11px}
#login .lg-err{min-height:1.2em;margin:4px 0 0;color:var(--bad);font-size:13px;font-weight:500}
#login .btnp{display:block;width:100%;font:inherit;font-weight:600;padding:10px 14px;border:0;border-radius:var(--r-s);background:var(--accent);color:var(--accent-ink);margin-top:4px;min-height:40px}
#login .btnp:disabled{opacity:.6;cursor:progress}
#login .lnk{background:none;border:0;color:var(--muted);padding:6px 0 0;font-weight:500;width:100%;text-align:center;text-decoration:underline;text-underline-offset:2px}
#login .qr{display:flex;justify-content:center;margin:4px 0}
#login .qr img{width:200px;height:200px;background:#fff;padding:8px;border-radius:var(--r-m)}
#login code{display:block;word-break:break-all;background:var(--grey-soft);padding:8px 10px;border-radius:var(--r-s);font-size:13px}
#login ol{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:2px}

/* botón «Salir» en la cabecera */
#salir-btn{margin-left:4px;background:transparent;border:1px solid var(--line-strong);color:var(--ink);border-radius:var(--r-pill);padding:3px 12px;font-size:13px;font-weight:600}
#salir-btn:hover{background:var(--grey-soft)}

/* ======================================================================================================
   Componentes de la captura (v0.3, estilo Apple): pregunta, alerta de 4 niveles, hoja de ayuda, aviso flotante y botón de texto.
   ====================================================================================================== */
/* ---------- pregunta: título grande con tracking negativo y un subtítulo de una línea ---------- */
.q-titulo{font-family:var(--font);font-size:28px;line-height:1.12;font-weight:700;letter-spacing:-0.022em;margin:0;text-wrap:balance}
.q-sub{margin:-6px 0 0;color:var(--muted);font-size:15px;line-height:1.4}
/* «?» de la cabecera: abre la hoja de ayuda */
.q-ayuda{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--accent);background:transparent;color:var(--accent);
  font-weight:700;font-size:16px;line-height:1;display:grid;place-items:center;padding:0}
.q-ayuda:hover{background:var(--accent-soft)}
/* acción secundaria: «No lo tengo ahora», «Ver la guía» */
.btn-texto{display:block;width:100%;min-height:44px;background:transparent;border:0;border-radius:var(--r-m);color:var(--accent);font-weight:600;font-size:16px;padding:10px 12px;text-align:center}
.btn-texto:hover{background:var(--accent-soft)}
/* estado de una tarjeta: punto de color (el estado también va escrito al lado) */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--grey);flex:none}
.dot.ok{background:var(--ok)} .dot.falta{background:var(--warn)} .dot.later{background:var(--later)} .dot.bad{background:var(--bad)}

/* ---------- alerta: 4 niveles con forma de ícono distinta (error octágono, aviso triángulo, info círculo «i», ok círculo ✓) ---------- */
.fb[data-alerta]{position:relative;display:block;border-radius:var(--r-m);padding:10px 12px 10px 42px;font-size:15px;font-weight:600;line-height:1.35;text-align:left}
.fb[data-alerta].aviso-admin{position:sticky;top:0;z-index:3}
.fb[data-alerta]>.alerta-i,.fb[data-alerta]>summary>.alerta-i{position:absolute;left:12px;top:10px;width:20px;height:20px}
.fb.ok{background:var(--ok-soft);color:var(--ok)} .fb.warn{background:var(--warn-soft);color:var(--warn)}
.fb.bad{background:var(--bad-soft);color:var(--bad)} .fb.info{background:var(--info-soft);color:var(--info)}
.alerta-d{margin-top:4px;font-size:14px;font-weight:500;color:var(--ink)}
.alerta-d>summary{display:inline-flex;align-items:center;gap:4px;color:inherit;font-weight:600;opacity:.85}
.alerta-d>summary::after{content:"›";display:inline-block;transition:transform var(--dur) var(--ease)}
.alerta-d[open]>summary::after{transform:rotate(90deg)}
.alerta-d p{margin:4px 0 0;max-width:62ch}
.alerta-a{display:inline-flex;align-items:center;margin-top:8px;min-height:32px;padding:4px 12px;border-radius:var(--r-pill);
  border:1.5px solid currentColor;background:transparent;color:inherit;font-weight:600;font-size:14px}
.alerta-a:hover{background:var(--surface)}

/* ---------- hoja de ayuda (bottom sheet) ---------- */
dialog.hoja{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden}
dialog.hoja[open]{display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
dialog.hoja::backdrop{background:rgba(0,0,0,.36);opacity:0;transition:opacity var(--dur-hoja) var(--ease)}
dialog.hoja.abierta::backdrop{opacity:1}
.hoja-p{width:min(560px,100%);max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;
  background:var(--material-thick);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--line);border-bottom:0;border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:var(--sh-float);
  padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(100%);transition:transform var(--dur-hoja) var(--ease)}
dialog.hoja.abierta .hoja-p{transform:none}
.hoja-p.arrastrando,dialog.hoja.sin-anim .hoja-p,dialog.hoja.sin-anim::backdrop{transition-duration:0s}
.hoja-top{position:relative;display:flex;align-items:center;gap:12px;padding:20px 18px 10px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.hoja-p.arrastrando .hoja-top{cursor:grabbing}
.hoja-asa{position:absolute;top:7px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--line-strong)}
.hoja-t{flex:1;font-size:17px;line-height:1.25;letter-spacing:var(--track-snug)}
.hoja-x{flex:none;background:transparent;border:0;border-radius:var(--r-s);color:var(--accent);font-weight:600;font-size:17px;padding:8px 6px;min-height:44px}
.hoja-b{overflow:auto;overscroll-behavior:contain;padding:4px 18px 24px;display:flex;flex-direction:column;gap:16px;font-size:15px}
.hoja-b h3{font-size:13px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.hoja-b p{margin:0}

/* ---------- aviso flotante (toast): cápsula de material abajo al centro ---------- */
.toast-zona{position:fixed;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.toast{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;max-width:min(520px,100%);padding:10px 18px 10px 14px;border-radius:var(--r-pill);
  background:var(--material-thick);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--line);box-shadow:var(--sh-float);color:var(--ink);font-weight:600;font-size:15px;line-height:1.3;cursor:pointer;
  animation:toast-in var(--dur) var(--ease);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.toast>.alerta-i{flex:none;color:var(--ok)}
.toast.sale{opacity:0;transform:translateY(10px)}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:860px){.toast-zona{bottom:calc(104px + env(safe-area-inset-bottom,0px))}}

/* ---------- toques grandes en pantallas táctiles ---------- */
@media (pointer:coarse){
  #login input,#login .btnp,#login .lnk,#salir-btn,a.tab{min-height:44px}
  .q-ayuda{width:44px;height:44px}
  .alerta-a{min-height:44px}
}

/* ---------- menos movimiento: sin escalas ni desplazamientos, solo fundidos rápidos ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  button,.btn,a.tab{transition:opacity var(--dur-fast) linear,background-color var(--dur-fast) linear}
  button:active:not(:disabled),a.tab:active{transform:none}
  /* la hoja y el aviso aparecen y se van con un fundido corto, sin desplazarse */
  .hoja-p,dialog.hoja.abierta .hoja-p,.toast,.toast.sale{transform:none}
  .hoja-p{opacity:0;transition:opacity 120ms linear}
  dialog.hoja::backdrop{transition-duration:120ms}
  dialog.hoja.abierta .hoja-p{opacity:1}
  .toast{transition:opacity 120ms linear}
  .alerta-d>summary::after{transition-duration:0s}
}

/* ---------- menos transparencia: cabecera, hoja y aviso sólidos, sin desenfoque ---------- */
@media (prefers-reduced-transparency: reduce){
  .material{background:var(--material-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  .hoja-p,.toast{background:var(--material-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- más contraste: bordes sólidos ---------- */
@media (prefers-contrast: more){
  :root{--line:#696863; --line-strong:#0b0b0b}
  :root[data-theme="dark"]{--line:#9c9a93; --line-strong:#f0efec}
  .material{background:var(--material-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--line:#9c9a93; --line-strong:#f0efec}
}