Guía de estilos SuperLeads

:root{
  /* — Primarios — */
  --green:#56EF9F; --navy:#002582; --navy-deep:#001240;

  /* — Secundarios — */
  --green-d:#2BC878; --navy-mid:#001a5e;
  --blue:#0039C8; --blue-mid:#2A89FB;
  --blue-soft:#F4F7FF; --blue-softer:#EEF2FF;

  /* — Neutros — */
  --ink:#1a1a1a; --border:#e0e8f8;
  --muted:#5b6478; --dim:#98a1b0;

  /* — Estado — */
  --ok:#0ca30c; --warn:#eb6834;
  --bad:#d03b3b; --destructive:#d92d43;

  /* — Gráficas (paleta validada, separada de la marca) — */
  --chart-1:#2a78d6; --chart-2:#eb6834; --chart-3:#1baf7a;

  /* — Movimiento — */
  --ease:cubic-bezier(.16,1,.3,1);

  /* — Sombras — */
  --shadow-sm:0 1px 2px rgba(0,37,130,.04);
  --shadow-card:0 10px 32px rgba(0,37,130,.08);
  --shadow-btn:0 10px 28px rgba(0,37,130,.22);
  --shadow-cta:0 10px 28px rgba(86,239,159,.28);
  --shadow-pill:0 10px 32px rgba(0,37,130,.08);
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&display=swap" rel="stylesheet">

/* Base: móvil primero. Sin media query = celular. */
:root{ --max:1240px; --pad:18px; }
body{ font-size:14px; }

/* 640 — tablet y ventanas a media pantalla */
@media (min-width:640px){ :root{ --pad:24px } }

/* 1024 — laptop: aparece la barra lateral */
@media (min-width:1024px){ :root{ --pad:40px } }

/* 1680 — monitor grande: crece el TEXTO, no el ancho */
@media (min-width:1680px){
  :root{ --pad:56px }
  body{ font-size:15px }
}

/* 2400 — sala de juntas y 4K */
@media (min-width:2400px){
  :root{ --max:1420px }
  body{ font-size:16px }
}

/* ❌ Desborda si el contenedor es más angosto que 280px */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

/* ✅ El min() lo deja encogerse hasta el ancho disponible */
grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr));

/* Nivel 0 — al ras */
border:.5px solid var(--border);
/* Nivel 1 — apoyado */
box-shadow:0 1px 2px rgba(0,37,130,.04);
/* Nivel 2 — levantado */
box-shadow:0 10px 32px rgba(0,37,130,.08);
/* Nivel 3 — encima de todo */
box-shadow:0 8px 40px rgba(0,0,0,.12);
/* Intención — CTA verde en hover */
box-shadow:0 10px 28px rgba(86,239,159,.28);
/* Intención — navy en hover */
box-shadow:0 10px 28px rgba(0,37,130,.22);

--ease:cubic-bezier(.16,1,.3,1);

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--green);color:var(--navy);
  padding:14px 26px;border-radius:8px;border:none;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-cta)}
.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.btn-navy{
  background:var(--navy);color:#fff;
  padding:12px 22px;border-radius:8px;border:none;
  font-size:13px;font-weight:700;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s;
}
.btn-navy:hover{background:var(--navy-mid);transform:translateY(-2px);box-shadow:var(--shadow-btn)}
.btn-navy:active{transform:translateY(0);box-shadow:none}

/* Terciario — acciones de apoyo en fila */
.btn-outline{background:#fff;color:var(--navy);border:.5px solid var(--border);
  padding:10px 18px;border-radius:8px;font-size:13px;font-weight:700}
.btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Fantasma — navegación, cancelar */
.btn-ghost{background:transparent;color:var(--muted);padding:10px 18px;font-size:13px;font-weight:600}
.btn-ghost:hover{background:rgba(0,37,130,.05);color:var(--navy)}

