/* =============================================================
   0. Fuentes — auto-hospedadas (2026-08-28)
   ============================================================= */
/* Antes se cargaban desde fonts.googleapis.com: un <link rel="stylesheet">
   externo es render-blocking (el navegador debe bajar ese CSS, leerlo, y
   solo despues bajar las fuentes reales) — Lighthouse midio ~780ms
   perdidos ahi, y el cambio de fuente de reserva a fuente real al llegar
   tarde causaba un CLS real de 0.209 (umbral "bueno" es <0.1). Mismo
   patron que usan GitHub/Stripe/Vercel (verificado en vivo, ninguno de
   los 3 usa fonts.googleapis.com): auto-hospedar en el propio dominio.

   Public Sans y Source Serif 4 son fuentes VARIABLES (confirmado
   inspeccionando el archivo real con fontTools: un solo .woff2 cubre
   todo el eje "wght") — un solo archivo por familia cubre los pesos que
   usa el sitio (400/500/600 y 600/700 respectivamente), en vez de un
   archivo por peso. IBM Plex Mono no es variable, sigue siendo 2
   archivos estaticos (400/500). Subconjunto "latin" unicamente (mismo
   que Google serviria de todos modos para contenido en español/ingles)
   — unicode-range calcado del que Google declara para ese subconjunto,
   asi un caracter fuera de rango cae al fallback en vez de romperse. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/public-sans-variable.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;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-serif-4-variable.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;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.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;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.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;
}

/* Fallbacks de metricas ajustadas (arregla el CLS de 0.209, 2026-08-28) —
   mientras la fuente real no ha llegado, font-display:swap usa la fuente
   de reserva del sistema; si esa fuente mide distinto a la real, el texto
   se reacomoda cuando la real llega. Estas reglas hacen que la fuente de
   reserva OCUPE el mismo espacio que la real va a ocupar, usando
   ascent-override/descent-override/size-adjust.

   Valores calculados con @capsizecss/core + @capsizecss/metrics (la misma
   libreria que usa el propio next/font de Vercel para esto) contra las
   metricas REALES de cada .woff2 auto-hospedado — no adivinados. Cada
   fallback tiene su propio nombre (no reutiliza el de otro) para que la
   cadena de font-family funcione bien en cualquier sistema operativo: si
   "Fallback Mac" no resuelve (no es Mac), el navegador sigue a la
   siguiente entrada de la lista sola, sin conflicto de nombres. */
@font-face {
  font-family: "Public Sans Fallback Mac";
  src: local("System Font"), local(".SFNS-Regular");
  ascent-override: 84.6372%;
  descent-override: 20.0456%;
  size-adjust: 112.2438%;
}
@font-face {
  font-family: "Public Sans Fallback Win";
  src: local("Segoe UI"), local("SegoeUI");
  ascent-override: 90.0944%;
  descent-override: 21.3382%;
  size-adjust: 105.4449%;
}
@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  ascent-override: 96.4195%;
  descent-override: 31.1781%;
  size-adjust: 107.4471%;
}
@font-face {
  font-family: "IBM Plex Mono Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  ascent-override: 102.5167%;
  descent-override: 27.5045%;
  size-adjust: 99.9837%;
}

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #faf9f6;
  --surface: #ffffff;
  --ink: #1c1a17;
  --ink-dim: #5a564e;
  --rule: #ddd8ce;
  /* Borde de controles interactivos (inputs/selects/botones del resultado)
     — separado de --rule (divisores decorativos) porque el mismo #ddd8ce
     ahi da solo 1.35:1 de contraste contra el fondo del campo, muy por
     debajo del minimo WCAG 1.4.11 para limites de componentes de UI (3:1).
     Auditoria UI/UX 2026-08-28, medido en produccion, no una suposicion.
     #8c8780 da 3.39:1 contra --bg y 3.56:1 contra --surface (los 2 fondos
     donde aparece un control). */
  --input-border: #8c8780;
  --accent: #8a3324;
  --accent-ink: #6e2819;
  --accent-soft: #f4e6e1;
  --accent-soft-border: #e2bfae;
  --accent-2: #7a6a2e;
  --sans: "Public Sans", "Public Sans Fallback Mac", "Public Sans Fallback Win", -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  --mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16140f;
    --surface: #1f1c17;
    --ink: #f2ede4;
    --ink-dim: #b8b0a2;
    --rule: #38332a;
    /* Mismo hallazgo que en modo claro (ver :root arriba) — #38332a contra
       --bg oscuro da 1.47:1. #746a57 da 3.45:1. */
    --input-border: #746a57;
    --accent: #d98a72;
    --accent-ink: #eab0a0;
    --accent-soft: #3a2620;
    --accent-soft-border: #5c3c30;
    --accent-2: #c9b45c;
  }
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; overflow-x: clip; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}
/* Franja de acento — la unica pincelada de color "de marca" fuera del
   boton/links, agrega energia visual sin tocar la paleta general. */
