/* Estilos para las páginas legales (aviso-legal, privacidad, cookies,
   acerca-de). Reutiliza las variables de color/tipografía de style.css
   (que se carga antes que esta hoja), pero vuelve al flujo normal de
   documento: style.css fija html/body a overflow:hidden + flex column
   pensado para el shell de la app de una sola pantalla. */

html, body {
  overflow: auto;
  height: auto;
  display: block;
}

body {
  padding: 32px 20px 64px;
}

.legal-doc {
  max-width: 760px;
  margin: 0 auto;
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--text-dim);
  text-decoration: underline;
  font-size: 13px;
}

.legal-doc h1 {
  font-family: var(--font-heading);
  font-size: 26px;
  margin: 0 0 6px;
}

.legal-doc .updated {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 28px;
}

.legal-doc h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  margin: 32px 0 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.legal-doc h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  margin: 20px 0 6px;
}

.legal-doc p,
.legal-doc li {
  line-height: 1.65;
  font-size: 14.5px;
}

.legal-doc ul,
.legal-doc ol {
  padding-left: 22px;
}

.legal-doc a {
  color: var(--accent);
}

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 12px 0;
}

.legal-doc th,
.legal-doc td {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  vertical-align: top;
}

.legal-doc th {
  background: var(--panel-bg-alt);
  font-family: var(--font-heading);
  font-weight: 600;
}

.legal-doc .todo {
  background: rgba(201, 161, 90, 0.15);
  border: 1px dashed var(--warn);
  padding: 10px 14px;
  border-radius: var(--radius);
  color: var(--warn);
  font-size: 13.5px;
  margin: 10px 0;
}

.legal-doc .todo strong {
  color: var(--warn);
}

/* Aviso de traducción de cortesía en las páginas legales en inglés: la
   versión española es la única con valor legal. Mismo lenguaje visual que
   .todo (aviso, no contenido normativo en sí) pero con el acento neutro en
   vez de ámbar, para no leerse como "hay un problema pendiente". */
.legal-doc .courtesy-notice {
  background: var(--panel-bg-alt);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 13.5px;
  margin: 0 0 28px;
}

.lugares-index-list {
  columns: 2;
  column-gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.lugares-index-list li {
  break-inside: avoid;
  padding: 3px 0;
  font-size: 13.5px;
}

@media (max-width: 520px) {
  .lugares-index-list { columns: 1; }
}

/* Barra de marca de las páginas interiores (fichas, índices, legales, metodología):
   lleva a la portada de KronAtlas y al mapa. Sin JS, porque son páginas estáticas. */
body { padding-top: 0; }

.site-bar {
  margin: 0 -20px 32px;
  padding: 10px 20px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
}

.site-bar-in {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.03em;
}

.site-bar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}

.site-bar a:hover,
.site-bar a:focus-visible { color: var(--accent-2); }

.site-bar-map { color: var(--text-dim); }
.site-bar-sep { color: var(--border-strong); font-weight: 300; }