/* =========================================================================
 * extras.css — AÑADIDOS PROPIOS sobre el diseño aprobado
 * =========================================================================
 * El diseño visual vive en diseno-aprobado.css (extraído tal cual del
 * prototipo). Este archivo SOLO añade lo que el prototipo no traía:
 *   · Accesibilidad (Res. 1519/2020 · WCAG 2.1 AA) — obligatorio por ley
 *   · Volver arriba, insignia de conexión
 *   · Compatibilidad para las páginas que ya construimos
 * No redefinir aquí colores ni tipografía del diseño.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1) Accesibilidad base
 * ---------------------------------------------------------------------- */
.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;
}
.sr-only-focusable:focus, .sr-only-focusable:active {
  position: fixed; top: 8px; left: 8px; z-index: 3000;
  width: auto; height: auto; margin: 0; padding: 12px 20px; clip: auto;
  background: var(--hospital); color: #fff; border-radius: var(--radius); font-weight: 700;
}
:focus-visible { outline: 3px solid var(--hospital-cyan); outline-offset: 2px; }

/* Títulos de sección (en el prototipo iban en línea) */
.section-title { font-size: 2rem; color: var(--hospital); text-align: center; margin-bottom: .5rem; }
.section-sub   { text-align: center; color: var(--gray-500); margin: 0 auto 2.5rem; max-width: 60ch; }

/* -------------------------------------------------------------------------
 * 2) MENÚ DE ACCESIBILIDAD (widget flotante propio)
 * ---------------------------------------------------------------------- */