/* Destructivo — discreto hasta que se necesita */
.btn-danger{background:transparent;color:var(--muted);padding:8px;border-radius:8px}
.btn-danger:hover{background:#fef2f2;color:var(--destructive)}

.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:20px;
}
/* Campo que necesita todo el ancho */
.form-grid .full{grid-column:1/-1}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--navy)}
.field input,.field textarea,.field select{
  width:100%;padding:10px 14px;
  border:.5px solid var(--border);border-radius:8px;background:#fff;
  font-family:inherit;font-size:14px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder{color:var(--dim)}
.field input:hover{border-color:#c9d6f0}
.field input:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,57,200,.10);
}
.hint{font-size:11px;line-height:1.45;color:var(--muted)}
.err-msg{font-size:12px;font-weight:500;color:var(--destructive)}
.field input[aria-invalid="true"]{border-color:var(--destructive)}

/* Número protagonista */
.field input.grande{height:56px;font-size:24px;font-weight:600;
  color:var(--navy);font-variant-numeric:tabular-nums}

.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 56px;
  background:rgba(0,18,64,.97);
  border-bottom:.5px solid rgba(86,239,159,.1);
  backdrop-filter:blur(16px);
}
.nav a{font-size:13px;font-weight:500;color:rgba(255,255,255,.4);transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}

footer{
  background:var(--navy-deep);
  border-top:.5px solid #0a3070;
  padding:28px 56px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
footer a{font-size:12px;color:rgba(255,255,255,.22);transition:color .2s}
footer a:hover{color:rgba(255,255,255,.65)}
footer .copy{font-size:11px;color:rgba(255,255,255,.22)}

.card{
  background:#fff;border:.5px solid var(--border);border-radius:12px;
  padding:20px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);
  border-color:rgba(0,57,200,.25)}

/* Sobre oscuro */
.card-dark{background:rgba(255,255,255,.04);border:.5px solid rgba(255,255,255,.07)}
.card-dark:hover{border-color:rgba(86,239,159,.25)}

/* Rejilla uniforme */
.cards{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}

.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.eyebrow span{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.3px;color:var(--blue)}
/* Sobre oscuro */
.eyebrow-dark::before{background:var(--green)}
.eyebrow-dark span{color:var(--green)}

.fondo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.globo-1{position:absolute;top:-30%;right:-15%;width:520px;height:520px;
  border-radius:50%;background:rgba(42,137,251,.05);filter:blur(100px)}
.globo-2{position:absolute;bottom:-30%;left:-10%;width:480px;height:480px;
  border-radius:50%;background:rgba(86,239,159,.05);filter:blur(110px)}

/* Deriva — el fondo respira sin que nadie lo note */
@keyframes deriva{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-48px,36px,0) scale(1.08)}
}
.globo-1{animation:deriva  90s ease-in-out infinite}
.globo-2{animation:deriva 130s ease-in-out infinite reverse}

/* Círculo de acento en secciones oscuras */
section::before{content:"";position:absolute;right:-100px;top:-100px;
  width:480px;height:480px;border-radius:50%;
  background:rgba(86,239,159,.03);pointer-events:none}

let temporizador = null, pendiente = false;

function alCambiar(valor){
  if (temporizador) clearTimeout(temporizador);
  pendiente = true;
  temporizador = setTimeout(() => { pendiente = false; guardar(valor); }, 2500);
}

// Flush: lo que salva el trabajo cuando se cierra o se navega
function flush(){
  if (!pendiente) return;
  pendiente = false;
  guardar(obtenerValorActual());
}
window.addEventListener("pagehide", flush);   // cerrar / cambiar de pestaña
// y al desmontar el componente, llama flush() también

function marcar(clave, opcion){
  const actual = valores[clave];              // 1 | 0 | undefined
  const nuevo  = opcion === "si" ? 1 : 0;
  if (actual === nuevo) delete valores[clave]; // des-selecciona → sin contestar
  else valores[clave] = nuevo;
  pintar();
}

