/* =========================================================
   temas.css
   Hoja de estilos compartida — Calidad de Vida (Salvador Pintos)
   Un único archivo para calidaddevida.html y sus 13 subpáginas.
   ========================================================= */

:root {
  --bg:        #F6F7F5;
  --paper:     #FFFFFF;
  --text:      #1E2430;
  --muted:     #5B6570;
  --line:      #E1E4E0;
  --brand:     #123C3C;   /* franja de cabecera, enlaces, botón volver */
  --brand-ink: #0C2A2A;
  --maxw:      760px;

  /* acento por defecto (se sobreescribe por categoría) */
  --accent: var(--brand);
}

/* ---- acentos por categoría ---- */
body.cat-salud       { --accent: #2F6F4E; }  /* población y salud   */
body.cat-economia     { --accent: #B7791F; }  /* pobreza y economía   */
body.cat-tecnologia   { --accent: #5B4B8A; }  /* tecnologías de info  */
body.cat-educacion    { --accent: #2B6CB0; }  /* educación            */
body.cat-energia      { --accent: #0E7C86; }  /* energía              */
body.cat-idh          { --accent: #7A1F3D; }  /* índice síntesis      */

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 19px;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 .5em;
}

a { color: var(--brand); }
a:hover { color: var(--accent); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 64px;
}

img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------
   Enlace de vuelta (arriba y abajo de cada subpágina)
   --------------------------------------------------------- */
.backlink {
  display: inline-block;
  margin-top: 28px;
  font-size: .9rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.backlink:hover { color: var(--accent); text-decoration: underline; }

.backlink-bottom {
  margin-top: 48px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  width: 100%;
}

/* ---------------------------------------------------------
   Cabecera de subpágina de tema
   --------------------------------------------------------- */
.tema-header { margin-top: 8px; }

.cat-label {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 .3em;
}

.tema-header h1 {
  font-size: 1.9rem;
  padding-bottom: .4em;
  border-bottom: 3px solid var(--accent);
  display: inline-block;
}

/* ---------------------------------------------------------
   Texto introductorio (lead) y de análisis
   --------------------------------------------------------- */
.lead {
  margin: 22px 0 8px;
}
.lead p {
  font-size: 1.12rem;
  color: var(--text);
  margin: 0 0 1em;
  text-align: justify;
  hyphens: auto;
}

.analysis { margin-top: 8px; }
.analysis p {
  font-size: 1.12rem;
  margin: 0 0 1.1em;
  text-align: justify;
  hyphens: auto;
}

/* ---------------------------------------------------------
   Recuadro de dato destacado (pull-stat)
   --------------------------------------------------------- */
.stat-callout {
  margin: 26px 0;
  padding: 18px 22px;
  background: var(--paper);
  border-left: 4px solid var(--accent);
  border-radius: 2px;
}
.stat-callout p {
  margin: 0;
  font-size: 1.12rem;
  color: var(--text);
  font-weight: 500;
}

/* ---------------------------------------------------------
   Figura / gráfico
   --------------------------------------------------------- */
.figure-frame {
  margin: 28px 0;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  text-align: center;
}
.figure-frame img { display: block; margin: 0 auto; }
.figure-frame figcaption {
  margin-top: 10px;
  font-size: .88rem;
  font-style: italic;
  color: var(--muted);
}

/* ---------------------------------------------------------
   Fuente / cita al pie
   --------------------------------------------------------- */
.source {
  margin-top: 18px;
  font-size: .85rem;
  color: var(--muted);
  font-style: italic;
}

/* ---------------------------------------------------------
   PÁGINA PRINCIPAL calidaddevida.html
   --------------------------------------------------------- */
.site-header {
  background: var(--brand);
  color: #EFF3F1;
  padding: 44px 24px 34px;
  text-align: center;
}
.site-header h1 {
  color: #fff;
  font-size: 1.7rem;
  margin: 0 0 .15em;
}
.site-header .subtitle {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.1rem;
  color: #CBE0DB;
  margin: 0 0 .8em;
  font-weight: 400;
}
.site-header .author {
  font-size: .9rem;
}
.site-header .author a {
  color: #EFF3F1;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(239,243,241,.5);
}
.site-header .author a:hover { border-color: #EFF3F1; }

.intro {
  padding-top: 36px;
}
.intro h2 {
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--muted);
  margin-bottom: .6em;
}
.intro p {
  font-size: 1.12rem;
  margin: 0 0 1.1em;
  text-align: justify;
  hyphens: auto;
}

.nota {
  margin: 8px 0 40px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: .9rem;
  color: var(--muted);
}
.nota strong { color: var(--text); }

/* tabla de contenidos por categoría */
.toc-section { margin-bottom: 30px; }
.toc-section h3 {
  font-size: 1.15rem;
  color: var(--cat-color, var(--text));
  border-bottom: 2px solid var(--cat-color, var(--line));
  padding-bottom: .3em;
  margin-bottom: .3em;
}
.toc-section .cat-intro {
  font-size: 1rem;
  color: var(--muted);
  margin: .3em 0 .7em;
  text-align: justify;
  hyphens: auto;
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li {
  border-bottom: 1px dotted var(--line);
  padding: .55rem 0;
}
.toc-list li:last-child { border-bottom: none; }
.toc-list a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.toc-list a:hover {
  color: var(--cat-color, var(--brand));
  text-decoration: underline;
}

/* variables de color inline por sección, ver HTML: style="--cat-color:#..." */

.final-note {
  margin: 40px 0 8px;
  padding: 20px 22px;
  background: var(--paper);
  border-left: 4px solid var(--brand);
}
.final-note h3 { font-size: 1.05rem; margin-bottom: .5em; }
.final-note p {
  font-size: 1.12rem;
  margin: 0;
  text-align: justify;
  hyphens: auto;
}

.site-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--muted);
}

/* ---------------------------------------------------------
   Gráficos: toque para ampliar + aviso de orientación
   --------------------------------------------------------- */
.figure-frame img.zoomable { cursor: zoom-in; }

.rotate-hint {
  display: none;
  margin: -6px 0 22px;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
}

.zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 20, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 999;
  cursor: zoom-out;
}
.zoom-overlay img {
  max-width: 100%;
  max-height: 100%;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 640px) {
  body { font-size: 17.5px; }
  .container { padding: 0 18px 48px; }
  .tema-header h1 { font-size: 1.5rem; }
  .site-header { padding: 34px 18px 26px; }
  .site-header h1 { font-size: 1.35rem; }
  .figure-frame { padding: 8px; }
}

@media (max-width: 640px) and (orientation: portrait) {
  .rotate-hint { display: block; }
}