/* 3es.mx · sistema visual v0 (aprobado 21-oct-2026) · un producto de tresensocial® · tokens + componentes + pantallas */
@font-face{font-family:"Signika 3es";src:url(../fuentes/signika-var.woff2) format("woff2");font-weight:500 700;font-display:swap}
:root{
  /* Marca tresensocial® */
  --c-rojo:#D43D35; --c-amarillo:#FFE74C; --c-morado:#43267A; --c-azul:#3B5998;
  --c-verde:#70C86A; --c-naranja:#FA9F42; --c-negro:#181718; --c-marfil:#F7F4F0;
  /* Escala de rojo TRIX (500 = oficial) */
  --rojo-50:#FDF1F0; --rojo-100:#FADCDA; --rojo-200:#F4B5B1; --rojo-300:#EB8A84; --rojo-400:#E0625B;
  --rojo-500:#D43D35; --rojo-600:#B5302A; --rojo-700:#932621; --rojo-800:#6F1D19; --rojo-900:#4A1411;
  /* Morado (celebraciones en modo oscuro) */
  --morado-50:#F2EEF8; --morado-100:#DDD3EE; --morado-300:#8C6FC2; --morado-500:#43267A; --morado-700:#2C1852; --morado-900:#1A0E33;
  /* Neutros cálidos (de marfil a negro) */
  --n-0:#FFFFFF; --n-50:#F7F4F0; --n-100:#EFEBE6; --n-200:#E7E4E2; --n-300:#CFCAC6; --n-400:#A29CA4;
  --n-500:#7A7480; --n-600:#5E5868; --n-700:#403B45; --n-800:#2A272B; --n-900:#181718;
  /* Estados (texto AA sobre blanco en la variante -texto) */
  --exito:#70C86A; --exito-texto:#2E7A29; --exito-fondo:#ECF8EB;
  --alerta:#FA9F42; --alerta-texto:#9A5410; --alerta-fondo:#FFF3E5;
  --error:#B5302A;  --error-texto:#B5302A; --error-fondo:#FDF1F0;
  --info:#3B5998;   --info-texto:#3B5998;  --info-fondo:#EDF1F8;
  /* Roles semánticos · modo claro */
  --fondo:var(--n-50); --superficie:var(--n-0); --superficie-2:var(--n-100);
  --texto:var(--n-900); --texto-2:var(--n-600); --texto-3:#6B6570; /* v0.0.32 · D-78 (Jorge, 22-oct-2026 14:31): gris secundario AA: 5.15:1 sobre el fondo beige, 4.76:1 sobre superficie-2 (antes 3.82:1) */
  --borde:var(--n-200); --borde-fuerte:var(--n-300);
  --acento:var(--rojo-500); --acento-hover:var(--rojo-600); --acento-texto:#fff; --enlace:var(--rojo-600);
  --trix:var(--rojo-500); --trix-fiesta:var(--c-amarillo); --fiesta-fondo:var(--c-morado);
  --foco:0 0 0 3px var(--n-0),0 0 0 6px var(--c-azul);
  /* Tipografía */
  --f-titulo:"Signika 3es",Signika,"Open Sans",system-ui,sans-serif;
  --f-texto:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem; --t-lg:1.375rem;
  --t-xl:1.75rem; --t-2xl:2.25rem; --t-3xl:3rem; --t-4xl:clamp(2.6rem,6vw,4.75rem);
  --lh-apretado:1.05; --lh-titulo:1.15; --lh-texto:1.55;
  /* Espaciado (base 4) */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-8:32px; --e-10:40px; --e-12:48px; --e-16:64px; --e-20:80px;
  /* Radios */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  /* Sombras (cálidas, nunca grises frías) */
  --s-1:0 1px 2px rgba(24,23,24,.06),0 1px 1px rgba(24,23,24,.04);
  --s-2:0 4px 14px -4px rgba(24,23,24,.12),0 2px 4px rgba(24,23,24,.05);
  --s-3:0 18px 40px -16px rgba(24,23,24,.22),0 4px 10px rgba(24,23,24,.06);
  --s-rojo:0 10px 28px -10px rgba(212,61,53,.55);
  /* Capas */
  --z-base:0; --z-pegado:10; --z-menu:100; --z-modal:200; --z-toast:300; --z-fiesta:400;
  /* Movimiento */
  --d-instante:90ms; --d-rapido:160ms; --d-medio:260ms; --d-lento:420ms; --d-fiesta:1500ms; --d-ojos:600ms;
  --curva-salida:cubic-bezier(.2,.8,.2,1); --curva-entrada:cubic-bezier(.5,0,.75,0);
  --curva-resorte:cubic-bezier(.34,1.56,.64,1); --curva-lineal:linear;
  color-scheme:light;
}
/* Modo oscuro: negro por defecto (rojo sobre morado no da 3:1). Morado solo para celebraciones */
[data-tema="oscuro"]{
  --fondo:#111011; --superficie:var(--n-900); --superficie-2:var(--n-800);
  --texto:var(--n-50); --texto-2:#C9C3CC; --texto-3:#A29CA4;
  --borde:#332F35; --borde-fuerte:#4A454E;
  --acento:var(--rojo-500); --acento-hover:var(--rojo-400); --enlace:#F08A83;
  --exito-texto:#8FD98A; --alerta-texto:#FFBE7A; --error-texto:#F08A83; --info-texto:#9DB3E0;
  --exito-fondo:#1B2A1A; --alerta-fondo:#2E2213; --error-fondo:#2E1614; --info-fondo:#161D2C;
  --foco:0 0 0 3px var(--n-900),0 0 0 6px var(--c-amarillo);
  color-scheme:dark;
}
@media (prefers-reduced-motion:reduce){
  :root{--d-instante:0ms;--d-rapido:0ms;--d-medio:0ms;--d-lento:0ms;--d-fiesta:0ms;--d-ojos:0ms}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--t-base)/var(--lh-texto) var(--f-texto);color:var(--texto);background:var(--fondo);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-titulo);font-weight:700;line-height:var(--lh-titulo);margin:0 0 var(--e-3);letter-spacing:-.01em}
h1{font-size:var(--t-4xl);line-height:var(--lh-apretado);letter-spacing:-.025em}
h2{font-size:var(--t-2xl)} h3{font-size:var(--t-lg)} h4{font-size:var(--t-md)}
p{margin:0 0 var(--e-4)}
a{color:var(--enlace);text-underline-offset:3px}
:focus-visible{outline:none;box-shadow:var(--foco);border-radius:var(--r-xs)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:var(--texto);color:var(--superficie);padding:8px 12px;border-radius:var(--r-sm);z-index:var(--z-toast)}
.saltar:focus{left:8px}
.contenedor{width:min(1160px,100% - 40px);margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:.92em}
.eyebrow{font:700 var(--t-xs)/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}
.muted{color:var(--texto-2)} .center{text-align:center}
.fila{display:flex;gap:var(--e-3);align-items:center;flex-wrap:wrap}
.pila>*+*{margin-top:var(--e-4)}

/* ---------- Encabezado / navegación ---------- */
.barra{position:sticky;top:0;z-index:var(--z-pegado);background:color-mix(in srgb,var(--fondo) 82%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent}
.barra.con-borde{border-bottom-color:var(--borde)}
.barra__in{display:flex;align-items:center;gap:var(--e-6);height:68px}
.marca{display:inline-flex;align-items:center;gap:8px;font:700 1.35rem/1 var(--f-titulo);color:var(--texto);text-decoration:none;letter-spacing:-.02em}
.marca .trix{width:30px;height:40px}
.marca b{color:var(--acento)}
.nav{display:flex;gap:var(--e-1);margin-left:auto;align-items:center}
.nav a{color:var(--texto-2);text-decoration:none;font-weight:600;font-size:var(--t-sm);padding:8px 12px;border-radius:var(--r-pill)}
.nav a:hover,.nav a[aria-current]{color:var(--texto);background:var(--superficie-2)}

/* Selector ES/EN */
.idioma{display:inline-flex;padding:3px;border-radius:var(--r-pill);background:var(--superficie-2);border:1px solid var(--borde)}
.idioma button{all:unset;cursor:pointer;font:700 var(--t-xs)/1 var(--f-texto);letter-spacing:.06em;padding:7px 11px;border-radius:var(--r-pill);color:var(--texto-2);transition:background var(--d-rapido),color var(--d-rapido)}
.idioma button[aria-pressed="true"]{background:var(--texto);color:var(--superficie)}
.idioma button:focus-visible{box-shadow:var(--foco)}

/* Pie */
.pie{border-top:1px solid var(--borde);margin-top:var(--e-20);padding:var(--e-8) 0;color:var(--texto-2);font-size:var(--t-sm)}
.pie__in{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);flex-wrap:wrap}
.pie .firma{display:inline-flex;align-items:center;gap:10px}
.pie .firma .trix{width:18px;height:24px}
.pie a[href^="https://www.tresensocial.com"]{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.pie a[href^="https://www.tresensocial.com"]:hover{color:var(--texto)}

/* ---------- Botones ---------- */
.btn{--bg:var(--superficie);--fg:var(--texto);--bd:var(--borde-fuerte);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);font:700 var(--t-sm)/1 var(--f-texto);text-decoration:none;cursor:pointer;transition:transform var(--d-rapido) var(--curva-resorte),background var(--d-rapido),box-shadow var(--d-rapido);white-space:nowrap}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(1px) scale(.98)}
.btn--primario{--bg:var(--acento);--fg:var(--acento-texto);--bd:var(--acento);box-shadow:var(--s-rojo)}
.btn--primario:hover{--bg:var(--acento-hover);--bd:var(--acento-hover)}
.btn--tinta{--bg:var(--texto);--fg:var(--superficie);--bd:var(--texto)}
.btn--fantasma{--bg:transparent;--bd:transparent;--fg:var(--texto-2)}
.btn--fantasma:hover{--bg:var(--superficie-2);--fg:var(--texto)}
.btn--fiesta{--bg:var(--c-amarillo);--fg:var(--c-negro);--bd:var(--c-amarillo)}
.btn--lg{min-height:56px;padding:0 26px;font-size:var(--t-base)}
.btn--sm{min-height:34px;padding:0 12px;font-size:var(--t-xs)}
.btn--icono{width:36px;min-height:36px;padding:0;border-radius:var(--r-sm)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.kbd{font:600 11px/1 var(--f-mono);padding:3px 6px;border-radius:6px;border:1px solid currentColor;opacity:.7}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Campos ---------- */
.campo{display:grid;gap:6px}
.campo label{font-weight:700;font-size:var(--t-sm)}
.entrada{display:flex;align-items:center;min-height:48px;border:1.5px solid var(--borde-fuerte);border-radius:var(--r-md);background:var(--superficie);transition:border-color var(--d-rapido),box-shadow var(--d-rapido)}
.entrada:focus-within{border-color:var(--texto);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-azul) 22%,transparent)}
.entrada input{all:unset;flex:1;min-width:0;padding:0 14px;font:500 var(--t-base)/1.2 var(--f-texto);color:var(--texto)}
.entrada input::placeholder{color:var(--texto-3)}
.entrada .prefijo{padding-left:14px;color:var(--texto-3);font-weight:600;white-space:nowrap}
.entrada .prefijo+input{padding-left:2px}
.ayuda{font-size:var(--t-xs);color:var(--texto-2)}
.campo.es-error .entrada{border-color:var(--error)} .campo.es-error .ayuda{color:var(--error-texto);font-weight:600}
.campo.es-ok .entrada{border-color:var(--exito-texto)} .campo.es-ok .ayuda{color:var(--exito-texto);font-weight:600}

