/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA VISUAL DE SEIS
   Biomédico + tecnológico. La referencia no es una web de software: es un
   instrumento clínico moderno — un monitor de signos vitales, un equipo de
   diagnóstico. De ahí sale todo.

   Este archivo es SOLO los tokens y las primitivas. Lo específico de cada
   página vive en su propio <style>. Para usarlo en otra página de SEIS:

       <link rel="stylesheet" href="/seis-sistema.css">

   Escrito el 02-09-2026 a partir de la página del asistente.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ─── COLOR ───────────────────────────────────────────────────────────
     REGLA QUE ORDENA TODO: el cian es la voz de lo accionable. Aparece en
     lo que se puede tocar (botones, enlaces) y en los rótulos que orientan.
     En nada más. Antes estaba también en el fondo, el título, las líneas y
     los bordes, y cuando un color está en todas partes deja de significar
     algo.

     El verde es SOLO estado — funcionando, listo. Como en un equipo real.
     Las líneas y superficies son grises fríos neutros, sin tinte.
     El fondo es azul profundo, no cian: acompaña, no compite. */
  --tinta:#080C11;          /* fondo: casi negro, con azul adentro */
  --carbon:#111820;         /* superficie elevada */
  --linea:rgba(200,215,228,.11);   /* gris frío neutro, SIN cian */
  --papel:rgba(200,215,228,.028);  /* superficie sutil, neutra */

  --texto:#EDF1F5;          /* blanco neutro, sin tinte */
  --tenue:rgba(237,241,245,.55);

  --acento:#3ECDE0;         /* cian — SOLO lo accionable y los rótulos */
  --acento-hondo:#1FA5B8;
  --ok:#4FD69C;             /* verde señal: solo estado */
  --alerta:#E8B75C;

  /* El fondo generativo vive en azules profundos, no en cian. Estos son
     los tres tonos que usa el shader. */
  --fondo-1:#0A1620;        /* azul profundo */
  --fondo-2:#14303F;        /* azul medio */
  --fondo-3:#1E4C5E;        /* el punto más claro, aún lejos del cian */

  /* ─── ESCALA TIPOGRÁFICA ──────────────────────────────────────────────
     Escala de documento de trabajo, no de landing. Esto lo lee gente de
     SEIS en su jornada: hay jerarquía clara para orientarse, pero sin el
     tamaño de una página que intenta convencer a alguien.
     Los saltos entre niveles siguen siendo francos — es lo que evita que
     todo se lea al mismo nivel. */
  --t-portada: clamp(1.9rem, 4.6vw, 3rem);
  --t-seccion: clamp(1.45rem, 3vw, 1.9rem);
  --t-paso:    clamp(1.1rem, 2vw, 1.2rem);
  --t-cuerpo:  17px;
  --t-chico:   .94rem;
  --t-micro:   .7rem;       /* rótulos monoespaciados */

  --f-texto: Inter, system-ui, -apple-system, sans-serif;
  --f-mono:  "JetBrains Mono", ui-monospace, monospace;

  /* ─── ESPACIO ─────────────────────────────────────────────────────────
     Grilla de 4px. Todo espaciado es múltiplo, sin excepción. */
  --e1:4px;  --e2:8px;   --e3:12px; --e4:16px;
  --e6:24px; --e8:32px;  --e12:48px; --e16:64px; --e24:96px;

  /* ─── FORMA ─── */
  --radio:8px;
  --radio-chico:6px;
  --radio-grande:12px;

  /* ─── MOVIMIENTO ──────────────────────────────────────────────────────
     200ms es el techo para retroalimentación de interacción — más lento se
     siente pesado. Es el estándar que comparten Linear, Vercel y Stripe. */
  --tiempo:.2s;
  --curva:cubic-bezier(.22,.61,.36,1);   /* ease-out */
}

/* ─── BASE ───────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--tinta)}
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}

body{
  font-family:var(--f-texto);
  font-size:var(--t-cuerpo);
  line-height:1.65;
  color:var(--texto);
  background:transparent;      /* el color lo pone html: deja pasar el canvas */
  -webkit-font-smoothing:antialiased;
}

/* ─── TIPOGRAFÍA ─────────────────────────────────────────────────────── */

.t-portada{
  font-size:var(--t-portada); line-height:1.06;
  font-weight:600; letter-spacing:-.035em; text-wrap:balance;
}
.t-seccion{
  font-size:var(--t-seccion); line-height:1.18;
  font-weight:600; letter-spacing:-.02em; text-wrap:balance;
}
.t-paso{
  font-size:var(--t-paso); line-height:1.3;
  font-weight:600; letter-spacing:-.01em;
}

/* Rótulo de sección: etiqueta de instrumento, con su línea encendida. */
.rotulo{
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--acento); margin-bottom:var(--e4);
  display:flex; align-items:center; gap:10px;
}
.rotulo::before{
  content:""; width:22px; height:1px; background:var(--acento);
  box-shadow:0 0 8px var(--acento); flex-shrink:0;
}

/* Medida de lectura: 60-65 caracteres. Más largo y el ojo pierde la línea
   al volver. */
.medida{max-width:60ch}

/* ─── BOTONES ─────────────────────────────────────────────────────────
   Tres niveles, y la regla que los ordena: UN primario por vista. La
   versión anterior tenía cuatro botones cian rellenos compitiendo entre
   sí, y cuando todo grita, nada destaca. */

.boton{
  font-family:var(--f-texto); font-size:1.02rem; font-weight:600;
  padding:var(--e4) var(--e6); border-radius:var(--radio);
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform var(--tiempo) var(--curva),
             background var(--tiempo) var(--curva),
             border-color var(--tiempo) var(--curva),
             box-shadow var(--tiempo) var(--curva);
}
.boton:hover{transform:translateY(-2px)}
.boton:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

.boton-primario{
  background:var(--acento); color:#04070A; border-color:var(--acento);
  box-shadow:0 0 26px rgba(62,205,224,.22);
}
.boton-primario:hover{background:#5BDCEC;box-shadow:0 0 36px rgba(62,205,224,.4)}

.boton-secundario{
  background:rgba(62,205,224,.05); color:var(--texto);
  border-color:rgba(62,205,224,.28);
}
.boton-secundario:hover{border-color:var(--acento);background:rgba(62,205,224,.1)}

.boton-terciario{
  background:transparent; color:var(--acento);
  border-color:transparent; padding-left:0; padding-right:0;
}
.boton-terciario:hover{color:#5BDCEC;transform:translateX(3px)}

.boton span{font-family:var(--f-mono);font-size:.78rem;opacity:.72;font-weight:400}

/* ─── SUPERFICIES ────────────────────────────────────────────────────── */

.tarjeta{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio-grande); padding:var(--e6);
}

/* Bloque monoespaciado: un nombre de archivo, una dirección, un comando
   que se lee (no que se escribe). */
.ficha{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:var(--e3) var(--e4);
  font-family:var(--f-mono); font-size:.9rem;
}
.ficha svg{width:20px;height:20px;color:var(--acento);flex-shrink:0}

/* Aviso: lo que hay que saber antes de seguir. */
.aviso{
  background:rgba(240,184,73,.08);
  border-left:3px solid var(--alerta);
  border-radius:0 var(--radio) var(--radio) 0;
  padding:var(--e4) var(--e6); font-size:.97rem;
}
.aviso strong{color:var(--alerta)}

/* ─── ACCESIBILIDAD ──────────────────────────────────────────────────── */

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