.a11y-launcher {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 1000;
  width: 48px; height: 56px; border: 0; cursor: pointer;
  background: var(--hospital); color: #fff;
  border-radius: 0 12px 12px 0; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: grid; place-items: center;
}
.a11y-launcher:hover { background: var(--hospital-dark); }
.a11y-panel {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 1001;
  width: 360px; max-width: 92vw; background: #fff;
  box-shadow: 6px 0 30px rgba(0,0,0,.25);
  transform: translateX(-105%); transition: transform .25s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.a11y-panel.abierto { transform: translateX(0); }
/* Cabecera del panel: SIEMPRE visible (no se va con el scroll interno),
   así el botón de cerrar queda siempre al alcance. */
.a11y-panel .a11y-head {
  background: var(--hospital); color: #fff; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 2; flex: none;
}
.a11y-panel .a11y-head h2 { color: #fff; font-size: 1.125rem; }
.a11y-panel .a11y-cerrar {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.2); color: #fff;
}
.a11y-panel .a11y-scroll { overflow-y: auto; padding: 16px; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.a11y-opcion {
  background: #fff; border: 2px solid var(--gray-200); border-radius: var(--radius);
  padding: 18px 10px; cursor: pointer; text-align: center; color: var(--gray-700);
  font-family: inherit; font-weight: 600; font-size: .8125rem;
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 96px;
}
.a11y-opcion:hover { border-color: var(--hospital-cyan); }
.a11y-opcion.activo { border-color: var(--hospital); background: var(--hospital-light); color: var(--hospital); }
.a11y-opcion .ico { line-height: 0; }
.a11y-opcion .ico svg { display: block; }
.a11y-opcion .estado-chip { font-size: .6875rem; color: var(--hospital); font-weight: 700; }
.a11y-launcher svg, .a11y-cerrar svg { display: block; }
.a11y-reset {
  margin-top: 14px; width: 100%; padding: 12px; border-radius: var(--radius); cursor: pointer;
  border: 2px solid #D32F2F; background: #fff; color: #D32F2F; font-family: inherit; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.a11y-reset:hover { background: #D32F2F; color: #fff; }
.a11y-reset svg { display: block; }
.a11y-marca { text-align: center; font-size: .6875rem; color: var(--gray-500); padding: 10px; }

/* ---- Efectos de accesibilidad aplicados al <body> ---- */
body.alto-contraste { background: #000 !important; color: #fff !important; }
body.alto-contraste .card, body.alto-contraste .footer-main,
body.alto-contraste .main-nav, body.alto-contraste header { background: #000 !important; color: #fff !important; border-color: #fff !important; }
body.alto-contraste h1, body.alto-contraste h2, body.alto-contraste h3,
body.alto-contraste h4, body.alto-contraste p, body.alto-contraste a,
body.alto-contraste span, body.alto-contraste li { color: #fff !important; }
body.alto-contraste a { color: #ffd400 !important; }

body.a11y-enlaces a { text-decoration: underline !important; outline: 2px solid #E8A046; outline-offset: 2px; background: rgba(232,160,70,.18); }
body.a11y-espaciado * { letter-spacing: .12em !important; word-spacing: .16em !important; }
body.a11y-sin-animacion *, body.a11y-sin-animacion *::before, body.a11y-sin-animacion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.a11y-sin-imagenes img { visibility: hidden !important; }
body.a11y-dislexia, body.a11y-dislexia * { font-family: 'Comic Sans MS', 'Trebuchet MS', Verdana, sans-serif !important; letter-spacing: .05em !important; }
body.a11y-interlineado * { line-height: 2.1 !important; }
body.a11y-alinear * { text-align: left !important; }
/* Cursor grande.
   CORREGIDO: el punto de anclaje va con ESPACIOS REALES tras url(...), no con %20
   (antes la regla era inválida y el navegador la ignoraba por completo). */
body.a11y-cursor, body.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2L4 20L9 15L12 22L15 21L12 14L19 14Z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* Saturación.
   CORREGIDO: antes el filter iba sobre <body>, y un filter en un ancestro
   rompe el position:fixed de sus descendientes (el panel se quedaba pegado
   y no seguía el scroll). Ahora se aplica SOLO al contenido de la página,
   dejando fuera el widget de accesibilidad, que debe seguir flotando. */
body.a11y-sat-baja > header, body.a11y-sat-baja > main, body.a11y-sat-baja > footer,
body.a11y-sat-baja > .footer-govco { filter: saturate(.45); }

body.a11y-sat-gris > header, body.a11y-sat-gris > main, body.a11y-sat-gris > footer,
body.a11y-sat-gris > .footer-govco { filter: grayscale(1); }

body.a11y-sat-alta > header, body.a11y-sat-alta > main, body.a11y-sat-alta > footer,
body.a11y-sat-alta > .footer-govco { filter: saturate(1.7); }

/* -------------------------------------------------------------------------
 * 3) Volver arriba + insignia de conexión
 * ---------------------------------------------------------------------- */
.volver-arriba {
  position: fixed; bottom: 20px; right: 20px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--hospital); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: none; align-items: center; justify-content: center;
}
.volver-arriba.visible { display: flex; }
.volver-arriba svg { display: block; }
.estado-api {
  position: fixed; bottom: 20px; left: 20px; z-index: 90;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 9999px;
  padding: 8px 16px; font-size: .75rem; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,.08);
  color: var(--gray-700);
}
.estado-api .punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: #F3A536; }

/* -------------------------------------------------------------------------
 * 4) Compatibilidad: páginas ya construidas (servicios, noticias, etc.)
 *    Se mapean sus clases al lenguaje visual del diseño aprobado.
 * ---------------------------------------------------------------------- */
.govco-card {
  background: #fff; border-radius: var(--radius); border: 1px solid var(--gray-200);
  padding: 1.5rem; transition: box-shadow .2s, transform .2s;
}
.govco-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.govco-card h3 { font-size: 1.0625rem; color: var(--hospital); margin-bottom: .5rem; }
.govco-card p  { color: var(--gray-600); font-size: .875rem; }
.govco-card .icono {
  width: 3rem; height: 3rem; border-radius: 50%; margin-bottom: 1rem;
  background: var(--hospital-light); color: var(--hospital);
  display: grid; place-items: center;
}
.govco-card .icono svg { display: block; }
.card-meta { margin-top: .75rem; font-size: .75rem; color: var(--gray-500); display: flex; flex-direction: column; gap: 3px; }
.card-meta b { color: var(--gray-700); }
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.titulo-seccion { text-align: center; margin-bottom: 2.5rem; }
.titulo-seccion .kicker { color: var(--hospital-cyan); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .75rem; }
.titulo-seccion h1, .titulo-seccion h2 { color: var(--hospital); margin-top: .375rem; }
.govco-badge {
  display: inline-block; font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; padding: .3125rem .875rem; border-radius: 9999px;
  background: var(--hospital-light); color: var(--hospital);
}
.estado { text-align: center; color: var(--gray-500); padding: 2rem; grid-column: 1 / -1; }
section { padding: 3.5rem 0; }
.contenedor { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; }

/* Botones heredados → estilo del diseño */
.govco-btn { display: inline-block; border-radius: var(--radius); padding: .75rem 2rem; font-weight: 600; font-size: .875rem; cursor: pointer; border: 1px solid transparent; font-family: inherit; }
.govco-btn-primario   { background: #fff; color: var(--hospital); }
.govco-btn-secundario { background: var(--hospital); color: #fff; }
.govco-btn-secundario:hover { background: var(--hospital-dark); }
.govco-btn-borde { background: transparent; color: var(--hospital); border-color: var(--hospital); }
.govco-btn-borde:hover { background: var(--hospital); color: #fff; }

/* Formularios heredados (PQRSD) → estilo del diseño */
.govco-form { max-width: 640px; margin: 0 auto; }
.govco-campo { margin-bottom: 1.25rem; }
.govco-campo label { display: block; font-size: .875rem; font-weight: 500; color: var(--gray-700); margin-bottom: .375rem; }
.govco-campo .req { color: #D32F2F; }
.govco-campo input, .govco-campo select, .govco-campo textarea {
  width: 100%; padding: .625rem .875rem; border: 1px solid var(--gray-300);
  border-radius: var(--radius); font-size: .9375rem; font-family: inherit; color: var(--gray-800); background: #fff;
}
.govco-campo input:focus, .govco-campo select:focus, .govco-campo textarea:focus {
  border-color: var(--hospital-cyan); box-shadow: 0 0 0 3px rgba(0,175,239,.12); outline: none;
}
.govco-campo textarea { resize: vertical; min-height: 130px; }
.govco-ayuda { font-size: .75rem; color: var(--gray-500); margin-top: .25rem; }
.govco-mensaje { padding: 1rem 1.125rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-weight: 500; }
.govco-mensaje.ok    { background: #e8f6ef; color: #06603f; border: 1px solid #069169; }
.govco-mensaje.error { background: #fdeaec; color: #7a0417; border: 1px solid #D32F2F; }

@media (max-width: 768px) {
  .a11y-launcher { width: 40px; height: 48px; }
}

/* Sustituto elegante cuando falta la imagen de una noticia
   (los medios de hlpl.gov.co están rotos — ver DIAGNOSTICO-MEDIOS-ROTOS.md) */
.sin-imagen {
  width: 100%; height: 196px;
  background: linear-gradient(135deg, var(--hospital) 0%, var(--hospital-cyan) 100%);
  position: relative;
}
.sin-imagen::after {
  content: '🏥'; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: 2.5rem; opacity: .35;
}

/* ═══════════════════════════════════════════════════════════════════════
   Contenido que viene de WordPress (pagina.php)
   El equipo lo escribe en el editor de wp-admin; aquí se le da la
   tipografía del diseño aprobado para que no desentone con el resto.
   ═══════════════════════════════════════════════════════════════════════ */
.contenido-wp { font-size: 1rem; line-height: 1.8; color: var(--gray-700); }

.contenido-wp > * + * { margin-top: 1.25rem; }

.contenido-wp h2 { font-size: 1.5rem; margin-top: 2.5rem; color: var(--gray-800); }
.contenido-wp h3 { font-size: 1.25rem; margin-top: 2rem; color: var(--gray-800); }
.contenido-wp h4 { font-size: 1.0625rem; margin-top: 1.5rem; color: var(--gray-800); }

.contenido-wp a { color: var(--hospital); text-decoration: underline; }
.contenido-wp a:hover { color: var(--hospital-cyan); }

.contenido-wp ul, .contenido-wp ol { padding-left: 1.5rem; }
.contenido-wp li + li { margin-top: .375rem; }

.contenido-wp img { border-radius: var(--radius); margin: 1.5rem 0; }
.contenido-wp figure { margin: 1.5rem 0; }
.contenido-wp figcaption {
  font-size: .8125rem; color: var(--gray-500); text-align: center; margin-top: .5rem;
}

.contenido-wp blockquote {
  border-left: 3px solid var(--hospital-cyan);
  padding: .25rem 0 .25rem 1.25rem; margin: 1.75rem 0;
  color: var(--gray-600); font-style: italic;
}

/* Las tablas se desbordan en móvil: se les da su propio scroll. */
.contenido-wp table {
  width: 100%; border-collapse: collapse; font-size: .875rem; margin: 1.5rem 0;
}
.contenido-wp table th, .contenido-wp table td {
  border: 1px solid var(--gray-200); padding: .625rem .875rem; text-align: left;
}
.contenido-wp table th { background: var(--gray-50); font-weight: 600; }
.contenido-wp .wp-block-table { overflow-x: auto; }

.contenido-wp iframe, .contenido-wp video { max-width: 100%; border-radius: var(--radius); }
.contenido-wp .wp-block-embed__wrapper { position: relative; }

/* Compatibilidad con contenido antiguo hecho con el maquetador Gutentor.
   Ese plugin ya no está instalado, así que sus clases de alineación quedaron
   sin efecto y los textos que el equipo centró o justificó se ven todos a la
   izquierda. Estas reglas devuelven la intención original sin instalar nada. */
.contenido-wp .text-align-center-desktop  { text-align: center; }
.contenido-wp .text-align-justify-desktop { text-align: justify; }
.contenido-wp .text-align-right-desktop   { text-align: right; }
.contenido-wp .gutentor-text-wrap         { width: 100%; }

@media (max-width: 768px) {
  .contenido-wp .text-align-center-mobile  { text-align: center; }
  .contenido-wp .text-align-justify-mobile { text-align: left; }  /* justificar en móvil deja huecos feos */
}

/* ═══════════════════════════════════════════════════════════════════════
   Menú desplegable — el mismo que tiene el sitio original
   Las opciones salen del menú que el equipo administra en wp-admin.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-desplegable { position: relative; }

.nav-boton {
  display: flex; align-items: center; gap: .3rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.nav-boton svg { transition: transform .18s; opacity: .65; }
.nav-boton[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }

.submenu {
  position: absolute; top: calc(100% + .625rem); left: 50%; transform: translateX(-50%);
  z-index: 60; min-width: 15rem; max-width: 22rem;
  margin: 0; padding: .5rem; list-style: none;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(5, 50, 114, .16);
}
/* Puentecito invisible: evita que el menú se cierre al mover el ratón hacia él. */
.submenu::before { content: ""; position: absolute; top: -.625rem; left: 0; right: 0; height: .625rem; }

.submenu li { position: relative; }
.submenu a {
  display: block; padding: .5rem .75rem; border-radius: 6px;
  font-size: .875rem; line-height: 1.4; color: var(--gray-700);
  transition: background .14s, color .14s;
}
.submenu a:hover, .submenu a:focus-visible {
  background: var(--hospital-light); color: var(--hospital);
}

/* Tercer nivel: se muestra sangrado dentro del propio desplegable, que es más
   fácil de usar que un submenú lateral que se escapa al mover el ratón. */
.subsubmenu { list-style: none; margin: 0 0 .25rem; padding: 0 0 0 .75rem; }
.subsubmenu a { font-size: .8125rem; color: var(--gray-600); padding: .375rem .75rem; }
.subsubmenu a::before { content: "– "; opacity: .5; }

/* --- Menú móvil: acordeones --- */
.mobile-acordeon {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  text-align: left;
}
.mobile-acordeon svg { transition: transform .18s; opacity: .6; flex: none; }
.mobile-acordeon[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-sub {
  padding-left: .875rem;
  border-left: 2px solid var(--hospital-light);
  margin: .125rem 0 .375rem .5rem;
}
.mobile-sub .mobile-link { font-size: .875rem; color: var(--gray-600); }
.mobile-sub .nivel-3 { padding-left: 1rem; font-size: .8125rem; opacity: .85; }
.mobile-sub .nivel-3::before { content: "– "; opacity: .5; }

/* En pantallas medianas el menú es largo: que pueda envolver sin romperse. */
@media (max-width: 1180px) {
  .nav-principal { gap: 1rem !important; font-size: .9375rem; }
}

/* Tarjeta de servicio y fila de informe: ambas son enlaces completos ahora. */
.cuadro-icono-servicio {
  width: 2.75rem; height: 2.75rem; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hospital-light); color: var(--hospital);
}
a.informe-row:hover { background: var(--gray-50); }
a.informe-row:last-child { border-bottom: 0 !important; }
a.card:hover { border-color: var(--hospital-cyan); }

/* ── Convivencia con la barra de administración de WordPress ─────────────
   Esa barra es fija y ocupa los primeros 32 px (46 en móvil). Lo que también
   sea fijo y esté pegado arriba tiene que bajar, o queda tapado. */
body.admin-bar .cms-aviso { top: 32px; }
body.admin-bar .a11y-panel { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .cms-aviso { top: 46px; }
  body.admin-bar .a11y-panel { top: 46px; }
}
/* La barra usa su propia tipografía; que no herede la del sitio. */
#wpadminbar { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* ═══════════════════════════════════════════════════════════════════════
   Barra del equipo — solo la ve quien administra el sitio
   Cumple la misma función que la barra de WordPress, pero es nuestra:
   trae lo que sirve aquí y nada más.
   ═══════════════════════════════════════════════════════════════════════ */
.barra-equipo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 .75rem; height: 34px;
  background: #1d2327; color: #f0f0f1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .8125rem; line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.barra-equipo .be-izq,
.barra-equipo .be-der { display: flex; align-items: center; gap: .125rem; min-width: 0; }

.barra-equipo .be-item {
  display: inline-flex; align-items: center; height: 34px; padding: 0 .75rem;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  color: #c3c4c7; font: inherit; text-decoration: none;
  transition: background .12s, color .12s;
}
.barra-equipo .be-item:hover { background: #2c3338; color: #72aee6; }
.barra-equipo .be-destacado { color: #f0f0f1; font-weight: 600; }

.barra-equipo .be-quien {
  padding: 0 .625rem; color: #a7aaad;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-equipo .be-rol {
  margin-left: .375rem; padding: .125rem .4rem; border-radius: 999px;
  background: rgba(168,207,69,.18); color: #cbe89a; font-size: .6875rem;
}

/* El sitio baja para dejarle sitio a la barra. */
body.con-barra-equipo { padding-top: 34px; }
body.con-barra-equipo .cms-aviso { top: 34px; }

/* En el teléfono la barra va en UNA fila que se desliza de lado. Antes se
   partía en dos o tres renglones, más alta que el hueco de 68 px que se le
   dejaba, y tapaba la franja GOV.CO de arriba. */
@media (max-width: 860px) {
  .barra-equipo {
    height: 40px; padding: 0 .25rem; gap: .5rem;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .barra-equipo::-webkit-scrollbar { display: none; }
  .barra-equipo .be-izq,
  .barra-equipo .be-der { flex: none; }
  .barra-equipo .be-item { height: 40px; padding: 0 .625rem; font-size: .8125rem; }
  .barra-equipo .be-quien { display: none; }
  body.con-barra-equipo { padding-top: 40px; }
  body.con-barra-equipo .cms-aviso { top: 40px; }
}

/* ── Página creada pero todavía sin contenido ───────────────────────────
   Antes quedaba un hueco blanco que parecía un error del sitio. Decirlo
   con claridad es más honesto con el ciudadano que dejarlo en blanco. */
.aviso-vacio {
  text-align: center; padding: 3rem 1.5rem;
  background: var(--gray-50); border: 1px dashed var(--gray-300);
  border-radius: var(--radius); color: var(--gray-600);
}
.aviso-vacio svg { color: var(--gray-400); margin-bottom: .875rem; }
.aviso-vacio h2 { font-size: 1.125rem; color: var(--gray-700); margin-bottom: .5rem; }
.aviso-vacio p { font-size: .9375rem; line-height: 1.7; max-width: 34rem; margin: 0 auto; }
.aviso-vacio a { color: var(--hospital); text-decoration: underline; }
.aviso-vacio .para-el-equipo {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--gray-200); font-size: .875rem;
}

/* ── Imágenes que ya no existen en el servidor ──────────────────────────
   Faltan cerca de 390 archivos de 2017-2023. Mientras aparecen los
   respaldos, un ícono de imagen rota en mitad del texto se ve peor que
   no mostrar nada: se ocultan sin dejar hueco. */
.contenido-wp img.imagen-perdida { display: none; }
.contenido-wp figure:has(> img.imagen-perdida) { display: none; }

/* Las dos formas de editar se distinguen a simple vista:
   "Editar página" (contenido, en WordPress) va destacada;
   "Editar textos" (interfaz, aquí mismo) va en tono secundario. */
.barra-equipo .be-secundario { color: #9ec378; }
.barra-equipo .be-secundario:hover { color: #cbe89a; background: rgba(168,207,69,.12); }
.barra-equipo .be-sep {
  width: 1px; height: 18px; margin: 0 .375rem;
  background: rgba(255,255,255,.16); flex: none;
}

/* ── Videos y contenido incrustado ──────────────────────────────────────
   WordPress guarda el ancho y el alto originales del video (1170x658). Al
   limitar el ancho al del texto, el alto se quedaba igual y el video salía
   deformado: en móvil quedaba más alto que ancho. Aquí se fija la proporción
   correcta y el alto se calcula solo. */
.contenido-wp .wp-block-embed iframe,
.contenido-wp iframe[src*="youtube"],
.contenido-wp iframe[src*="youtu.be"],
.contenido-wp iframe[src*="vimeo"],
.contenido-wp iframe[src*="facebook"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  display: block;
}
.contenido-wp .wp-block-embed,
.contenido-wp .wp-block-embed__wrapper { max-width: 100%; margin: 1.75rem 0; }
.contenido-wp .wp-block-embed figcaption { text-align: center; }

/* Los demás incrustados (mapas, documentos) al menos no se desbordan. */
.contenido-wp iframe { max-width: 100%; }

/* ── Bloques de plugins que ya no están instalados ──────────────────────
   El hospital usó en su día Gutentor y Blockspare. Esos plugins se quitaron,
   pero sus bloques siguen guardados en el contenido. Sin su CSS, los
   acordeones aparecerían con todo abierto y sin forma. Se les da un aspecto
   sobrio para que se lean bien, en vez de dejarlos sueltos. */
.contenido-wp [class*="blockspare-accordion-item"] {
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-bottom: .75rem; background: var(--gray-50);
}
.contenido-wp [class*="accordion-title"],
.contenido-wp [class*="accordion__title"] {
  font-weight: 700; color: var(--gray-800); margin-bottom: .5rem;
}
.contenido-wp [class*="blockspare"] [hidden],
.contenido-wp [class*="gutentor"] [hidden] { display: block !important; }

/* ── Lo que el equipo publica desde el editor de WordPress ──────────────
   El editor deja poner de todo: imágenes, videos, botones, galerías,
   documentos PDF, audio. WordPress trae los estilos de sus bloques (la hoja
   block-library que carga pagina.php), pero el color del texto y otros
   detalles los pone normalmente el TEMA, y aquí no hay tema: el sitio nuevo
   no ejecuta WordPress. Esto cubre ese hueco. */

/* Botones. Sin esto heredaban el azul y el subrayado de los enlaces del
   texto, y salía letra azul subrayada sobre el fondo de color del botón. */
.contenido-wp .wp-block-button__link,
.contenido-wp .wp-element-button {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  line-height: 1.3;
  transition: filter .15s ease;
}
.contenido-wp .wp-block-button__link:hover { filter: brightness(1.1); color: #fff; }
/* Botón de contorno: ahí la letra sí lleva color, no fondo. */
.contenido-wp .is-style-outline .wp-block-button__link {
  color: var(--hospital); border: 2px solid currentColor; background: transparent;
}
.contenido-wp .wp-block-buttons {
  display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0;
}
.contenido-wp .wp-block-buttons.is-content-justification-center { justify-content: center; }

/* Video subido al propio WordPress (no incrustado de YouTube). */
.contenido-wp video, .contenido-wp .wp-block-video video {
  width: 100%; height: auto; display: block; margin: 1.5rem 0;
  border-radius: var(--radius); background: #000;
}
.contenido-wp audio { width: 100%; display: block; margin: 1.5rem 0; }

/* Documentos PDF puestos con el bloque "Archivo": WordPress los muestra
   dentro de un visor. Sin alto propio se veía como una franja de un dedo. */
.contenido-wp .wp-block-file { margin: 1.75rem 0; }
.contenido-wp .wp-block-file__embed,
.contenido-wp .wp-block-file object,
.contenido-wp .wp-block-file embed {
  width: 100%; min-height: 32rem; border: 1px solid var(--gray-200);
  border-radius: var(--radius); display: block;
}
.contenido-wp .wp-block-file__button {
  display: inline-block; margin-left: .75rem; padding: .4rem 1rem;
  background: var(--hospital); color: #fff; text-decoration: none;
  border-radius: 9999px; font-size: .8125rem; font-weight: 600;
}
@media (max-width: 640px) {
  .contenido-wp .wp-block-file__embed,
  .contenido-wp .wp-block-file object { min-height: 20rem; }
}

/* Galerías: en pantallas pequeñas WordPress las deja en varias columnas
   estrechas donde no se distingue nada. */
@media (max-width: 640px) {
  .contenido-wp .wp-block-gallery.has-nested-images { display: block; }
  .contenido-wp .wp-block-gallery.has-nested-images figure.wp-block-image {
    width: 100% !important; margin: 0 0 .75rem;
  }
}

/* Columnas: en móvil se apilan, si no quedan tiras de texto ilegibles. */
@media (max-width: 768px) {
  .contenido-wp .wp-block-columns { display: block; }
  .contenido-wp .wp-block-column { width: 100% !important; margin-bottom: 1.5rem; }
}

/* Separadores y espaciadores del editor. */
.contenido-wp .wp-block-separator {
  border: 0; border-top: 1px solid var(--gray-200); margin: 2.5rem auto; max-width: 8rem;
}
.contenido-wp .wp-block-spacer { display: block; }

/* Nada de lo publicado debe empujar la página a lo ancho. */
.contenido-wp { overflow-wrap: break-word; }
.contenido-wp img, .contenido-wp figure, .contenido-wp table { max-width: 100%; }

/* ── Columnas del editor: el fallo de Misión / Visión ───────────────────
   WordPress NO trae la separación entre columnas en la hoja de sus bloques.
   La calcula el tema y la escribe en un <style> propio de cada página
   (esas clases wp-container-core-columns-…). Aquí no hay tema, así que las
   dos columnas quedaban pegadas: el texto de Misión terminaba y el de
   Visión empezaba en la misma línea, sin un dedo de separación.
   Se define la separación aquí, sin depender de nada de WordPress. */
.contenido-wp .wp-block-columns {
  display: flex;
  /* El !important es necesario: la hoja de bloques de WordPress fuerza
     flex-wrap:nowrap por encima de 782px, y con eso cuatro columnas se
     salían del ancho del texto por la derecha. Se veía como si la página
     estuviera descuadrada hacia la izquierda. */
  flex-wrap: wrap !important;
  align-items: flex-start;
  gap: 2.5rem;
  margin: 2rem 0;
}
.contenido-wp .wp-block-column {
  /* 14rem es el ancho mínimo con el que una columna sigue siendo legible.
     Si no caben todas, bajan a la fila siguiente en vez de estrecharse
     hasta partir las palabras por la mitad ("Responsabilida-d"). */
  /* 16rem es el ancho con el que una columna se lee cómoda. Con el texto a
     52rem de ancho eso deja dos columnas por fila: cuatro valores salen en
     dos filas de dos, en vez de cuatro tiras estrechas desbordadas. */
  flex: 1 1 16rem;
  /* El min-width es lo que de verdad las obliga a bajar de fila: sin él,
     flex las encoge por debajo de ese ancho y vuelven a partirse las
     palabras. El min() evita que se desborden en un móvil estrecho. */
  min-width: min(16rem, 100%);
  overflow-wrap: break-word;
}
/* Anchos que el editor deja escritos (una columna al 33%, etc.). */
.contenido-wp .wp-block-column[style*="flex-basis"] { flex-grow: 0; }

/* En pantallas estrechas se apilan. 782px es el corte que usa WordPress. */
@media (max-width: 782px) {
  .contenido-wp .wp-block-columns { display: block; }
  .contenido-wp .wp-block-column {
    width: 100% !important; flex-basis: auto !important; margin-bottom: 2rem;
  }
}

/* Texto justificado dentro de una columna estrecha: se abren huecos enormes
   entre palabras y cuesta leerlo. Las pautas de accesibilidad desaconsejan
   justificar en bloques angostos, así que ahí se alinea a la izquierda. */
.contenido-wp .wp-block-column .text-align-justify-desktop,
.contenido-wp .wp-block-column p { text-align: left; }
.contenido-wp .wp-block-column .text-align-center-desktop { text-align: center; }

/* Grupos: sin tema quedan sin ancho ni separación propios. */
.contenido-wp .wp-block-group { margin: 1.5rem 0; }
.contenido-wp .wp-block-group__inner-container > * + * { margin-top: 1rem; }

/* Nada de lo publicado debe salirse del ancho de la página, ni siquiera lo
   que el editor marcó como "ancho completo": aquí el contenido vive dentro
   de una caja centrada y un desbordamiento rompería la maqueta. */
.contenido-wp .alignfull,
.contenido-wp .alignwide { max-width: 100%; margin-left: 0; margin-right: 0; }

/* Íconos del maquetador Gutentor. Usaban la tipografía Font Awesome, que ya
   no se carga, así que el hueco quedaba vacío sin que se viera nada.
   Se quita el hueco en vez de dejar un espacio sin explicación. */
.contenido-wp .gutentor-element-icon-box:empty,
.contenido-wp .gutentor-element-icon i[class*="fa-"] { display: none; }
.contenido-wp .gutentor-element-icon { margin: 0; padding: 0; min-height: 0; }

/* ── Bloques "Detalles" ─────────────────────────────────────────────────
   Son los que salieron de los acordeones de las rendiciones de cuentas:
   un título que se pulsa y despliega el video. WordPress apenas les da
   estilo, así que aquí se les da el del hospital. */
.contenido-wp .wp-block-details {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: #fff;
  padding: 1rem 1.25rem;
  margin: .75rem 0;
}
.contenido-wp .wp-block-details[open] { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.contenido-wp .wp-block-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  list-style: none;         /* se dibuja el signo a mano, más visible */
}
.contenido-wp .wp-block-details summary::-webkit-details-marker { display: none; }
.contenido-wp .wp-block-details summary::before {
  content: "+";
  flex: none;
  width: 1.25rem; height: 1.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--hospital); color: #fff;
  font-size: .875rem; line-height: 1;
}
.contenido-wp .wp-block-details[open] summary::before { content: "–"; }
.contenido-wp .wp-block-details summary:focus-visible {
  outline: 2px solid var(--hospital); outline-offset: 3px;
}
.contenido-wp .wp-block-details > *:not(summary) { margin-top: 1rem; }

/* ── "Medios y texto" al que le falta la imagen ─────────────────────────
   Ese bloque parte la fila en dos: imagen a un lado, texto al otro. Si la
   imagen es de las que faltan en el servidor, quedaba media fila en blanco
   y el texto apretado en la otra mitad. Cuando no hay imagen que enseñar,
   el texto ocupa el ancho entero. */
.contenido-wp .wp-block-media-text.sin-medio { display: block; }
.contenido-wp .wp-block-media-text.sin-medio .wp-block-media-text__media { display: none; }
.contenido-wp .wp-block-media-text.sin-medio .wp-block-media-text__content { padding: 0; }

/* ── Números de página del listado de noticias ──────────────────────────
   Ocho noticias por página. Con más de cien entradas publicadas, sacarlas
   todas de una vez daba una página que en el celular no se acababa nunca. */
.paginacion {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .4rem; margin: 3rem 0 1rem;
}
.pag-btn {
  min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700);
  border-radius: 9999px; font-size: .9375rem; font-weight: 600; cursor: pointer;
  font-family: inherit; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pag-btn:hover:not(:disabled) { background: var(--hospital-light); border-color: var(--hospital); color: var(--hospital); }
.pag-btn.actual {
  background: var(--hospital); border-color: var(--hospital); color: #fff; cursor: default;
}
.pag-btn:disabled { opacity: .35; cursor: default; }
.pag-btn:focus-visible { outline: 2px solid var(--hospital); outline-offset: 2px; }
.pag-flecha { font-size: 1.25rem; }
.pag-puntos { padding: 0 .25rem; color: var(--gray-500); user-select: none; }

@media (max-width: 640px) {
  .paginacion { gap: .3rem; }
  .pag-btn { min-width: 2.25rem; height: 2.25rem; font-size: .875rem; }
}

/* La rejilla de noticias: cuatro por fila, como el diseño pedido. */
#lista-noticias.grid-4 { align-items: stretch; }
#lista-noticias .news-card { display: flex; flex-direction: column; height: 100%; }

/* ── Tarjetas de noticias y notas de salud: todas del mismo alto ────────
   Los resúmenes que escribe el equipo son muy desiguales: unos de una línea
   y otros de seis. Con eso las tarjetas quedaban descuadradas unas respecto
   a otras. Aquí el título ocupa como mucho dos líneas y el resumen tres,
   siempre, y el "Leer más" se va al fondo de la tarjeta. Así la fila queda
   pareja sin recortar el texto a mitad de palabra. */
.tarjeta-titulo,
.tarjeta-resumen {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-titulo  { -webkit-line-clamp: 2; }
.tarjeta-resumen { -webkit-line-clamp: 3; }

/* El pie de la tarjeta ("Leer más →") baja siempre al fondo. */
.tarjeta-pie { margin-top: auto; }

/* Para que ese "margin-top:auto" tenga contra qué empujar, la tarjeta y su
   caja de texto tienen que ser columnas de alto completo. */
#lista-noticias .news-card,
#lista-consejos .card {
  display: flex; flex-direction: column; height: 100%;
}
#lista-noticias .news-card > div { display: flex; flex-direction: column; flex: 1; }

/* En el celular el texto se lee de una vez: ahí no hace falta recortarlo. */
@media (max-width: 640px) {
  .tarjeta-resumen { -webkit-line-clamp: 4; }
}

/* ── Carrusel de tarjetas (solo en el celular) ──────────────────────────
   Dos tarjetas a la vista, flechas a los lados y puntos abajo. El deslizar
   con el dedo lo hace el propio navegador: la pista es una caja que se
   desplaza a lo ancho y se engancha en cada grupo (scroll-snap). Por eso no
   hace falta ninguna librería y el gesto se siente como en cualquier app. */
/* Las flechas van ENCIMA de la pista, no al lado: en un teléfono, dos
   botones ocupando sitio dejaban las tarjetas en 118 px de ancho, ilegibles. */
.carrusel { position: relative; }

.carrusel-pista {
  display: flex;
  gap: .75rem;
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .25rem;                 /* que la sombra de la tarjeta no se corte */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* la barra sobra: ya están las flechas */
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista:focus-visible { outline: 2px solid var(--hospital); outline-offset: 2px; }

.carrusel-pista > * {
  flex: 0 0 calc((100% - (var(--por-vista) - 1) * .75rem) / var(--por-vista));
  scroll-snap-align: start;
  min-width: 0;
}

/* Los mandos van en una fila debajo de la tarjeta: flecha, puntos, flecha.
   Puestas encima tapaban la foto y chocaban con el botón flotante de
   accesibilidad, que va fijo a la izquierda y a media pantalla. */
.carrusel-mandos {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem; margin-top: 1rem;
}
.carrusel-flecha {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--gray-200); background: #fff; color: var(--hospital);
  border-radius: 50%; font-size: 1.35rem; line-height: 1; cursor: pointer;
  font-family: inherit;
}
/* La flecha que no lleva a ninguna parte se apaga pero NO se esconde: así
   siempre se ve que el carrusel se puede mover en los dos sentidos. */
.carrusel-flecha:disabled { opacity: .3; pointer-events: none; }
.carrusel-flecha:focus-visible { outline: 2px solid var(--hospital); outline-offset: 2px; }

.carrusel-puntos { display: flex; justify-content: center; gap: .4rem; }
.carrusel-punto {
  width: .5rem; height: .5rem; padding: 0;
  border: 0; border-radius: 50%; background: var(--gray-300); cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.carrusel-punto.activo { background: var(--hospital); transform: scale(1.25); }
.carrusel-punto:focus-visible { outline: 2px solid var(--hospital); outline-offset: 3px; }

/* Cuando hay muchas tarjetas no se pintan puntos, sino "3 / 19": veinte
   motas en una fila no las distingue nadie, y menos con el dedo. */
.carrusel-cuenta {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gray-600, #4b5563);
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
  text-align: center;
}

.carrusel-pie { text-align: center; margin-top: 1.25rem; }
.carrusel-mas {
  border: 1px solid var(--hospital); background: #fff; color: var(--hospital);
  padding: .55rem 1.4rem; border-radius: 9999px;
  font-family: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.carrusel-mas:disabled { opacity: .6; cursor: default; }

/* Las tarjetas del carrusel van todas del mismo alto. NO se les pone
   height:100%: una altura explícita anula el estirado natural del flex y
   cada tarjeta volvía a medir lo que midiera su texto. Basta con dejar que
   la fila las estire, que es lo que hace de fábrica. */
.carrusel-pista { align-items: stretch; }
.carrusel-pista > * { height: auto; }

/* Con UNA tarjeta a la vista hay sitio de sobra, así que la foto y el texto
   van a tamaño normal. Con dos quedaban en 154 px de ancho y no se leía. */
.carrusel-pista .news-card img,
.carrusel-pista .news-card .sin-imagen { height: 180px !important; min-height: 0 !important; }
.carrusel-pista .tarjeta-resumen { -webkit-line-clamp: 3; }

@media (prefers-reduced-motion: reduce) {
  .carrusel-pista { scroll-behavior: auto; }
  .carrusel-punto { transition: none; }
}

/* ── La rejilla de "Últimas entradas" de WordPress ──────────────────────
   La usa la página Notas de Salud. WordPress la deja en tres columnas fijas
   incluso en el teléfono, donde cada una queda en un palmo de ancho. Aquí se
   le da el aire del resto del sitio y una sola columna en pantalla pequeña. */
.contenido-wp .wp-block-latest-posts.is-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.contenido-wp .wp-block-latest-posts.is-grid > li {
  display: flex; flex-direction: column; margin: 0;
}
.contenido-wp .wp-block-latest-posts .wp-block-latest-posts__featured-image img {
  width: 100%; height: 170px; object-fit: cover;
  border-radius: var(--radius); margin: 0 0 .875rem;
}
.contenido-wp .wp-block-latest-posts__post-title {
  font-weight: 700; font-size: 1rem; line-height: 1.4;
  color: var(--gray-800); text-decoration: none;
}
.contenido-wp .wp-block-latest-posts__post-title:hover { color: var(--hospital); }
.contenido-wp .wp-block-latest-posts__post-date {
  display: block; font-size: .75rem; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: .05em; margin: .3rem 0 .5rem;
}
.contenido-wp .wp-block-latest-posts__post-excerpt {
  font-size: .875rem; color: var(--gray-600); line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 900px) {
  .contenido-wp .wp-block-latest-posts.is-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .contenido-wp .wp-block-latest-posts.is-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contenido-wp .wp-block-latest-posts .wp-block-latest-posts__featured-image img { height: 200px; }
}

/* El "Read more" que mete WordPress al final del resumen sale en inglés y
   repite lo que ya hace el título, que es un enlace. Se retira. */
.contenido-wp .wp-block-latest-posts__post-excerpt a { display: none; }

/* Si la foto de una entrada es de las que faltan, se quita también su hueco:
   la imagen va dentro de un envoltorio propio que, vacío, seguía reservando
   sitio y dejaba un claro enorme entre una entrada y la siguiente. */
.contenido-wp .wp-block-latest-posts__featured-image:has(img.imagen-perdida) { display: none; }
.contenido-wp .wp-block-latest-posts__featured-image img { display: block; }

/* ── Cuando la publicación es un video ──────────────────────────────────
   WordPress no tiene "video destacado", solo imagen. Si la entrada no lleva
   imagen pero sí un video de YouTube, se usa la miniatura del video y se le
   pinta encima el triángulo de reproducir, para que se entienda de un
   vistazo que ahí hay un video y no una foto. */
.miniatura-video { position: relative; display: block; overflow: hidden; }
.miniatura-video img { display: block; }
.marca-play {
  position: absolute; inset: 0; margin: auto;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
  transition: background .15s ease, transform .15s ease;
}
.marca-play::after {
  content: ""; display: block;
  border-style: solid; border-width: .5rem 0 .5rem .85rem;
  border-color: transparent transparent transparent #fff;
  margin-left: .2rem;
}
.card:hover .marca-play, .news-card:hover .marca-play {
  background: rgba(0,0,0,.72); transform: scale(1.06);
}
.cabecera-nota { border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; }
.cabecera-nota .sin-imagen { height: 150px; }

@media (prefers-reduced-motion: reduce) {
  .marca-play { transition: none; }
}

/* El video de la miniatura es solo una imagen quieta: no debe robarle el
   clic al enlace de la tarjeta ni ofrecer sus propios controles. */
.miniatura-video video { pointer-events: none; display: block; background: #0b2a4a; }
.miniatura-video .sin-imagen { border-radius: 0; }