/* ============================================================================
   sistema.css — LA CARCASA COMÚN (27-oct-2026)
   ============================================================================
   Una sola maquetación para toda la web salvo el flujo de evento. Solo actúa
   bajo html[data-sistema], que pone head.ejs (src/lib/sistema.js). Carga la
   última, así que gana a la hoja de cada página sin !important.

   LAS REGLAS QUE ESTA HOJA SOSTIENE
     · Una carcasa por público: barra fija simple arriba y una columna.
     · Cada sección es una pantalla rectangular completa o una tarjeta dentro
       del flujo. Nada flota encima del contenido.
     · Los menús se abren como una pantalla completa bajo la barra, no como un
       desplegable encima de la página.
     · Modal solo para confirmar algo destructivo.
     · Nunca scroll dentro de scroll. Nunca un panel dentro de otro panel.
     · Un botón principal por pantalla: el del degradado de marca.

   LA MARCA
     Degradado rosa → azul, el de la app (GradientHeading.tsx:
     #FF3D8A → #3B7BFF). Outfit en titulares y texto (27-oct-2026).
     Tema oscuro por defecto (la estética de /pricing) y claro a elección, desde
     el pie; se guarda en localStorage («sn-tema»).

   LAS PIEZAS (para pantallas nuevas o rehechas)
     .sn-col         la columna: 1120 px como máximo, 16 px de margen en móvil
     .sn-col--texto  columna de lectura, 720 px
     .sn-pantalla    sección a lo ancho, con su aire arriba y abajo
     .sn-tarjeta     tarjeta plana dentro del flujo (nunca dentro de otra)
     .sn-fila        fila de una lista dentro de una tarjeta (sin caja propia)
     .sn-pestanas    navegación de sección: se parte en líneas, nunca se desliza
     .sn-btn, .sn-btn--primario, .sn-btn--sec, .sn-btn--peligro, .sn-enlace
     .sn-etiqueta    la etiqueta pequeña en mono y versalitas de /pricing
     .sn-titulo      titular de pantalla
   ========================================================================== */