body::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
h1, h2, h3 { font-family: var(--serif); text-wrap: balance; line-height: 1.1; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
a { color: var(--accent-ink); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* =============================================================
   3. Layout
   ============================================================= */
.site-header, main, .site-footer {
  max-width: 42rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-block: 1.25rem;
}
.logo { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ink); }

/* Area de toque del link de idioma ("English"/"Español") — medido en la
   auditoria UI/UX 2026-08-28: ~19px de alto, muy por debajo del minimo
   recomendado (44px). Agrandar el link mismo se veria raro en un header
   minimalista (un link de texto no deberia lucir como un boton) — el
   patron real para esto es un area de toque invisible mas grande via un
   pseudo-elemento con inset negativo, activo solo en pantallas tactiles
   (@media pointer:coarse), que no cambia absolutamente nada visualmente. */
.site-header nav a { position: relative; }
@media (pointer: coarse) {
  .site-header nav a::after {
    content: "";
    position: absolute;
    inset: -14px;
  }
}
.site-footer {
  display: flex; gap: 1.5rem; padding-block: 2rem 3rem;
  font-size: 0.85rem; color: var(--ink-dim);
}

/* =============================================================
   4. Hero
   ============================================================= */
.hero { padding-block: 0.5rem 1.5rem; text-align: center; }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); max-width: 22ch; margin-inline: auto; }
.hero .subtitle { color: var(--ink-dim); margin-top: 0.6rem; }

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin-top: 1rem;
}
.trust-badges li {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* =============================================================
   5. Tool card
   ============================================================= */
.tool-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 12px 32px -16px rgba(28, 26, 23, 0.18), 0 2px 6px -2px rgba(28, 26, 23, 0.08);
}

#form-cita label,
#form-reporte label { display: block; font-size: 0.85rem; font-weight: 600; margin: 0.9rem 0 0.3rem; }

.tipo-fuente-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--bg);
  padding-left: 0.7rem;
}
.tipo-fuente-row .tipo-icono { flex-shrink: 0; color: var(--accent-ink); }
/* Especificidad #form-cita + .tipo-fuente-row + select gana sobre la regla
   compartida "#form-cita select" (misma cantidad de IDs, una clase mas). */
#form-cita .tipo-fuente-row select {
  border: 0;
  background: transparent;
  padding-left: 0;
}

/* Fase 2 — fila de autocompletar (DOI/URL): input + boton secundario. */
.autocompletar-row { display: flex; gap: 0.5rem; }
.autocompletar-row input { flex: 1; min-width: 0; }
.btn-secundario {
  flex-shrink: 0;
  padding: 0 1rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}
.btn-secundario:hover { background: var(--accent-soft); }
.btn-secundario:disabled { opacity: 0.6; cursor: default; }
.autocompletar-estado {
  font-size: 0.8rem;
  color: var(--ink-dim);
  margin-top: 0.3rem;
  min-height: 1.1em;
}
.autocompletar-estado[data-tipo="error"] { color: var(--accent-ink); }

/* Ejemplo real, fuera del placeholder (bug real encontrado 2026-08-28: el
   placeholder original llevaba el ejemplo completo y se cortaba en movil,
   sin alcanzar a mostrarse entero — un textarea de 2 lineas no alcanza
   para una cita completa). Nielsen Norman Group documenta por que esto es
   lo correcto de fondo, no solo un parche: el placeholder desaparece en
   cuanto el usuario empieza a escribir, asi que nunca deberia cargar la
   unica copia de un ejemplo largo — un texto de ayuda visible SIEMPRE
   (como este) es mas accesible y nunca se corta, sin importar el tamano
   de pantalla. */
.campo-ejemplo {
  font-size: 0.8rem;
  color: var(--ink-dim);
  margin-top: 0.3rem;
  margin-bottom: 0.6rem;
}

#form-cita select,
#form-cita input[type="text"],
#form-cita textarea,
#form-reporte select,
#form-reporte input[type="text"],
#form-reporte textarea {
  width: 100%;
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}
/* El resize nativo del navegador (default: both) deja que un textarea se
   agrande mas ancho que su tarjeta, rompiendo el layout — solo alto,
   nunca ancho. max-width es respaldo: cubre incluso si el navegador ya
   dejo un estilo inline de resize previo (max-width gana sobre width). */
#form-cita textarea,
#form-reporte textarea {
  resize: vertical;
  max-width: 100%;
  /* El propio limite minimo del navegador al reducir el alto (~19.6px con
     este padding/font) es menor que lo que ocupa una sola linea de texto
     (~43px) — sin este min-height, compactar el textarea corta el texto
     a la mitad en vez de solo mostrar menos lineas. */
  min-height: 2.75rem;
}
/* min-width:0 es el fix real del desborde: por default un <fieldset> crece
   para "caber" a su contenido (quirk historico de los navegadores, ligado
   al <legend>) en vez de respetar el ancho del padre — sin esto, el
   max-width del textarea de arriba mide contra un fieldset que ya crecio
   para acomodarlo, y nunca frena nada. */
