/* Mando · centro de mando. Inicio y Biblioteca: estudio claro. Vitrina: se viste con la marca de cada proyecto. */
:root{
  /* Tema (encargo #172). Claro = el estudio de siempre: papel cálido, tarjetas blancas, tinta casi negra. Oscuro = el mismo
     estudio de noche: carbón cálido, tarjetas un tono arriba, tinta crema. Todo color de la interfaz sale de aquí: los
     módulos solo usan var(--…). Lo que no cambia de tema (barra lateral, vitrina con la marca del proyecto, consola,
     semáforos) vive abajo como constante. Tema elegido: web/tema.js (data-theme en <html> antes de pintar). */
  --papel:#F4F1EA;--papel-2:#EBE6DB;--tarjeta:#FFFFFF;--campo:#FFFFFF;--tinta:#16151A;--tinta-2:#5B5862;--linea:#E2DCD0;
  --tinta-hover:#2C2A33;--sobre-tinta:#FFFFFF;--sobre-tinta-2:#C9C6CF;--hueso:#F7F4EE;--page-tinta:#24222A;--enlace:#1D4ED8;
  --velo-rgb:22,21,26;--sombra-rgb:22,21,26;
  --ok:#15803D;--warn:#B45309;--err:#C2410C;--neutro:#8A8792;
  --ok-suave:#E3F5E8;--ok-tinta:#14632F;--warn-suave:#FDF1E1;--warn-tinta:#8A4A06;--err-suave:#FDE7E4;--err-tinta:#A1260F;
  --prop-suave:#EFE7FD;--prop-tinta:#6D28D9;
  /* Chips de estado por familia (fondo suave + texto oscuro; en oscuro, fondo hondo + texto claro). */
  --chip-azul-suave:#DBEAFE;--chip-azul-tinta:#1E3A8A;--chip-morado-suave:#F3E8FF;--chip-morado-tinta:#581C87;
  --chip-naranja-suave:#FFEDD5;--chip-naranja-tinta:#7C2D12;--chip-naranja-filo:#E0A38B;--chip-gris-suave:#E7E5E4;--chip-gris-tinta:#292524;
  --chip-cielo-suave:#E0F2FE;--chip-cielo-tinta:#0C4A6E;
  --nav-bg:#16151A;--nav-filo:transparent;--logo-fondo:#FFFFFF;
  /* Constantes (iguales en los dos temas): van sobre fondos que no cambian (barra lateral, vitrina, consola, mockup). */
  --blanco:#FFFFFF;--negro:#000000;--casi-negro:#111111;--azul:#245BCC;--cielo:#7DD3FC;--marino:#0B1A2E;
  --rojo-relleno:#C2410C;--verde-relleno:#15803D;
  --luz-ok:#22C55E;--luz-warn:#F59E0B;--luz-err:#EF4444;--luz-off:#9CA3AF;--ambar:#D97706;--rojo:#DC2626;--verde:#16A34A;
  --nav-tinta:#ECE8E0;--nav-tinta-2:#CFCBD4;--nav-tinta-3:#A8A4AE;--nav-tinta-4:#8D8994;--nav-tinta-5:#8F8B97;
  --consola:#16151A;--consola-tinta:#EDE9E1;--sin-color:#475569;--sin-color-2:#1F2937;
  --equipo:#05080D;--velo-vitrina:#101521;--opcion-oscura:#1E1D24;--mac-rojo:#FF5F57;--mac-ambar:#FEBC2E;--mac-verde:#28C840;
  /* Escenario de la vitrina (Código, Datos, Explicar, Calor): oscuro en los dos temas, como el de cada proyecto. */
  --esc-fondo:#0D1117;--esc-fondo-2:#161B22;--esc-tinta:#E6EDF3;--esc-amarillo:#FCD34D;--esc-amarillo-2:#FDE68A;--esc-verde:#86EFAC;
  --esc-rojo:#FCA5A5;--esc-azul:#93C5FD;--esc-pagina-tinta:#24222A;--esc-sobre-claro:#0B1220;--esc-verde-hondo:#052E16;--esc-amarillo-hondo:#422006;
  --esc-azul-hondo:#0B1F4A;--esc-rojo-hondo:#450A0A;--calor-1:#38BDF8;--calor-2:#34D399;--calor-3:#FACC15;--calor-4:#F97316;
  /* Acentos que se leen igual sobre claro y oscuro (líneas, puntos, barras; nunca texto largo). */
  --oro:#F5B841;--cielo-hondo:#0284C7;--haz:#1F6AE0;--cielo-2:#38BDF8;--cielo-3:#0EA5E9;--cielo-claro:#BAE6FD;--durazno:#FED7AA;--menta:#BBF7D0;
  --rosa-claro:#FECACA;--azul-hondo:#1D4ED8;--crema:#F4F1EA;--naranja:#FB923C;--naranja-2:#EA580C;--morado:#8B5CF6;--verde-claro:#4ADE80;--marino-2:#16294A;
  --ver-ok-filo:#052E14;--ver-nueva:#F5B942;--ver-nueva-tinta:#2B1A00;--ver-pend:#F87171;--ver-pend-tinta:#2A0505;
  --display:'Bricolage Grotesque',system-ui,sans-serif;--sans:'Figtree',system-ui,sans-serif;
  --side-w:300px;--top-h:72px;
  /* Tema de la vitrina: lo pone el JS con los colores del proyecto. */
  --side:#0B1A2E;--accent:#7DD3FC;--accent-ink:#08111C;--stage-a:#16294A;--stage-b:#070F1E;
  /* Capas del mapa de la app (web/mapa.js): un color por capa; los únicos hex de la vista viven aquí. */
  --mapa-hosts:#7DD3FC;--mapa-paginas:#A7F3D0;--mapa-apps:#FDE68A;--mapa-api:#FDBA74;--mapa-datos:#C4B5FD;--mapa-servicios:#F9A8D4;--mapa-terceros:#CBD5E1;
  /* Barras de «IA por proyecto» (web/integraciones.js): una sola serie, un solo color, validado con la skill dataviz. */
  --ig-barra:#245BCC;
  /* Cerebro 3D (web/cerebro3d/, encargo #151): el CONFIG de la escena «Brain» de GetLayers sale de aquí (tinte del estilo
     «Neural Monitor» que entrega getlayers_materialize; el shader nunca se toca). Escena de tono oscuro en los dos temas. */
  --cer3d-profundo:#01040E;--cer3d-frio:#FFFFFF;--cer3d-calido:#8ECBFF;--cer3d-sinapsis:#1F6AE0;--cer3d-borde:#1F6AE0;--cer3d-ambiente:#2B5A9C;
  --cer3d-resalte:#2563EB;--cer3d-esquina-a:#0F5FCF;--cer3d-esquina-b:#040F2E;--cer3d-cursor:#000000;--cer3d-nucleo:#70BCFF;--cer3d-pulso:#EAF3FF;--cer3d-camino:#FDE68A;
  /* Diálogos (ESTANDAR §4c, regla del dueño 9-oct-2026: la cabecera contrasta con el cuerpo, nunca blanco sobre blanco).
     Cabecera en la tinta marina del mando con un filo de cielo; cuerpo en papel cálido para que lo blanco (campos,
     tarjetas) resalte. Contraste medido: título 14.2:1 y subtítulo 8.9:1 en claro, 11.4:1 y 7.2:1 en oscuro
     (docs/capturas/modales/contraste.txt). */
  --dlg-cab-bg:#12233D;--dlg-cab-tinta:#F7F3EC;--dlg-cab-tinta-2:#B8C4D6;--dlg-cab-linea:rgba(247,243,236,.22);
  --dlg-cab-boton:rgba(247,243,236,.08);--dlg-cab-boton-hover:rgba(247,243,236,.18);--dlg-cab-filo:rgba(125,211,252,.28);--dlg-cab-foco:#7DD3FC;
  --dlg-cuerpo:#FBF8F3;
}
/* Oscuro: por el sistema (sin elección) o elegido en el conmutador. La cabecera de los diálogos sube un tono para seguir
   separándose del cuerpo oscuro; la barra lateral baja uno para separarse del papel. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --papel:#141318;--papel-2:#1D1C22;--tarjeta:#222128;--campo:#1A191F;--tinta:#F2EEE6;--tinta-2:#ADA9B4;--linea:#36343D;
  --tinta-hover:#DAD5CC;--sobre-tinta:#16151A;--sobre-tinta-2:#4A4752;--hueso:#2B2A31;--page-tinta:#E6E1D8;--enlace:#93C5FD;
  --velo-rgb:242,238,230;--sombra-rgb:0,0,0;
  --ok:#4ADE80;--warn:#FBBF24;--err:#FB923C;--neutro:#9B98A3;
  --ok-suave:#13301F;--ok-tinta:#86EFAC;--warn-suave:#36270F;--warn-tinta:#FCD34D;--err-suave:#3B1A16;--err-tinta:#FCA5A5;
  --prop-suave:#2B2142;--prop-tinta:#C4B5FD;
  --chip-azul-suave:#172554;--chip-azul-tinta:#BFDBFE;--chip-morado-suave:#2E1747;--chip-morado-tinta:#E9D5FF;
  --chip-naranja-suave:#3A1F0E;--chip-naranja-tinta:#FDBA74;--chip-naranja-filo:#7C3A1E;--chip-gris-suave:#2E2C33;--chip-gris-tinta:#E7E5E4;
  --chip-cielo-suave:#0C2A3D;--chip-cielo-tinta:#BAE6FD;
  --nav-bg:#0C0B10;--nav-filo:#2A2830;--logo-fondo:#ECE8E0;
  --dlg-cab-bg:#1B3358;--dlg-cab-filo:rgba(125,211,252,.36);--dlg-cuerpo:#1B1A20;--ig-barra:#3D8BE8}}
:root[data-theme="dark"]{color-scheme:dark;
  --papel:#141318;--papel-2:#1D1C22;--tarjeta:#222128;--campo:#1A191F;--tinta:#F2EEE6;--tinta-2:#ADA9B4;--linea:#36343D;
  --tinta-hover:#DAD5CC;--sobre-tinta:#16151A;--sobre-tinta-2:#4A4752;--hueso:#2B2A31;--page-tinta:#E6E1D8;--enlace:#93C5FD;
  --velo-rgb:242,238,230;--sombra-rgb:0,0,0;
  --ok:#4ADE80;--warn:#FBBF24;--err:#FB923C;--neutro:#9B98A3;
  --ok-suave:#13301F;--ok-tinta:#86EFAC;--warn-suave:#36270F;--warn-tinta:#FCD34D;--err-suave:#3B1A16;--err-tinta:#FCA5A5;
  --prop-suave:#2B2142;--prop-tinta:#C4B5FD;
  --chip-azul-suave:#172554;--chip-azul-tinta:#BFDBFE;--chip-morado-suave:#2E1747;--chip-morado-tinta:#E9D5FF;
  --chip-naranja-suave:#3A1F0E;--chip-naranja-tinta:#FDBA74;--chip-naranja-filo:#7C3A1E;--chip-gris-suave:#2E2C33;--chip-gris-tinta:#E7E5E4;
  --chip-cielo-suave:#0C2A3D;--chip-cielo-tinta:#BAE6FD;
  --nav-bg:#0C0B10;--nav-filo:#2A2830;--logo-fondo:#ECE8E0;
  --dlg-cab-bg:#1B3358;--dlg-cab-filo:rgba(125,211,252,.36);--dlg-cuerpo:#1B1A20;--ig-barra:#3D8BE8}
/* Claro elegido con el sistema en oscuro: los controles nativos (barras de scroll, selectores) también en claro. El visor
   público /v/ lleva data-theme="light" fijo y su propio color-scheme: no se toca aquí. */
