/* Páginas de texto generadas por sitio/generar.py (portada, carreras, calendarios y guías).
   Mismos colores que el mapa (css/base.css), pero sin mapa: ligeras y legibles.

   Tema: sigue el modo claro/oscuro del dispositivo, salvo que la persona haya elegido uno en
   los Ajustes del mapa (la página lo indica con <html data-tema="claro|oscuro">). */

/* Oscuro (por defecto) */
:root {
  --esquema: dark;
  --fondo: #0c1220;
  --fondo-luz: #1a2440;
  --cabecera: rgba(15, 23, 42, 0.75);
  --tarjeta: rgba(18, 28, 50, 0.65);
  --campo: #0f172a;
  --borde: rgba(255, 255, 255, 0.08);
  --borde-fuerte: rgba(255, 255, 255, 0.18);
  --texto: #f8fafc;
  --texto-largo: #e2e8f0;
  --suave: #94a3b8;
  --tenue: #64748b;
  --enlace: #a5b4fc;
  --enlace-hover: #c7d2fe;
  --popular: #06b6d4;
  --trail: #10b981;
  --acento: #6366f1;
  --aviso: #f59e0b;
  --sombra: none;
}

/* Claro: si el dispositivo está en modo claro (y no se eligió oscuro) o si se eligió claro */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --esquema: light;
    --fondo: #f6f8fc;
    --fondo-luz: #e8eefb;
    --cabecera: rgba(255, 255, 255, 0.85);
    --tarjeta: #ffffff;
    --campo: #ffffff;
    --borde: rgba(15, 23, 42, 0.1);
    --borde-fuerte: rgba(15, 23, 42, 0.22);
    --texto: #0f172a;
    --texto-largo: #1e293b;
    --suave: #475569;
    --tenue: #64748b;
    --enlace: #4f46e5;
    --enlace-hover: #3730a3;
    --popular: #0891b2;
    --trail: #059669;
    --aviso: #d97706;
    --sombra: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.04);
  }
}
:root[data-tema="claro"] {
  --esquema: light;
  --fondo: #f6f8fc;
  --fondo-luz: #e8eefb;
  --cabecera: rgba(255, 255, 255, 0.85);
  --tarjeta: #ffffff;
  --campo: #ffffff;
  --borde: rgba(15, 23, 42, 0.1);
  --borde-fuerte: rgba(15, 23, 42, 0.22);
  --texto: #0f172a;
  --texto-largo: #1e293b;
  --suave: #475569;
  --tenue: #64748b;
  --enlace: #4f46e5;
  --enlace-hover: #3730a3;
  --popular: #0891b2;
  --trail: #059669;
  --aviso: #d97706;
  --sombra: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.04);
}

* { box-sizing: border-box; }

/* Relieve de las tarjetas (solo se nota en el tema claro) */
.opciones a, .tarjetas-guias a, .zonas a, .datos div, .indice, .faq details, .calculadora, .formula { box-shadow: var(--sombra); }

body {
  margin: 0;
  background: radial-gradient(circle at 20% 0%, var(--fondo-luz) 0%, var(--fondo) 55%) fixed, var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color-scheme: var(--esquema);
}

a { color: var(--enlace); }
a:hover { color: var(--enlace-hover); }

h1, h2 { font-family: 'Outfit', sans-serif; line-height: 1.2; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); margin: 0.2rem 0 0.8rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 0.8rem; }
h2 small { color: var(--tenue); font-weight: 400; font-size: 0.9rem; }

/* Cabecera y pie */
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--borde);
  background: var(--cabecera); position: sticky; top: 0; backdrop-filter: blur(10px); z-index: 5;
}
.marca { display: flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none;
         font-family: 'Outfit', sans-serif; font-size: 1.35rem; }
.marca img { border-radius: 8px; }
.marca b { color: var(--popular); }
.nav { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.nav a { display: flex; align-items: center; gap: 6px; text-decoration: none; padding: 7px 13px; border-radius: 9999px;
         border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); font-weight: 600; }
.nav a:hover { border-color: rgba(99, 102, 241, 0.5); color: var(--texto); }
.nav a.boton { padding: 7px 14px; }

.contenido { max-width: 860px; margin: 0 auto; padding: 16px 16px 40px; }
.pie { border-top: 1px solid var(--borde); color: var(--tenue); font-size: 0.85rem;
       padding: 20px 16px 32px; text-align: center; }
.pie p { max-width: 760px; margin: 0.5rem auto; }

