/* LAIV UI · el sistema de diseño de las páginas de trabajo (dashboard, control, panel, newsroom, paquete…).
   Nunca va al aire: lo que sale al aire usa el diseño de cada programa.

   Idea: COLOR ES SEÑAL. La interfaz es grafito y papel; el único color en pantalla es el estado:
   verde = en preview · ámbar = a verificar · rojo lleno = AL AIRE. Si no hay nada al aire, no hay rojo en ninguna parte.
   Cuando algo sale, una línea roja cruza el borde de arriba de todas las pantallas (la luz de aire, el punto de la i de LAiV).
   El color propio del programa vive solo adentro de las miniaturas de sus gráficas (--prog).

   Letra: Archivo (interfaz), Archivo Expanded 800 (títulos), IBM Plex Mono (tiempos, contadores, luces). */

@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/recursos/fuentes/Archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/recursos/fuentes/Archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/recursos/fuentes/PlexMono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/recursos/fuentes/PlexMono-500.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/recursos/fuentes/PlexMono-500-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0}

/* la letra de las gráficas de PP3: solo para las miniaturas y vistas previas, que imitan lo que sale al aire */
@font-face{font-family:'BricolageLE';font-weight:400;font-display:swap;src:url(/recursos/BricolageLE-Regular.ttf) format('truetype'),url(/recursos/BricolageGrotesque-400.woff2) format('woff2')}
@font-face{font-family:'BricolageLE';font-weight:800;font-display:swap;src:url(/recursos/BricolageLE-ExtraBold.ttf) format('truetype'),url(/recursos/BricolageGrotesque-800.woff2) format('woff2')}
.grafica{font-family:'BricolageLE',system-ui,sans-serif;font-stretch:normal}

:root{
  color-scheme:dark;
  /* grafito: del negro de control para arriba, en escalones parejos */
  --bg:#0C0D10; --s1:#111317; --s2:#16191E; --s3:#1D2026; --s4:#252931; --pozo:#090A0D;
  --line:#22262D; --line2:#30353F; --line3:#454B57;
  /* papel */
  --ink:#F3F2EE; --ink2:#C6C8CE; --soft:#8D919B; --faint:#5B606A;
  /* semáforo (igual en todos los programas; nunca cambia) */
  --ok:#2DD47A; --warn:#FFB01F; --aire:#E01A33; --aire-tx:#FF5D70; --err:#FF6B7D;
  --ok-a:rgba(45,212,122,.14); --warn-a:rgba(255,176,31,.12); --aire-a:rgba(224,26,51,.16);
  /* el color del programa: solo en las miniaturas de sus gráficas */
  --prog:#B08D57;
  --f-ui:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r1:4px; --r2:8px; --r3:14px;
  --sh-pop:0 28px 70px -20px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.45);
  --dur:.14s; --ease:cubic-bezier(.2,.7,.2,1);
  --ab-h:52px;
  /* nombres viejos que todavía usan algunas plantillas en JS */
  --card:var(--s2); --card2:var(--s3); --gold:var(--ink); --gold2:var(--ink2); --red:var(--aire); --green:var(--ok); --amber:var(--warn);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--f-ui);font-stretch:100%;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
:where(button,input,select,textarea){font:inherit;color:inherit;letter-spacing:inherit}
:where(a){color:inherit}
:where(h1,h2,h3,h4,p,figure){margin:0}
::selection{background:rgba(243,242,238,.24)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:where(code){font:500 .9em var(--f-mono);background:var(--s3);border:1px solid var(--line);border-radius:3px;padding:0 4px}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;font:500 10.5px/1 var(--f-mono);
  color:var(--ink2);background:var(--s2);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;letter-spacing:0}
.mono{font-family:var(--f-mono)} .tnum{font-variant-numeric:tabular-nums}
.expandida{font-stretch:125%;font-weight:800}
* {scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:3px solid var(--bg)} ::-webkit-scrollbar-track{background:transparent}