:root[data-theme="light"]:not([data-tema-fijo]){color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;touch-action:manipulation}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:0}

.mark{width:30px;height:30px;flex:none}
.mark path{fill:var(--tinta)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:1rem;text-decoration:none;transition:background .18s,border-color .18s,transform .18s;white-space:nowrap}
.btn.primary{background:var(--tinta);color:var(--sobre-tinta)}
.btn.primary:hover{background:var(--tinta-hover)}
.btn.primary:disabled{opacity:.7;cursor:progress}
.btn.ghost{background:transparent;border-color:var(--linea);color:var(--tinta)}
.btn.ghost:hover{border-color:var(--tinta)}
.btn.danger{background:var(--rojo-relleno);color:var(--blanco)}
.btn.danger:hover{filter:brightness(.88)}
.btn.wide{width:100%}
.btn.sm{min-height:44px;padding:0 14px;font-size:.9375rem}

label,.lbl{display:block;font-weight:600;font-size:.875rem;color:var(--tinta-2);margin:14px 0 6px}
input,select,textarea{width:100%;min-height:44px;padding:10px 14px;border-radius:12px;border:1px solid var(--linea);background:var(--campo);font-size:1rem}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--tinta);outline:none}
@media (pointer:coarse){input,select,textarea{font-size:16px}}

.ibtn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--linea);background:var(--tarjeta);color:var(--tinta);text-decoration:none;transition:background .18s,border-color .18s}
.ibtn:hover{border-color:var(--tinta)}

/* Entrada */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));overflow:auto;z-index:50;background:radial-gradient(90% 70% at 50% 0%,var(--tarjeta) 0%,var(--papel) 60%,var(--papel-2) 100%)}
.gate-in{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;text-align:center}
.mark.big{width:64px;height:64px}
.wordmark{font-size:2.25rem;line-height:2.75rem;margin-top:16px}
.gate-sub{margin:4px 0 32px;color:var(--tinta-2)}
.gate form{width:100%;text-align:left}
.gate form .btn{margin-top:16px}
#setupCode{text-align:center;letter-spacing:.12em;font-family:var(--display)}
.gate-err{min-height:1.5em;margin:14px 0 0;color:var(--err);font-weight:600}
.gate.go .mk-c{animation:inC .45s ease-out both}
.gate.go .mk-m{animation:inM .5s .25s ease-out both}
.gate.go .wordmark,.gate.go .gate-sub{animation:inW .6s .6s ease-out both}
@keyframes inC{from{opacity:0;transform:translateY(4px)}}
@keyframes inM{from{opacity:0;transform:translateX(6px)}}
@keyframes inW{from{opacity:0}}
.gate.out{opacity:0;transition:opacity .22s;pointer-events:none}

/* Estructura: barra global | contenido (Inicio, Biblioteca o vitrina) */
.app{height:100vh;height:100dvh;display:grid;grid-template-columns:var(--nav-w,248px) minmax(0,1fr);transition:grid-template-columns .25s cubic-bezier(.2,.8,.2,1);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.app.navc{--nav-w:0px}
.app.navc .nav{visibility:hidden}
/* Al compactar o expandir, la columna cambia de ancho con transición: el contenido conserva su ancho
   completo y se recorta, en vez de encogerse y encimarse mientras la columna crece. */
@media (min-width:701px){
  .nav>*{flex-shrink:0;min-width:228px}
  .side>*{min-width:calc(300px - 1px)}
  .side>.vista-fila{min-width:calc(300px - 25px)}
  .app.navc .nav,.vit.noside .side{transition:visibility 0s .25s}
}
.main{min-width:0;min-height:0;display:flex;flex-direction:column}
.nav{display:flex;flex-direction:column;min-height:0;background:var(--nav-bg);box-shadow:inset -1px 0 0 var(--nav-filo);color:var(--nav-tinta);padding:12px 10px;gap:4px;overflow:hidden}
.nav .mark path{fill:var(--nav-tinta)}
.nav-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 10px}
.nav .brand{color:var(--blanco);min-width:0}
.nav .brand b{white-space:nowrap}
.nbtn{display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:10px;background:transparent;color:var(--nav-tinta-3)}
.nbtn:hover{background:rgba(255,255,255,.08);color:var(--blanco)}
/* Botones de encabezado que se ven de 36–40 px: un área táctil invisible los lleva a 44 (no cambia el diseño). */
:is(.nav-head,.nav-sec,.side-head) .nbtn{position:relative}
:is(.nav-head,.nav-sec,.side-head) .nbtn::before{content:"";position:absolute;inset:-2px}
.nav-sec .nbtn::before{inset:-4px}
/* Secciones del mando (encargo #179; el dueño: «colócalos en 2 filas como hicimos abajo»): Proyectos, Portafolio,
   Agencia, Notas, Avisos y Errores en una cuadrícula de 2 filas de solo emoji, como la de abajo; el nombre va en
   aria-label/title y la lista de proyectos gana el alto que ocupaban las filas con texto. */
