/* NanIA: el sistema de diseño común a la portada, Video y Resúmenes.
   Se sirve público en /nania.css (como /fonts/) y cada página lo carga antes de sus propios estilos.
   Regla: las páginas usan estas variables y no inventan colores, tamaños de letra, radios ni espacios sueltos.

   Letra   --t-chico 13 · --t-sec 15 · --t-base 17 · --t-sub 21 · --t-titulo 28 · --t-display (portada)
   Espacio --e-N = N × 4 px (1, 2, 3, 4, 5, 6, 8, 10, 12, 16)
   Radio   --r-chico 8 (etiquetas, cosas dentro de una tarjeta) · --r 12 (botones, campos) · --r-grande 20 (tarjetas) · --r-pill
   Sombra  --sombra-1 (tarjetas) · --sombra-2 (lo que flota o se destaca)
   Página  --ancho-pagina 1080 (el contenido y la barra con el logo) · --marca (tamaño del logo)
   Color   paleta lila en base a Radix Colors (violet + mauve); contraste de texto ≥ 4.5 en claro y oscuro.
   Componentes (al final): transiciones, foco de campos, desplegable, deslizador (--p), zona para soltar archivos (.soltar)
   e intro al abrir (.intro). */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/bricolage-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/bricolage-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  /* tipografía: Bricolage para títulos, la del sistema para leer, redondeada solo para la marca */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Bricolage Grotesque", var(--font);
  --font-marca: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --t-chico: 0.8125rem;
  --t-sec: 0.9375rem;
  --t-base: 1.0625rem;
  --t-sub: 1.3125rem;
  --t-titulo: 1.75rem;
  --t-display: clamp(2.25rem, 6vw, 3.5rem);
  --lh: 1.5;
  --lh-titulo: 1.15;

  --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;

  --r-chico: 8px; --r: 12px; --r-grande: 20px; --r-pill: 999px;

  --ancho-pagina: 1080px; /* ancho del contenido en las tres apps: el logo queda siempre en el mismo lugar */
  --marca: var(--t-titulo); /* tamaño del logo NanIA en la barra de arriba */

  --dur: 160ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* claro */
  --bg: #F4F2F7;
  --surface: #FFFFFF;
  --surface-2: #F9F8FB;   /* campos y cajitas hundidas dentro de una tarjeta */
  --fg: #211D29;
  --muted: #635E6E;
  --line: #E4E0EB;
  --line-fuerte: #CFCAD8; /* bordes de campos y zonas punteadas */
  --accent: #6547C2;      /* sirve para texto y para relleno */
  --accent-ink: #FFFFFF;  /* texto sobre --accent */
  --accent-soft: #EEE9FB;
  --ok: #1B7A4B; --ok-soft: #E0F2E7;
  --bad: #BB3046; --bad-soft: #FBE6E9;
  --warn: #93600F;
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635E6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --sombra-1: 0 1px 2px rgb(33 29 41 / 0.05), 0 1px 3px rgb(33 29 41 / 0.04);
  --sombra-2: 0 2px 4px rgb(33 29 41 / 0.04), 0 8px 24px -4px rgb(33 29 41 / 0.10);
  --vaca-cara: #FFFFFF; --vaca-borde: #211D29; --vaca-mancha: #211D29; --hocico: #E07A98; --narina: #5A1F33;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131118; --surface: #1D1A24; --surface-2: #17151D; --fg: #EEEBF3; --muted: #A8A2B4; --line: #2F2B38;
    --accent: #B7A3F5; --accent-ink: #1B1430; --accent-soft: #2B2342;
    --ok: #5FD394; --ok-soft: #173326; --bad: #FF8C9B; --bad-soft: #3B1D26; --warn: #E8B04F;
    --line-fuerte: #403A4C; --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A2B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --sombra-1: 0 1px 2px rgb(0 0 0 / 0.30);
    --sombra-2: 0 2px 4px rgb(0 0 0 / 0.25), 0 8px 24px -4px rgb(0 0 0 / 0.45);
    --vaca-cara: #EEEBF3; --vaca-borde: transparent; --vaca-mancha: #131118; --hocico: #F2A3B9; --narina: #3A1322;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131118; --surface: #1D1A24; --surface-2: #17151D; --fg: #EEEBF3; --muted: #A8A2B4; --line: #2F2B38;
  --accent: #B7A3F5; --accent-ink: #1B1430; --accent-soft: #2B2342;
  --ok: #5FD394; --ok-soft: #173326; --bad: #FF8C9B; --bad-soft: #3B1D26; --warn: #E8B04F;
    --line-fuerte: #403A4C; --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A2B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.30);
  --sombra-2: 0 2px 4px rgb(0 0 0 / 0.25), 0 8px 24px -4px rgb(0 0 0 / 0.45);
  --vaca-cara: #EEEBF3; --vaca-borde: transparent; --vaca-mancha: #131118; --hocico: #F2A3B9; --narina: #3A1322;
  color-scheme: dark;
}

