/* ---------------------------------------------------------------------
   Estilos de las páginas estáticas de /recursos/.

   Estas páginas NO pasan por Vue: son HTML plano servido por nginx para
   que Google indexe contenido real sin ejecutar JavaScript. Por eso no
   pueden importar src/assets/base.css (que vive dentro del bundle), y
   este archivo replica solo los tokens del sistema de diseño que usan.
   Si cambian los colores de marca en base.css, hay que reflejarlos aquí.

   Escala del sistema: tamaños de fuente de Tailwind (12, 14, 16, 18, 20,
   24, 30, 36, 48) y espacios 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96.
   --------------------------------------------------------------------- */

:root {
  /* Marca 2026: amarillo + negro (igual que src/assets/base.css) */
  --primary-50: #fffbe0;
  --primary-100: #fff6b3;
  --primary-200: #ffef75;
  --primary-500: #2b2b2b;
  --primary-600: #111111;
  --primary-700: #000000;
  --primary-900: #000000;

  /* Resaltador: acento */
  --highlight-50: #fffbe0;
  --highlight-200: #ffef75;
  --highlight-400: #ffe500;
  --highlight-500: #f0d500;
  --highlight-700: #6b5d00;

  --success-50: #f0fdf4;
  --success-600: #16a34a;
  --warning-50: #fffbeb;
  --warning-300: #fcd34d;
  --warning-800: #92400e;

  --border-color: #e5e5e5;
  --border-strong: #d4d4d4;

  --bg-primary: #ffffff;
  --bg-secondary: #f2f2f2;
  --bg-tertiary: #ebebeb;

  --text-primary: #111111;
  --text-secondary: #3f3f3f;
  --text-tertiary: #6b6b6b;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }

:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

::selection { background: var(--highlight-200); color: var(--text-primary); }

/* Mismo scrollbar que la app (base.css): con el del sistema (~15px) el
   ancho util cambia y la barra centrada se corre al pasar a /recursos. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #a3a3a3; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #737373; }

/* ------------------------------- Layout ------------------------------ */

.wrap { width: 100%; max-width: 768px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1152px; }

/* ------------------------------ Barra ------------------------------ */

/* La barra es la de la app (navBar.vue, fija). Este hueco reserva el alto
   que ocupa para que el contenido parta debajo de ella. */
.nav-slot { height: 82px; }

/* ----------------------------- Contenido ----------------------------- */

main { padding: 64px 0 96px; }

.breadcrumb {
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
}
.breadcrumb a { color: var(--text-tertiary); text-decoration: none; transition: color 500ms var(--ease); }
.breadcrumb a:hover { color: var(--text-primary); }

h1, h2, h3 { text-wrap: balance; color: var(--text-primary); }
p, li { text-wrap: pretty; }

h1 {
  margin-bottom: 16px;
  font-size: 36px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
  background: linear-gradient(90deg, #000000, #666666);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 640px) {
  h1 { font-size: 48px; line-height: 1; }
}

h2 {
  margin: 48px 0 12px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h3 {
  margin: 32px 0 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.lead {
  margin-bottom: 24px;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-secondary);
}

p { margin-bottom: 16px; color: var(--text-secondary); }

a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--highlight-400);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 500ms var(--ease);
}
a:hover { text-decoration-color: var(--text-primary); }

ul, ol { margin: 0 0 16px 24px; color: var(--text-secondary); }
li { margin-bottom: 8px; }

strong { color: var(--text-primary); font-weight: 600; }
em { font-style: normal; font-weight: 600; }

.updated { margin-bottom: 32px; font-size: 14px; line-height: 20px; color: var(--text-tertiary); }

/* Tarjeta de nivel / categoría: borde completo, sin franja lateral. */
.level {
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-primary);
}
.level h3 { margin-top: 0; }
.level p:last-child { margin-bottom: 0; }

/* 16px afuera con 24px de margen: el ejemplo interior queda recto. */
.example {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--highlight-50);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

/* Aviso / fuente */
.note {
  margin: 32px 0;
  padding: 16px 24px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-secondary);
  font-size: 14px;
  line-height: 20px;
}
.note p { font-size: 14px; line-height: 20px; }
.note p:last-child { margin-bottom: 0; }