.nav-main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.nav-main .nbtn{position:relative;width:100%;height:44px;min-width:0;padding:0;border-radius:10px}
.nav-main .i3d{width:24px;height:24px}
/* Activo, arriba y abajo: fondo, filo y una raya de cielo bajo el emoji (no solo color). */
:is(.nav-main,.nav-tools) .nbtn[aria-current="page"]{background:rgba(255,255,255,.14);color:var(--blanco);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
:is(.nav-main,.nav-tools) .nbtn[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:4px;width:16px;height:3px;margin-left:-8px;border-radius:2px;background:var(--cielo)}
.nav-sec{display:flex;align-items:center;justify-content:space-between;margin:14px 2px 4px 12px;min-width:214px;font-size:.875rem;font-weight:600;color:var(--nav-tinta-4);white-space:nowrap}
.nav-sec b{font-weight:600;color:var(--nav-tinta-5)}
.nav-sec .nbtn{width:36px;height:36px}
.nav-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:stretch;align-items:center;gap:2px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.nav-tools .nbtn{position:relative;width:100%;height:44px;min-width:0;padding:0;border-radius:10px}
.nav-tools .i3d,.pquick .i3d{width:22px;height:22px}
.nav-tools .acct{border:0;padding:0}
/* Tema (encargo #172): Claro · Oscuro · Sistema en una fila de solo ícono al pie de la barra (regla «menú lateral sin
   saturar»); el elegido queda marcado con aria-pressed y un fondo, no solo con color. */
.nav-tema{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:6px;padding:3px;border-radius:13px;background:rgba(255,255,255,.05)}
.nav-tema .nbtn{width:100%;height:44px;min-width:0;padding:0;border-radius:10px}
.nav-tema .nbtn[aria-pressed="true"]{background:rgba(255,255,255,.16);color:var(--blanco);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.acct-btn{padding:0!important;justify-content:center}
.menu{left:auto;right:0}
.nav-projects{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;margin:0 -4px;padding:0 4px}
.nav-vacio{margin:6px 10px;font-size:.875rem;color:var(--nav-tinta-3)}
/* Buscador de listas (encargo #179, web/buscador.js): el mismo en la barra global (proyectos) y en el panel del
   proyecto (pantallas). Campo de 44 px y 16 px de letra (iPhone no acerca la página), lupa, «/» como pista en
   computadora y limpiar de 44 px. Los colores salen del contexto: barra constante oscura o el lado de cada marca. */
.buscador{--bq-tinta:var(--blanco);--bq-tenue:var(--nav-tinta-3);--bq-fondo:rgba(255,255,255,.07);--bq-filo:rgba(255,255,255,.12);position:relative;display:flex;align-items:center;flex:none}
.side .buscador{--bq-tinta:var(--side-ink,var(--blanco));--bq-tenue:var(--side-tenue,var(--nav-tinta-2));--bq-fondo:color-mix(in srgb,var(--bq-tinta) 9%,transparent);--bq-filo:color-mix(in srgb,var(--bq-tinta) 22%,transparent);margin:0 12px 8px;min-width:252px}
.nav .buscador{margin:2px 0 6px}
.buscador input{width:100%;min-height:44px;padding:0 44px 0 38px;border-radius:12px;border:1px solid var(--bq-filo);background:var(--bq-fondo);color:var(--bq-tinta);font-size:1rem;-webkit-appearance:none;appearance:none}
.buscador input::placeholder{color:var(--bq-tenue);opacity:1}
.buscador input::-webkit-search-cancel-button{display:none}
.buscador input:focus{border-color:var(--cielo);outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--cielo) 35%,transparent)}
.bq-lupa{position:absolute;left:12px;color:var(--bq-tenue);pointer-events:none}
.bq-kbd{position:absolute;right:12px;min-width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--bq-filo);border-radius:6px;color:var(--bq-tenue);font:600 .875rem/1 var(--sans,inherit);pointer-events:none}
.buscador.activo .bq-kbd,.buscador:focus-within .bq-kbd{display:none}
@media (pointer:coarse){.bq-kbd{display:none}}
.bq-x{position:absolute;right:0;top:0;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--bq-tenue);cursor:pointer}
.bq-x:hover{color:var(--bq-tinta)}
.nproj{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:12px;color:var(--nav-tinta-2);text-decoration:none;font-weight:500;white-space:nowrap}
.nproj:hover{background:rgba(255,255,255,.07);color:var(--blanco)}
.nproj[aria-current="page"]{background:rgba(255,255,255,.12);color:var(--blanco)}
.nproj .dot{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:var(--c,var(--sin-color));color:var(--c-ink,var(--blanco));font-family:var(--display);font-weight:800;font-size:.875rem}
.nproj .dot img{width:100%;height:100%;object-fit:contain;background:var(--blanco)}
.nproj span:last-child{overflow:hidden;text-overflow:ellipsis}
.acct{position:relative}
.avatar{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--nav-tinta);color:var(--consola);font-family:var(--display);font-weight:800;font-size:.875rem}
.menu{position:absolute;left:0;bottom:calc(100% + 6px);min-width:200px;padding:6px;border-radius:16px;background:var(--tarjeta);color:var(--tinta);border:1px solid var(--linea);box-shadow:0 20px 40px -12px rgba(var(--sombra-rgb),.35);z-index:30;display:flex;flex-direction:column}
.menu button{min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;text-align:left;font-weight:600}
.menu button:hover{background:var(--papel)}
.menu #logoutBtn{color:var(--err)}
.mtop{display:none}
/* Barra global oculta: en Inicio, Biblioteca y Documentos aparece la franja para volver a abrirla. */
.app.navc:not(.in-vit) .mtop{display:flex;align-items:center;gap:10px;padding:14px 24px 0}
/* Cada barra se oculta desde su encabezado; el botón para reabrirla solo existe mientras está oculta. */
@media (min-width:701px){.app:not(.navc) #navToggle,.vit:not(.noside) #panelToggle{display:none}}
/* Visor entre 701 y 1100 px con el panel del proyecto abierto: barra global + panel dejaban el visor en ~270 px y la
   barra del visor se salía de la pantalla. La barra global se oculta sola (no se guarda como preferencia) y #navToggle
   la vuelve a abrir para esta visita (.navpin, mando.js › navAuto). Al ocultar el panel, regresa sola. */
@media (min-width:701px) and (max-width:1100px){
  .app.in-vit:not(.navpin):has(#vit:not(.noside)){--nav-w:0px}
  .app.in-vit:not(.navpin):has(#vit:not(.noside)) .nav{visibility:hidden;transition:visibility 0s .25s}
  .app.in-vit:not(.navpin):has(#vit:not(.noside)) #navToggle{display:inline-grid}
}
.side-hide{margin-left:auto;color:rgba(255,255,255,.65)}
.brand{display:flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none;min-height:44px}
.brand b{font-family:var(--display);font-weight:800;font-size:1.3125rem;letter-spacing:-.03em}

/* Inicio */
.home{flex:1;overflow:auto;padding:32px 40px 56px}
.home-head,.grid,.offline,.chips,.libcount,.icons{max-width:1280px;margin-left:auto;margin-right:auto}
.home-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.home-head h1{font-size:2.5rem;line-height:1.1}
.offline{color:var(--warn);font-weight:600;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px}
.card{display:flex;flex-direction:column;min-width:0;border-radius:22px;background:var(--tarjeta);color:var(--tinta);text-decoration:none;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06),0 8px 24px -12px rgba(var(--sombra-rgb),.18);transition:transform .2s,box-shadow .2s;padding:10px}
.card:hover,.card:focus-visible{transform:translateY(-3px);box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06),0 18px 36px -14px rgba(var(--sombra-rgb),.28)}
.shot{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--c-side,var(--sin-color-2)),var(--c-acc,var(--sin-color)))}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.shot .ph{position:absolute;inset:0;display:grid;place-items:center}
.shot .ph span{font-family:var(--display);font-weight:800;font-size:3rem;color:rgba(255,255,255,.9)}
.cbody{display:flex;align-items:center;gap:12px;padding:14px 8px 6px}
.chip{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:var(--c-side,var(--sin-color-2));color:var(--blanco);font-family:var(--display);font-weight:800;font-size:1.125rem}
.chip img{width:100%;height:100%;object-fit:contain;background:var(--logo-fondo)}
.chip.wide{width:auto;max-width:150px;height:44px;padding:0;background:transparent}
.chip.wide img{width:auto;max-width:150px;height:40px;background:transparent}
.cinfo{min-width:0;flex:1}
.card h3{font-size:1.1875rem;line-height:1.3;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .dom{display:block;color:var(--tinta-2);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmeta{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:4px 8px 6px;font-size:.875rem;color:var(--tinta-2)}
.tag{font-weight:600;color:var(--warn)}
.tag.prop{color:var(--prop-tinta);background:var(--prop-suave);padding:1px 10px;border-radius:999px}
.st{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--tinta)}
.st::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--neutro)}
.st.ok::before{background:var(--luz-ok);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.st.warn::before{background:var(--luz-warn);box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.st.err::before{background:var(--luz-err);box-shadow:0 0 0 3px rgba(239,68,68,.16)}
.skel{min-height:300px;background:linear-gradient(90deg,var(--tarjeta) 0%,var(--hueso) 50%,var(--tarjeta) 100%);background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.empty{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--tinta-2)}

/* Botón flotante (FAB): nuevo proyecto */
/* Los dos flotantes (este «Nuevo» y el de Jarvis, jarvis.css) comparten la misma fórmula de borde: quedan en una columna. */
.fab{position:fixed;right:max(28px,calc(env(safe-area-inset-right) + 16px));bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));z-index:20;display:inline-flex;align-items:center;gap:10px;height:60px;padding:0 24px 0 18px;border:0;border-radius:999px;background:var(--tinta);color:var(--sobre-tinta);font-weight:700;font-size:1rem;box-shadow:0 14px 30px -10px rgba(var(--sombra-rgb),.55),0 2px 6px rgba(var(--sombra-rgb),.2);transition:transform .2s,box-shadow .2s}
.fab:hover{transform:translateY(-2px);box-shadow:0 20px 36px -12px rgba(var(--sombra-rgb),.6),0 2px 6px rgba(var(--sombra-rgb),.2)}
.fab:active{transform:scale(.97)}
.home{padding-bottom:calc(172px + env(safe-area-inset-bottom))}   /* el «Nuevo» y, encima, Jarvis (suben 162 px) no tapan la última tarjeta */

/* Documentos */
.docs{flex:1;min-height:0;display:grid;grid-template-columns:340px minmax(0,1fr)}
.doclist{min-height:0;overflow-y:auto;padding:28px 16px 40px 24px;border-right:1px solid var(--linea)}
.doclist h1{font-size:2rem;margin:0 0 16px}
.doclist .search{max-width:none;width:100%;margin-bottom:12px}
.dgroup{margin-bottom:4px}
.dghead{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:12px;background:transparent;font-weight:700;color:var(--tinta);text-align:left}
.dghead:hover{background:var(--papel-2)}
.dghead span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dghead small{font-size:.875rem;font-weight:600;color:var(--tinta-2)}
.dghead::before{content:"›";display:inline-block;width:12px;color:var(--tinta-2);transition:transform .2s}
.dghead[aria-expanded="true"]::before{transform:rotate(90deg)}
.noflag{font-style:normal;font-size:.8125rem;font-weight:700;color:var(--warn);background:var(--warn-suave);padding:2px 8px;border-radius:999px;white-space:nowrap}
.dgitems{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px 20px}
.ditem{display:block;padding:9px 12px;border-radius:12px;color:var(--tinta);text-decoration:none;min-height:44px}
.ditem:hover{background:var(--papel-2)}
.ditem[aria-current="page"]{background:var(--tarjeta);box-shadow:0 1px 2px rgba(var(--sombra-rgb),.08)}
.ditem b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ditem small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.875rem;color:var(--tinta-2);line-height:1.35}
.docview{min-height:0;overflow-y:auto;padding:20px 32px 60px;background:var(--papel-2)}
.doctools{display:flex;align-items:center;gap:12px;max-width:860px;margin:0 auto 14px}
#docBack{display:none}
.docmeta{flex:1;min-width:0;display:flex;flex-direction:column}
.docmeta b{font-size:.875rem;color:var(--tinta-2)}
.docmeta span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875rem;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page{max-width:860px;margin:0 auto;background:var(--tarjeta);border-radius:18px;padding:56px 64px;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06),0 18px 40px -24px rgba(var(--sombra-rgb),.3);font-size:1rem;line-height:1.7;color:var(--page-tinta);overflow-wrap:break-word}
.page h1{font-size:2.125rem;line-height:1.15;margin:0 0 20px}
.page h2{font-size:1.5rem;line-height:1.25;margin:40px 0 12px;padding-top:12px;border-top:1px solid var(--linea)}
.page h3{font-size:1.1875rem;font-weight:700;margin:28px 0 8px}
.page p,.page ul,.page ol{margin:0 0 14px}
.page li{margin:4px 0}
.page a{color:var(--enlace)}
.page strong{color:var(--tinta)}
.page code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em;background:var(--papel);padding:2px 6px;border-radius:6px}
.page pre{background:var(--tinta);color:var(--consola-tinta);padding:16px 18px;border-radius:12px;overflow:auto;font-size:.875rem;line-height:1.55}
.page pre code{background:none;padding:0;color:inherit}
.page blockquote{margin:0 0 14px;padding:10px 16px;border-left:4px solid var(--linea);color:var(--tinta-2);background:var(--papel)}
.page table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.9375rem;display:block;overflow-x:auto}
.page th,.page td{border:1px solid var(--linea);padding:8px 10px;text-align:left;vertical-align:top;min-width:8rem;overflow-wrap:normal;hyphens:manual}
.page th:first-child,.page td:first-child{min-width:0}
.page td code{white-space:nowrap}
.page th{background:var(--papel);font-weight:700}
.page hr{border:0;border-top:1px solid var(--linea);margin:28px 0}