#form-cita fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Area de toque de los <select> — medido en la auditoria UI/UX 2026-08-28:
   39-41px de alto, por debajo de los 44px que recomiendan WCAG 2.5.5/Apple
   HIG/Material Design para controles tocables. A diferencia de un link de
   texto chico (ver .site-header nav a mas abajo), un select SI puede
   crecer un poco de tamano visible sin verse raro — es lo esperado para un
   control de formulario. */
#form-cita select,
#form-reporte select {
  padding-block: 0.75rem;
}

/* Separa visualmente el atajo "pegar una cita/DOI/URL" del resto del
   formulario manual — mismo fieldset sin borde de arriba, solo una regla
   y espacio abajo para que no se confunda con un campo mas del libro. */
.conversor-cita { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }

.btn-primary {
  margin-top: 1.25rem;
  width: 100%;
  padding: 0.8rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  transition: transform 0.15s var(--ease-out);
}
.btn-primary:hover { transform: translateY(-1px); }

/* Estados de la tarjeta: solo se muestra la zona que coincide con data-state */
.resultado-zona { display: none; margin-top: 1.25rem; }
@keyframes resultadoAparece {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.tool-card[data-state="working"] .resultado-zona[data-estado-visible="working"],
.tool-card[data-state="error"] .resultado-zona[data-estado-visible="error"],
.tool-card[data-state="done"] .resultado-zona[data-estado-visible="done"] {
  display: block;
  /* animation (no transition) porque display:none->block no es animable
     con transition — animation si corre al entrar al arbol de render. */
  animation: resultadoAparece 0.25s var(--ease-out);
}

.resultado-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.resultado-texto {
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.6;
  background: var(--bg);
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: 0.9rem;
  margin-top: 0.4rem;
}
.resultado-acciones { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.resultado-acciones button {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}
/* "Copiar" es el objetivo real de la herramienta (llevarse la cita) —
   antes tenia el mismo peso visual que "Generar otra cita" (un reset), sin
   ninguna jerarquia entre accion primaria/secundaria. Auditoria UI/UX
   2026-08-28. Mismos colores que .btn-primary, sin heredar su width:100%
   (estos 2 botones van lado a lado). */
#btn-copiar {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
#btn-copiar:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

/* =============================================================
   6. Privacy badge, ad slots
   ============================================================= */
.privacy-badge {
  font-size: 0.85rem;
  color: var(--ink-dim);
  text-align: center;
  margin-bottom: 1.5rem;
}

.ad-slot {
  min-height: 90px;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  font-size: 0.8rem;
  margin-block: 1.5rem;
}

/* =============================================================
   7. Content sections
   ============================================================= */
.como-funciona, .faq { margin-block: 2rem; }
.como-funciona h2, .faq h2 { font-size: 1.4rem; margin-bottom: 0.8rem; }
.como-funciona ol { padding-left: 1.2rem; margin-bottom: 1rem; }
.como-funciona li { margin-bottom: 0.3rem; }
.como-funciona p { color: var(--ink-dim); }

.faq-item { border-bottom: 1px solid var(--rule); padding-block: 0.8rem; }
.faq-item summary { font-weight: 600; cursor: pointer; }
.faq-item p { color: var(--ink-dim); margin-top: 0.5rem; }

/* Caja con tinte propio (mismos tokens que las trust-badges), no solo
   texto de color — auditoria UI/UX 2026-08-28: antes solo el color del
   texto distinguia esto de una pregunta real de la FAQ (mismo triangulo,
   mismo peso de fuente, misma fila), facil de pasar por alto. Investigacion
   real: un widget de reporte/feedback debe leerse como un bloque de accion
   distinto, no como un item mas de una lista (smart-interface-design-
   patterns.com, sobre patrones de FAQ) — un tinte de fondo propio logra
   eso de un vistazo, sin depender de que alguien note la diferencia de color
   del texto solamente. */
.reporte-detalle {
  margin-block: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  border-radius: 8px;
}
.reporte-detalle summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); }
.reporte-detalle .tool-card { margin-top: 0.9rem; }

/* Contenido de profundidad (guias/, en/guides/) — mismo tono que
   .como-funciona, mas prosa larga (h2 + p + listas). */
.guia h1 { font-size: clamp(1.5rem, 4vw, 1.9rem); margin-bottom: 0.8rem; }
.guia-intro { color: var(--ink-dim); font-size: 1.05rem; margin-bottom: 1rem; }
.guia h2 { font-size: 1.25rem; margin: 1.6rem 0 0.6rem; }
.guia p { margin-bottom: 0.9rem; }
.guia ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.guia li { margin-bottom: 0.4rem; }
.guia-cta { text-align: center; margin-block: 2rem; }
.btn-cta {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.btn-cta:hover { background: var(--accent-ink); }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (max-width: 539px) {
  .tool-card { padding: 1.1rem; border-radius: 10px; }
}

/* =============================================================
   9. Reduced-motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .btn-primary { transition: none; }
  .tool-card[data-state="working"] .resultado-zona[data-estado-visible="working"],
  .tool-card[data-state="error"] .resultado-zona[data-estado-visible="error"],
  .tool-card[data-state="done"] .resultado-zona[data-estado-visible="done"] {
    animation: none;
  }
}