/* Índice de recursos */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.card-link {
  display: block;
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-primary);
  text-decoration: none;
  transition: border-color 500ms var(--ease), transform 500ms var(--ease);
}
.card-link:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.card-link:active { transform: scale(0.98); }
.card-link h3 { margin: 0 0 8px; font-size: 18px; line-height: 28px; }
.card-link p { margin: 0; font-size: 14px; line-height: 20px; }

/* CTA final: bloque de tinta, plano. */
.cta-box {
  margin-top: 64px;
  padding: 48px 24px;
  border-radius: 24px;
  background: var(--text-primary);
  text-align: center;
}
.cta-box h2 {
  margin-top: 0;
  -webkit-text-fill-color: currentColor;
  color: #ffffff;
}
.cta-box p {
  max-width: 560px;
  margin: 0 auto 24px;
  color: rgba(255, 255, 255, 0.75);
}

/* Botón principal: 8px arriba y abajo, 12px a los lados, texto de 16px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: var(--highlight-400);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 500ms var(--ease), transform 500ms var(--ease);
}
.btn:hover { background: var(--highlight-200); transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }

/* ------------------------------- Tablas ------------------------------ */

/* Las tablas de 9 columnas no caben en un teléfono: se desplazan dentro de
   su propio contenedor para que la página no scrollee en horizontal. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

.data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}
.data-table caption {
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
}
.data-table th,
.data-table td {
  padding: 8px 12px;
  border-top: 1px solid var(--border-color);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.data-table thead th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text-primary);
}
.data-table tbody th {
  background: var(--bg-primary);
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.data-table tbody tr { transition: background-color 300ms var(--ease); }
.data-table tbody tr:hover td { background: var(--primary-50); }
/* Fila del rango mínimo esperado, el dato que más se busca: resaltada. */
.fila-media td, .fila-media th { background: var(--highlight-50); }
.fila-activa td, .fila-activa th { background: var(--highlight-200); font-weight: 600; }

.table-fuente { margin-top: -8px; font-size: 12px; line-height: 16px; color: var(--text-tertiary); }
.table-nota { font-size: 14px; line-height: 20px; }

.formula {
  overflow-x: auto;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-secondary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------- Calculadora ---------------------------- */

.calc {
  margin: 24px 0 32px;
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  background: var(--bg-secondary);
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
}
.campo input,
.campo select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  transition: border-color 500ms var(--ease), box-shadow 500ms var(--ease);
}
.campo input:hover,
.campo select:hover { border-color: var(--border-strong); }
.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 4px var(--primary-100);
}

.calc-resultado {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}
.calc-vacio { margin: 0; color: var(--text-tertiary); }
.calc-ppm {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 48px;
  line-height: 1;
  font-weight: 500;
  color: var(--text-primary);
}
.calc-ppm span {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-tertiary);
}
.calc-categoria {
  display: inline-block;
  margin: 12px 0;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--highlight-200);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--text-primary);
}
.calc-detalle { margin-bottom: 12px; font-size: 14px; line-height: 20px; }
.calc-aviso {
  margin: 12px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--warning-300);
  border-radius: 12px;
  background: var(--warning-50);
  font-size: 14px;
  line-height: 20px;
  color: var(--warning-800);
}
.calc-tabla { min-width: 0; }
.calc-tabla td { text-align: right; }

/* --------------------------- Páginas por curso ------------------------ */

.metas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0 12px;
}
.meta-card {
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-primary);
}
.meta-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 24px;
}
/* Punto de color en vez de franja superior. */
.meta-card h3::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--primary-600);
}
.meta-card-fin h3::before { background: var(--success-600); }
.meta-card ul { margin: 0 0 0 16px; }
.meta-card li { font-size: 14px; line-height: 20px; }
.sin-meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-tertiary); }

.curso-tabla { min-width: 0; }
.curso-tabla td { text-align: right; font-variant-numeric: tabular-nums; }

.cursos-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.cursos-nav a {
  display: inline-block;
  min-width: 48px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  background: var(--bg-primary);
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
  transition: border-color 500ms var(--ease), background-color 500ms var(--ease);
}
.cursos-nav a:hover { border-color: var(--text-primary); }
.cursos-nav a.actual {
  border-color: var(--primary-700);
  background: var(--primary-700);
  color: #ffffff;
}

/* ------------------------------- Pie -------------------------------- */

.site-footer {
  padding: 48px 0;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-tertiary);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}
.site-footer a {
  margin-right: 16px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 500ms var(--ease);
}
.site-footer a:hover { color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}