/* PageSpeed en tarjetas */
.scores{display:flex;align-items:center;gap:6px;padding:4px 8px 2px}
.sc{display:inline-flex;align-items:baseline;gap:3px;min-height:28px;padding:3px 9px;border-radius:999px;font-size:.875rem;background:var(--papel)}
.sc b{font-weight:700}
.sc small{font-size:.75rem;font-weight:600;color:var(--tinta-2)}
.sc.g{background:var(--ok-suave);color:var(--ok-tinta)}
.sc.m{background:var(--warn-suave);color:var(--warn-tinta)}
.sc.b{background:var(--err-suave);color:var(--err-tinta)}
.scores em{font-style:normal;font-size:.8125rem;color:var(--tinta-2);margin-left:2px}

.scores{cursor:pointer;border-radius:12px}
.scores:hover{background:var(--papel)}
.psi-sub{color:var(--tinta-2);font-size:.875rem;margin:4px 0 0;overflow-wrap:anywhere}
.psi-gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.gauge{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;border-radius:18px;text-align:center}
.gauge b{font-family:var(--display);font-size:2.25rem;line-height:1}
.gauge span{font-size:.875rem;font-weight:600}
.gauge.g,.metric.g{background:var(--ok-suave);color:var(--ok-tinta)}.gauge.m,.metric.m{background:var(--warn-suave);color:var(--warn-tinta)}.gauge.b,.metric.b{background:var(--err-suave);color:var(--err-tinta)}
.psi-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.metric{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-size:.9375rem}
.metric b{font-family:var(--display);font-size:1.125rem;white-space:nowrap}
.hrow{display:flex;align-items:flex-end;gap:10px;margin-bottom:6px}
.hrow span{width:34px;font-size:.875rem;font-weight:700;color:var(--tinta-2)}
.bars{display:flex;align-items:flex-end;gap:3px;height:42px;flex:1}
.bars i{width:10px;border-radius:3px 3px 0 0}
.bars i.g{background:var(--luz-ok)}.bars i.m{background:var(--luz-warn)}.bars i.b{background:var(--luz-err)}
#psiTodo h4{font-family:var(--display);font-size:1rem;margin:14px 0 6px}
.todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.todo li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;background:var(--papel);font-size:.9375rem}
.todo em{font-style:normal;font-weight:600;color:var(--tinta-2);white-space:nowrap}

/* Servidor */
.srv-h{font-size:1.25rem;margin:24px 0 12px;max-width:1280px}
.srv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px;max-width:1280px}
.srv-card{background:var(--tarjeta);border-radius:16px;padding:14px 16px;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06)}
.srv-top{display:flex;flex-direction:column;gap:2px}
.srv-top .st{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem}
.srv-top small{color:var(--tinta-2);font-size:.875rem;margin-left:16px}
.srv-btns{display:flex;gap:8px;margin-top:10px}
.stepup{font-weight:700;font-size:.875rem;color:var(--ok-tinta);background:var(--ok-suave);padding:6px 12px;border-radius:999px}
.activity{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:1280px}
.activity li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;background:var(--tarjeta);font-size:.9375rem}
.activity li.bad{background:var(--err-suave)}
.activity small{color:var(--tinta-2);white-space:nowrap}
.logs{margin:12px 0 0;max-height:60vh;overflow:auto;padding:14px;border-radius:12px;background:var(--tinta);color:var(--consola-tinta);font-size:.875rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}

.std{display:flex;padding:0 8px 2px;cursor:pointer}
.std .sc small{font-size:.8125rem}
.fix{font-weight:400;color:var(--tinta-2);font-size:.875rem}
/* Evidencia dudosa: un solo render (mando.js › dudosasHTML) para el diálogo del estándar y el panel Funciones */
.dud-lista{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.dud-lista li{display:block;padding:0;background:none}
.dud-lista b{display:block;font-weight:700}
.dud-cita{display:block;margin:4px 0;padding:6px 10px;border-radius:8px;background:rgba(var(--velo-rgb),.06);font-size:.875rem;white-space:pre-wrap;overflow-wrap:anywhere}
.dud-lista p{margin:0 0 2px;font-size:.9375rem;font-weight:400}
.dud-lista small{font-size:.875rem;color:var(--tinta-2);font-weight:400}
.audgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.audgrid h4{font-family:var(--display);font-size:1rem;margin:0 0 6px}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.9375rem}
.checks li.ok{color:var(--ok-tinta)}.checks li.no{color:var(--err-tinta);font-weight:600}

.cnt{font-family:var(--sans);font-size:.875rem;font-weight:600;color:var(--tinta-2)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px;max-width:1280px}
.tcard{background:var(--tarjeta);border-radius:14px;padding:12px 14px;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06);min-width:0}
.tcard b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;overflow-wrap:anywhere}
.tcard em{font-style:normal;font-size:.8125rem;font-weight:700;color:var(--tinta-2);background:var(--papel);padding:1px 8px;border-radius:999px;margin-left:8px}
.tcard p{margin:6px 0 0;color:var(--tinta-2);font-size:.875rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Secretos */
.vpnwall{max-width:620px;padding:28px;border-radius:20px;background:var(--tarjeta);box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06)}
.vpnwall h2{font-size:1.5rem;margin-bottom:8px}
.vpnwall p{color:var(--tinta-2);margin:0}
.sectable{max-width:1280px;margin:0 auto;background:var(--tarjeta);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06)}
.sr{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 130px;gap:12px;align-items:center;padding:12px 18px;border-top:1px solid var(--linea)}
.sr.sh{border-top:0;background:var(--papel);font-weight:700;font-size:.875rem;color:var(--tinta-2)}
.sn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9375rem;overflow-wrap:anywhere}
.sd{font-size:.875rem;color:var(--tinta-2)}
.sp{display:inline-block;font-style:normal;font-size:.875rem;font-weight:600;padding:3px 10px;margin:2px 4px 2px 0;border-radius:999px;background:var(--papel)}
.sp.none{background:var(--warn-suave);color:var(--warn-tinta)}