/* El campo para acortar (pieza estrella) */
.acortador{position:relative;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 20px;background:var(--superficie);border:2px solid var(--texto);border-radius:var(--r-pill);box-shadow:6px 6px 0 var(--texto);transition:transform var(--d-medio) var(--curva-resorte),box-shadow var(--d-medio) var(--curva-resorte)}
.acortador:focus-within{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--acento)}
.acortador .ico{width:22px;height:22px;color:var(--texto-3)}
.acortador input{all:unset;flex:1;min-width:0;font:500 var(--t-md)/1.2 var(--f-texto);color:var(--texto);padding:12px 4px}
.acortador input::placeholder{color:var(--texto-3)}
.acortador .btn{min-height:54px}
.acortador--compacto{box-shadow:3px 3px 0 var(--texto);padding:5px 5px 5px 16px}
.acortador--compacto input{font-size:var(--t-base);padding:8px 2px}
.acortador--compacto .btn{min-height:40px}
.resultado{display:flex;align-items:center;gap:var(--e-3);margin-top:var(--e-4);padding:10px 10px 10px 18px;border-radius:var(--r-pill);background:var(--texto);color:var(--superficie);width:max-content;max-width:100%;animation:sube var(--d-lento) var(--curva-resorte) both}
.resultado .corto{font:700 var(--t-md)/1 var(--f-titulo);letter-spacing:-.01em}
.resultado .corto b{color:var(--rojo-300)}
.resultado .ok{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:700;color:#BDECB9}

/* ---------- Tarjetas ---------- */
.tarjeta{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-lg);padding:var(--e-6);box-shadow:var(--s-1)}
.tarjeta--alta{box-shadow:var(--s-3);border-color:transparent}
.tarjeta--tinta{background:var(--c-negro);color:var(--c-marfil);border-color:var(--c-negro)}
.tarjeta--fiesta{background:var(--c-morado);color:#fff;border-color:var(--c-morado)}
.tarjeta h3{margin-bottom:var(--e-2)}
.kpi{font:700 var(--t-3xl)/1 var(--f-titulo);letter-spacing:-.03em}
.delta{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:var(--t-xs);padding:4px 8px;border-radius:var(--r-pill)}
.delta--sube{color:var(--exito-texto);background:var(--exito-fondo)} .delta--baja{color:var(--error-texto);background:var(--error-fondo)}
.como{font-size:var(--t-xs);color:var(--texto-2);margin-top:var(--e-3)}
.como summary{cursor:pointer;font-weight:700;list-style:none} .como summary::before{content:"? ";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--superficie-2);margin-right:4px;font-size:10px}

