/* Hoja compartida de la serie «La vida real».
 *
 * Los artículos anteriores llevan cada uno sus ~530 líneas de CSS dentro del
 * propio HTML. Para una serie nueva eso no se sostiene: veinte copias de la
 * misma hoja que hay que tocar veinte veces, y medio megabyte que el móvil del
 * paciente se baja entero cada vez. Aquí va una sola, con el mismo lenguaje
 * visual (misma tipografía, mismos verdes, mismas tarjetas) para que un
 * artículo nuevo no desentone al lado de uno viejo.
 *
 * Los artículos existentes NO se tocan. */

:root {
  --tinta: #1A202C;
  --tinta-suave: #555;
  --fondo: #F5F7FA;
  --verde: #2E7D32;
  --verde-claro: #E8F5E9;
  --verde-borde: #C8E6C9;
  --ambar-claro: #FFF3E0;
  --ambar-borde: #FFE0B2;
  --ambar-tinta: #E65100;
  --rojo-claro: #FFEBEE;
  --rojo-borde: #FFCDD2;
  --rojo-tinta: #C62828;
  --indigo-claro: #E8EAF6;
  --indigo-tinta: #3949AB;
}

* { box-sizing: border-box; }

body.articulo {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.articulo-wrap { max-width: 760px; margin: 0 auto; padding: 16px 16px 96px; }

/* ── Cabecera ─────────────────────────────────────────────── */
.volver {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--tinta-suave); text-decoration: none;
  font-size: 14px; font-weight: 500; margin: 8px 0 18px;
}
.volver:hover { color: var(--tinta); }

.serie-chip {
  display: inline-block; background: var(--verde-claro); color: var(--verde);
  border-radius: 50px; padding: 5px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; margin-bottom: 14px;
}