.migas { font-size: 0.85rem; color: var(--tenue); margin: 6px 0 14px; overflow-wrap: anywhere; }
.migas a { color: var(--suave); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* Botones */
.boton {
  display: inline-block; padding: 9px 16px; border-radius: 9999px; text-decoration: none;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); font-weight: 600;
}
.boton:hover { color: var(--texto); border-color: rgba(99, 102, 241, 0.5); }
.boton.principal { background: linear-gradient(135deg, var(--popular), var(--acento)); border: none; color: #fff; }
.boton.principal:hover { color: #fff; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }

/* Ficha de una carrera */
.resumen { color: var(--suave); font-size: 1.05rem; }
.etiqueta { display: inline-block; margin: 0; padding: 2px 12px; border-radius: 9999px;
            font-size: 0.85rem; font-weight: 600; }
.etiqueta.asfalto { background: rgba(6, 182, 212, 0.15); color: var(--popular); }
.etiqueta.trail { background: rgba(16, 185, 129, 0.15); color: var(--trail); }
.aviso { border-left: 3px solid var(--aviso); background: rgba(245, 158, 11, 0.1);
         padding: 10px 14px; border-radius: 8px; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 18px 0; }
.datos div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 10px 14px; }
.datos dt { color: var(--tenue); font-size: 0.8rem; }
.datos dd { margin: 2px 0 0; font-weight: 600; }
.origen { color: var(--tenue); font-size: 0.85rem; margin-top: 24px; }

.lista-carreras { list-style: none; padding: 0; margin: 0; }
.lista-carreras li { padding: 8px 0; border-bottom: 1px solid var(--borde); }
.lista-carreras span { display: block; color: var(--tenue); font-size: 0.85rem; }

/* Calendarios */
.calendario { width: 100%; border-collapse: collapse; }
.calendario td { padding: 9px 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.calendario .f { white-space: nowrap; color: var(--suave); width: 4.5rem; font-weight: 600; }
.calendario .t { width: 2rem; text-align: center; }
.calendario a { text-decoration: none; font-weight: 600; }
.calendario a:hover { text-decoration: underline; }
.calendario .sub { display: block; color: var(--tenue); font-size: 0.85rem; }

.zonas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.zonas a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 14px; border-radius: 12px;
           background: var(--tarjeta); border: 1px solid var(--borde); text-decoration: none; color: var(--texto); }
.zonas a:hover { border-color: rgba(99, 102, 241, 0.5); }
.zonas span { color: var(--tenue); }
.zonas.grande { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Guías */
h3 { font-family: 'Outfit', sans-serif; font-size: 1.1rem; margin: 1.4rem 0 0.4rem; }
h3 small { color: var(--tenue); font-weight: 400; }
.guia p, .guia li { color: var(--texto-largo); }
.guia li { margin: 0.35rem 0; }
.fecha-guia { color: var(--tenue); font-size: 0.85rem; margin-top: -0.4rem; }
.formula { text-align: center; font-family: 'Outfit', sans-serif; font-size: 1.15rem;
           background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px; }
.tabla-envoltorio { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabla th { text-align: left; color: var(--suave); font-weight: 600; border-bottom: 1px solid var(--borde-fuerte); }
.tabla th, .tabla td { padding: 7px 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td:nth-child(2) { white-space: normal; }
.lista-control { list-style: none; padding: 0; }
.lista-control li::before { content: "☐ "; color: var(--popular); }

.faq details { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; margin: 8px 0; padding: 10px 14px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 8px 0 2px; color: var(--suave); }

.tarjetas-guias { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tarjetas-guias a { display: block; height: 100%; padding: 16px; border-radius: 14px; text-decoration: none;
                    background: var(--tarjeta); border: 1px solid var(--borde); color: var(--texto); }
.tarjetas-guias a:hover { border-color: rgba(99, 102, 241, 0.5); }
.tarjetas-guias .icono { font-size: 1.8rem; display: block; }
.tarjetas-guias b { display: block; font-family: 'Outfit', sans-serif; font-size: 1.1rem; margin: 6px 0; }
.tarjetas-guias .sub { color: var(--suave); font-size: 0.9rem; }
.guias-mini { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tema-guia { margin: 0; color: var(--popular); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.indice { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 16px; margin: 16px 0 8px; }
.indice ol { margin: 6px 0 0; padding-left: 1.3rem; columns: 2; column-gap: 24px; }
.indice li { margin: 3px 0; break-inside: avoid; font-size: 0.92rem; }
.indice a { text-decoration: none; }
.guia h2 { scroll-margin-top: 80px; }
.temas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.temas a { padding: 6px 12px; border-radius: 9999px; background: var(--tarjeta); border: 1px solid var(--borde);
           text-decoration: none; color: var(--texto); font-size: 0.9rem; }
.temas a:hover { border-color: rgba(99, 102, 241, 0.5); }
.sigue-leyendo { margin-top: 2rem; }

/* Páginas informativas (Sobre RunNear, Contacto, Cookies) */
.contacto-correo { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 18px 0;
                   background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); }
.contacto-correo .icono { font-size: 2rem; }
.contacto-correo b { display: block; }
.contacto-correo a { font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.tabla-texto td { white-space: normal; vertical-align: top; }
.tabla-texto td:first-child { min-width: 9rem; }
@media (max-width: 560px) {
  /* En el móvil, cada fila de la tabla como una ficha */
  .tabla-texto, .tabla-texto tbody, .tabla-texto tr, .tabla-texto td { display: block; }
  .tabla-texto thead { display: none; }
  .tabla-texto tr { padding: 10px 0; border-bottom: 1px solid var(--borde); }
  .tabla-texto td { border: none; padding: 2px 0; }
  .tabla-texto td:nth-child(3), .tabla-texto td:nth-child(4) { display: inline; color: var(--tenue); font-size: 0.85rem; }
  .tabla-texto td:nth-child(3)::after { content: " · "; }
}
code { font-size: 0.85em; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 6px; padding: 1px 5px;
       overflow-wrap: anywhere; }

/* Calculadora de ritmo */
.calculadora { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 16px; margin: 18px 0; }
.calculadora .campo { margin: 0 0 14px; border: none; padding: 0; }
.calculadora label, .calculadora legend { display: block; font-weight: 600; margin-bottom: 6px; }
.calculadora fieldset label { font-weight: 400; color: var(--suave); }
.calculadora small { color: var(--tenue); font-weight: 400; }
.calculadora select, .calculadora input[type="number"] {
  background: var(--campo); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: 10px;
  padding: 9px 10px; font: inherit; font-size: 1rem;
}
.calculadora select option { background: var(--campo); color: var(--texto); }
.calculadora #calc-otra { margin-top: 8px; width: 7rem; }
.hms { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hms input { width: 3.8rem; }
.hms span { color: var(--suave); margin-right: 4px; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cifras div { background: rgba(99, 102, 241, 0.12); border-radius: 12px; padding: 10px; text-align: center; }
.cifras span { display: block; color: var(--suave); font-size: 0.8rem; }
.cifras b { font-family: 'Outfit', sans-serif; font-size: 1.3rem; }
.estimacion { color: var(--suave); margin: 12px 0 4px; }
ul.estimacion { margin-top: 0; }
.parciales summary { cursor: pointer; color: var(--enlace); margin-top: 10px; }
.parciales .tabla { max-width: 320px; margin-top: 8px; }

/* Portada */
.portada { text-align: center; padding: 12px 0 4px; }
.portada h1 { font-size: clamp(1.8rem, 5.5vw, 2.8rem); margin-top: 10px; }
.portada .resumen { max-width: 640px; margin: 0 auto 22px; }
.opciones { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.opciones a { display: flex; flex-direction: column; height: 100%; padding: 22px 20px; border-radius: 20px; text-decoration: none;
              color: var(--texto); background: var(--tarjeta); border: 1px solid var(--borde);
              transition: transform 0.18s, border-color 0.18s; }
.opciones a:hover { transform: translateY(-3px); border-color: rgba(99, 102, 241, 0.6); color: var(--texto); }
.opciones li:first-child a { background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(99, 102, 241, 0.25));
                              border-color: rgba(99, 102, 241, 0.45); }
.opciones .icono { font-size: 2.2rem; }
.opciones b { font-family: 'Outfit', sans-serif; font-size: 1.35rem; margin: 8px 0 6px; }
.opciones .sub { color: var(--suave); font-size: 0.95rem; flex: 1; }
.opciones .ir { margin-top: 14px; color: var(--enlace); font-weight: 700; }

@media (max-width: 720px) {
  .opciones { grid-template-columns: 1fr; gap: 10px; }
  .opciones a { display: grid; grid-template-columns: 3rem 1fr; column-gap: 12px; padding: 16px; }
  .opciones .icono { grid-row: span 3; font-size: 2rem; align-self: center; }
  .opciones b { margin: 0 0 2px; font-size: 1.15rem; }
  .opciones .ir { margin-top: 6px; }
}

/* Anuncios (anuncios.js): ocultos hasta que AdSense esté activado */
.anuncio { display: none; }
/* Hueco pedido a Google: visible (Google mide su ancho) pero sin altura ni etiqueta hasta que llega
   un anuncio de verdad ("lleno", lo pone anuncios.js): sin aprobar o sin anuncio, no queda espacio en blanco */
.anuncio.activo { display: block; }
.anuncio.activo.lleno, .anuncio.prueba { display: block; margin: 28px 0; min-height: 250px; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.anuncio.activo.lleno::before { content: "Publicidad"; display: block; font-size: 0.7rem; color: var(--tenue); margin-bottom: 4px; }
.anuncio.prueba { display: grid; place-items: center; border: 2px dashed rgba(245, 158, 11, 0.6); border-radius: 14px;
                  color: var(--aviso); font-size: 0.85rem; text-align: center; padding: 8px; }

@media (max-width: 480px) {
  .cifras b { font-size: 1.05rem; }
  .indice ol { columns: 1; }
  .datos { grid-template-columns: 1fr; }
  /* Cabecera: icono con el nombre pequeño debajo, como en la app */
  .nav { gap: 2px; }
  .nav a, .nav a.boton { flex-direction: column; gap: 0; padding: 2px 7px; border: none; background: none;
                         font-size: 0.66rem; line-height: 1.2; }
  .nav a span:first-child { font-size: 1.2rem; }
  /* Tarjetas de guías compactas: icono a la izquierda */
  .tarjetas-guias a { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 10px; padding: 12px 14px; }
  .tarjetas-guias .icono { grid-row: span 2; font-size: 1.6rem; }
  .tarjetas-guias b { margin: 0 0 2px; font-size: 1rem; }
}