/* Tarjeta / fila de enlace */
.enlace{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:var(--e-4);align-items:center;padding:14px 16px;border-radius:var(--r-md);background:var(--superficie);border:1px solid var(--borde);transition:border-color var(--d-rapido),transform var(--d-rapido) var(--curva-salida),box-shadow var(--d-rapido)}
.enlace:hover{border-color:var(--borde-fuerte);box-shadow:var(--s-2);transform:translateY(-1px)}
.enlace+.enlace{margin-top:8px}
.enlace__fav{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--superficie-2);color:var(--texto-3);border:0;cursor:pointer}
.enlace__fav[aria-pressed="true"]{background:var(--rojo-50);color:var(--acento)}
.enlace__fav[aria-pressed="true"] .ico{fill:currentColor}
/* v0.0.18 · D-50: el ojo «visible en Mi página», al lado de la estrella. Encendido: tinta sobre amarillo claro */
.enlace__ojo{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--superficie-2);color:var(--texto-3);border:0;cursor:pointer}
.enlace__ojo[aria-pressed="true"]{background:var(--info-fondo);color:var(--info-texto)}
.lista-orden__acc .enlace__ojo{width:32px;height:32px}
.enlace__corto{font:700 var(--t-md)/1.2 var(--f-titulo);color:var(--texto);text-decoration:none}
.enlace__corto span{color:var(--texto-3);font-weight:500}
.enlace__dest{font-size:var(--t-xs);color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}
.enlace__clics{text-align:right;font:700 var(--t-lg)/1 var(--f-titulo)} .enlace__clics small{display:block;font:600 11px/1.4 var(--f-texto);color:var(--texto-3)}
.enlace__acc{display:flex;gap:4px}
.enlace--especial{background:linear-gradient(100deg,var(--c-negro),#2b1f3d);color:#fff;border-color:transparent}
.enlace--especial .enlace__corto,.enlace--especial .enlace__clics{color:#fff} .enlace--especial .enlace__dest,.enlace--especial .enlace__clics small,.enlace--especial .enlace__corto span{color:#C9C3CC}
.enlace--especial .btn--icono{color:#fff;background:rgba(255,255,255,.08);border-color:transparent}
.chispa{width:96px;height:28px}

/* Chips / badges */
.chip{display:inline-flex;align-items:center;gap:6px;font:700 var(--t-xs)/1 var(--f-texto);padding:6px 10px;border-radius:var(--r-pill);background:var(--superficie-2);color:var(--texto-2);white-space:nowrap}
.chip--exito{background:var(--exito-fondo);color:var(--exito-texto)} .chip--alerta{background:var(--alerta-fondo);color:var(--alerta-texto)}
.chip--error{background:var(--error-fondo);color:var(--error-texto)} .chip--info{background:var(--info-fondo);color:var(--info-texto)}
.chip--rojo{background:var(--acento);color:#fff} .chip--fiesta{background:var(--c-amarillo);color:var(--c-negro)}
.punto{width:7px;height:7px;border-radius:50%;background:currentColor}
.sello{display:inline-flex;align-items:center;gap:8px;font:800 11px/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--alerta-texto);background:var(--alerta-fondo);border:1.5px dashed var(--c-naranja);padding:7px 12px;border-radius:var(--r-pill)}

/* ---------- Gamificación ---------- */
.insignia{--c:var(--acento);position:relative;width:72px;height:80px;display:grid;place-items:center;flex:none}
.insignia svg{position:absolute;inset:0;width:100%;height:100%}
.insignia .hex{fill:var(--c)} .insignia .hex-borde{fill:none;stroke:color-mix(in srgb,var(--c) 60%,#000);stroke-width:3}
.insignia b{position:relative;font:700 15px/1 var(--f-titulo);color:#fff;text-align:center}
.insignia b small{display:block;font-size:9px;font-weight:800;letter-spacing:.08em;margin-top:2px;color:inherit}
.insignia--oro{--c:var(--c-amarillo)} .insignia--oro .hex-borde{stroke:var(--c-negro)} .insignia--oro b{color:var(--c-negro)}
.insignia--morado{--c:var(--c-morado)} .insignia--azul{--c:var(--c-azul)} .insignia--verde{--c:#3E9A38} .insignia--naranja{--c:#E0801F}
.insignia--bloqueada{--c:var(--n-200)} .insignia--bloqueada b{color:var(--texto-3)}
.insignia--nueva::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px dashed var(--c-amarillo);animation:gira 8s linear infinite}
.logro{display:flex;gap:var(--e-3);align-items:center}
.logro p{margin:0;font-size:var(--t-xs);color:var(--texto-2)} .logro strong{display:block;font-size:var(--t-sm)}

.nivel{display:grid;gap:8px}
.nivel__top{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-sm)}
.nivel__num{font:700 var(--t-xl)/1 var(--f-titulo)}
.barra-prog{height:12px;border-radius:var(--r-pill);background:var(--superficie-2);overflow:hidden;position:relative}
.barra-prog i{position:absolute;inset:0 auto 0 0;width:var(--v,50%);border-radius:inherit;background:linear-gradient(90deg,var(--rojo-500),var(--c-naranja));transform-origin:left;animation:llena 900ms var(--curva-salida) both}
.barra-prog i::after{content:"";position:absolute;right:2px;top:2px;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9}
.barra-prog--fiesta i{background:linear-gradient(90deg,var(--c-amarillo),var(--c-naranja))}
.racha{display:flex;gap:6px}
.racha span{flex:1;height:30px;border-radius:8px;background:var(--superficie-2);display:grid;place-items:center;font:700 10px/1 var(--f-texto);color:var(--texto-3)}
.racha span.si{background:var(--rojo-500);color:#fff}
.racha span.hoy{background:var(--c-amarillo);color:var(--c-negro);outline:2px solid var(--c-negro);outline-offset:1px}
.anillo{width:96px;height:96px;transform:rotate(-90deg)}
.anillo circle{fill:none;stroke-width:10} .anillo .fondo{stroke:var(--superficie-2)} .anillo .valor{stroke:var(--acento);stroke-linecap:round;stroke-dasharray:var(--l) 999;animation:dibuja 1s var(--curva-salida) both}
.pasos{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pasos li{display:flex;align-items:center;gap:10px;font-size:var(--t-sm);font-weight:600}
.pasos li::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid var(--borde-fuerte);flex:none}
.pasos li.hecho{color:var(--texto-3);text-decoration:line-through}
.pasos li.hecho::before{background:var(--exito-texto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--exito-texto)}

/* ---------- Toasts, celebraciones, modales ---------- */
.toast{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:var(--r-md);background:var(--c-negro);color:var(--c-marfil);box-shadow:var(--s-3);font-size:var(--t-sm);width:max-content;max-width:100%;animation:sube var(--d-lento) var(--curva-resorte) both}
.toast .trix{width:26px;height:36px}
.toast--fijo{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:var(--z-toast)}
.fiesta{position:relative;overflow:hidden;display:flex;gap:var(--e-5);align-items:center;padding:var(--e-5) var(--e-6);border-radius:var(--r-lg);background:radial-gradient(120% 140% at 0% 0%,#5a35a0 0%,var(--c-morado) 45%,var(--morado-900) 100%);color:#fff}
.fiesta .trix{width:74px;height:100px;flex:none;margin-top:8px}
.fiesta h3{color:var(--c-amarillo);margin:0 0 4px} .fiesta p{margin:0;color:#E4DCF2;font-size:var(--t-sm)}
.confeti{position:absolute;inset:0;pointer-events:none}
.confeti i{position:absolute;top:-10px;width:8px;height:14px;border-radius:2px;animation:cae 1.5s var(--curva-salida) both}
.modal-fondo{position:relative;display:grid;place-items:center;padding:var(--e-8);border-radius:var(--r-lg);background:rgba(24,23,24,.55)}
.modal{width:min(440px,100%);background:var(--superficie);border-radius:var(--r-xl);padding:var(--e-8);box-shadow:var(--s-3);text-align:center;animation:sube var(--d-lento) var(--curva-resorte) both}
.modal .trix{width:64px;height:88px;margin:0 auto var(--e-3);display:block}

/* Tabs */
.tabs{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--superficie-2);border:1px solid var(--borde)}
.tabs button{all:unset;cursor:pointer;padding:8px 14px;border-radius:var(--r-pill);font:700 var(--t-sm)/1 var(--f-texto);color:var(--texto-2)}
.tabs button[aria-selected="true"]{background:var(--superficie);color:var(--texto);box-shadow:var(--s-1)}
.tabs button:focus-visible{box-shadow:var(--foco)}

/* Tabla */
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.tabla th{text-align:left;font:700 11px/1 var(--f-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);padding:10px 12px;border-bottom:1px solid var(--borde)}
.tabla td{padding:12px;border-bottom:1px solid var(--borde);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}

/* Gráficas ligeras */
.grafica{width:100%;height:auto;display:block;overflow:visible}
.grafica .eje{stroke:var(--borde);stroke-width:1}
.grafica .etq{fill:var(--texto-3);font:600 11px var(--f-texto)}
.grafica .area{fill:url(#gradRojo)}
.grafica .linea{fill:none;stroke:var(--acento);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:2000;animation:traza 1.4s var(--curva-salida) both}
.grafica .linea-prev{fill:none;stroke:var(--n-300);stroke-width:2;stroke-dasharray:5 5}
.grafica .pico{fill:var(--c-amarillo);stroke:var(--c-negro);stroke-width:2}
.barras-h{display:grid;gap:10px}
.barras-h .b{display:grid;grid-template-columns:120px 1fr 52px;gap:10px;align-items:center;font-size:var(--t-sm)}
.barras-h .b span:first-child{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barras-h .pista{height:10px;border-radius:var(--r-pill);background:var(--superficie-2);overflow:hidden}
.barras-h .pista i{display:block;height:100%;width:var(--v);border-radius:inherit;background:var(--c,var(--acento));animation:llena 900ms var(--curva-salida) both;transform-origin:left}
.barras-h .b span:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.calor{display:grid;grid-template-columns:34px repeat(24,1fr);gap:3px;font:600 10px/1 var(--f-texto);color:var(--texto-3)}
.calor i{aspect-ratio:1;border-radius:4px;background:color-mix(in srgb,var(--acento) var(--v),var(--superficie-2))}
.calor i.max{outline:2px solid var(--c-negro);outline-offset:1px;background:var(--c-amarillo)}
.calor span{align-self:center}
.dona circle{fill:none;stroke-width:18}

/* ---------- App (tablero) ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;background:linear-gradient(90deg,var(--superficie) 247px,var(--borde) 247px 248px,transparent 248px)}
.lateral{position:sticky;top:0;height:100vh;padding:var(--e-5);display:flex;flex-direction:column;gap:var(--e-6)}
.lateral nav{display:grid;gap:2px}
.lateral nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);color:var(--texto-2);text-decoration:none;font-weight:600;font-size:var(--t-sm)}
.lateral nav a:hover{background:var(--superficie-2);color:var(--texto)}
.lateral nav a[aria-current]{background:var(--texto);color:var(--superficie)}
.lateral nav a .chip{margin-left:auto;padding:3px 7px}
.lateral .yo{margin-top:auto;display:flex;gap:10px;align-items:center;padding:10px;border-radius:var(--r-md);background:var(--superficie-2);font-size:var(--t-sm)}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--c-morado);color:#fff;font:700 14px/1 var(--f-titulo)}
.principal{padding:var(--e-6) var(--e-8) 0;min-width:0}
.cabeza{display:flex;align-items:center;gap:var(--e-4);flex-wrap:wrap;margin-bottom:var(--e-6)}
.cabeza h1{font-size:var(--t-2xl);margin:0}
.rejilla{display:grid;gap:var(--e-4)}
.r-4{grid-template-columns:repeat(4,1fr)} .r-3{grid-template-columns:repeat(3,1fr)} .r-2{grid-template-columns:repeat(2,1fr)}
.r-12{grid-template-columns:repeat(12,1fr)}
.s-3{grid-column:span 3}.s-4{grid-column:span 4}.s-5{grid-column:span 5}.s-6{grid-column:span 6}.s-7{grid-column:span 7}.s-8{grid-column:span 8}.s-12{grid-column:span 12}

/* ---------- TRIX ---------- */
.trix{--trix-c:var(--trix);display:inline-block;overflow:visible;fill:var(--trix-c)}
.trix .cuerpo{transform-box:fill-box;transform-origin:50% 100%}
.trix .esclera{fill:#fff}
.trix .pupila{fill:var(--c-negro);transform:translate(var(--px,0px),var(--py,0px));transition:transform 90ms linear}
.trix .brillo{fill:#fff}
.trix .ojo{transform-box:fill-box;transform-origin:center;animation:parpadeo 5.2s infinite}
.trix .ojo+.ojo{animation-delay:.02s}
.trix .mirada{animation:vistazo 7s var(--curva-salida) infinite}
.trix .feliz,.trix .equis,.trix .parpado,.trix .extra,.trix .estela,.trix .burbuja,.trix .duda,.trix .manos{display:none}
.trix .feliz,.trix .equis{fill:none;stroke:var(--c-negro);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.trix .estela path{stroke:var(--trix-c);stroke-width:7;stroke-linecap:round;opacity:.5}
.trix .extra path{fill:var(--c-amarillo)}
/* Estados */
.trix--parpadeo .ojo{animation:parpadeo-ya 1.1s infinite}
.trix--feliz .esclera,.trix--feliz .mirada,.trix--celebra .esclera,.trix--celebra .mirada{display:none}
.trix--feliz .feliz,.trix--celebra .feliz{display:inline}
.trix--celebra{--trix-c:var(--c-amarillo)}
.trix--celebra .extra{display:inline} .trix--celebra .extra path{animation:destello 1.2s var(--curva-resorte) infinite alternate;transform-box:fill-box;transform-origin:center}
.trix--celebra .extra path:nth-child(2){animation-delay:.3s} .trix--celebra .extra path:nth-child(3){animation-delay:.6s}
.trix--celebra .cuerpo{animation:brinco .9s var(--curva-resorte) infinite alternate}
.trix--pensando .mirada{animation:none;transform:translate(5px,-6px)} .trix--pensando .burbuja{display:inline;fill:var(--texto-3)}
.trix--pensando .burbuja circle{animation:pulso 1.2s infinite} .trix--pensando .burbuja circle:nth-child(2){animation-delay:.2s} .trix--pensando .burbuja circle:nth-child(3){animation-delay:.4s}
.trix--error .mirada,.trix--error .esclera{display:none} .trix--error .equis{display:inline}
.trix--error .cuerpo{animation:tambalea 2.4s ease-in-out infinite} .trix--error .duda{display:inline;fill:var(--texto-3);font:700 64px var(--f-titulo)}
.trix--cargando .mirada{animation:barrido var(--d-ojos) ease-in-out infinite alternate} .trix--cargando .estela{display:inline}
.trix--cargando .estela path{animation:estela var(--d-ojos) ease-in-out infinite alternate}
.trix--somnoliento .parpado{display:inline;fill:var(--trix-c)} .trix--somnoliento .mirada{animation:none;transform:translateY(4px)}
.trix--somnoliento .ojo{animation:none}
.trix--tapado .esclera,.trix--tapado .mirada{display:none} .trix--tapado .feliz{display:inline;transform:scaleY(-1);transform-box:fill-box;transform-origin:center}
.trix--oscuro .pupila{fill:var(--c-negro)}

/* ---------- Animaciones ---------- */
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes parpadeo-ya{0%,40%,100%{transform:scaleY(1)}20%{transform:scaleY(.08)}}
@keyframes vistazo{0%,80%,100%{transform:translateX(0)}84%{transform:translateX(-6px)}88%{transform:translateX(6px)}92%{transform:translateX(0)}}
@keyframes barrido{from{transform:translateX(-7px)}to{transform:translateX(7px)}}
@keyframes estela{from{transform:translateX(8px);opacity:.15}to{transform:translateX(-6px);opacity:.6}}
@keyframes brinco{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-6px) scaleY(1.02)}}
@keyframes destello{from{transform:scale(.6) rotate(0);opacity:.5}to{transform:scale(1.15) rotate(20deg);opacity:1}}
@keyframes tambalea{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes pulso{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes sube{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes llena{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dibuja{from{stroke-dasharray:0 999}}
@keyframes traza{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}
@keyframes cae{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(160px) rotate(540deg);opacity:0}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes flota{from{transform:translateY(0)}to{transform:translateY(-12px)}}

/* Movimiento reducido: todo quieto, se conserva la información */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .trix .pupila{transform:none!important}
  .confeti{display:none}
}
.sin-movimiento *,.sin-movimiento *::before{animation:none!important;transition:none!important}

/* ---------- Responsivo ---------- */
@media (max-width:980px){
  .app{grid-template-columns:1fr;background:none} .lateral{background:var(--superficie);border-bottom:1px solid var(--borde)} .lateral{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .lateral nav{display:flex;flex-wrap:wrap} .lateral .yo{margin:0}
  .r-4{grid-template-columns:repeat(2,1fr)} .r-3,.r-2{grid-template-columns:1fr}
  .r-12>*{grid-column:span 12}
  .principal{padding:var(--e-5)}
  .enlace{grid-template-columns:auto 1fr auto} .enlace .chispa,.enlace__acc{display:none}
}
@media (max-width:620px){
  .nav a:not(.btn){display:none}
  .acortador{flex-wrap:wrap;border-radius:var(--r-lg);padding:12px} .acortador .btn{width:100%}
  .r-4{grid-template-columns:1fr}
}
/* TRIX en tamaños chicos (≤ 48 px): ojos simplificados, sin pupila ni parpadeo */
.marca .trix .mirada,.firma .trix .mirada,.toast .trix .mirada{display:none}
.marca .trix .ojo,.firma .trix .ojo{animation:none}
.nav a.btn{color:var(--fg);background:var(--bg)} .nav a.btn:hover{background:var(--bg)}

/* Portada */

.heroe{position:relative;padding:56px 0 40px;overflow:hidden}
.heroe__in{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.heroe h1 em{font-style:normal;color:var(--acento);position:relative;white-space:nowrap}
.heroe h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:var(--c-amarillo);z-index:-1;border-radius:4px}
.heroe .lead{font-size:var(--t-md);color:var(--texto-2);max-width:52ch;margin:20px 0 30px}
.beta{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px}
.escena{position:relative;aspect-ratio:1/1.02;display:grid;place-items:center}
.escena .sol{position:absolute;inset:6% 4% 10% 8%;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff 0,#fff 52%,var(--rojo-50) 53%,var(--rojo-50) 70%,var(--rojo-100) 71%);border:2px solid var(--texto)}
.escena .orbita{position:absolute;inset:-1% -3% 3% 1%;border-radius:50%;border:2px dashed var(--borde-fuerte);animation:gira 40s linear infinite}
.escena .orbita::before{content:"";position:absolute;top:12%;left:10%;width:18px;height:18px;border-radius:50%;background:var(--c-morado)}
.escena .orbita::after{content:"";position:absolute;bottom:8%;right:16%;width:12px;height:12px;border-radius:50%;background:var(--c-naranja)}
.escena .rayas{position:absolute;left:2%;top:40%;display:grid;gap:14px;justify-items:end;z-index:1}
.escena .rayas i{display:block;height:12px;border-radius:99px;background:var(--acento);transform-origin:right;animation:velocidad 1.6s var(--curva-salida) infinite}
.escena .rayas i:nth-child(1){width:120px}.escena .rayas i:nth-child(2){width:170px;background:var(--c-naranja);animation-delay:.12s}.escena .rayas i:nth-child(3){width:90px;background:var(--c-morado);animation-delay:.24s}
@keyframes velocidad{0%,100%{transform:translateX(0) scaleX(1)}50%{transform:translateX(-14px) scaleX(.8)}}
.escena .grande{position:relative;z-index:2;width:58%;height:auto;filter:drop-shadow(10px 14px 0 rgba(24,23,24,.9));animation:flota 2.8s ease-in-out infinite alternate}
.escena .globo{position:absolute;z-index:3;top:2%;right:-2%;max-width:230px;background:var(--superficie);border:2px solid var(--texto);border-radius:20px 20px 20px 4px;padding:12px 16px;font:600 var(--t-sm)/1.35 var(--f-texto);box-shadow:4px 4px 0 var(--texto);animation:sube .6s .3s var(--curva-resorte) both}
.flotante{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:var(--superficie);box-shadow:var(--s-3);font-size:var(--t-xs);font-weight:700;animation:flota 3.4s ease-in-out infinite alternate}
.flotante.f1{left:-4%;bottom:16%}.flotante.f2{right:0;bottom:4%;animation-delay:-1.2s}
.flotante .ico{color:var(--exito-texto)}
.atajos{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:var(--t-xs);color:var(--texto-2);font-weight:600}
.atajos span{display:inline-flex;align-items:center;gap:6px}
.comparador{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding:28px 32px;border-radius:var(--r-xl);background:var(--superficie);border:1px solid var(--borde)}
.comparador .largo{font:500 var(--t-sm)/1.5 var(--f-mono);color:var(--texto-3);word-break:break-all;text-decoration:line-through;text-decoration-color:var(--rojo-300)}
.comparador .corto{font:700 var(--t-2xl)/1 var(--f-titulo);letter-spacing:-.02em}
.comparador .corto b{color:var(--acento)}
.comparador .cifra{font:700 var(--t-xs)/1 var(--f-texto);color:var(--texto-3);margin-top:8px;letter-spacing:.06em;text-transform:uppercase}
.salto{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--acento);color:#fff;box-shadow:var(--s-rojo)}
.salto .ico{width:28px;height:28px}
.seccion{padding:64px 0 0}
.seccion>header{max-width:640px;margin-bottom:28px}
.feat .trix{width:52px;height:72px;margin-bottom:12px}
.feat{position:relative;overflow:hidden;min-height:250px}
.feat .num{position:absolute;right:18px;top:12px;font:700 64px/1 var(--f-titulo);color:var(--superficie-2)}
.feat h3{font-size:var(--t-lg)}
.feat p{color:var(--texto-2);font-size:var(--t-sm);margin:0}
.camino{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.camino::before{content:"";position:absolute;left:8%;right:8%;top:40px;height:4px;border-radius:9px;background:repeating-linear-gradient(90deg,var(--borde-fuerte) 0 10px,transparent 10px 18px)}
.paso-n{position:relative;text-align:center;display:grid;justify-items:center;gap:8px}
.paso-n b{font:700 var(--t-md)/1 var(--f-titulo)} .paso-n small{color:var(--texto-2);font-size:var(--t-xs);max-width:20ch}
.banda{margin-top:72px;border-radius:var(--r-xl);background:var(--c-negro);color:var(--c-marfil);padding:44px 48px;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.banda h2{color:#fff;margin:0 0 6px}.banda p{margin:0;color:#C9C3CC}
.banda .trix{width:96px;height:132px}
@media (max-width:900px){.heroe__in{grid-template-columns:1fr}.escena{max-width:420px;margin:0 auto;width:100%}.comparador{grid-template-columns:1fr;text-align:center}.salto{margin:auto;transform:rotate(90deg)}.camino{grid-template-columns:repeat(2,1fr)}.camino::before{display:none}.banda{grid-template-columns:1fr;text-align:center;padding:32px 24px}.banda .trix{margin:auto}}
.heroe__in>*{min-width:0}
@media (max-width:620px){.resultado{flex-wrap:wrap;border-radius:var(--r-lg)}.atajos>span:last-child{display:none}.flotante.f1{display:none}.heroe{padding-top:28px}.escena .globo{position:relative;right:auto;top:auto;margin:0 auto 8px;max-width:none}.escena{aspect-ratio:auto;padding:10px 0 30px}.escena .sol{inset:22% 10% 8% 10%}.flotante.f1{left:0;bottom:6%}.flotante.f2{right:0;bottom:0}.escena .grande{width:52%}}

/* Acceso */

.acceso{display:grid;grid-template-columns:minmax(380px,.9fr) 1.1fr;min-height:100vh}
.lado{position:relative;background:var(--c-negro);color:var(--c-marfil);padding:32px 48px;display:flex;flex-direction:column;overflow:hidden}
.lado .marca{color:#fff}
.lado .escenario{flex:1;display:grid;place-items:center;position:relative}
.escenario .trix{width:min(260px,60%);height:auto;filter:drop-shadow(10px 12px 0 var(--c-morado))}
.lado .globo{position:absolute;top:8%;right:4%;max-width:240px;background:#fff;color:var(--c-negro);border-radius:20px 20px 4px 20px;padding:12px 16px;font:600 var(--t-sm)/1.35 var(--f-texto)}
.lado .rejilla-fondo{position:absolute;inset:0;background-image:radial-gradient(#333 1px,transparent 1px);background-size:22px 22px;opacity:.6}
.lado .tip{position:relative;display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--r-md);background:#232123;font-size:var(--t-sm);color:#C9C3CC}
.lado .tip b{color:#fff}
.formas{padding:32px 56px;display:flex;flex-direction:column}
.formas .top{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.formas .cuerpo-f{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-content:center;padding:28px 0}
.formas h1{font-size:var(--t-2xl);margin:0 0 6px}
.formas .tarjeta{padding:28px}
.oauth{display:grid;gap:10px;margin:18px 0}
.oauth .btn{justify-content:flex-start;padding-left:16px}
.letra{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font:800 12px/1 var(--f-texto);color:#fff}
.sep{display:flex;align-items:center;gap:12px;color:var(--texto-3);font-size:var(--t-xs);font-weight:700;margin:6px 0 14px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--borde)}
.formas form{display:grid;gap:14px}
.vista-url{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--superficie-2);font-size:var(--t-sm)}
.vista-url b{font:700 var(--t-md)/1 var(--f-titulo)} .vista-url b span{color:var(--acento)}
.fuerza{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.fuerza i{height:5px;border-radius:9px;background:var(--superficie-2)}.fuerza i.on{background:var(--exito-texto)}
.legal{font-size:var(--t-xs);color:var(--texto-3);margin:0}
.formas .pie{margin-top:0}
@media (max-width:1100px){.formas .cuerpo-f{grid-template-columns:1fr}}
@media (max-width:860px){.acceso{grid-template-columns:1fr}.lado{min-height:420px;padding:24px}.formas{padding:24px}}

/* Tablero */

.saludo h1 em{font-style:normal;color:var(--acento)}
.cabeza .acortador{flex:1;min-width:320px;max-width:560px;margin-left:auto}
.g-card{display:flex;flex-direction:column;gap:12px}
.g-card .tit{display:flex;justify-content:space-between;align-items:center}
.g-card .tit b{font:700 var(--t-sm)/1 var(--f-texto)}
.racha-num{display:flex;align-items:baseline;gap:8px}.racha-num .kpi{color:var(--acento)}
.meta-wrap{display:flex;align-items:center;gap:16px}
.meta-wrap .rel{position:relative;display:grid;place-items:center}
.meta-wrap .rel b{position:absolute;font:700 var(--t-lg)/1 var(--f-titulo)}
.lista-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.logros{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;justify-items:center;text-align:center}
.logros small{font-size:11px;font-weight:700;color:var(--texto-2);line-height:1.2}
.destacado{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--borde);font-size:var(--t-sm)}
.destacado:first-of-type{border-top:0}
.destacado .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--rojo-50);color:var(--acento);flex:none}
.vacio{display:flex;align-items:center;gap:16px;border:2px dashed var(--borde-fuerte);border-radius:var(--r-md);padding:14px 18px;margin-top:10px;background:transparent}
.vacio .trix{width:44px;height:60px}
.vacio p{margin:0;font-size:var(--t-sm)}
.cerrar{margin-left:auto;align-self:flex-start;color:#fff;background:rgba(255,255,255,.1);border:0}

/* Insights */

.resumen{position:relative;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--c-negro);color:var(--c-marfil);border:0}
.resumen .frase{font:600 clamp(1.25rem,2vw,1.6rem)/1.35 var(--f-titulo);color:#fff;margin:8px 0 14px;max-width:44ch}
.resumen .frase mark{background:none;color:var(--c-amarillo)}
.resumen .trix{width:140px;height:194px;margin-right:12px}
.resumen .eyebrow,.resumen .como,.resumen .como summary{color:#A29CA4}
.kpi-card .kpi{margin:6px 0}
.kpi-card .lbl{font-weight:700;font-size:var(--t-sm);color:var(--texto-2)}
.dev{display:flex;gap:18px;align-items:center}
.dev ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--t-sm)}
.dev li{display:flex;align-items:center;gap:8px}.dev li i{width:10px;height:10px;border-radius:3px}
.dev li b{margin-left:auto;padding-left:12px}
.leyenda{display:flex;gap:16px;font-size:var(--t-xs);color:var(--texto-2);font-weight:600}
.leyenda span{display:inline-flex;align-items:center;gap:6px}.leyenda i{width:16px;height:3px;border-radius:2px;background:var(--acento)}
.sugerencia{display:flex;gap:14px;align-items:center;padding:14px;border-radius:var(--r-md);background:var(--rojo-50);margin-top:12px}
.sugerencia .trix{width:52px;height:72px;flex:none}
.sugerencia b{font:700 var(--t-lg)/1.1 var(--f-titulo);color:var(--rojo-700)}
.alerta{border-left:5px solid var(--c-naranja)}
.selector-enlace{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:var(--r-pill);background:var(--superficie);border:1px solid var(--borde);font-weight:700}
.selector-enlace .ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--acento);color:#fff}

/* ---------- App 3es.mx v0.0.7: piezas de producción que no estaban en el mockup ---------- */
.aviso,.error{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-md);font-size:var(--t-sm);font-weight:600;margin:0 0 var(--e-4)}
.aviso{background:var(--exito-fondo);color:var(--exito-texto)} .error{background:var(--error-fondo);color:var(--error-texto)}
.tabla-contenedor{overflow-x:auto;max-width:100%}
.tabla input.tope{width:6.5rem;min-height:36px;padding:0 8px;border:1.5px solid var(--borde-fuerte);border-radius:var(--r-sm);font:500 var(--t-sm)/1 var(--f-texto);background:var(--superficie);color:var(--texto)}
.tabla input[type=datetime-local]{min-height:36px;border:1.5px solid var(--borde-fuerte);border-radius:var(--r-sm);font:500 var(--t-xs)/1 var(--f-texto);padding:0 6px;max-width:13rem}
.tabla input[type=checkbox],.casilla input{width:20px;height:20px;accent-color:var(--acento)}
.url{overflow-wrap:anywhere}
.en-linea{display:inline}
.btn-texto{all:unset;cursor:pointer;color:inherit;font:inherit}
.btn-texto:focus-visible{box-shadow:var(--foco);border-radius:var(--r-xs)}
.lateral nav .sep{margin:10px 12px 4px;font:700 11px/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3)}
.lateral form{margin:0}
.lateral .salir{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:var(--r-sm);color:var(--texto-2);font-weight:600;font-size:var(--t-sm)}
.lateral .salir:hover{background:var(--superficie-2);color:var(--texto)}
.opciones{margin-top:10px;font-size:var(--t-sm)}
.opciones summary{cursor:pointer;font-weight:700;color:var(--texto-2);width:max-content}
.opciones .rejilla{margin-top:12px}
.opciones .campo input:not([type=checkbox]){all:unset;flex:1;min-width:0;padding:0 14px;font:500 var(--t-base)/1.2 var(--f-texto)}
.casilla{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm)}
.casilla label{font-weight:600}
.vacio-grande{display:grid;justify-items:center;text-align:center;gap:8px;padding:var(--e-8) var(--e-4);border:2px dashed var(--borde-fuerte);border-radius:var(--r-lg)}
.vacio-grande .trix{width:72px;height:100px}
.vacio-grande p{margin:0;max-width:44ch;color:var(--texto-2)}
.enlace[hidden]{display:none}
.selector-enlace select{all:unset;cursor:pointer;font-weight:700;padding-right:4px}
.tabs a{display:inline-block;padding:8px 14px;border-radius:var(--r-pill);font:700 var(--t-sm)/1 var(--f-texto);color:var(--texto-2);text-decoration:none}
.tabs a[aria-current]{background:var(--superficie);color:var(--texto);box-shadow:var(--s-1)}
.prefs{display:grid;gap:12px}
.prefs .casilla{align-items:center}
.credito-geo{font-size:var(--t-xs);color:var(--texto-3);margin-top:14px}
.admin-kpi .kpi{font-size:var(--t-2xl)}
@media (max-width:620px){.cabeza .acortador{min-width:0;width:100%}.formas .cuerpo-f{padding:16px 0}}

.toast[hidden],.fiesta[hidden]{display:none}
.perfil-publico{max-width:520px;margin:var(--e-6) auto;text-align:center;display:grid;justify-items:center;gap:var(--e-3)}
.perfil-publico .trix{width:72px;height:100px}
.botones-perfil{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3);width:100%}
.btn--bloque{width:100%}
.contenido{padding-block:var(--e-6) var(--e-10)}
.barra.con-borde{border-bottom:1px solid var(--borde)}
.cabeza .nuevo-enlace{flex:1;min-width:300px;max-width:560px;margin-left:auto}
.cabeza .nuevo-enlace .acortador{max-width:none;margin:0}
.resultado--panel{margin:0 0 16px}
.toast[hidden]{display:none}
.cabeza .nuevo-enlace .acortador{min-width:0}
@media (max-width:620px){.cabeza .nuevo-enlace{min-width:0;width:100%}}
.principal>section.tarjeta+section.tarjeta{margin-top:var(--e-4)}
.principal>section.tarjeta h2{font-size:var(--t-xl)}
.tabla .etiqueta{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--superficie-2);color:var(--texto-2)}
/* v0.0.7 · ajustes móviles: ninguna fila ni tarjeta empuja el ancho de la página */
.enlace{grid-template-columns:auto minmax(0,1fr) auto auto auto}.enlace>*{min-width:0}
.calor{grid-template-columns:34px repeat(24,minmax(0,1fr))}
.rejilla>*{min-width:0}
@media (max-width:980px){.enlace{grid-template-columns:auto minmax(0,1fr) auto}}
@media (max-width:620px){.calor{gap:2px;grid-template-columns:22px repeat(24,minmax(0,1fr))}.calor i{border-radius:2px}.tabla-movil,.tarjeta:has(>.tabla){overflow-x:auto}}
@media (max-width:860px){.acceso{grid-template-columns:minmax(0,1fr)}.acceso>*{min-width:0}}
@media (max-width:980px){.app{grid-template-columns:minmax(0,1fr)}}
.tabla-contenedor{position:relative}
.formas form.idioma{display:inline-flex;gap:0}
/* v0.0.8 · Perfil público que nunca se desborda (nombres de 30+ caracteres, cualquier ancho) */
.perfil-publico{width:100%;max-width:560px;box-sizing:border-box;min-width:0;padding:clamp(20px,5vw,40px)}
.perfil-publico>*{max-width:100%;min-width:0}
.perfil-publico h1{font-size:clamp(1.5rem,.9rem + 2.6vw,2.6rem);line-height:1.08;margin:0;overflow-wrap:anywhere;word-break:normal;hyphens:none;text-wrap:balance}
.perfil-publico h1.perfil-publico__solo-url{font-size:clamp(1.35rem,.8rem + 2.2vw,2.25rem)}
.perfil-publico__url{margin:-4px 0 0;font:700 var(--t-sm)/1.3 var(--f-texto);color:var(--texto-3);overflow-wrap:anywhere}
.perfil-publico__titulo{margin:0;font:700 var(--t-base)/1.35 var(--f-texto);color:var(--acento);overflow-wrap:anywhere}
.perfil-publico__desc{margin:0;color:var(--texto-2);font-size:var(--t-sm);line-height:1.55;overflow-wrap:anywhere;max-width:46ch}
.botones-perfil li{min-width:0}
.btn--bloque{width:100%;max-width:100%;box-sizing:border-box;min-width:0;white-space:normal;text-align:center;overflow-wrap:anywhere;line-height:1.25;padding-top:10px;padding-bottom:10px;height:auto}
@media (max-width:620px){.perfil-publico{margin:var(--e-4) auto;border-radius:var(--r-lg)}}
/* v0.0.8 · Avatar: foto WebP o iniciales con la paleta de 3es.mx */
.avatar{flex:none;overflow:hidden;object-fit:cover;letter-spacing:.02em;user-select:none}
img.avatar{background:var(--superficie-2);display:block}
.avatar--t0{background:var(--c-morado);color:#fff}.avatar--t1{background:var(--acento);color:#fff}
.avatar--t2{background:var(--c-naranja);color:var(--c-negro)}.avatar--t3{background:var(--c-negro);color:var(--c-amarillo)}
.avatar--md{width:56px;height:56px;font-size:20px}
.avatar--xl{width:clamp(96px,22vw,128px);height:clamp(96px,22vw,128px);font-size:clamp(34px,8vw,46px);box-shadow:0 0 0 4px var(--superficie),0 0 0 6px var(--acento)}
a.yo{color:inherit;text-decoration:none}a.yo:hover{box-shadow:inset 0 0 0 1.5px var(--borde-fuerte)}
.tarjeta-perfil__cab{display:flex;gap:12px;align-items:center;min-width:0}.tarjeta-perfil__cab .url{display:block;overflow-wrap:anywhere}
.tarjeta-perfil .fila{flex-wrap:wrap;gap:8px}
/* v0.0.8 · Mi perfil */
.foto-perfil{display:flex;gap:var(--e-6);align-items:center;flex-wrap:wrap}
.foto-perfil__acciones{display:grid;gap:10px;flex:1;min-width:220px}
.pila-sm{display:grid;gap:6px}
.foto-perfil input[type=file]{font:500 var(--t-sm)/1.3 var(--f-texto);max-width:100%}
.foto-perfil input[type=file]::file-selector-button{font:700 var(--t-sm)/1 var(--f-texto);border:1.5px solid var(--borde-fuerte);background:var(--superficie);border-radius:var(--r-pill);padding:9px 14px;margin-right:10px;cursor:pointer}
.formulario-perfil{display:grid;gap:18px}
.entrada--fija{background:var(--superficie-2)}.entrada--fija input{color:var(--texto-2)}
.entrada--area{align-items:stretch}.entrada--area textarea{all:unset;flex:1;min-width:0;padding:12px 14px;min-height:96px;font:500 var(--t-base)/1.45 var(--f-texto);color:var(--texto);white-space:pre-wrap;overflow-wrap:anywhere}
.entrada:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px var(--rojo-50)}
fieldset.campo{border:0;padding:0;margin:0}fieldset.campo legend{font-weight:700;font-size:var(--t-sm);padding:0;margin-bottom:6px}
.error-campo{margin:0;color:var(--error-texto);font-weight:700;font-size:var(--t-sm)}
[aria-invalid=true]{color:var(--error-texto)}
.pasos li a{color:inherit;text-decoration:none}.pasos li a:hover{text-decoration:underline}
/* v0.0.8 · pantallas de 320 px: la barra y el acceso caben sin scroll horizontal */
@media (max-width:400px){.barra__in{gap:var(--e-3)}.nav .btn{padding:0 12px}.idioma button{padding:4px 8px}.formas{padding:20px 14px}.formas .cuerpo-f{grid-template-columns:minmax(0,1fr)}.formas .cuerpo-f>*,.formas form>*{min-width:0}.formas .tarjeta{padding:18px;min-width:0}.formas .campo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:400px){.principal{padding:14px}.campo{grid-template-columns:minmax(0,1fr)}.lista-cab{flex-wrap:wrap;gap:8px}.tabs{max-width:100%;overflow-x:auto}.vacio-grande .trix,.vacio .trix{max-width:30%;height:auto}.chip{white-space:normal}.tarjeta{padding:16px}.fiesta{padding-right:44px}}
@media (max-width:480px){.resumen{grid-template-columns:minmax(0,1fr)}.resumen>.trix{display:none}.fila{flex-wrap:wrap}}
@media (max-width:400px){.vacio{flex-wrap:wrap}.vacio .btn{margin-left:0!important}}
@media (max-width:360px){.barra__in{gap:8px}.nav .btn{padding:0 10px;font-size:12px;min-height:36px}.marca{font-size:1.15rem;gap:6px}}
.btn--bloque{border-radius:28px}

/* ---------- v0.0.9 · Editar enlace, alias, UTM, QR y recuperar contraseña ---------- */
.titulo-enlace span{color:var(--acento);overflow-wrap:anywhere}
.titulo-enlace{overflow-wrap:anywhere;min-width:0}
.utm-campos{margin-top:4px}
.utm-campos code,.campo legend code{font-size:var(--t-xs)}
.utm-enlace[disabled]{opacity:.72}
.vista-utm{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r-md);background:var(--superficie-2);border:1px dashed var(--borde);min-width:0}
.vista-utm__url{display:block;font:600 var(--t-sm)/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--texto);overflow-wrap:anywhere;word-break:break-all}
.casilla--grande{font-size:var(--t-md)}
.lista-alias{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.lista-alias li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--borde);background:var(--superficie);min-width:0}
.lista-alias .corto{font:600 var(--t-md)/1.2 var(--f-titulo);overflow-wrap:anywhere;min-width:0}
.lista-alias .chip{white-space:normal}
.alta-alias{display:grid;gap:10px}
.qr-tarjeta{text-align:center}
.qr-img{display:block;width:100%;max-width:240px;height:auto;aspect-ratio:1;margin:8px auto 12px;border-radius:var(--r-md);border:1px solid var(--borde);background:#fff}
.qr-tarjeta .fila,.dialogo-qr .fila{justify-content:center}
.dialogo-qr{border:0;border-radius:var(--r-lg);padding:20px;width:min(360px,calc(100% - 32px));box-sizing:border-box;background:var(--superficie);color:var(--texto);box-shadow:0 20px 60px rgba(24,23,24,.25);text-align:center}
.dialogo-qr::backdrop{background:rgba(24,23,24,.55)}
.dialogo-qr__cab{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}
.dialogo-qr__cab h3{overflow-wrap:anywhere;min-width:0;font-size:var(--t-md)}
.tarjeta-recuperar{max-width:520px;margin:32px auto;box-sizing:border-box;width:calc(100% - 32px);text-align:left}
.tarjeta-recuperar .trix{width:64px;height:auto;display:block;margin-bottom:8px}
.tarjeta-recuperar h1{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);overflow-wrap:anywhere}
.tarjeta-recuperar form{display:grid;gap:14px;margin:12px 0}
@media (max-width:980px){
  .enlace{grid-template-columns:auto minmax(0,1fr) auto}
  .enlace__acc{display:flex;grid-column:2/-1;justify-content:flex-end;flex-wrap:wrap}
}
/* v0.0.10 · D-35 · plan de una empresa en /admin */
.plan-empresa__form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.plan-empresa__form .campo{flex:1 1 200px;margin:0}
.plan-empresa__form .campo:last-child{flex:0 0 auto}
.plan-empresa .tabla-contenedor{margin-top:16px}
.entrada select{all:unset;flex:1;min-width:0;padding:0 14px;font:500 var(--t-base)/1.2 var(--f-texto);color:var(--texto);cursor:pointer;align-self:stretch;display:flex;align-items:center}
.plan-empresa__form .btn{min-height:48px}
/* v0.0.12 · D-36 a D-38 · empresas, equipo, proyectos y acciones en bloque */
.lateral{overflow-y:auto}
.selector-empresa{display:grid;gap:6px}
.selector-empresa .eyebrow{margin:0}
.selector-empresa .entrada{min-height:42px;padding-left:10px}
.selector-empresa .entrada .ico{flex:0 0 auto;color:var(--texto-3)}
.filtros-tablero{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.filtros-tablero .entrada{min-height:40px}
.filtros-tablero .entrada--buscar{flex:1 1 220px;padding-left:12px}
.filtros-tablero .entrada--buscar .ico{flex:0 0 auto;color:var(--texto-3)}
.filtros-tablero .entrada--buscar input{all:unset;flex:1;min-width:0;padding:0 12px;font:500 var(--t-sm)/1.2 var(--f-texto);color:var(--texto)}
.filtros-tablero>.entrada:not(.entrada--buscar){flex:0 1 220px}
/* v0.0.18 · D-49: cada selector con su botón en un renglón; los botones comparten columna, así quedan alineados */
.acciones-bloque{display:grid;grid-template-columns:minmax(0,320px) max-content;gap:8px 10px;align-items:center;margin:0 0 12px;padding:10px 12px;border:1px dashed var(--borde-fuerte);border-radius:var(--r-md)}
.acciones-bloque>.ayuda{grid-column:1/-1;margin:0}
.acciones-bloque .accion-par{display:contents}
.acciones-bloque .entrada{min-height:36px;min-width:0}
.acciones-bloque select{min-width:0;width:100%;text-overflow:ellipsis}
.acciones-bloque .btn{min-height:36px;justify-content:center;white-space:nowrap}
.acciones-bloque select{white-space:nowrap;overflow:hidden}
.acciones-bloque .txt-corto{display:none}
@media (max-width:400px){.acciones-bloque .txt-largo{display:none}.acciones-bloque .txt-corto{display:inline}}
.enlace__izq{display:flex;align-items:center;gap:8px}
/* v0.0.18 · D-50: a 320 px la estrella y el ojo se apilan junto a la casilla para dejarle ancho al enlace */
@media (max-width:400px){.enlace__izq{display:grid;grid-template-columns:auto auto;gap:6px}.enlace__izq>.enlace__sel{grid-row:span 2}}
.enlace__sel{width:18px;height:18px;accent-color:var(--acento);margin:0;cursor:pointer}
.chip--proyecto{text-decoration:none;background:color-mix(in srgb,var(--pc) 14%,var(--superficie));color:var(--texto)}
.chip--proyecto .punto,.proyecto__punto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pc)}
.paginas{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:16px}
.empresa-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px}
.empresa-fila--activa{border-color:var(--texto)}
.empresa-fila__ic{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--superficie-2)}
.miembros{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.miembros__nota{border-top:1px solid var(--borde);padding-top:10px;margin:12px 0 0}
.miembro{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center}
.miembro .entrada{min-height:36px;min-width:120px}
.miembro .url{overflow-wrap:anywhere}
.resultado-invitar{display:grid;gap:6px;margin-bottom:12px}
.tarjeta--peligro{border-color:var(--error-fondo)}
.btn--peligro{--bg:var(--error-texto);--fg:#fff;--bd:var(--error-texto)}
.aviso--alerta{background:var(--alerta-fondo);color:var(--alerta-texto);display:flex;gap:8px;align-items:center}
.proyecto{border-left:6px solid var(--pc)}
.proyecto--archivado{opacity:.72}
.proyecto__cab{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.proyecto__punto{width:12px;height:12px}
.proyecto__cifras{display:flex;gap:18px;margin:10px 0 12px;color:var(--texto-2);font-size:var(--t-sm)}
.proyecto__cifras b{font:700 var(--t-lg)/1 var(--f-titulo);color:var(--texto)}
/* v0.0.18 · D-49: el selector de color ya no choca con el campo del nombre. Separación de 16 px, leyenda visible y cada
   color con un anillo de --texto-3 (4.5:1 en claro y 6.7:1 en oscuro: AA de 3:1 para controles); el elegido lleva anillo de
   --texto y palomita en blanco o negro según el color. */
.proyecto__form,.form-proyecto{display:grid;gap:var(--e-4);margin:10px 0 0}
.colores{border:0;margin:0;padding:0;min-width:0}
.colores legend{font-weight:700;font-size:var(--t-sm);padding:0;margin:0 0 var(--e-2)}
.colores__lista{display:flex;flex-wrap:wrap;gap:12px;padding:4px}
.color{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:var(--pc);cursor:pointer;box-shadow:0 0 0 2px var(--superficie),0 0 0 3.5px var(--texto-3)}
.color input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.color:has(input:checked){box-shadow:0 0 0 2px var(--superficie),0 0 0 5px var(--texto)}
.color:has(input:checked)::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:6px;border:solid var(--pc-marca);border-width:0 0 2.5px 2.5px;transform:translate(-50%,-70%) rotate(-45deg);pointer-events:none}
.color:has(input:focus-visible){box-shadow:0 0 0 2px var(--superficie),0 0 0 5px var(--acento)}
.lista-mover{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.lista-mover li{overflow-wrap:anywhere}
@media (max-width:620px){
  .miembro{grid-template-columns:auto minmax(0,1fr)}
  .miembro form{grid-column:2/-1}
  .empresa-fila{grid-template-columns:auto minmax(0,1fr)}
  .empresa-fila>form,.empresa-fila>.chip{grid-column:2/-1;justify-self:start}
  .filtros-tablero>.entrada:not(.entrada--buscar){flex:1 1 100%}
  .acciones-bloque{grid-template-columns:minmax(0,1fr) max-content}
}
/* v0.0.15 · D-41 insights completos: rangos con candado, tarjetas bloqueadas, menú CSV y enlaces dormidos */
.tabs .bloq{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:var(--r-pill);font:700 var(--t-sm)/1 var(--f-texto);color:var(--texto-3);cursor:not-allowed}
.tabs .bloq .ico{width:14px;height:14px}
.tabs.rangos{flex-wrap:wrap;max-width:100%}
.tarjeta.bloqueada{background:repeating-linear-gradient(135deg,var(--superficie) 0 10px,var(--superficie-2) 10px 20px);border-style:dashed}
.menu-csv{position:relative}
.menu-csv>summary{list-style:none;cursor:pointer}
.menu-csv>summary::-webkit-details-marker{display:none}
.menu-csv__lista{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:240px;max-width:min(320px,90vw);padding:10px;border:1px solid var(--borde);border-radius:var(--r-md,12px);background:var(--superficie);box-shadow:var(--s-2,0 8px 24px rgba(0,0,0,.12))}
.menu-csv__lista a{display:block;padding:8px 10px;border-radius:var(--r-sm);color:var(--texto);text-decoration:none;font-weight:700;font-size:var(--t-sm)}
.menu-csv__lista a:hover,.menu-csv__lista a:focus-visible{background:var(--superficie-2)}
.lista-dormidos{list-style:none;margin:0;padding:0}
.lista-dormidos li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--borde)}
.lista-dormidos li:last-child{border-bottom:0}
.lista-dormidos .slug{font-weight:700;overflow-wrap:anywhere}
.tabla.comparar td{padding:8px 6px}
/* v0.0.15 · D-42 aviso de cookies (Google Analytics con consentimiento previo) */
.cookies{position:fixed;z-index:50;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;padding:16px 18px;border-radius:var(--r-md,14px);background:var(--c-negro,#181718);color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.25);font-size:var(--t-sm)}
.cookies p{margin:0 0 12px;line-height:1.45}
.cookies__acciones{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.cookies .btn:not(.btn--primario){--bg:transparent;--bd:rgba(255,255,255,.5);--fg:#fff}
.cookies-pref{position:fixed;z-index:40;left:12px;bottom:12px;padding:6px 10px;border:1px solid var(--borde);border-radius:var(--r-pill);background:var(--superficie);color:var(--texto-2);font:700 var(--t-xs)/1 var(--f-texto);cursor:pointer;opacity:.85}
.cookies-pref:hover,.cookies-pref:focus-visible{opacity:1}
.cookies-pref--pie{position:static;opacity:1;margin-left:8px}
.cookies[hidden],.cookies-pref[hidden]{display:none}
/* v0.0.16 · D-43: Bio. Redes con iconos (sprite en línea) en la página pública; listas ordenables en el panel */
.redes-perfil{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-2)}
.redes-perfil a,.redes-perfil button{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--texto);background:var(--superficie-2);transition:transform .15s;border:0;padding:0;cursor:pointer;font:inherit}
.redes-perfil a:hover,.redes-perfil button:hover{transform:translateY(-2px);color:var(--acento)}
.redes-perfil__sinjs{margin:var(--e-2) 0 0;text-align:center}
.redes-perfil .red-ico{width:22px;height:22px;fill:currentColor}
.lista-orden{list-style:none;margin:0 0 var(--e-3);padding:0;display:grid;gap:6px}
.lista-orden li{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--borde);border-radius:var(--r-md);background:var(--superficie);min-width:0}
.lista-orden li.arrastrando{opacity:.5;border-style:dashed}
.lista-orden__asa{cursor:grab;color:var(--texto-3);display:inline-flex}
.lista-orden__txt{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;overflow-wrap:anywhere}
.lista-orden__txt .red-ico{width:18px;height:18px;fill:currentColor;flex:none}
.lista-orden__url{font-size:var(--t-xs)}
.lista-orden__acc{display:inline-flex;gap:4px;flex:none}
.btn-icono{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--borde);border-radius:var(--r-md);background:var(--superficie);color:var(--texto-2);cursor:pointer;padding:0}
.btn-icono:hover:not(:disabled){border-color:var(--borde-fuerte);color:var(--texto)}
.btn-icono:disabled{opacity:.35;cursor:default}
.btn-icono--peligro:hover:not(:disabled){color:var(--acento)}
.form-red{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:0 var(--e-3);align-items:start}
.form-red .fila{grid-column:1/-1}
@media (max-width:620px){.form-red{grid-template-columns:minmax(0,1fr)}.lista-orden__asa{display:none}}
/* v0.0.19 · página pública de la empresa: logo y sección Equipo */
.avatar--logo{object-fit:contain;background:var(--superficie,#fff);border-radius:var(--r-lg)}
.perfil-publico__h2{margin:var(--e-2) 0 0;font:800 var(--t-sm)/1.2 var(--f-texto);letter-spacing:.04em;text-transform:uppercase;color:var(--texto-3)}
.equipo-perfil{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:8px;text-align:left}
.equipo-perfil a{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border:1px solid var(--borde);border-radius:var(--r-md);color:var(--texto);text-decoration:none;min-width:0}
.equipo-perfil a:hover{border-color:var(--acento)}
.equipo-perfil a:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.equipo-perfil span{display:grid;min-width:0}
.equipo-perfil b,.equipo-perfil small{overflow-wrap:anywhere}
.equipo-perfil small{color:var(--texto-3);font-size:var(--t-xs,.8rem)}
/* v0.0.20 · top 10 (favoritos numerados) */
.top10-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-2,8px)}
.top10-fila{display:flex;gap:var(--e-3,12px);align-items:flex-start;padding:12px;border:1px solid var(--borde);border-radius:var(--r-md);min-width:0}
.top10-num{flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);background:var(--superficie-2);font:800 1.25rem/1 var(--f-titulo);color:var(--texto)}
.top10-cuerpo{flex:1 1 auto;min-width:0;display:grid;gap:6px}
.top10-cuerpo p{margin:0;overflow-wrap:anywhere}
.top10-acciones{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;min-width:0}
.top10-acciones .accion-par{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 260px;min-width:0}
.top10-acciones .entrada{flex:1 1 180px;min-width:0}
.top10-acciones select{width:100%;min-width:0}
.top10-confirmar{border-color:var(--acento)}
@media (max-width:420px){.top10-fila{padding:10px;gap:8px}.top10-num{flex-basis:32px;height:32px;font-size:1rem}}
/* v0.0.21 · D-57: grid de contenido (3es.mx/<usuario>/b y al final de Mi página). D-58: logo completo de la empresa */
.grid-b{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%}
.grid-b li{margin:0;min-width:0}
.grid-b a{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:6px;background:var(--superficie-2)}
.grid-b a:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.grid-b img{display:block;width:100%;height:100%;object-fit:cover}
.grid-b__cabeza{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-width:0}
.grid-b__cabeza>div{min-width:0}
.grid-b__cabeza h1{font-size:clamp(1.15rem,.9rem + 1vw,1.5rem);margin:0;overflow-wrap:anywhere}
.grid-b__volver{color:var(--texto-2);font-size:.875rem}
.perfil-publico__mas{margin:0}
.logo-completo{display:block;width:auto;height:auto;max-width:min(100%,480px);max-height:160px;object-fit:contain}
.logo-completo--chico{max-width:min(50%,200px);max-height:56px}
.logo-completo-panel{padding:12px;border:1px dashed var(--borde);border-radius:var(--r-md);margin-bottom:var(--e-3);background:repeating-conic-gradient(var(--superficie-2) 0 25%,var(--superficie) 0 50%) 0 0/16px 16px}
.grid-panel__img{width:56px;height:56px;border-radius:6px;object-fit:cover;flex:none}
/* v0.0.22 · D-60 a D-63: formularios públicos (/f/<nombre> y /c) y su panel */
.perfil-publico--form{text-align:left}
.perfil-publico--form .grid-b__cabeza{justify-content:flex-start}
.formulario-publico__de{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:var(--t-lg)}
.formulario-publico__titulo{margin:var(--e-4) 0 var(--e-2);font-size:clamp(1.6rem,5vw,2.1rem);line-height:1.15}
.formulario-publico{margin-top:var(--e-4)}
.formulario-publico .entrada select{all:unset;flex:1;min-width:0;padding:0 14px;min-height:46px;align-self:stretch;display:flex;align-items:center;cursor:pointer;font:500 var(--t-base)/1.2 var(--f-texto);color:var(--texto)}
.formulario-publico .casilla input{flex:none;margin-top:2px}
.formulario-publico__legal{margin:0}
.formulario-publico__gracias{text-align:center;padding:var(--e-6) 0 var(--e-2)}
.formulario-publico__gracias h1{margin:var(--e-2) 0}
.formulario-publico__ok{display:inline-grid;place-items:center;width:64px;height:64px;margin:0 auto;border-radius:50%;background:var(--exito-fondo,#E8F6E6);color:var(--exito-texto)}
.formulario-publico__ok svg{width:32px;height:32px}
.trampa{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.form-panel__campo{display:grid;gap:var(--e-2);padding:var(--e-4);border:1px solid var(--borde);border-radius:var(--r-md);background:var(--superficie)}
.form-panel__campo-cab{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap}
.form-panel__campo-cab .chip{margin-right:auto}
.form-panel__agregar{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center}
.form-panel__agregar .entrada{flex:1;min-width:180px}
.form-panel__agregar select,.form-panel select{all:unset;flex:1;min-width:0;padding:0 14px;min-height:46px;font:500 var(--t-base)/1.2 var(--f-texto)}
.form-ar__interruptor{padding:var(--e-3) var(--e-4);border-radius:var(--r-md);background:var(--superficie-2)}
.form-ar__vars{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.form-ar__var{display:inline-flex;gap:6px;align-items:center;font-size:var(--t-sm);color:var(--texto-2)}
.form-ar__var code{font:700 var(--t-xs)/1 ui-monospace,Menlo,monospace;padding:5px 8px;border-radius:var(--r-pill);background:var(--rojo-50);color:var(--rojo-600)}
.form-ar__nota{display:flex;gap:var(--e-2);align-items:flex-start;padding:var(--e-3) var(--e-4);border-radius:var(--r-md);border:1px dashed var(--borde);font-size:var(--t-sm);color:var(--texto-2)}
.form-ar__nota svg{flex:none;width:18px;height:18px;margin-top:2px}
.form-ar__bitacora{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-2)}
.form-ar__bitacora li{display:flex;gap:var(--e-2);align-items:flex-start;flex-wrap:wrap;padding-bottom:var(--e-2);border-bottom:1px solid var(--borde);font-size:var(--t-sm)}
.form-ar__cuando{flex:1;min-width:120px}
.respuesta{display:grid;gap:var(--e-2);padding:var(--e-4);border:1px solid var(--borde);border-radius:var(--r-md);background:var(--superficie)}
.respuesta--nueva{border-color:var(--acento);box-shadow:inset 4px 0 0 var(--acento)}
.respuesta dl{display:grid;grid-template-columns:minmax(90px,30%) 1fr;gap:4px 12px;margin:0}
.respuesta dt{font-size:var(--t-sm);color:var(--texto-2);font-weight:700}
.respuesta dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.respuesta__cab{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap}
.respuesta__cab .muted{margin-right:auto}
.conversion{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.conversion th,.conversion td{padding:8px 6px;border-bottom:1px solid var(--borde);text-align:right}
.conversion th:first-child,.conversion td:first-child{text-align:left}
@media (max-width:560px){.respuesta dl{grid-template-columns:1fr}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.perfil-publico__contacto{margin:var(--e-4) 0 0}
.form-lateral,.form-principal{min-width:0}
.formulario-volver{white-space:normal;text-align:center;max-width:100%;height:auto;min-height:44px;padding-block:10px}
/* v0.0.23 · D-64: vCard (página pública /v y editor del panel) */
.perfil-publico--vcard .vcard-publica__nombre{margin:var(--e-4) 0 var(--e-1);font-size:clamp(1.6rem,5vw,2.1rem);line-height:1.15;overflow-wrap:anywhere}
.vcard-publica__sub{margin:0;color:var(--texto-2);font-weight:600;overflow-wrap:anywhere}
.vcard-publica__trae{margin:var(--e-4) 0 0}
.vcard-publica__form{margin:var(--e-5) 0 var(--e-2)}
.vcard-fila{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.vcard-fila .casilla{margin:0}
.vcard-fila .casilla label{font-weight:500;font-size:var(--t-xs,0.8rem)}
.lbl-campo{font-weight:700;font-size:var(--t-sm)}
/* v0.0.24 · D-67: landings (3es.mx/<usuario>/l/<nombre>) y su editor. --acento viene del atributo style (validado, AA con blanco) */
.landing-publica{gap:var(--e-4)}
.landing-b{width:100%;margin:0}
.landing-b--encabezado{display:grid;justify-items:center;gap:var(--e-2)}
.landing-b__titulo{margin:0}
.landing-b__sub{margin:0;color:var(--texto-2);font-size:1.05rem;overflow-wrap:anywhere}
.landing-b__img{display:block;max-width:100%;height:auto;border-radius:var(--r-md,14px);margin:0 auto}
.landing-b__img--cabeza{max-height:360px;width:auto;object-fit:contain}
.landing-b--texto p{margin:0;text-align:left;overflow-wrap:anywhere;line-height:1.55}
.landing-b--imagen a{display:block;border-radius:var(--r-md,14px)}
.landing-b--botones{display:grid;gap:var(--e-2)}
.landing-btn{--bg:var(--acento);--fg:#fff;--bd:var(--acento);overflow-wrap:anywhere;white-space:normal}
.landing-btn--borde{--bg:transparent;--fg:var(--texto);--bd:var(--acento)}
.landing-b--formulario{text-align:left;display:grid;gap:var(--e-2)}
.landing-b__h2{margin:0;font-size:1.3rem;text-align:center}
.landing-b--separador{border:0;border-top:2px solid var(--acento);opacity:.35;width:60%}
.landing-publica__de{margin:var(--e-2) 0 0}
.landing-editor__boton{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--e-2)}
.landing-editor__mini{display:block;max-width:180px;max-height:120px;width:auto;height:auto;border-radius:10px;border:1px solid var(--borde)}
.landing-stats .kpi--sm,.kpi--sm{font-size:var(--t-2xl,1.8rem)}
.landing-stats__lista{list-style:none;margin:var(--e-3) 0 0;padding:0;display:grid;gap:6px}
.landing-stats__lista li{display:flex;justify-content:space-between;gap:var(--e-2);font-size:.92rem;overflow-wrap:anywhere}
.entrada.entrada--color input[type=color]{width:64px;height:40px;padding:2px;border:0;background:none}
/* v0.0.35 · D-80: landings bilingües (campo en inglés al lado del de español) */
.landing-editor__par{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-2);align-items:start}
.landing-editor__en label{color:var(--texto-2)}
.landing-editor__boton--en{padding-left:var(--e-2);border-left:3px solid var(--borde)}
.chip--en{font-size:11px;padding:1px 6px;margin-left:4px;vertical-align:middle}
@media (max-width:560px){.landing-editor__boton{grid-template-columns:1fr}.landing-editor__par{grid-template-columns:1fr}}
/* v0.0.26 · D-70: app web (pantalla rápida /app/nuevo, pensada para el pulgar) y aviso de instalación */
.app-rapida{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:var(--e-3);max-width:560px;margin:0 auto;padding:12px 16px calc(96px + env(safe-area-inset-bottom));box-sizing:border-box}
.app-rapida__barra{display:flex;align-items:center;justify-content:space-between;gap:var(--e-2);padding-top:env(safe-area-inset-top)}
.app-rapida__form,.app-rapida__resultado{display:flex;flex-direction:column;gap:var(--e-3);flex:1}
.app-rapida__titulo{font:700 var(--t-xl)/1.1 var(--f-titulo);margin:var(--e-3) 0 0}
.app-rapida__etiqueta{font-weight:700;font-size:var(--t-sm)}
.app-rapida__url{width:100%;box-sizing:border-box;min-height:120px;padding:14px;border:1.5px solid var(--borde-fuerte);border-radius:var(--r-md);background:var(--superficie);color:var(--texto);font:500 1.0625rem/1.35 var(--f-texto);resize:vertical;overflow-wrap:anywhere}
.app-rapida__url:focus{outline:none;border-color:var(--texto);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-azul) 22%,transparent)}
.app-rapida__pegar{align-self:flex-start;min-height:48px}
.app-rapida__alias summary{cursor:pointer;font-weight:700;font-size:var(--t-sm);min-height:44px;display:flex;align-items:center}
.app-rapida__alias summary::after{content:'▾';margin-left:8px;color:var(--texto-3)}.app-rapida__alias[open] summary::after{content:'▴'}
.app-rapida__pie{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--fondo);border-top:1px solid var(--borde);z-index:5}
.app-rapida__pie .btn{width:100%;max-width:528px;margin:0 auto;display:flex;justify-content:center}
.app-rapida__corto{font:700 var(--t-xl)/1.1 var(--f-titulo);margin:0;overflow-wrap:anywhere}
.app-rapida__corto b{color:var(--acento)}
.app-rapida__destino{margin:0;color:var(--texto-2);font-size:var(--t-sm);overflow-wrap:anywhere}
.app-rapida__qr{width:180px;height:180px;align-self:center;background:#fff;border-radius:var(--r-md);padding:8px}
.app-rapida__acciones{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-2)}
.app-rapida__acciones .btn{min-height:52px;justify-content:center}
.app-rapida [hidden],.instalar-app[hidden],.instalar-app [hidden]{display:none}
.app-rapida__acciones:has(>.btn[hidden]) .btn{grid-column:1/-1}
.app-rapida--sin-conexion{align-items:center;justify-content:center;text-align:center}
/* v0.0.28 · D-72: aviso de instalación con la marca (icono TRIX, franja roja, pasos de Safari). Portada: tarjeta fija abajo */
.instalar-app{position:relative;display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;padding:14px 14px 14px 18px;border:1px solid var(--rojo-200);border-radius:var(--r-lg);background:linear-gradient(135deg,var(--superficie) 0%,var(--superficie) 55%,var(--rojo-50) 100%);box-shadow:var(--s-1);font-size:var(--t-sm);overflow:hidden}
.instalar-app::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--c-rojo),var(--c-naranja) 55%,var(--c-amarillo))}
.instalar-app__icono{flex:none;width:56px;height:56px;border-radius:14px;box-shadow:0 2px 8px rgba(212,61,53,.25)}
.instalar-app__cuerpo{flex:1;min-width:0}
.instalar-app p{margin:0}
.instalar-app__eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acento)}
.instalar-app__titulo{font:700 1.05rem/1.25 var(--f-titulo);color:var(--texto);margin:2px 0 4px!important}
.instalar-app__texto{color:var(--texto-2)}
.instalar-app__pasos{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;color:var(--texto-2)}
.instalar-app__pasos li{display:flex;align-items:center;gap:8px}
.instalar-app__num{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--acento);color:#fff;font-weight:700;font-size:12px}
.instalar-app__glifo{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:4px;vertical-align:middle;border-radius:7px;background:var(--superficie-2);color:#0A84FF}
.instalar-app__glifo svg{width:17px;height:17px}
.instalar-app__acciones{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.instalar-app--flotante{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;margin:0;max-width:520px;margin-inline:auto;box-shadow:0 12px 32px rgba(24,23,24,.22);animation:instalar-sube .35s ease-out both}
@keyframes instalar-sube{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.instalar-app--flotante{animation:none}}
[data-tema="oscuro"] .instalar-app{border-color:var(--borde-fuerte);background:linear-gradient(135deg,var(--superficie) 0%,var(--superficie) 55%,var(--error-fondo) 100%)}
[data-tema="oscuro"] .instalar-app__glifo{color:#5AB0FF}
/* v0.0.29 · D-73: página del QR (3es.mx/<usuario>/q). El QR siempre oscuro sobre blanco (se lee igual en modo oscuro) */
.qr-pagina__nombre{margin:0;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.15;overflow-wrap:anywhere}
.qr-pagina__lema{margin:0;color:var(--texto-2)}
.qr-pagina{margin:var(--e-2) 0 0;width:100%;max-width:340px;display:grid;justify-items:center;gap:0}
.qr-pagina__marco{width:100%;box-sizing:border-box;padding:14px;background:#fff;border:3px solid var(--trix);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--s-1)}
.qr-pagina__svg{display:block;width:100%;height:auto;aspect-ratio:1}
.qr-pagina__pie{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;background:var(--c-negro);color:#fff;border-radius:0 0 var(--r-lg) var(--r-lg);font-weight:800;min-width:0}
.qr-pagina__pie .trix{width:26px;height:36px;flex:none}
.qr-pagina__url{overflow-wrap:anywhere;min-width:0}
.qr-pagina__acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-2);width:100%}
.qr-pagina__acciones .btn{flex:1 1 150px}
/* v0.0.29 · D-75: sección «Top 10» en Mi página. Cada número a 3es.mx/<usuario>/N, en pestaña nueva */
.top10-perfil{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:8px;text-align:left}
.top10-perfil a{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border:1px solid var(--borde);border-radius:var(--r-md);color:var(--texto);text-decoration:none;min-width:0;font-weight:600}
.top10-perfil a:hover{border-color:var(--acento)}
.top10-perfil a:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.top10-perfil__n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--acento);color:var(--acento-texto);font-weight:800;font-variant-numeric:tabular-nums}
.top10-perfil__txt{min-width:0;overflow-wrap:anywhere}
/* v0.0.30 · D-84: menú limpio. Selector de cuenta arriba, primer nivel, grupos plegables («Empresa», «Administración»,
   «Mi cuenta» abajo junto a la foto) y, en el celular, barra inferior con «+» y el menú completo como panel (#menu) */
.lateral{gap:var(--e-4)}
.lateral__cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lateral__cerrar{display:none}
.selector-empresa__pie{margin:2px 0 0;font-size:var(--t-xs);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.selector-empresa__pie a{color:var(--texto-2);font-weight:600}
.selector-empresa__pie a:hover,.selector-empresa__pie a[aria-current]{color:var(--acento)}
.lateral nav a:focus-visible,.lateral .salir:focus-visible,.grupo-menu__boton:focus-visible,.barra-inferior a:focus-visible,.selector-empresa__pie a:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.grupo-menu{display:grid;gap:2px}
.grupo-menu__boton{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border-radius:var(--r-sm);cursor:pointer;font:700 11px/1.2 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3)}
.grupo-menu__boton:hover{background:var(--superficie-2);color:var(--texto)}
.grupo-menu__flecha{margin-left:auto;display:inline-flex;transition:transform .15s ease}
.grupo-menu__flecha .ico{width:16px;height:16px}
.grupo-menu__boton[aria-expanded="false"] .grupo-menu__flecha{transform:rotate(-90deg)}
.grupo-menu__lista{display:grid;gap:2px}
.grupo-menu__lista[hidden]{display:none}
.grupo-menu--cuenta{margin-top:auto}
.lateral .grupo-menu__boton.yo{margin-top:0;padding:10px;border-radius:var(--r-md);background:var(--superficie-2);letter-spacing:0;text-transform:none;color:var(--texto);font:500 var(--t-sm)/1.25 var(--f-texto)}
.lateral .grupo-menu__boton.yo:hover{box-shadow:inset 0 0 0 1.5px var(--borde-fuerte)}
.yo__txt{display:grid;gap:2px;min-width:0}
.yo__txt b,.yo__txt .url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yo__txt .eyebrow{font-size:10px}
.grupo-menu--cuenta .grupo-menu__lista{padding-top:4px}
.barra-inferior{display:none}
@media (prefers-reduced-motion:reduce){.grupo-menu__flecha{transition:none}}
@media (max-width:980px){
  .app{display:block}
  .lateral{display:none}
  .lateral:target,.lateral.lateral--abierta{display:flex;position:fixed;inset:0;z-index:45;height:auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:var(--e-4);overflow-y:auto;overscroll-behavior:contain;background:var(--superficie);border:0;padding:var(--e-5) var(--e-5) calc(96px + env(safe-area-inset-bottom))}
  .lateral:target nav,.lateral.lateral--abierta nav{display:grid}
  .lateral__cerrar{display:inline-grid;place-items:center}
  .lateral nav a,.lateral .salir{min-height:44px;font-size:var(--t-base)}
  .principal{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .barra-inferior{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--superficie) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-top:1px solid var(--borde)}
  .barra-inferior a{display:grid;justify-items:center;gap:3px;min-height:48px;padding:6px 2px;border-radius:var(--r-sm);color:var(--texto-2);text-decoration:none;font:600 11px/1.1 var(--f-texto);min-width:0}
  .barra-inferior a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .barra-inferior a[aria-current],.barra-inferior a[aria-expanded="true"]{color:var(--acento)}
  .barra-inferior .ico{width:22px;height:22px}
  .barra-inferior__crear{place-self:center;width:56px;height:56px;min-height:56px!important;padding:0!important;margin-top:-22px;border-radius:50%!important;place-items:center;background:var(--acento);color:var(--acento-texto,#fff)!important;box-shadow:0 6px 18px rgba(212,61,53,.35)}
  .barra-inferior__crear .ico{width:28px;height:28px;stroke-width:2.4}
  .app ~ .cookies{bottom:calc(84px + env(safe-area-inset-bottom))}
  .app ~ .cookies-pref{bottom:calc(80px + env(safe-area-inset-bottom))}
  .app .toast--fijo{bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media (max-width:980px){html.menu-abierto{overflow:hidden}}
.lista-cab{flex-wrap:wrap;gap:8px}.lista-cab__top10{margin-left:auto}.lista-cab h2+.lista-cab__top10+.tabs{margin-left:0}
/* v0.0.31 · D-78: modo oscuro. El servidor pinta <html data-tema="auto|claro|oscuro">; «auto» sigue al sistema aquí, sin JS.
   Cada regla [data-tema="oscuro"] tiene su gemela [data-tema="auto"] dentro de prefers-color-scheme:dark (prueba U109). */
@media (prefers-color-scheme:dark){
  [data-tema="auto"]{
    --fondo:#111011; --superficie:var(--n-900); --superficie-2:var(--n-800);
    --texto:var(--n-50); --texto-2:#C9C3CC; --texto-3:#A29CA4;
    --borde:#332F35; --borde-fuerte:#4A454E;
    --acento:var(--rojo-500); --acento-hover:var(--rojo-400); --enlace:#F08A83;
    --exito-texto:#8FD98A; --alerta-texto:#FFBE7A; --error-texto:#F08A83; --info-texto:#9DB3E0;
    --exito-fondo:#1B2A1A; --alerta-fondo:#2E2213; --error-fondo:#2E1614; --info-fondo:#161D2C;
    --foco:0 0 0 3px var(--n-900),0 0 0 6px var(--c-amarillo);
    color-scheme:dark;
  }
  [data-tema="auto"] .instalar-app{border-color:var(--borde-fuerte);background:linear-gradient(135deg,var(--superficie) 0%,var(--superficie) 55%,var(--error-fondo) 100%)}
  [data-tema="auto"] .instalar-app__glifo{color:#5AB0FF}
  [data-tema="auto"] .resultado{background:var(--superficie-2);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borde-fuerte)}
  [data-tema="auto"] .enlace__fav[aria-pressed="true"],[data-tema="auto"] .destacado .ic,[data-tema="auto"] .sugerencia{background:var(--error-fondo)}
  [data-tema="auto"] .barra-inferior a[aria-current],[data-tema="auto"] .barra-inferior a[aria-expanded="true"]{color:var(--enlace)}
  [data-tema="auto"] .sugerencia b{color:var(--enlace)}
  [data-tema="auto"] .insignia--bloqueada{--c:#3A363C}
}
/* Piezas con color fijo pensado para el tema claro (contraste AA en oscuro) */
[data-tema="oscuro"] .resultado{background:var(--superficie-2);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borde-fuerte)}
[data-tema="oscuro"] .enlace__fav[aria-pressed="true"],[data-tema="oscuro"] .destacado .ic,[data-tema="oscuro"] .sugerencia{background:var(--error-fondo)}
[data-tema="oscuro"] .barra-inferior a[aria-current],[data-tema="oscuro"] .barra-inferior a[aria-expanded="true"]{color:var(--enlace)}
[data-tema="oscuro"] .sugerencia b{color:var(--enlace)}
[data-tema="oscuro"] .insignia--bloqueada{--c:#3A363C}
[data-tema="claro"]{color-scheme:light}
/* Preferencias · Apariencia */
.pref-tema{border:1px solid var(--borde);border-radius:var(--r-md);margin:0;padding:10px 12px 12px;display:grid;gap:8px}
.pref-tema legend{padding:0 6px;font-weight:700;font-size:var(--t-sm)}
.pref-tema__op{display:flex;align-items:center;gap:10px;font-size:var(--t-sm);cursor:pointer}
.pref-tema__op input{width:20px;height:20px;margin:0;accent-color:var(--acento)}
.pref-tema__muestra{flex:none;width:28px;height:20px;border-radius:6px;border:1px solid var(--borde-fuerte);background:#F7F4F0}
.pref-tema__op--oscuro .pref-tema__muestra{background:#181718}
.pref-tema__op--auto .pref-tema__muestra{background:linear-gradient(135deg,#F7F4F0 0 50%,#181718 50% 100%)}
.pref-tema__ayuda{margin:0}
/* v0.0.40 · D-89: QR personalizado (el QR siempre sobre blanco, también en modo oscuro) */
.pref-qr__color{display:flex;align-items:center;gap:10px;font-size:var(--t-sm);cursor:pointer}
.pref-qr__color input{flex:none;width:44px;height:32px;padding:2px;border:1px solid var(--borde-fuerte);border-radius:6px;background:#fff;cursor:pointer}
.pref-qr__aviso{margin:0}
.qr-estilo{border:0;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}
.qr-estilo__op{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);cursor:pointer;min-height:44px}
.qr-estilo__op input{width:20px;height:20px;margin:0;accent-color:var(--acento)}
.qr-otro{overflow-wrap:anywhere;text-align:center}
/* v0.0.34 · dominios propios: pasos y registros DNS (se apilan en el celular) */
.pasos-dominio{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:14px}
.pasos-dominio>li{position:relative;padding-left:34px;min-width:0}
.pasos-dominio>li::before{content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;border:2px solid var(--borde-fuerte);display:grid;place-items:center;font-size:12px;font-weight:700}
.pasos-dominio>li.hecho::before{content:"✓";background:var(--exito-texto);border-color:var(--exito-texto);color:#fff}
.registro-dns{margin:8px 0;display:grid;gap:6px;min-width:0}
.registro-dns>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:baseline;padding:8px 10px;border:1px solid var(--borde);border-radius:10px;background:var(--superficie-2,transparent)}
.registro-dns dt{font-size:var(--t-xs,12px);font-weight:600;color:var(--texto-3);margin:0}
.registro-dns dd{margin:0;overflow-wrap:anywhere;word-break:break-all;user-select:all}

/* v0.0.36 · D-74 / F8: marca de la empresa en sus landings. --acento y --acento-2 vienen del atributo style (validados, AA sobre
   blanco); la fuente es una clase de una lista cerrada de pilas del sistema (no se descarga nada). Las públicas siguen claras. */
.landing-publica--marca{--acento-hover:color-mix(in srgb,var(--acento) 85%,#000);--enlace:var(--acento)}
.landing-publica--marca .landing-b--separador{border-top-color:var(--acento-2,var(--acento));opacity:.6}
.landing-publica--marca .landing-btn--borde{--bd:var(--acento-2,var(--acento))}
.landing-publica--marca .landing-b__h2,.landing-publica--marca .perfil-publico__titulo{color:var(--acento-2,var(--acento))}
.landing-publica--marca .entrada:focus-within{border-color:var(--acento)}
.marca-fuente--sistema{--f-titulo:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--f-texto:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-family:var(--f-texto)}
.marca-fuente--serif{--f-titulo:Georgia,Cambria,"Times New Roman",Times,serif;--f-texto:Georgia,Cambria,"Times New Roman",Times,serif;font-family:var(--f-texto)}
.marca-fuente--redondeada{--f-titulo:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Arial Rounded MT Bold",system-ui,sans-serif;--f-texto:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,sans-serif;font-family:var(--f-texto)}
.landing-marca{margin:0;display:flex;justify-content:center}
.landing-marca__logo{display:block;max-width:min(260px,70%);max-height:96px;width:auto;height:auto;object-fit:contain}
.landing-marca__logo--avatar{width:72px;height:72px;border-radius:50%;object-fit:cover}
.marca-colores{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3);align-items:start}
.marca-colores input[type=color]{height:48px;padding:4px;cursor:pointer}
.marca-muestra{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.marca-muestra span{display:inline-grid;place-items:center;width:28px;height:22px;border-radius:6px;background:var(--m);color:#fff;font-weight:700;font-size:.8rem}
.landing-editor__estilo{border:0;padding:0;margin:0}
.landing-editor__estilo legend{font-weight:700;padding:0;margin-bottom:6px}
@media (max-width:560px){.marca-colores{grid-template-columns:1fr}}
/* v0.0.38 · D-83: verificación de correo (pasos, logro y chip de estado) */
.tarjeta-verificar .fiesta{margin-bottom:var(--e-4)}
.tarjeta-verificar .fiesta h1{color:var(--c-amarillo);margin:0 0 4px}
.tarjeta-verificar .fiesta .eyebrow{color:#E4DCF2;margin:0 0 4px}
.verificar-pasos{list-style:none;margin:var(--e-4) 0;padding:0;border:1px solid var(--borde);border-radius:var(--r-md);background:var(--superficie-2)}
.verificar-pasos li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--borde);font-weight:600;color:var(--texto)}
.verificar-pasos li:last-child{border-bottom:0}
.verificar-pasos small{margin-left:auto;font:800 var(--t-xs)/1 var(--f-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.verificar-n{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:var(--r-pill);background:var(--superficie);border:1px solid var(--borde-fuerte);font-weight:800;color:var(--texto-2)}
.verificar-pasos .hecho .verificar-n{background:#E8F6EE;border-color:#2E9E5B;color:#1E7A43}
.verificar-pasos .hecho small{color:#1E7A43}
.verificar-pasos .ahora{font-weight:800}
.verificar-pasos .ahora .verificar-n{background:#FDECEB;border-color:var(--c-rojo);color:#B5302A}
.verificar-pasos .ahora small{color:#B5302A}
.verificar-logro{display:flex;align-items:stretch;margin:0 0 var(--e-4);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--c-amarillo)}
.verificar-logro b{display:grid;place-items:center;min-width:64px;padding:10px;background:var(--c-amarillo);color:var(--c-negro);font-size:1.25rem}
.verificar-logro span{padding:10px 14px;background:#FFF7D6;color:#181718}
.verificar-chip{margin:0 0 var(--e-2)}
.verificar-chip--pend{background:#FDECEB;color:#B5302A}
.aviso-verificar a{margin-left:6px;font-weight:700}
/* v0.0.39 · D-88: «Entrar» con la marca de la empresa en su dominio propio */
.acceso-marca{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:32px 16px;background:var(--fondo,#FAFAF7)}
.acceso-marca__tarjeta{width:min(440px,100%);display:grid;gap:14px}
.acceso-marca__tarjeta h1{margin:0;font-family:var(--f-titulo)}
.acceso-marca__tarjeta form{display:grid;gap:14px}
.acceso-marca__tarjeta .landing-marca{margin-bottom:4px}
.acceso-marca .eyebrow{color:var(--acento-2,var(--acento))}
.acceso-marca .pie{width:min(440px,100%);background:none;border:0}
.acceso-marca .oauth{display:grid;gap:10px}
/* v0.0.41 · Pendiente n.º 78: diagnóstico del servidor en /admin */
.diagnostico{margin-top:16px} .diagnostico__sub{margin:16px 0 8px}
.tabla--diagnostico th[scope=row]{text-align:left;font-weight:700;width:38%} .tabla--diagnostico .chip{margin-right:6px}