@font-face { font-family: "Outfit"; src: url("/fonts/outfit-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- TOKENS -------------------------------------------------------------- */
html[data-sistema] {
  --sn-rosa: #FF3D8A;
  --sn-azul: #3B7BFF;
  --sn-grad: linear-gradient(100deg, var(--sn-rosa) 0%, var(--sn-azul) 100%);
  --sn-grad-suave: linear-gradient(100deg, rgb(255 61 138 / 0.14), rgb(59 123 255 / 0.14));

  --sn-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sn-font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;

  /* Espaciado: una escala, la misma en todas las pantallas. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --sn-gutter: 16px;
  --sn-ancho: 1120px;
  --sn-ancho-texto: 720px;
  --sn-radio: 16px;
  --sn-radio-sm: 10px;

  color-scheme: dark;
}
@media (min-width: 768px) { html[data-sistema] { --sn-gutter: 24px; } }

html[data-sistema][data-theme="light"] {
  color-scheme: light;
  --sn-bg: #F6F7FB;           --sn-bg-rgb: 246 247 251;
  --sn-surface: #FFFFFF;      --sn-surface-rgb: 255 255 255;
  --sn-line: #E2E6EE;
  --sn-text: #0E1420;         --sn-text-rgb: 14 20 32;
  --sn-muted: #586274;        --sn-muted-rgb: 88 98 116;
  --sn-text-muted: var(--sn-muted);
  --sn-accent: #1F6FEB;       --sn-accent-rgb: 31 111 235;
  --sn-accent-hi: #1F6FEB;
  --sn-accent-soft: rgb(31 111 235 / 0.08);
  --sn-accent-dim: rgb(31 111 235 / 0.30);
  --sn-panel: #FFFFFF;
  --sn-line-soft: rgb(14 20 32 / 0.07);
  --sn-shadow: 0 1px 2px rgba(14, 20, 32, 0.06);
  --sn-atmo: none;
  --sn-glow-sm: none; --sn-glow: none; --sn-glow-lg: none;
  --sn-edge-light: none;
  --sn-text-lit: linear-gradient(var(--sn-text), var(--sn-text));
  --sn-accent-lit: linear-gradient(var(--sn-accent), var(--sn-accent));
  --sn-ok: #16794A; --sn-warn: #8A6100; --sn-danger-text: #C2262E;
  --surface-2: #EEF1F6;
}

/* ---- BASE ---------------------------------------------------------------- */
html[data-sistema] body {
  font-family: var(--sn-font);
  background: var(--sn-bg);
  color: var(--sn-text);
  overflow-x: clip;               /* red de seguridad: nada empuja la página a lo ancho */
  -webkit-font-smoothing: antialiased;
}
html[data-sistema] :is(h1, h2, h3, .pr-h1, .pr-h2, .pr-h3, .sn-titulo) {
  font-family: var(--sn-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-sistema]:lang(zh) :is(h1, h2, h3, .pr-h1, .pr-h2, .pr-h3, .sn-titulo) {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", var(--sn-font);
  letter-spacing: 0; word-spacing: 0;
}
html[data-sistema] .pr-h1-b,
html[data-sistema] .sn-degradado {
  background: var(--sn-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* [hidden] gana siempre: .sn-btn y compañía declaran display y lo pisaban. */
html[data-sistema] [hidden] { display: none !important; }

/* ---- CARCASA: la barra --------------------------------------------------- */
html[data-sistema] #site-header { background: var(--sn-bg); }
html[data-sistema] #site-header .header-inner { max-width: var(--sn-ancho); padding-left: var(--sn-gutter); padding-right: var(--sn-gutter); }

/* «SpiderNet for Events»: el subtítulo de la marca en el lado del organizador. */
html[data-sistema] #site-header .header-sub {
  margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--sn-line);
  font: 500 14px/1 var(--sn-font); color: var(--sn-muted); white-space: nowrap;
}

/* El menú (móvil) y el del avatar (todos los anchos) se abren como una
   pantalla completa bajo la barra: un rectángulo, no una caja flotante. */
@media (max-width: 700px) {
  html[data-sistema] #site-header .header-nav {
    position: fixed; top: var(--header-h, 64px); left: 0; right: 0;
    height: calc(100dvh - var(--header-h, 64px)); box-sizing: border-box;
    background: var(--sn-bg);
    padding: var(--s-3) var(--sn-gutter) var(--s-7);
    border-bottom: 0; overflow-y: auto;
  }
  html[data-sistema] #site-header .header-nav a { font-size: 20px; padding: 18px 0; }
}
html[data-sistema] #site-header .user-dropdown {
  /* Altura explícita y no bottom: 0, porque la barra hace de bloque
     contenedor (su backdrop-filter) y bottom: 0 la dejaría a cero. */
  position: fixed; top: var(--header-h, 64px); left: 0; right: 0;
  height: calc(100dvh - var(--header-h, 64px)); box-sizing: border-box;
  min-width: 0; border: 0; border-radius: 0;
  background: var(--sn-bg);
  padding: var(--s-5) max(var(--sn-gutter), calc((100vw - var(--sn-ancho)) / 2 + var(--sn-gutter))) var(--s-7);
  overflow-y: auto;
}
html[data-sistema] #site-header .user-dropdown.open { display: flex; flex-direction: column; }
html[data-sistema] #site-header .user-dropdown a,
html[data-sistema] #site-header .user-dropdown button {
  font-size: 20px; padding: 18px 0; border-radius: 0; max-width: var(--sn-ancho-texto);
  border-bottom: 1px solid var(--sn-line);
}
html[data-sistema] #site-header .user-dropdown a:hover,
html[data-sistema] #site-header .user-dropdown button:hover { background: none; color: var(--sn-accent); }
html[data-sistema] #site-header .user-dropdown form { margin: 0; }
html[data-sistema] #site-header .user-dropdown-lang { border-top: 0; padding: 18px 0; }
html[data-sistema] #site-header .user-dropdown-lang a,
html[data-sistema] #site-header .user-dropdown-lang .is-current { font-size: 15px; border: 0; padding: 0; }
html[data-sistema]:has(#site-header.menu-open),
html[data-sistema]:has(#user-dropdown.open) { overflow: hidden; }

/* ---- PIEZAS -------------------------------------------------------------- */
html[data-sistema] .sn-col { width: 100%; max-width: var(--sn-ancho); margin: 0 auto; padding: 0 var(--sn-gutter); box-sizing: border-box; }
html[data-sistema] .sn-col--texto { max-width: calc(var(--sn-ancho-texto) + 2 * var(--sn-gutter)); }
html[data-sistema] .sn-pantalla { padding: var(--s-7) 0; }
html[data-sistema] .sn-pantalla + .sn-pantalla { border-top: 1px solid var(--sn-line); }
html[data-sistema] .sn-titulo { font-size: clamp(30px, 5vw, 48px); line-height: 1.08; margin: 0 0 var(--s-3); }
html[data-sistema] .sn-sub { color: var(--sn-muted); font-size: 17px; line-height: 1.55; max-width: 58ch; margin: 0 0 var(--s-5); }
html[data-sistema] .sn-etiqueta {
  font-family: var(--sn-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sn-accent); margin: 0 0 var(--s-3);
}

html[data-sistema] .sn-tarjeta {
  background: var(--sn-surface); border: 1px solid var(--sn-line); border-radius: var(--sn-radio);
  padding: var(--s-5); box-shadow: none;
}
/* Una tarjeta dentro de otra pierde su caja: nunca un panel dentro de un panel. */
html[data-sistema] .sn-tarjeta .sn-tarjeta { background: none; border: 0; border-radius: 0; padding: 0; }
html[data-sistema] .sn-fila { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--sn-line); }
html[data-sistema] .sn-fila:first-child { border-top: 0; }
html[data-sistema] .sn-rejilla { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Pestañas de sección: se parten en líneas; nada se esconde por la derecha. */
html[data-sistema] .sn-pestanas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
html[data-sistema] .sn-pestanas a, html[data-sistema] .sn-pestanas button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--sn-line); background: transparent;
  color: var(--sn-muted); font: 500 14px/1 var(--sn-font); text-decoration: none; cursor: pointer;
}
html[data-sistema] .sn-pestanas :is(a, button):is([aria-current="page"], [aria-selected="true"], .active, .is-active) {
  /* Acento plano, no degradado: el degradado es solo del botón principal. */
  color: var(--sn-text); border-color: transparent; background: var(--sn-accent-soft);
  box-shadow: inset 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.45);
}