/* Biblioteca */
.search{max-width:340px;border-radius:999px;padding-left:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chips button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linea);background:var(--tarjeta);font-weight:600;color:var(--tinta-2)}
.chips button small{font-size:.875rem;color:var(--tinta-2);margin-left:4px}
.chips button[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--sobre-tinta)}
.chips button[aria-pressed="true"] small{color:var(--sobre-tinta-2)}
.libcount{color:var(--tinta-2);font-size:.875rem;margin-bottom:16px}
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.ico{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 12px;border:1px solid transparent;border-radius:18px;background:var(--tarjeta);transition:border-color .18s,transform .18s;min-width:0}
.ico:hover,.ico:focus-visible{border-color:var(--tinta);transform:translateY(-2px)}
.ico img{width:64px;height:64px;object-fit:contain}
.ico span{font-size:.875rem;font-weight:500;color:var(--tinta-2);text-align:center;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ibig{display:grid;place-items:center;height:220px;border-radius:18px;background:radial-gradient(circle at 50% 40%,var(--tarjeta) 0%,var(--papel) 70%);margin-bottom:16px}
.ibig img{width:180px;height:180px;object-fit:contain}
.imeta{color:var(--tinta-2);margin:4px 0 0}
.iused{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:6px}
.iused li{padding:10px 12px;border-radius:12px;background:var(--papel);font-weight:600}
.iused small{display:block;font-weight:400;color:var(--tinta-2);font-size:.875rem;overflow-wrap:anywhere}

/* Vitrina: panel del proyecto (con su marca) | visor. Como Lovable: el visor llena el espacio y
   "Presentación" cambia al mockup con marco de dispositivo. */
.vit{flex:1;min-height:0;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);transition:grid-template-columns .25s cubic-bezier(.2,.8,.2,1);color:var(--blanco);background:var(--stage-b)}
.vit.noside{--side-w:0px}
.side{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;background:var(--side);border-right:1px solid rgba(255,255,255,.08);z-index:5}
.vit.noside .side{border-right:0}
.side-head{display:flex;align-items:center;gap:10px;padding:16px 16px 10px;min-width:0}
.pswitch{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:44px;margin:0;padding:4px 6px 4px 4px;border:0;border-radius:14px;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:background .2s}
.pswitch:hover,.pswitch[aria-expanded="true"]{background:rgba(255,255,255,.08)}
.pswitch:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.pswitch-ic{flex:none;opacity:.6}
.proy-sw input[type=search]{width:100%;margin:6px 0 12px}
.sw-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:min(60dvh,520px);overflow:auto;overscroll-behavior:contain}
.sw-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px;padding:8px 10px;border-radius:14px;cursor:pointer;transition:background .15s}
.sw-item[aria-selected="true"],.sw-item:hover{background:rgba(var(--velo-rgb),.06)}
.sw-item .dot{width:40px;height:40px;border-radius:11px;overflow:hidden;display:grid;place-items:center;background:var(--c,var(--azul));color:var(--c-ink,var(--blanco));font-weight:800}
.sw-item .dot img{width:100%;height:100%;object-fit:contain;background:var(--logo-fondo)}
.sw-item b{display:block;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-item small{display:block;font-size:.875rem;opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-item .sw-tag{font-size:.875rem;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(var(--velo-rgb),.07)}
.sw-item.actual .sw-tag{background:var(--azul);color:var(--blanco)}
.sw-sec{font-size:.875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);padding:10px 10px 2px}
.sw-tip{margin:12px 0 0;font-size:.875rem;opacity:.6}
@media (max-width:700px){.sw-tip{display:none}}
.plogo{flex:none;width:36px;height:36px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:800}
.plogo img{width:100%;height:100%;object-fit:contain;background:var(--blanco)}
.plogo.wide{width:auto;flex:1;min-width:0;height:48px;padding:0;background:transparent}
.plogo.wide img{width:100%;height:44px;background:transparent}
.ptitle{font-family:var(--display);font-weight:700;font-size:1.0625rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0}
/* Fila rápida: cuadrícula pareja de 2 filas que se reparte sola según cuántos botones haya (columnas = ⌈n/2⌉), así
   nunca queda uno solo abajo; botones de 44 px de alto en todo dispositivo. Sumar un botón no pide tocar esto. */
.pquick{--qc:4;display:grid;grid-template-columns:repeat(var(--qc),minmax(0,1fr));justify-items:stretch;gap:4px;padding:8px 8px calc(10px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08)}
.pquick:has(>.nbtn:nth-child(9 of .nbtn:not([hidden]))){--qc:5}
.pquick:has(>.nbtn:nth-child(11 of .nbtn:not([hidden]))){--qc:6;column-gap:2px}
.pquick:has(>.nbtn:nth-child(13 of .nbtn:not([hidden]))){--qc:7}
/* Sidebar angosto (celular chico, cajón < 300 px): 6 o 7 columnas bajarían de 44 px de ancho; pasa a 3 filas parejas. */
@media (max-width:348px){.pquick:has(>.nbtn:nth-child(11 of .nbtn:not([hidden]))){--qc:4}.pquick:has(>.nbtn:nth-child(13 of .nbtn:not([hidden]))){--qc:5}}
.pquick .nbtn{color:rgba(255,255,255,.72);width:100%;height:44px;min-width:0;padding:0;border-radius:10px}
.pquick .nbtn:hover{color:var(--blanco);background:rgba(255,255,255,.1)}
.list{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 12px 16px;display:grid;gap:4px;align-content:start;min-width:276px}
.ptabs{display:flex;gap:2px;margin:2px 12px 10px;padding:3px;border-radius:12px;background:rgba(0,0,0,.25);min-width:252px}
/* Rótulos y conteos con la tinta de la marca calculada por luminancia (--side-ink/--side-tenue de vestir()): pasan
   AA sobre el lado de cualquier proyecto. Una pestaña vacía se distingue por su peso, no por opacidad. */
.ptabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:var(--side-tenue,rgba(255,255,255,.72));font-weight:600;font-size:.9375rem;white-space:nowrap}
.ptabs button small{font-size:.875rem;font-weight:500}
.ptabs button:hover{color:var(--side-ink,var(--blanco))}
.ptabs button[aria-selected="true"]{background:rgba(255,255,255,.14);color:var(--side-ink,var(--blanco))}
.ptabs button[data-empty]{font-weight:500}
.item.add{opacity:.7;margin-top:4px}
.item.add:hover{opacity:1}
.item.add .ini{border:1.5px dashed rgba(255,255,255,.4);background:transparent}
.list-empty{margin:8px 10px 4px;font-size:.9375rem;opacity:.75}
.item b small{font-weight:500;font-size:.875rem;opacity:.7}
/* Pestaña Pruebas: estándar del sitio de pruebas y el botón de publicar (solo activo si pasa y hay VPN). */
.pubbox{box-sizing:border-box;width:calc(100% - 12px);min-width:0;margin:10px 6px 4px;padding:12px;border-radius:14px;background:rgba(255,255,255,.07);color:var(--blanco);overflow-wrap:anywhere}
.pubbox .btn{max-width:100%;white-space:normal}
.pubrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pubrow .sc{border:0;cursor:pointer}
.pubrow .btn.ghost{margin-left:auto;color:var(--blanco);border-color:rgba(255,255,255,.3)}
.pubwhy{margin:0 0 10px;font-size:.9375rem;line-height:1.35;opacity:.85}
.pubwhy:empty,#pubMsg:empty{display:none}
#pubMsg{margin:10px 0 0}
.pubbox .btn.primary{background:var(--accent);color:var(--accent-ink)}
.pubbox .btn.primary:disabled{opacity:.45;cursor:not-allowed}
.veil-sub{font-weight:500;opacity:.8;font-size:1rem!important}
.item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:52px;text-align:left;border:0;background:transparent;border-radius:14px;padding:6px 10px;color:var(--side-ink,var(--blanco));transition:background .2s}
.item:hover{background:rgba(255,255,255,.07)}
@media (hover:none){.item:hover{background:transparent}}
.item[aria-pressed="true"],.item[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.item img,.item .ini{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.item .ini{display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.12);font-family:var(--display);font-weight:800;font-size:1.0625rem;filter:none}
.item[aria-pressed="true"] .ini,.item[aria-current="page"] .ini{background:rgba(0,0,0,.12)}
.item b{display:block;font-weight:600;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.stage{container-type:inline-size;display:flex;flex-direction:column;min-width:0;min-height:0;background:radial-gradient(120% 90% at 50% 0%,var(--stage-a) 0%,var(--stage-b) 75%)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
/* Los grupos laterales no se encogen por debajo de su contenido: así nunca se enciman con el central. */
.bar-l,.bar-c,.bar-r{display:flex;align-items:center;gap:6px}
.bar-c{min-width:0}
.bar-r{justify-content:flex-end}
.stage .ibtn{position:relative;width:40px;height:40px;border-radius:10px;background:transparent;border:1px solid transparent;color:rgba(255,255,255,.82)}
/* Se ven de 40 px; el área táctil invisible llega a 44 sin ensanchar la barra (cabe en el hueco de 6 px). */
.stage .ibtn::before{content:"";position:absolute;inset:-3px}
.stage .ibtn:hover{background:rgba(255,255,255,.1);color:var(--blanco)}
.stage .ibtn[aria-pressed="true"]{background:rgba(255,255,255,.14);color:var(--blanco);border-color:rgba(255,255,255,.18)}
.stage .ibtn[aria-expanded="false"]{color:rgba(255,255,255,.55)}
.seg{display:inline-flex;background:rgba(255,255,255,.07);border-radius:12px;padding:3px;gap:2px}
.seg button{display:inline-grid;place-items:center;min-width:36px;min-height:34px;border:0;background:transparent;border-radius:9px;padding:0 8px;font-weight:600;font-size:.875rem;color:rgba(255,255,255,.72)}
.seg button span{display:none}
.seg button[aria-pressed="true"]{background:var(--blanco);color:var(--casi-negro)}
#zoom button{padding:0 10px;white-space:nowrap}
.devcycle svg{width:22px;height:22px}
.pill{display:flex;align-items:center;min-width:0;width:min(340px,32vw);height:44px;border-radius:999px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pill button{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.8)}
.pill button:hover{color:var(--blanco);background:rgba(255,255,255,.08)}
.pill select{flex:1;min-width:0;min-height:44px;height:44px;border:0;border-radius:999px;background:transparent;color:var(--blanco);font-weight:600;font-size:.9375rem;padding:0 30px 0 4px;text-overflow:ellipsis;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.pill select:focus{border:0}
.pill select option,.pill select optgroup{background:var(--opcion-oscura);color:var(--blanco)}
.fs-off{display:none}
.app.focus .fs-on{display:none}
.app.focus .fs-off{display:inline}
.view{flex:1;min-height:0;display:grid;place-items:center;padding:10px;overflow:hidden}
.view.present{padding:8px 12px 12px}
.view.real{place-items:start;overflow:auto}
.view.real .device{margin-inline:auto}
.device{position:relative;flex:none}
.device.bare{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 60px -30px rgba(0,0,0,.8)}
.device.bare .screen{border-radius:12px}
.device.frame{background:var(--equipo);box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08) inset;transition:border-radius .3s}
.device.frame.phone{border-radius:calc(55px * var(--k,1) + 12px);padding:12px}
.device.frame.tablet{border-radius:30px;padding:16px}
.device.frame.desktop{border-radius:12px;padding:30px 10px 10px}
.device.frame.desktop::before{content:"";position:absolute;top:11px;left:14px;width:52px;height:10px;background:radial-gradient(circle at 5px 5px,var(--mac-rojo) 4px,transparent 5px),radial-gradient(circle at 23px 5px,var(--mac-ambar) 4px,transparent 5px),radial-gradient(circle at 41px 5px,var(--mac-verde) 4px,transparent 5px)}
/* Isla dinámica (iPhone 15: 126×37 a 11 pt del borde) sobre la barra de estado */
.device.frame.phone::after{content:"";position:absolute;top:calc(12px + 11px * var(--k,1));left:50%;transform:translateX(-50%);width:calc(126px * var(--k,1));height:calc(37px * var(--k,1));border-radius:calc(19px * var(--k,1));background:var(--equipo);z-index:5;pointer-events:none}
/* clip (no hidden): la escala deja al iframe más grande que .screen y hidden todavía deja desplazarla por código */
.screen{position:relative;width:100%;height:100%;overflow:hidden;overflow:clip;background:var(--blanco)}
.device.frame.phone .screen{border-radius:calc(55px * var(--k,1))}
/* Barra de estado e indicador de inicio: la zona segura del equipo real, fuera del iframe (fit() fija --st y --sb) */
.sbar{display:none}
.device.frame.phone .sbar,.device.frame.tablet .sbar{position:absolute;top:0;left:0;right:0;height:var(--st,0px);display:flex;align-items:center;justify-content:space-between;color:var(--negro);font:600 calc(17px * var(--k,1))/1 -apple-system,"SF Pro Text",var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;pointer-events:none;z-index:1}
.device.frame.phone .sbar{padding-top:calc(4px * var(--k,1))}
.device.frame.phone .sbar-h,.device.frame.phone .sbar-r{width:calc(133px * var(--k,1));justify-content:center;text-align:center}
.device.frame.tablet .sbar{padding:0 calc(22px * var(--k,1));font-size:calc(14px * var(--k,1))}
.sbar-r{display:flex;align-items:center;gap:calc(5px * var(--k,1))}
.sbar svg{height:calc(12px * var(--k,1));width:auto}
.sbar .sbar-bat{height:calc(13px * var(--k,1))}
.device.frame.phone .screen::after,.device.frame.tablet .screen::after{content:"";position:absolute;left:50%;bottom:calc(var(--sb,0px) / 2 - 2.5px * var(--k,1));transform:translateX(-50%);width:calc(134px * var(--k,1));height:calc(5px * var(--k,1));border-radius:99px;background:var(--negro);pointer-events:none;z-index:1}
.device.frame.tablet .screen::after{width:calc(200px * var(--k,1))}
.device.frame.tablet .screen{border-radius:16px}
.device.frame.desktop .screen{border-radius:4px}
.screen iframe{border:0;display:block;transform-origin:0 0;background:var(--blanco)}
.device.frame .veil{z-index:2}
.veil{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;align-content:center;gap:14px;padding:24px;text-align:center;background:var(--velo-vitrina);color:var(--blanco);font-weight:600;transition:opacity .2s}
.veil.off{opacity:0;pointer-events:none}
.veil p{margin:0;font-size:1.0625rem}
.veil>*{min-width:0;max-width:100%}
.veil>div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.veil .btn{max-width:100%;white-space:normal;text-align:center}
.veil .btn.primary{background:var(--accent);color:var(--accent-ink)}
.veil .btn.ghost{color:var(--blanco);border-color:rgba(255,255,255,.3)}
.veil.cap{display:block;padding:0;text-align:left}
.veil-cap{margin:0;min-height:100%;display:flex;flex-direction:column}
.veil-cap img{display:block;width:100%;height:auto}
.veil-cap figcaption{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:auto;padding:10px 12px;background:rgba(16,21,33,.92);font-size:.875rem;font-weight:600}
.veil-cap figcaption .btn{min-height:44px}

/* Con la barra global oculta queda una sola columna; si quedara una de 0 px, el contenido caería en ella. */
.app.focus,.app.focus.navc{grid-template-columns:minmax(0,1fr)}
.app.focus .nav,.app.focus .side{display:none}
.app.focus .vit{grid-template-columns:minmax(0,1fr)}
.app.focus .bar-l{visibility:hidden}
.app.focus #copyUrl{display:none}

/* Diálogos */
dialog{width:min(480px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;border-radius:24px;border:0;background:var(--dlg-bg,var(--dlg-cuerpo));color:var(--tinta);box-shadow:0 40px 80px -20px rgba(var(--sombra-rgb),.45)}
dialog.wide{width:min(820px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(var(--sombra-rgb),.45);backdrop-filter:blur(2px)}
dialog form,.dlg-body{--dlg-pad:28px;padding:var(--dlg-pad);overflow:auto;overscroll-behavior:contain;max-height:calc(100dvh - 26px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
/* Cabecera común de todo diálogo: título, subtítulo y Cerrar se quedan arriba mientras el cuerpo se desplaza.
   Vive dentro del contenedor que hace scroll y se sale de su relleno (--dlg-pad) para cubrir de borde a borde; el
   diálogo la recorta con su propio radio. Color propio (§4c): su texto es SIEMPRE el claro de la cabecera, aunque un
   módulo pinte el subtítulo con su tinta (por eso los !important: la regla manda sobre el estilo de cada hoja). */
.dlg-head{position:sticky;top:calc(-1 * var(--dlg-pad,28px));z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:calc(-1 * var(--dlg-pad,28px)) calc(-1 * var(--dlg-pad,28px)) 20px;padding:calc(var(--dlg-pad,28px) - 6px) calc(var(--dlg-pad,28px) - 10px) calc(var(--dlg-pad,28px) - 10px) var(--dlg-pad,28px);
  background:var(--dlg-cab-bg);color:var(--dlg-cab-tinta);box-shadow:inset 0 -1px 0 var(--dlg-cab-filo);transition:box-shadow .2s}
.dlg-head>div{min-width:0}
.dlg-head h2{margin-bottom:0}
.dlg-head :is(h2,h3){color:var(--dlg-cab-tinta)!important}
.dlg-head>div>p,.dlg-head>p{color:var(--dlg-cab-tinta-2)!important}
.dlg-head>.btn,.dlg-head>.nt-btn{flex:none}
.dlg-head.scrolled{box-shadow:inset 0 -1px 0 var(--dlg-cab-filo),0 14px 24px -16px rgba(5,12,24,.55)}
.dlg-head :focus-visible{outline:2px solid var(--dlg-cab-foco);outline-offset:2px}
/* Títulos que reciben el foco al abrir (tabindex=-1, p. ej. el cerebro): el lector los anuncia sin contorno. */
.dlg-head [tabindex="-1"]:focus{outline:none}
.dlg-head .ayuda-btn:focus-visible{outline:3px solid var(--dlg-cab-foco);outline-offset:-4px}
/* Otros botones de la cabecera («Ver todo», «Cancelar»): contorno claro sobre la tinta. */
.dlg-head :is(.btn.ghost,.nt-btn){background:transparent;border:1px solid var(--dlg-cab-linea);color:var(--dlg-cab-tinta)}
.dlg-head :is(.btn.ghost,.nt-btn):hover{background:var(--dlg-cab-boton-hover);border-color:var(--dlg-cab-linea)}
/* Cerrar: círculo de 44 px con una ✕ dibujada (el texto «Cerrar» queda como nombre accesible). Se reconoce por cómo
   cierra cada módulo, sin tocar su marcado. */
.dlg-head :is([data-close],[data-cap-cierra],[data-nt-close],#ntDetailClose){position:relative;flex:none;display:inline-block;width:44px;height:44px;min-height:44px;
  padding:0;border-radius:50%;border:1px solid var(--dlg-cab-linea);background:var(--dlg-cab-boton);color:var(--dlg-cab-tinta);font-size:0;line-height:0;overflow:hidden;
  transition:background .18s,transform .18s cubic-bezier(.2,.8,.2,1)}
.dlg-head :is([data-close],[data-cap-cierra],[data-nt-close],#ntDetailClose)::before,
.dlg-head :is([data-close],[data-cap-cierra],[data-nt-close],#ntDetailClose)::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:var(--dlg-cab-tinta);transform:rotate(45deg)}
.dlg-head :is([data-close],[data-cap-cierra],[data-nt-close],#ntDetailClose)::after{transform:rotate(-45deg)}
.dlg-head :is([data-close],[data-cap-cierra],[data-nt-close],#ntDetailClose):hover{background:var(--dlg-cab-boton-hover)}
.dlg-head :is([data-close],[data-cap-cierra],[data-nt-close],#ntDetailClose):active{transform:scale(.92)}
dialog h2{font-size:1.625rem;line-height:1.2;margin-bottom:8px}
dialog h3{font-size:1.125rem;font-weight:700;margin:24px 0 10px}
.dlg-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px;position:sticky;bottom:-28px;background:var(--dlg-bg,var(--dlg-cuerpo));padding:12px 0 0}
.ferr{min-height:1.2em;margin:10px 0 0;color:var(--err);font-weight:600}
.ferr.ok{color:var(--ok)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.row2>*,.srow>*{min-width:0}
.colors{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cpick{display:inline-flex;align-items:center;gap:8px;margin:0;min-height:44px;padding:0 14px 0 6px;border:1px solid var(--linea);border-radius:999px;color:var(--tinta);cursor:pointer;font-size:.9375rem}
.cpick input{width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.cpick input::-webkit-color-swatch-wrapper{padding:0}
.cpick input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:50%}
.cpick input::-moz-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:50%}
.screens{display:flex;flex-direction:column;gap:8px}
.srow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) 120px 110px 44px;gap:8px;align-items:center}
.srow button{min-height:44px;border-radius:12px;border:1px solid var(--linea);background:transparent;color:var(--err);font-weight:600}
.keys{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.keys li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:14px;background:var(--papel)}
.keys small{display:block;color:var(--tinta-2);font-size:.875rem}
.keys button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--linea);background:var(--tarjeta);color:var(--err);font-weight:600}
.linklike{margin-top:14px;min-height:44px;border:0;background:none;color:var(--tinta-2);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#linkForm{width:100%;text-align:left}
#linkForm .btn{margin-top:16px}
#linkCode{text-align:center;letter-spacing:.14em;font-family:var(--display)}
.linkbox{display:flex;gap:16px;align-items:center;margin-top:16px;padding:14px;border-radius:16px;background:var(--papel)}
.linkbox img{flex:none;border-radius:12px;background:var(--blanco);image-rendering:pixelated}
.linkbox p{margin:0 0 8px;color:var(--tinta-2)}
.linkcode{white-space:nowrap;font-family:var(--display);font-size:1.375rem;font-weight:800;letter-spacing:.08em;color:var(--tinta)!important}
.linkexp{font-size:.875rem}
.made{font-size:1.0625rem;color:var(--tinta-2)}
.made b{color:var(--tinta);font-family:var(--display)}

/* La barra se acomoda al ancho del visor (no de la ventana): depende de qué columnas estén abiertas. */
@container (max-width:900px){
  .pill{width:260px}
}
@container (max-width:760px){
  .bar{grid-template-columns:auto 1fr;row-gap:8px}
  .bar-c{grid-column:1/-1;grid-row:2;justify-content:center}
  .bar-r{grid-column:2;grid-row:1}
  .pill{width:auto;flex:1;max-width:420px}
}
@container (max-width:420px){
  #copyUrl{display:none}
  .bar-c{justify-content:flex-start}
}
/* Visor angosto: los íconos se juntan (4 px) y la barra pierde margen para que la primera fila quepa; el área táctil
   sigue en 44 sin invadir al vecino. Bajo 420 px (celular) se juntan aún más (presentacion.css) y el área se ajusta. */
@container (max-width:500px){
  .bar{padding-left:8px;padding-right:8px}
  .bar-r,.bar-l{gap:4px}
  .bar-r .ibtn::before,.bar-l .ibtn::before{inset:-3px -2px}
}
/* Celular (≤ 420 px): los nueve botones de 44 no caben en una fila, así que los de los cajones bajan junto a la
   dirección y la fila de arriba queda para las herramientas. Cada botón mide 44 de verdad (sin área que pise al
   vecino); si aun así no caben (320 px), la fila se envuelve en lugar de achicarlos. */
@container (max-width:420px){
  .stage .bar{grid-template-columns:auto minmax(0,1fr);padding-left:6px;padding-right:6px}
  .stage .bar-r{grid-column:1/-1;grid-row:1;gap:0;flex-wrap:wrap;justify-content:space-between}
  .bar-l{grid-column:1;grid-row:2;gap:0}
  .bar-c{grid-column:2;grid-row:2;gap:2px}
  .stage .bar .ibtn{width:44px;height:44px}
  .bar-r .ibtn::before,.bar-l .ibtn::before,.bar-c .ibtn::before{inset:0}
}
/* 320 px: la dirección baja a su propia fila para que el nombre de la pantalla se lea completo. */
@container (max-width:340px){
  .stage .bar{padding-left:4px;padding-right:4px;column-gap:0}
  .bar-c{grid-column:1/-1;grid-row:3}
}
/* Red de seguridad si aun así el visor queda angosto (barra global reabierta a mano): los controles de las barras
   laterales van solos en la primera fila y se envuelven; nada queda fuera de la pantalla. Solo en computadora: en
   celular la barra tiene su propio acomodo y ahí .bar-l lleva los botones de los cajones. */
@media (min-width:701px){
  @container (max-width:340px){
    .bar{grid-template-columns:minmax(0,1fr)}
    .bar-l{display:none}
    .bar-r{grid-column:1;grid-row:1;flex-wrap:wrap;justify-content:flex-start}
    .bar-c{grid-row:2}
  }
}
@media (max-width:900px){
  .home{padding:24px 20px calc(172px + env(safe-area-inset-bottom))}
  .home-head h1{font-size:2rem}
  .grid{gap:16px}
}
@media (max-width:1100px){
  .docs{grid-template-columns:280px minmax(0,1fr)}
  .page{padding:40px 36px}
}
@media (max-width:700px){
  .fab{height:56px;width:56px;padding:0;justify-content:center;right:max(18px,calc(env(safe-area-inset-right) + 12px));bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))}
  .fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .docs{grid-template-columns:minmax(0,1fr)}
  .doclist{border-right:0;padding:12px 16px 40px}
  .docview{display:none;padding:12px 10px 40px}
  .docs.reading .doclist{display:none}
  .docs.reading .docview{display:block}
  #docBack{display:inline-grid}
  .page{padding:26px 20px;border-radius:14px}
  .page h1{font-size:1.75rem}

  .app,.app.navc{grid-template-columns:minmax(0,1fr)}
  .nav{position:fixed;top:0;bottom:0;left:0;width:min(280px,84vw);z-index:40;transform:translateX(-105%);transition:transform .25s ease;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .app.navopen .nav{transform:none;box-shadow:20px 0 40px -10px rgba(0,0,0,.5)}
  .app.navc .nav{visibility:visible;padding:12px 10px}
  #navScrim{position:fixed;inset:0;background:rgba(3,6,10,.55);z-index:35}
  .mtop{display:flex;align-items:center;gap:10px;padding:10px 16px 0}
  .app.in-vit .mtop{display:none}
.brand{display:flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none;min-height:44px}
.brand b{font-family:var(--display);font-weight:800;font-size:1.3125rem;letter-spacing:-.03em}
  .home{padding:16px 16px calc(150px + env(safe-area-inset-bottom))}   /* «Nuevo» + Jarvis suben 142 px */
  .search{max-width:none}
  .vit,.vit.noside{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);width:min(300px,86vw);transform:translateX(calc(-100% - env(safe-area-inset-left)));transition:transform .25s ease}
  .vit.drawer .side{transform:none;box-shadow:20px 0 40px -10px rgba(0,0,0,.6)}
  .list{min-width:0}
  #scrim{position:fixed;inset:0;background:rgba(3,6,10,.6);z-index:4}
  .bar{padding:8px 10px}
  .pill{max-width:none}
  .view{padding:8px}
  .srow{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"t d" "u u" "g x";padding-bottom:10px;border-bottom:1px solid var(--linea)}
  .srow .s-t{grid-area:t}.srow .s-u{grid-area:u}.srow .s-d{grid-area:d}.srow .s-g{grid-area:g}.srow button{grid-area:x}
  .row2{grid-template-columns:minmax(0,1fr)}
  dialog form,.dlg-body{--dlg-pad:22px}
}
@media (max-width:560px){
  .linkbox{flex-direction:column;text-align:center}
  .psi-gauges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .todo li{flex-direction:column;gap:2px}
  .sr{grid-template-columns:minmax(0,1fr);gap:4px}
  .sr.sh{display:none}
  .home-head .btn{width:100%}
  .icons{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .dlg-actions>.btn{flex:1 1 auto}
}
@media (max-height:480px){
  .dlg-actions{position:static}
  .bar{grid-template-columns:auto 1fr auto;padding-top:4px;padding-bottom:4px}
  .bar-c{grid-column:2;grid-row:1}
  .bar-r{grid-column:3}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Imprimir / guardar como PDF: solo la página del documento */
@media print{
  @page{margin:18mm 16mm}
  /* Lo impreso siempre en claro (papel de verdad), aunque la pantalla esté en oscuro. */
  html:root:not(#tema-impresion){color-scheme:light;--papel:#F4F1EA;--papel-2:#EBE6DB;--tarjeta:#FFFFFF;--campo:#FFFFFF;--tinta:#16151A;--tinta-2:#5B5862;--linea:#E2DCD0;--page-tinta:#24222A;--enlace:#1D4ED8;--velo-rgb:22,21,26;--sombra-rgb:22,21,26}
  body{background:var(--tarjeta)}
  .app{display:block;height:auto;padding:0}
  .nav,.mtop,.doclist,.doctools,#navScrim,.fab,dialog,#home,#lib,#vit,.gate{display:none!important}
  .main,.docs,.docview{display:block!important;overflow:visible;height:auto;padding:0;background:var(--tarjeta)}
  .page{box-shadow:none;border-radius:0;padding:0;max-width:none;font-size:11pt}
  .page pre{white-space:pre-wrap;background:var(--papel);color:var(--tinta)}
  .page a{color:inherit;text-decoration:underline}
  .page h2{break-after:avoid}
  .page table,.page pre{break-inside:avoid}
}
/* Vigía y código */
.vg,.rp{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--tinta-2)}
.vg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--luz-off)}
.vg.ok::before{background:var(--luz-ok)}.vg.warn::before{background:var(--luz-warn)}.vg.err::before{background:var(--luz-err)}
.vg.warn{color:var(--warn-tinta)}.vg.err{color:var(--err-tinta)}
.rp{color:var(--warn-tinta)}.rp.bad{color:var(--err-tinta)}
.pstate{position:relative;flex:none;color:rgba(255,255,255,.72)}
.pstate:hover{color:var(--blanco);background:rgba(255,255,255,.1)}
.pstate::after{content:"";position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:transparent;box-shadow:0 0 0 2px var(--side)}
.pstate[data-level="ok"]::after{background:var(--luz-ok)}.pstate[data-level="warn"]::after{background:var(--luz-warn)}.pstate[data-level="err"]::after{background:var(--luz-err)}
.vgl .st{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875rem;word-break:break-all;font-weight:500}
.todo a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.todo code{font-size:.875rem;color:var(--tinta-2)}
#estBody h4{font-family:var(--display);font-size:1rem;margin:18px 0 8px}
.sitios .sr{grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
.sitios .bad{color:var(--err-tinta);font-weight:600}
.linkish{border:0;background:none;padding:0;min-height:44px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.sitios .st::before{flex:none}
@media (max-width:760px){.sitios .sr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sitios .sr.sh{display:none}
  .sitios [data-l]::before{content:attr(data-l) " ";display:block;font-size:.875rem;font-weight:500;color:var(--tinta-2)}}

/* Ayuda «?» (ayuda.js): botón chico con área táctil de 44 px y popover que se abre al tocar. */
.ayuda-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;margin:-11px -11px -11px -3px;vertical-align:.12em;padding:0;
  border:0;border-radius:50%;background:transparent;color:inherit;
  font:700 .875rem/1 var(--sans,system-ui);letter-spacing:0;text-transform:none;cursor:pointer;flex:none}
.ayuda-btn::before{content:"";position:absolute;left:11px;top:11px;width:22px;height:22px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:50%;transition:background .15s}
.ayuda-btn:hover::before,.ayuda-btn[aria-expanded="true"]::before{background:color-mix(in srgb,currentColor 12%,transparent)}
.ayuda-btn:focus-visible{outline:3px solid var(--azul);outline-offset:-4px}
h1 .ayuda-btn::before{left:10px;top:10px;width:24px;height:24px}
h1 .ayuda-btn{font-size:.9375rem}
.side-head .ayuda-btn{margin:-11px -9px}
.ayuda-pop{position:fixed;z-index:1000;padding:14px 16px;border-radius:14px;background:var(--tinta);color:var(--papel);
  box-shadow:0 18px 40px -12px rgba(var(--sombra-rgb),.55);font:400 .9375rem/1.5 var(--sans,system-ui);text-align:left;letter-spacing:0;text-transform:none}
.ayuda-pop b{display:block;font-weight:700;margin-bottom:4px}
.ayuda-pop p{margin:0}
.ayuda-pop:focus{outline:none}
@media print{.ayuda-btn,.ayuda-pop{display:none!important}}

/* Menú de cada app, desplegable bajo su renglón (lo publica la propia app). */
.itemrow{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:2px}
.chev{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--blanco);opacity:.75;cursor:pointer}
.chev:hover{background:rgba(255,255,255,.08);opacity:1}
.chev svg{transition:transform .2s}
.chev[aria-expanded="true"] svg{transform:rotate(90deg)}
.submenu{display:grid;gap:2px;margin:0 0 6px 30px;padding:2px 0 4px 12px;border-left:1px solid rgba(255,255,255,.16)}
.submenu-head{margin:4px 0 2px;font-size:.875rem;font-weight:600;opacity:.7}
.submenu-sec{margin:8px 0 0;font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.55}
.submenu-grp{margin:6px 0 0 4px;font-size:.9375rem;font-weight:600;opacity:.8}
.submenu-msg{margin:4px 0;font-size:.9375rem;opacity:.75}
.sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;width:100%;min-height:44px;padding:8px 10px;text-align:left;border:0;border-radius:10px;
  background:transparent;color:var(--blanco);font:inherit;font-size:.9375rem;cursor:pointer}
.sub.ind{padding-left:22px}
.sub:hover{background:rgba(255,255,255,.07)}
@media (hover:none){.sub:hover{background:transparent}}
.sub[aria-pressed="true"],.sub[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.stag{font-size:.8125rem;line-height:1.2;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.12);white-space:nowrap}
.stag.plat{background:rgba(255,255,255,.22);font-weight:600}
.sub[aria-pressed="true"] .stag{background:rgba(0,0,0,.14)}
.linkbtn{border:0;background:none;color:inherit;text-decoration:underline;font:inherit;cursor:pointer;min-height:44px}

/* Cumplimiento (docs/ESTANDAR.md §11) */
.cum-legal{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:var(--papel);color:var(--tinta-2);font-size:.9375rem}
.cum-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}
.cum-it{display:flex;align-items:flex-start;gap:12px;padding:10px 14px;border-radius:12px;background:var(--papel);font-size:.9375rem}
.cum-ic{flex:none;width:22px;text-align:center;font-weight:700}
.cum-tx{flex:1;min-width:0}
.cum-tx small{display:block;margin-top:2px;color:var(--tinta-2);font-size:.875rem;overflow-wrap:anywhere}
.cum-ok .cum-ic{color:var(--ok)}.cum-falta .cum-ic,.cum-falta b{color:var(--err-tinta)}
.cum-manual .cum-ic,.cum-sin_medir .cum-ic{color:var(--warn)}.cum-no_aplica{opacity:.6}
.cum-sel select{min-height:44px;border-radius:10px;border:1px solid var(--linea);background:var(--tarjeta);padding:0 10px;font-size:1rem}
.cum-terc{font-size:.9375rem;color:var(--tinta-2);overflow-wrap:anywhere}
#dlgCumpl h3{margin:18px 0 8px;font-size:1.0625rem}
.perfil{border:1px solid var(--linea);border-radius:12px;padding:10px 14px 12px;margin:12px 0}
.perfil legend{padding:0 6px;font-weight:700}
.perfil .chk{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:500}
.perfil .chk input{width:20px;height:20px;margin:0}
@media (max-width:600px){.cum-it{flex-wrap:wrap}.cum-sel{width:100%}.cum-sel select{width:100%}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Versión publicada / nueva (host de pruebas) y Publicar: un botón en la barra del visor (#verBtn) con su indicador
   y un panel (#dlgVer) que reúne conmutador, pendientes, estándar, Revisar y Publicar. .verbar queda para las marcas. */
.verbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.verbar .verinfo{color:rgba(255,255,255,.72)}
.verbar .seg.ver button{min-height:34px;padding:0 12px;white-space:nowrap}
.stage .ibtn.verbtn{position:relative;width:44px;height:44px;color:rgba(255,255,255,.82)}
.stage .ibtn.verbtn[aria-expanded="true"]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18)}
.verind{position:absolute;top:3px;right:3px;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px var(--stage-a);pointer-events:none}
.verind:not(:empty){top:-4px;right:-4px;min-width:20px;width:auto;height:20px;padding:0 5px;border-radius:999px;font:700 .875rem/20px var(--sans,system-ui);font-style:normal;text-align:center}
/* Al día: no solo verde, también forma propia (✓ de 14 px) para quien no distingue el ámbar del verde. */
.verind[data-e="ok"]{top:0;right:0;width:14px;height:14px;background:var(--luz-ok)}
.verind[data-e="ok"]::after{content:"";position:absolute;left:4.5px;top:2px;width:3px;height:6.5px;border:solid var(--ver-ok-filo);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Resorte corto al cambiar de estado (mando.js pone .salta). */
.verind.salta{animation:verSalta .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes verSalta{0%{transform:scale(.35)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.verind.salta{animation:none}}
.verind[data-e="nueva"]{background:var(--ver-nueva);color:var(--ver-nueva-tinta)}
.verind[data-e="pend"]{background:var(--ver-pend);color:var(--ver-pend-tinta)}
.verind[data-e="nose"]{background:rgba(255,255,255,.4);color:var(--casi-negro)}
.verind[data-e="nose"]:empty{display:none}
.verpop{width:min(380px,calc(100vw - 24px));position:fixed;inset:auto;margin:0}
.verpop::backdrop{background:rgba(3,6,10,.18);backdrop-filter:none}
.verpop .dlg-body{--dlg-pad:20px;display:grid;gap:12px}
.verpop .dlg-head{margin-bottom:0}
.verpop .dlg-head h2{font-size:1.25rem}
/* Recibe el foco al abrir (tabindex=-1): el lector anuncia el panel sin que el conmutador salga con contorno. */
#verT:focus{outline:none}
.verpop .seg.ver{display:flex;background:var(--papel-2)}
.verpop .seg.ver button{display:inline-flex;align-items:center;justify-content:center;flex:1;min-height:44px;padding:0 12px;white-space:nowrap;color:var(--tinta-2);font-size:.9375rem}
.verpop .seg.ver button[aria-pressed="true"]{background:var(--tarjeta);color:var(--tinta);box-shadow:0 1px 3px rgba(var(--sombra-rgb),.18)}
.verpop .seg.ver button:disabled{opacity:.45;cursor:not-allowed}
.verdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ambar);margin-left:6px;vertical-align:middle}
.verinfo{margin:0;font-size:.875rem;color:var(--tinta-2);min-width:0}
/* «Publicado con pendientes · N» (ESTANDAR §6b): la misma marca discreta de la tarjeta (punto + subrayado punteado). */
.verpend:empty{display:none}
.verpend{display:flex;flex-wrap:wrap;gap:4px 12px}
.verpop .pendtag{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 4px;border:0;border-radius:10px;background:none;color:var(--tinta);font:inherit;font-size:.9375rem;font-weight:700;white-space:nowrap;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.verpop .pendtag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--rojo)}
.verpop .pendtag.activar::before{background:var(--verde)}
.verpop .pendtag:focus-visible{outline:2px solid var(--tinta);outline-offset:1px}
.verchips{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.verchips .sc{align-items:center;min-height:44px;border:0;cursor:pointer;padding:3px 14px}
.verchips .sc small{font-size:.875rem}
.verchips .btn.ghost{background:transparent}
.verpop .btn.pubbtn{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.verpop .btn.pubbtn:hover{background:var(--accent);filter:brightness(1.06)}
.verpop .btn.pubbtn:disabled{opacity:.45;cursor:not-allowed}
.verpop .btn.pubbtn[data-estado="ok"]{background:var(--ok);color:var(--blanco)}
.verpop .btn.pubbtn[data-estado="trabajando"]{opacity:.8;pointer-events:none}
@media (max-width:700px){
  .verbar{padding:6px 10px}
  .verpop{inset:auto 0 0 0;width:100%;max-width:100%;border-radius:22px 22px 0 0}
  .verpop .dlg-body{--dlg-pad:18px;padding-bottom:calc(var(--dlg-pad) + env(safe-area-inset-bottom))}
}

/* Emojis 3D propios del mando (web/emoji/, tools/emoji.py): sustituyen al ícono de línea; si la imagen no
   carga, mando.js la quita y vuelve a verse el SVG de respaldo. */
.i3d{width:24px;height:24px;flex:none;display:block;object-fit:contain;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
:is(.nbtn,.ibtn,.i3d-btn):has(> .i3d) > svg{display:none}
.i3d-btn{display:inline-flex;align-items:center;gap:8px}
:is(.nbtn,.ibtn):hover > .i3d{transform:scale(1.1)}
.ibtn[aria-pressed="true"] > .i3d{transform:scale(1.12)}
.nbtn[aria-current="page"] > .i3d{transform:scale(1.12)}

/* Marca que se ve (proyectos multimarca): un punto con su color junto al nombre. */
.marcadot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
/* Celular en horizontal (alto ≤ 500 px): «Nuevo» como círculo de solo «+»; el orbe de Jarvis va a su izquierda
   (jarvis.css), en la misma línea: apilados tapaban media pantalla (revisión #157, el día del calendario a 844×390). */
@media (max-height:500px){
  .fab{height:56px;width:56px;padding:0;justify-content:center;right:max(18px,calc(env(safe-area-inset-right) + 12px));bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))}
  .fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .home{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}