.articulo-titulo {
  font-size: clamp(26px, 6vw, 38px); font-weight: 800;
  line-height: 1.2; margin: 0 0 12px;
}
.articulo-entrada { font-size: 17px; color: var(--tinta-suave); margin: 0 0 8px; }
.articulo-meta { font-size: 13px; color: #8A94A6; margin: 0 0 26px; }

/* ── Secciones ────────────────────────────────────────────── */
.seccion {
  background: white; border-radius: 18px; padding: 22px;
  margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.seccion h2 {
  font-size: 21px; font-weight: 700; margin: 0 0 14px; line-height: 1.3;
}
.seccion h3 {
  font-size: 17px; font-weight: 700; margin: 22px 0 8px;
}
.seccion p { margin: 0 0 14px; color: #3A4250; }
.seccion p:last-child { margin-bottom: 0; }
.seccion ul, .seccion ol { margin: 0 0 14px; padding-left: 22px; color: #3A4250; }
.seccion li { margin-bottom: 8px; }
.seccion strong { color: var(--tinta); }

/* ── Avisos ───────────────────────────────────────────────── */
.aviso {
  border-radius: 0 12px 12px 0; padding: 16px 18px; margin: 18px 0;
  border-left: 4px solid; font-size: 15px;
}
.aviso p:last-child { margin-bottom: 0; }
.aviso .aviso-titulo { font-weight: 700; margin: 0 0 6px; display: block; }
.aviso.clave  { background: var(--verde-claro);  border-color: var(--verde);      }
.aviso.ojo    { background: var(--ambar-claro);  border-color: var(--ambar-tinta); }
.aviso.nunca  { background: var(--rojo-claro);   border-color: var(--rojo-tinta);  }
.aviso.consulta { background: var(--indigo-claro); border-color: var(--indigo-tinta); }

/* ── Comparativa a dos columnas ───────────────────────────── */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
@media (max-width: 560px) { .dos-columnas { grid-template-columns: 1fr; } }
.columna { border-radius: 14px; padding: 16px; font-size: 15px; }
.columna .columna-titulo { font-weight: 700; margin: 0 0 10px; font-size: 15px; }
.columna ul { margin: 0; padding-left: 18px; }
.columna li { margin-bottom: 6px; }
.columna.bien  { background: var(--verde-claro); border: 1px solid var(--verde-borde); }
.columna.bien .columna-titulo { color: var(--verde); }
.columna.mal   { background: var(--rojo-claro);  border: 1px solid var(--rojo-borde); }
.columna.mal .columna-titulo { color: var(--rojo-tinta); }

/* ── Pasos numerados ──────────────────────────────────────── */
.paso {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid #EEF1F5;
}
.paso:last-child { border-bottom: 0; padding-bottom: 0; }
.paso-numero {
  flex: 0 0 32px; height: 32px; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.paso-cuerpo { min-width: 0; }
.paso-cuerpo h3 { margin: 3px 0 6px; font-size: 16px; }
.paso-cuerpo p { margin: 0; font-size: 15px; }

/* ── Tabla ────────────────────────────────────────────────── */
.tabla-envoltorio { overflow-x: auto; margin: 18px 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; }
.tabla th {
  text-align: left; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; color: #8A94A6;
  padding: 8px 10px; border-bottom: 2px solid #EEF1F5;
}
.tabla td { padding: 10px; border-bottom: 1px solid #F2F4F7; vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }

/* ── Infografía ───────────────────────────────────────────── */
.infografia { margin: 20px 0; text-align: center; }
.infografia img { width: 100%; max-width: 620px; height: auto; border-radius: 14px; }
.infografia figcaption { font-size: 13px; color: #8A94A6; margin-top: 8px; }

/* ── Cierre ───────────────────────────────────────────────── */
.resumen {
  background: linear-gradient(135deg, var(--verde-claro) 0%, var(--verde-borde) 100%);
  border-radius: 18px; padding: 22px; margin: 22px 0 0;
}
.resumen h2 { font-size: 19px; margin: 0 0 12px; color: var(--verde); }
.resumen ul { margin: 0; padding-left: 20px; }
.resumen li { margin-bottom: 8px; color: #234B26; }

.siguiente {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: white; border-radius: 14px; padding: 16px 18px; margin-top: 18px;
  text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.siguiente:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.siguiente .siguiente-etiqueta { font-size: 12px; color: #8A94A6; display: block; }
.siguiente .siguiente-titulo { font-weight: 700; font-size: 16px; }

/* ── Navegación inferior ──────────────────────────────────── */
/* Copiada tal cual de los artículos anteriores para que la barra sea la misma
 * en toda la app. Allí va dentro de cada HTML; aquí, una vez. */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-around; align-items: center;
  background: #1A1A2E; border-radius: 28px; padding: 8px 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  max-width: 400px; margin: 0 auto 12px;
  margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 16px; border: none; background: none;
  color: rgba(255,255,255,.45); text-decoration: none;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
  cursor: pointer; transition: all .25s ease; border-radius: 20px;
}
.bottom-nav-item.active { color: #fff; background: rgba(255,255,255,.12); }
.bottom-nav-item:hover { color: rgba(255,255,255,.7); }

/* `hidden` en un <figure> pierde contra `display:block`, así que la figura
   que se esconde a sí misma cuando falta la imagen necesita esta regla. */
.infografia[hidden] { display: none; }

/* En móvil la tabla deja de ser tabla: cada fila se lee como una ficha, con
   la primera celda de título y el resto etiquetado con su columna. Antes se
   desplazaba de lado dentro del envoltorio y el segundo campo se quedaba
   cortado contra el borde sin que nada avisara de que había más. */
@media (max-width: 620px) {
  .tabla-envoltorio { overflow-x: visible; }
  .tabla { display: block; min-width: 0; }
  .tabla thead { display: none; }
  .tabla tbody, .tabla tr, .tabla td { display: block; width: auto; }
  .tabla tr { padding: 12px 0; border-bottom: 1px solid #F2F4F7; }
  .tabla tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .tabla td { padding: 0; border-bottom: 0; }
  .tabla td + td { margin-top: 10px; }
  .tabla td[data-col]::before {
    content: attr(data-col);
    display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: #8A94A6;
  }
  /* La primera celda es el nombre de la fila: hace de título y no necesita
     que le repitan encima cómo se llama su columna. */
  .tabla td:first-child { font-weight: 700; font-size: 16px; color: var(--tinta); }
  .tabla td:first-child::before { display: none; }
}

/* ── Componentes de los artículos clásicos ────────────────── */

/* El recuadro de estudio citado. Estos veinte artículos se apoyan en
   referencias reales —Weigle 2005, Helms 2014, el seguimiento de The Biggest
   Loser— y esa es su mejor baza, así que el estudio se ve. */
.estudio {
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 16px;
  padding: 20px; margin: 20px 0;
}
.estudio-titulo {
  display: block; font-size: 13px; font-weight: 700; color: var(--verde);
  margin-bottom: 10px; line-height: 1.4;
}
.estudio p { font-size: 15px; }
.estudio-grupos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0;
}
.estudio-grupo {
  background: white; border: 1px solid #E9EDF2; border-radius: 12px;
  padding: 14px; text-align: center;
}
.estudio-etiqueta {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: #8A94A6; margin-bottom: 6px;
}
.estudio-dato { display: block; font-size: 26px; line-height: 1.2; margin: 4px 0; }
.estudio-grupo p { font-size: 13px !important; color: var(--tinta-suave); margin: 6px 0 0; }
.estudio-resultado {
  display: block; margin-top: 10px; font-size: 14px; font-weight: 700;
  color: var(--tinta);
}
.estudio-conclusion {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #E2E8F0;
  font-size: 15px; color: var(--tinta);
}

/* El caso práctico: un ejemplo con nombre, para bajar la teoría al suelo. */
.caso {
  background: var(--verde-claro); border-radius: 16px; padding: 20px;
  margin: 20px 0;
}
.caso-titulo {
  display: block; font-weight: 700; font-size: 16px; color: #234B26;
  margin-bottom: 10px;
}
.caso p, .caso li { color: #234B26; }

/* La frase que cierra una idea. */
.cita {
  margin: 22px 0; padding: 4px 0 4px 18px;
  border-left: 4px solid var(--verde);
  font-size: 17px; line-height: 1.6; color: var(--tinta); font-style: italic;
}
.cita p { font-size: inherit; font-style: inherit; }
.cita p:last-child { margin-bottom: 0; }

/* ── Fotografías ──────────────────────────────────────────── */

/* La de cabecera, entre la entradilla y la primera sección. */
.foto-principal {
  margin: 18px 0 4px; border-radius: 18px; overflow: hidden;
  background: #EDF1F5; line-height: 0;
}
.foto-principal img { width: 100%; height: auto; display: block; }

/* Las de dentro del artículo, con pie. */
.foto { margin: 20px 0; }
.foto img { width: 100%; height: auto; border-radius: 14px; display: block; }
.foto figcaption { font-size: 13px; color: #8A94A6; margin-top: 8px; text-align: center; }

/* Igual que las infografías: mientras no exista el fichero, la imagen se
   esconde sola y el artículo se lee sin ella. */
.foto[hidden], .foto-principal[hidden] { display: none; }

@media (max-width: 620px) {
  .estudio-grupos { grid-template-columns: 1fr; }
}