// SIEMPRE comparar contra null, nunca por verdadero/falso:
// 0 es una respuesta válida ("no tienen ese rol"), no un vacío.
if (valor != null) { /* fue contestado */ }

// Servidor — devuelve, no lanza
async function guardarDatos(datos){
  try {
    await base.actualizar(datos);
    return { ok: true };
  } catch (e) {
    registrar("guardado_fallido", e);          // bitácora
    return { ok: false, mensaje: e.message };  // viaja íntegro
  }
}

// Cliente — muestra el mensaje REAL
boton.disabled = true; boton.textContent = "Guardando…";
const r = await guardarDatos(datos);
boton.disabled = false;
if (r.ok) estado.textContent = "Guardado " + new Date().toLocaleTimeString("es-MX");
else      estado.textContent = r.mensaje;      // nunca "algo salió mal"

const ETAPAS = ["Ubicando la zona…","Consultando el censo…","Leyendo la serie…","Redactando…"];
let i = 0;
const reloj = setInterval(() => {
  i = Math.min(i + 1, ETAPAS.length - 1);
  texto.textContent = ETAPAS[i];
}, 2600);

const resultado = await procesoLargo();
clearInterval(reloj);

function copiar(boton, texto){
  navigator.clipboard.writeText(texto).then(() => {
    const antes = boton.textContent;
    boton.textContent = "✓ Copiado";
    setTimeout(() => boton.textContent = antes, 1600);
  });
}

function descargar(nombre, contenido, tipo = "text/plain"){
  const url = URL.createObjectURL(new Blob([contenido], {type: tipo}));
  const a = Object.assign(document.createElement("a"), {href: url, download: nombre});
  a.click(); URL.revokeObjectURL(url);
}

@page{ size: letter; margin: 20mm 16mm 16mm; }

/* Un título NUNCA se queda solo al final de una página */
h1,h2,h3{ break-after: avoid; }

/* Lo que no se puede partir: un par etiqueta-valor, una imagen con su pie,
   una fila de tabla, una tarjeta de cifra */
.dato, figure, tr, .cifra{ break-inside: avoid; }

/* Las SECCIONES sí pueden partirse. Prohibirlo deja huecos blancos al pie
   de cada hoja — el error más común y el más feo. */
section{ break-inside: auto; }

/* Nuevo capítulo, nueva hoja */
.capitulo{ break-before: page; }

/* Nunca una línea suelta arriba o abajo */
p{ orphans: 3; widows: 3; }