/* luces de estado con su palabra (semáforo) */
.luz{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.luz::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.luz.preview{color:var(--ok)} .luz.verificar{color:var(--warn)} .luz.aire{color:var(--aire-tx)}
.tag-aire{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:3px;background:var(--aire);color:#fff;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tag-aire::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;flex:none}

/* ---------- botones ---------- */
.btn{--h:36px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--h);padding:0 14px;
  border:1px solid var(--line2);border-radius:var(--r1);background:transparent;color:var(--ink);
  font:600 13.5px/1.1 var(--f-ui);font-stretch:100%;letter-spacing:.005em;text-decoration:none;text-align:center;cursor:pointer;user-select:none;
  transition:background-color var(--dur),border-color var(--dur),color var(--dur),transform .08s}
.btn:hover{background:var(--s3);border-color:var(--line3);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn.hueso,.btn.oro,.btn.prim{background:var(--ink);border-color:var(--ink);color:#0C0D10}
.btn.hueso:hover,.btn.oro:hover,.btn.prim:hover{background:#fff;border-color:#fff;color:#0C0D10}
.btn.ghost{border-color:transparent;color:var(--ink2)} .btn.ghost:hover{background:var(--s3);color:var(--ink)}
.btn.peligro{border-color:rgba(224,26,51,.5);color:var(--aire-tx)} .btn.peligro:hover{background:var(--s3);border-color:var(--aire)}
.btn.chico{--h:30px;padding:0 10px;font-size:12.5px}
.btn.grande{--h:46px;padding:0 20px;font-size:15px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.38;cursor:default;transform:none}
.btn:disabled:hover{background:transparent;border-color:var(--line2)}
.btn.hueso:disabled:hover,.btn.oro:disabled:hover,.btn.prim:disabled:hover{background:var(--ink);border-color:var(--ink)}
.btn svg{flex:none}

/* ---------- campos ---------- */
:where(input:not([type=checkbox],[type=radio],[type=color],[type=file],[type=range],[type=button],[type=submit]),select,textarea){
  width:100%;min-height:38px;background:var(--pozo);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r1);
  padding:8px 11px;font:400 14px/1.35 var(--f-ui);transition:border-color var(--dur),box-shadow var(--dur)}
:where(input:not([type=checkbox],[type=radio],[type=color],[type=file],[type=range]),select,textarea):hover{border-color:var(--line3)}
:where(input:not([type=checkbox],[type=radio],[type=color],[type=file],[type=range]),select,textarea):focus{border-color:var(--ink2);box-shadow:0 0 0 3px rgba(243,242,238,.10);outline:none}
:where(input,textarea)::placeholder{color:var(--faint);opacity:1}
:where(input[readonly]){color:var(--ink2)}
:where(textarea){resize:vertical;line-height:1.45}
:where(select){appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238D919B' stroke-width='1.6'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
:where(select) option{background:var(--s2);color:var(--ink)}
select:not([multiple]){padding-right:32px!important}
:where(input[type=checkbox],input[type=radio]){accent-color:var(--ink);width:16px;height:16px;margin:0;cursor:pointer}
:where(input[type=color]){width:100%;height:40px;padding:3px;background:var(--pozo);border:1px solid var(--line2);border-radius:var(--r1);cursor:pointer}
:where(input[type=color])::-webkit-color-swatch-wrapper{padding:0} :where(input[type=color])::-webkit-color-swatch{border:0;border-radius:2px}
:where(input[type=file]){font-size:13px;color:var(--soft)}
:where(input[type=file])::file-selector-button{font:600 13px var(--f-ui);color:var(--ink);background:var(--s3);border:1px solid var(--line2);border-radius:var(--r1);padding:8px 12px;margin-right:12px;cursor:pointer}
input[type=search]::-webkit-search-cancel-button{filter:invert(.6)}
:where(input[type=date])::-webkit-calendar-picker-indicator{filter:invert(.75)}

/* ---------- barra de arriba (escritorio) ---------- */
.appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px 16px;min-height:var(--ab-h);padding:0 18px;
  background:rgba(12,13,16,.88);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line)}
.ab-id{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto;overflow:hidden}
.ab-id>*:not(.ab-ctx){flex:none}
.ab-id .logo,.appbar .logo{height:22px;width:auto;display:block;flex:none}
.ab-prog{font:800 15px/1 var(--f-ui);font-stretch:112%;white-space:nowrap}
.ab-sep{width:1px;height:20px;background:var(--line2);flex:none}
.ab-pag{font-weight:600;white-space:nowrap}
.ab-ctx{color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ab-nav{display:flex;align-self:stretch;align-items:stretch;gap:0;margin-left:auto;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}
.ab-nav::-webkit-scrollbar{display:none}
.ab-nav a{position:relative;display:flex;align-items:center;padding:0 10px;color:var(--soft);text-decoration:none;font-weight:500;font-size:13px;white-space:nowrap;transition:color var(--dur)}
.ab-nav a:hover{color:var(--ink)}
.ab-nav a:focus-visible{outline-offset:-3px;border-radius:6px}
.ab-nav a[aria-current="page"]{color:var(--ink)}
.ab-nav a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--ink);border-radius:2px 2px 0 0}
.ab-der{display:flex;align-items:center;gap:10px;flex:none}
.estado{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:999px;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.estado i{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none;transition:background-color .3s}
.estado.ok i,.estado.on i{background:var(--ok)}
.estado.ok,.estado.on{color:var(--ink2)}
.estado.mal i,.estado.off i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--aire-tx)}
.ab-reloj{font:500 13px/1 var(--f-mono);color:var(--ink2);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.ab-buscar{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 6px 0 10px;border:1px solid var(--line2);border-radius:var(--r1);
  background:var(--s1);color:var(--soft);font:500 12.5px/1 var(--f-ui);cursor:pointer;transition:border-color var(--dur),color var(--dur)}
.ab-buscar:hover{border-color:var(--line3);color:var(--ink)}
.ab-aire{display:none}
html.al-aire .ab-aire{display:inline-flex}
.ab-yo{display:flex;align-items:center;gap:8px;color:var(--soft);font-size:13px;white-space:nowrap}
@media (max-width:1180px){ .ab-nav a{padding:0 7px;font-size:12.5px} .ab-nav a[aria-current="page"]::after{left:7px;right:7px} .ab-buscar{font-size:0;gap:0;padding:0 5px} .ab-ctx,.ab-sep:has(+ .ab-ctx){display:none} }
@media (max-width:980px){ .appbar{flex-wrap:wrap;padding:8px 14px;row-gap:2px} .ab-id{flex:1 1 0;min-width:0} .ab-nav{order:3;width:100%;margin-left:-7px;overflow-x:auto;min-height:38px;scrollbar-width:none} .ab-nav::-webkit-scrollbar{display:none} .ab-der{margin-left:auto} .ab-buscar{display:none} }
@media (max-width:560px){ .ab-ctx{display:none} .estado{padding:0 8px;gap:0} .estado>span{display:none} .ab-der{gap:8px} }

/* ---------- la luz de aire ---------- */
html.al-aire body::before{content:"";position:fixed;left:0;right:0;top:0;height:3px;background:var(--aire);box-shadow:0 0 16px 1px rgba(224,26,51,.65);z-index:200;
  transform-origin:0 50%;animation:laiv-tally .38s var(--ease)}
@keyframes laiv-tally{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.sin-senal.al-aire body::before{opacity:.35;animation:none;box-shadow:none}
html.sin-senal .ab-aire{opacity:.45}
@keyframes laiv-destello{from{opacity:1}to{opacity:0}}
html.corte [data-tally]::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:rgba(224,26,51,.32);animation:laiv-destello .6s ease-out forwards}

/* ---------- avisos ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:150;display:flex;align-items:center;gap:10px;max-width:min(92vw,520px);
  padding:10px 16px 10px 14px;background:var(--s4);color:var(--ink);border:1px solid var(--line3);border-radius:var(--r2);box-shadow:var(--sh-pop);
  font:600 13.5px/1.3 var(--f-ui);opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .16s,transform .22s var(--ease)}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink2);flex:none}
.toast.v{opacity:1;transform:translate(-50%,0)}
.toast[data-tono="aire"]::before{background:var(--aire);box-shadow:0 0 0 3px var(--aire-a)}
.toast[data-tono="ok"]::before{background:var(--ink);box-shadow:0 0 0 3px rgba(243,242,238,.14)}
.toast[data-tono="error"]{border-color:rgba(224,26,51,.6)}
.toast[data-tono="error"]::before{background:transparent;box-shadow:inset 0 0 0 2px var(--aire-tx)}

/* ---------- buscador (⌘K) ---------- */
.paleta{position:fixed;inset:0;z-index:300;background:rgba(5,6,8,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.pal-caja{width:min(640px,100%);max-height:min(560px,76vh);display:flex;flex-direction:column;background:var(--s2);border:1px solid var(--line2);border-radius:var(--r3);box-shadow:var(--sh-pop);overflow:hidden;animation:laiv-pal .16s var(--ease)}
@keyframes laiv-pal{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.pal-in{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line)}
.pal-in svg{color:var(--soft);flex:none}
.pal-in input{flex:1;min-height:54px;background:transparent!important;border:0!important;box-shadow:none!important;padding:0;font:500 17px/1.2 var(--f-ui);color:var(--ink)}
.pal-l{overflow:auto;padding:6px;flex:1}
.pal-g{padding:10px 10px 4px;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pal-o{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:9px 10px;border-radius:var(--r2);cursor:pointer}
.pal-o .pal-t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-o .pal-s{grid-column:1;color:var(--soft);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-o .pal-a{grid-column:2;grid-row:1 / span 2;color:var(--faint);font-size:12px;white-space:nowrap}
.pal-o[aria-selected="true"]{background:var(--s4)}
.pal-o[aria-selected="true"] .pal-a{color:var(--ink2)}
.pal-o mark{background:none;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px}
.pal-vacio{padding:26px 12px;color:var(--soft);text-align:center}
.pal-pie{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line);color:var(--faint);font-size:12px}
.pal-pie span{display:inline-flex;align-items:center;gap:5px}

/* ---------- firma LAIV ---------- */
.laiv-logo{height:.9em;width:auto;display:inline-block;vertical-align:baseline;color:var(--ink);overflow:visible}
.laiv-logo circle{filter:drop-shadow(0 0 3px rgba(224,26,51,.8))}
.laiv-pie{display:flex;align-items:center;justify-content:center;gap:10px;padding:30px 16px 40px;color:var(--faint);font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.laiv-pie .laiv-logo{height:12px;color:var(--soft)}
.laiv-firma{font:500 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}