/* Botones. El primario es el degradado de marca: uno por pantalla. */
html[data-sistema] .sn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  font: 600 16px/1 var(--sn-font); text-decoration: none; cursor: pointer;
  color: var(--sn-text); background: transparent; box-shadow: inset 0 0 0 1px var(--sn-line);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms;
}
html[data-sistema] .sn-btn:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 3px; }
html[data-sistema] .sn-btn--sec:hover { box-shadow: inset 0 0 0 1px var(--sn-accent); }
html[data-sistema] .sn-btn--peligro { color: var(--sn-danger-text); box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.4); }
html[data-sistema] .sn-btn--bloque { width: 100%; }
html[data-sistema] :is(.sn-btn--primario, .pr-btn:not(.pr-btn--ghost), .btn-primary, .bd-btn-primary, .mp-btn-primary, .pm-btn--primary) {
  color: #fff; background: var(--sn-grad); border: 0;
  box-shadow: 0 10px 30px -10px rgb(59 123 255 / 0.55), 0 6px 22px -12px rgb(255 61 138 / 0.6);
}
@media (hover: hover) {
  html[data-sistema] :is(.sn-btn--primario, .pr-btn:not(.pr-btn--ghost), .btn-primary, .bd-btn-primary, .mp-btn-primary, .pm-btn--primary):hover {
    transform: translateY(-1px); filter: brightness(1.06);
    box-shadow: 0 14px 36px -10px rgb(59 123 255 / 0.65), 0 8px 26px -12px rgb(255 61 138 / 0.7);
  }
}
html[data-sistema] .sn-enlace { color: var(--sn-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Campos */
html[data-sistema] .sn-campo { display: grid; gap: 6px; margin: 0 0 var(--s-4); }
html[data-sistema] .sn-campo > label { font-weight: 500; font-size: 14px; }
html[data-sistema] :is(.sn-campo input, .sn-campo select, .sn-campo textarea) {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px;
  border-radius: var(--sn-radio-sm); border: 1px solid var(--sn-line);
  background: var(--sn-bg); color: var(--sn-text); font: 400 16px/1.4 var(--sn-font);
}
html[data-sistema] :is(.sn-campo input, .sn-campo select, .sn-campo textarea):focus { outline: 2px solid rgb(var(--sn-accent-rgb) / 0.6); outline-offset: 1px; border-color: transparent; }

/* El único modal permitido: confirmar algo destructivo. */
html[data-sistema] dialog.sn-confirmar {
  border: 1px solid var(--sn-line); border-radius: var(--sn-radio); padding: var(--s-5);
  background: var(--sn-surface); color: var(--sn-text); max-width: min(440px, calc(100vw - 32px));
}
html[data-sistema] dialog.sn-confirmar::backdrop { background: rgb(0 0 0 / 0.55); }

/* ---- PIE: interruptor de tema ------------------------------------------- */
html[data-sistema] .sn-tema {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--sn-line); background: transparent;
  color: var(--sn-muted); font: 500 13px/1 var(--sn-font); cursor: pointer; white-space: nowrap;
}

/* /thesis: el índice de puntos flotaba sobre el borde del contenido. Fuera. */
html[data-sistema] .sn-progress { display: none; }
html[data-sistema] .sn-tema:hover { color: var(--sn-text); }

@media (prefers-reduced-motion: reduce) {
  html[data-sistema] .sn-btn, html[data-sistema] :is(.pr-btn, .btn-primary) { transition: none; }
}