/* Movimiento reducido — esta guía cumple su propia sección 23.2 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
}
/* Enlace de salto (sección 23.3) */
.saltar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.saltar:focus{position:fixed;width:auto;height:auto;clip:auto;clip-path:none;left:16px;top:16px;z-index:999;background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:700}
kbd{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:#fff;border:.5px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--navy)}
@media print{
  *{ print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  html,body{ background:#fff !important; }

  /* Fuera todo lo que es de pantalla */
  nav,.sidebar,.topbar,button,.no-print{ display:none !important; }

  /* Las tarjetas se APLANAN: en papel solo gastan tinta y parten
     el texto en islas que cuestan más leer */
  .card{ border:0 !important; box-shadow:none !important;
         background:transparent !important; padding:0 !important; }

  /* Los bloques oscuros se invierten: texto claro sobre navy es
     ilegible impreso y se come un cartucho */
  .bloque-navy{ background:transparent !important; color:var(--navy) !important; }

  /* El ancho de pantalla estrecha la hoja; en papel manda el margen */
  .doc{ max-width:none; width:100%; }

  body{ font-size:11pt; line-height:1.5; }

  /* Los enlaces largos se salen de la columna */
  a{ overflow-wrap:anywhere; }
}

SuperLeads_TipoDeDocumento_Institucion_AAAA-MM-DD.pdf

// Ejemplos
SuperLeads_RayosX_CentroEscolarMexiquense_2026-08-14.pdf
SuperLeads_Propuesta_ColegioDelValle_2026-08-20.pdf
SuperLeads_HojaCliente_InstitutoFrontera_2026-08-14.pdf

002582   Navy — títulos y encabezados de tabla
001240   Navy profundo — portadas y bloques de cierre
56EF9F   Verde — SOLO sobre navy, nunca sobre blanco
0039C8   Blue — enlaces
111827   Tinta — texto del cuerpo
5B6472   Gris texto — etiquetas y subtítulos
D8DCE4   Filete — bordes de tabla
F4F7FF   Azul suave — relleno de filas alternas

/* El fondo llena la pantalla; el contenido respeta las zonas del sistema */
padding-top:    env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left:   max(16px, env(safe-area-inset-left));
padding-right:  max(16px, env(safe-area-inset-right));

/* Movimiento reducido — esta guía cumple su propia sección 23.2 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
}
/* Enlace de salto (sección 23.3) */
.saltar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.saltar:focus{position:fixed;width:auto;height:auto;clip:auto;clip-path:none;left:16px;top:16px;z-index:999;background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:700}
kbd{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:#fff;border:.5px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--navy)}
@media print{
  *{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  @page{size:letter;margin:16mm}

  html,body{background:#fff !important}
  .no-print,nav,.sidebar,.topbar,button{display:none !important}

  /* Las tarjetas se aplanan: en papel solo gastan tinta */
  .card{border:0 !important;box-shadow:none !important;
    background:transparent !important;padding:0 !important}

  body{font-size:11pt;line-height:1.5}
  h1,h2,h3{break-after:avoid}
  figure,.par-dato{break-inside:avoid}
  /* Las secciones SÍ pueden partirse: evitarlo deja huecos al pie */
}

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

<a href="#contenido" class="saltar">Ir al contenido</a>

/* Se oculta recortándolo, NO mandándolo a left:-9999px: esa técnica
   vieja genera scroll horizontal en la página. */
.saltar{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.saltar:focus{position:fixed;width:auto;height:auto;clip:auto;clip-path:none;
  left:16px;top:16px;z-index:999;
  background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px}

<div class="field">
  <label for="matricula">Matrícula actual</label>
  <input id="matricula" type="number" inputmode="numeric"
         aria-describedby="ayuda-matricula error-matricula"
         aria-invalid="false">
  <p id="ayuda-matricula" class="hint">Solo alumnos pagando hoy.</p>
  <p id="error-matricula" class="err-msg"></p>
</div>

<!-- El estado de guardado se anuncia solo, sin robar el foco -->
<span aria-live="polite">Guardado 14:32</span>

Diseña y programa siguiendo el sistema de SuperLeads. Reglas obligatorias:

TIPOGRAFÍA: "Plus Jakarta Sans" (Google Fonts), única familia.

TOKENS (úsalos siempre, nunca colores sueltos):
--green:#56EF9F; --navy:#002582; --navy-deep:#001240;
--green-d:#2BC878; --navy-mid:#001a5e; --blue:#0039C8; --blue-mid:#2A89FB;
--blue-soft:#F4F7FF; --blue-softer:#EEF2FF;
--ink:#1a1a1a; --border:#e0e8f8; --muted:#5b6478; --dim:#98a1b0;
--ok:#0ca30c; --warn:#eb6834; --bad:#d03b3b; --destructive:#d92d43;
--chart-1:#2a78d6; --chart-2:#eb6834; --chart-3:#1baf7a;
--ease:cubic-bezier(.16,1,.3,1);

COLOR: el verde SOLO sobre fondo oscuro (nunca sobre blanco). El navy para
texto y botones sobre claro. El blue para links y bordes activos. Los colores
de estado no se usan como decorativos. Las gráficas usan --chart-*, nunca la
marca. El texto va en tinta, nunca del color de su serie.

FORMA: bordes .5px (jamás 1px). Radios: 8px controles, 12px tarjetas, pill en
badges. Espaciado en múltiplos de 4. Sombras teñidas de navy, nunca negras:
tarjeta 0 10px 32px rgba(0,37,130,.08); CTA 0 10px 28px rgba(86,239,159,.28).

MOVIMIENTO: un solo easing --ease. Hover de botón translateY(-2px) en 200ms;
de tarjeta -3px en 300ms; active instantáneo. Nunca "transition: all".

TIPOS: H1 46-50px/800/-1.8px. Título de página 32-36px/800/-0.8px. Tarjeta
16-22px/800. Body 13-15px/1.78. Eyebrow 10-11px/700/1.3px mayúsculas. Stats
con tabular-nums.

LAYOUT: rejillas con repeat(auto-fit,minmax(min(280px,100%),1fr)) antes que media
queries. Todo grid item lleva min-width:0 (sin esto el contenido desborda).
Tarjetas de una rejilla, todas del mismo tamaño.

FORMULARIOS: label 13px/500 navy; input padding 10px 14px, borde .5px, focus
con borde --blue y halo rgba(0,57,200,.10); hint 11px --muted debajo. Nada
preseleccionado: tres estados (null / 0 / 1) y comparar con != null.

ESTADOS: toda pantalla necesita vacío, cargando, error y éxito. Los errores
muestran el mensaje REAL y qué hacer. Sin dato se escribe "—", nunca 0.

ACCESIBILIDAD: contraste 4.5:1 en texto y 3:1 en controles; foco visible con
outline 2px var(--blue); área táctil 44px; nada depende solo del color; un solo
h1 con niveles sin saltos; lang="es"; label for + aria-describedby en campos;
aria-live="polite" para avisos de guardado; y SIEMPRE el bloque de
prefers-reduced-motion que apaga animaciones y transiciones.

APP MÓVIL (iOS/Android): el ícono es el SÍMBOLO sin la palabra, sobre navy-deep
sólido, sin transparencia ni esquinas redondeadas propias (el sistema aplica su
máscara), símbolo al 60-66% central, master 1024x1024. Iconografía Lucide en
rejilla de 24 con grosor 2: 24pt en pestañas, 20 en listas, 18 en botones.
Navegación ABAJO con 3-5 pestañas siempre con etiqueta — el menú hamburguesa
está prohibido. Área tocable 48x48 mínimo, separada 8. Respeta safe areas con
env(safe-area-inset-*). Cuerpo a 16pt (no 14) y respeta el tamaño de texto del
sistema. No existe hover: se sustituye por estado presionado inmediato, hints
visibles y háptica. Modo oscuro obligatorio, y EN OSCURO la acción principal es
verde (#56EF9F) en vez de navy. Esqueletos en vez de spinners.

PDF / DOCUMENTOS: tamaño Carta (nunca A4), márgenes 20mm arriba y 16mm el
resto. Logo blanco 52mm en portada, azul 26mm en el encabezado interior, una
sola vez por página, nunca en el pie. Cuerpo 11pt/1.5, títulos 12.5-14pt,
etiquetas 9.5pt, folio 9pt, mínimo absoluto 8.5pt. Tinta #111827 (no negro
puro), títulos navy, filetes #d8dce4 a 1pt. Verde solo dentro de bloques navy.
Títulos con break-after:avoid; pares dato/valor y figuras con
break-inside:avoid; las secciones SÍ pueden partirse. Nombre de archivo:
SuperLeads_Tipo_Institucion_AAAA-MM-DD.pdf. Debe entenderse en blanco y negro.

NUNCA: verde sobre blanco · borde 1px · sombra negra · opacity para jerarquía
· transition:all · dual axis en gráficas · un cero inventado · "ocurrió un
error" · acción principal al fondo del menú.