/* LabTable — colores, letras y cajas comunes (brandbook de LabHour: petróleo, amarillo y verde agua; Fraunces + Hanken Grotesk) */
:root{
  --petrol:#14636D; --petrol-2:#0F535C; --yellow:#FFC600; --aqua:#BCE6E0; --aqua-2:#EAF6F4;
  --bg:#F7F7F7; --surface:#FFFFFF; --sunk:#F0F2F2; --ink:#333333; --title:#202427; --muted:#6B6F72; --gris:#979797; --line:#E3E6E7; --field:#CFD4D6;
  --accent:var(--petrol); --accent-soft:var(--aqua); --chip-ink:var(--petrol);
  --ok:#1D7A5F; --okbg:#E1F3EC; --warn:#8A5A00; --warnbg:#FFF3CC; --bad:#B0372A; --badbg:#FBE4E0;
  --orange:#F28C28; --orangebg:#FFE1C4; --orange-ink:#8A4A0B; --late:#E39B1B;
  --shadow:0 1px 2px rgb(32 36 39/.04),0 6px 24px rgb(32 36 39/.06);
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",system-ui,sans-serif;
  --r-sm:6px; --r:10px; --r-lg:20px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0E1719; --surface:#152225; --sunk:#1B2C30; --ink:#DCE5E6; --title:#F4F7F7; --muted:#9DABAE; --gris:#6E7B7E; --line:#25383C; --field:#25383C;
  --accent:#6FC3CC; --accent-soft:#1E4347; --chip-ink:#BCE6E0; --aqua-2:#173B3F;
  --ok:#6FD3AE; --okbg:#143229; --warn:#F2C14E; --warnbg:#382C0D; --bad:#F2887A; --badbg:#3D1D18;
  --orangebg:#3E2A14; --orange-ink:#F7C08A;
  --shadow:0 1px 2px rgb(0 0 0/.3),0 6px 24px rgb(0 0 0/.25); color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:300 15px/1.55 var(--f-body)}
b,strong{font-weight:700}
h1,h2,h3{font-family:var(--f-display);font-weight:700;color:var(--title);letter-spacing:-.01em;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,2.2vw + 20px,48px)} h2{font-size:clamp(24px,1vw + 20px,30px)} h3{font-size:20px}
p{margin:0}
.lead{font-size:20px;line-height:1.45}
a{color:var(--accent)}
.muted{color:var(--muted)} .small{font-size:13px}
.num{font-variant-numeric:tabular-nums}
.etiqueta{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sp{flex:1}
.btn{appearance:none;font:700 17px/1.2 var(--f-body);border:1px solid var(--field);background:var(--surface);color:var(--accent);padding:11px 22px;min-height:48px;border-radius:var(--r);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--gris)}
.btn.primary{background:var(--yellow);border-color:var(--yellow);color:var(--petrol)}
.btn.primary:hover{background:#F2BC00;border-color:#F2BC00}
.btn.dark{background:var(--petrol);border-color:var(--petrol);color:#F7F7F7}
.btn.dark:hover{background:var(--petrol-2);border-color:var(--petrol-2)}
.btn.danger{color:var(--bad)}
.btn.sm{font-size:15px;padding:8px 14px;min-height:40px}
.btn.icon{padding:0;width:44px;min-height:44px}
.btn:disabled{opacity:.5;cursor:not-allowed}
@media (pointer:coarse){.btn.sm{min-height:44px}}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media (prefers-color-scheme:light){input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline-color:var(--petrol)}}
input,select,textarea{font:400 16px/1.3 var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--field);border-radius:var(--r);padding:11px 12px;min-height:48px;max-width:100%;width:100%}
@media (prefers-color-scheme:dark){input,select,textarea{background:var(--sunk)}}
input:focus,select:focus,textarea:focus{border-color:var(--petrol);outline:none;box-shadow:0 0 0 3px rgb(20 99 109/.18)}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0;accent-color:var(--petrol);flex:none}
textarea{resize:vertical;min-height:80px}
label{display:grid;gap:6px;font-weight:700;font-size:15px;color:var(--title)}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:300;color:var(--ink)}
.pista{font-size:13px;font-weight:300;color:var(--muted)}
.panel{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(18px,2.4vw,28px);display:grid;gap:16px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;padding:3px 11px;border-radius:99px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--okbg);color:var(--ok)} .pill.warn{background:var(--warnbg);color:var(--warn)} .pill.bad{background:var(--badbg);color:var(--bad)}
.pill.aqua{background:var(--accent-soft);color:var(--chip-ink)} .pill.dark{background:var(--petrol);color:#F7F7F7} .pill.orange{background:var(--orangebg);color:var(--orange-ink)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:4px;background:var(--sunk);border-radius:99px;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs button{appearance:none;border:0;background:transparent;color:var(--ink);font:700 15px/1 var(--f-body);padding:0 18px;min-height:40px;border-radius:99px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;text-decoration:none}
.tabs a:hover,.tabs button:hover{color:var(--title)}
.tabs [aria-current=page],.tabs [aria-pressed=true]{background:var(--accent-soft);color:var(--chip-ink)}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--r);background:var(--warnbg);color:var(--warn)}
.alert.bad{background:var(--badbg);color:var(--bad)} .alert.ok{background:var(--okbg);color:var(--ok)} .alert.info{background:var(--accent-soft);color:var(--chip-ink)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--petrol);color:#F7F7F7;padding:12px 20px;border-radius:var(--r);font-weight:700;z-index:90;max-width:calc(100vw - 32px);box-shadow:var(--shadow);pointer-events:none}
.toast.bad{background:var(--bad);color:#fff}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--title)}
.logo span{font-family:var(--f-display);font-weight:700;font-size:24px;line-height:1;letter-spacing:-.01em}
.logo svg{flex:none}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
dialog{border:0;border-radius:var(--r-lg);padding:0;background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgb(0 0 0/.25);width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px)}
dialog::backdrop{background:rgb(14 23 25/.45)}
.dlg{padding:24px;display:grid;gap:16px}
.dlg-pie{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding-top:4px}
/* menos movimiento: sin desplazamientos animados ni transformaciones; los cambios de color y de opacidad se quedan (son cortos y ayudan a entender) */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}*,*::before,*::after{transition-property:color,background-color,border-color,box-shadow,opacity,text-decoration-color,outline-color!important}}