/* base común */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: var(--t-base)/var(--lh) var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-titulo); line-height: var(--lh-titulo); letter-spacing: -0.015em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }

/* --- componentes de formulario comunes --- */

/* campos de texto: mismo borde y mismo anillo lila al enfocarlos */
:where(input:not([type="range"], [type="file"], [type="radio"], [type="checkbox"]), select, textarea):focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* desplegable con flecha propia (la página pone el fondo con background-color, no con background) */
select {
  -webkit-appearance: none; appearance: none;
  background-image: var(--flecha); background-repeat: no-repeat;
  background-position: right var(--e-3) center; background-size: 16px;
  padding-right: var(--e-10) !important;
}

/* deslizador: la parte recorrida en lila. --p (0–100%) lo pone el JS de la página */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0;
  background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--line-fuerte) var(--p, 0%));
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--line-fuerte); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--sombra-1);
  transition: transform var(--dur) var(--curva);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--sombra-1);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }

/* zona para soltar un archivo: el input invisible la cubre entera, así tocar y arrastrar funcionan solos.
   <label class="soltar"><input type="file">
     <span class="soltar-texto"><span class="soltar-icono">svg</span><b>Arrastrá…</b><small>Hasta 30 MB</small></span></label>
   .encima mientras se arrastra algo encima; [data-lleno] cuando ya hay un archivo elegido. */
.soltar {
  position: relative; display: grid; place-items: center; min-height: 112px; padding: var(--e-4);
  text-align: center; color: var(--muted); font-size: var(--t-sec); font-weight: 400;
  background: var(--surface-2); border: 1.5px dashed var(--line-fuerte); border-radius: var(--r);
  cursor: pointer; overflow: hidden;
  transition: border-color var(--dur) var(--curva), background-color var(--dur) var(--curva);
}
.soltar:hover, .soltar.encima { border-color: var(--accent); background: var(--accent-soft); }
.soltar:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.soltar input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.soltar-texto { display: grid; justify-items: center; gap: var(--e-1); pointer-events: none; }
.soltar-texto b { color: var(--fg); font-weight: 600; }
.soltar-texto small { font-size: var(--t-chico); }
.soltar-icono {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--e-1);
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.soltar:hover .soltar-icono, .soltar.encima .soltar-icono { background: var(--surface); }
.soltar-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.soltar[data-lleno] { border-style: solid; border-color: var(--accent); background: var(--surface); }
.soltar[data-lleno] .soltar-texto b { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .soltar, input[type="range"]::-webkit-slider-thumb { transition: none; } }

/* --- movimiento --- */

/* todo lo que se toca cambia de color, fondo y borde con suavidad (las páginas pueden sumar transform) */
:where(a, button, summary, label, input, select, textarea) {
  transition: color var(--dur) var(--curva), background-color var(--dur) var(--curva),
    border-color var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}

/* intro al abrir (Video y Resúmenes): corta y sin bloquear. Deja pasar los toques; un toque o una tecla la apura.
   <div class="intro" id="intro" aria-hidden="true"> cabecita · <p class="intro-marca"> · <i class="intro-barra"> · <p class="intro-estado"><i></i>…
   La página decide antes de pintar si va (:root[data-intro="no"]) y la saca del DOM al terminar. */
.intro {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-5);
  background: var(--bg); color: var(--fg);
  animation: intro-salir 0.35s var(--curva) 0.9s forwards;
}
.intro.saltar { animation: intro-salir 0.15s ease-in forwards; }
:root[data-intro="no"] .intro { display: none; }
.intro > * { margin: 0; animation: intro-entrar 0.45s var(--curva) both; }
.intro-cabecita { width: 80px; height: 94px; animation-name: intro-crecer; }
.intro-marca { display: flex; font: 800 clamp(3rem, 12vw, 5.5rem)/1 var(--font-marca); letter-spacing: -0.02em; animation: none; }
.intro-marca span { animation: intro-entrar 0.45s var(--curva) 0.1s both; }
.intro-marca .ia { color: var(--accent); animation-delay: 0.2s; }
.intro-barra {
  display: block; width: 160px; height: 6px; border-radius: var(--r-pill); background: var(--accent);
  transform-origin: left center; animation: intro-barra 0.4s var(--curva) 0.3s both;
}
.intro-estado {
  display: flex; align-items: center; gap: var(--e-2); padding: var(--e-1) var(--e-4) var(--e-1) var(--e-3);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font-size: var(--t-sec); color: var(--muted); animation-delay: 0.35s;
}
.intro-estado i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
@keyframes intro-entrar { from { opacity: 0; transform: translateY(16px); } }
@keyframes intro-crecer { from { opacity: 0; transform: translateY(12px) scale(0.6); } }
@keyframes intro-barra { from { transform: scaleX(0); } }
@keyframes intro-salir { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  :where(a, button, summary, label, input, select, textarea) { transition: none; }
}