/* =========================================================================
 * sistema.css — El sistema visual del portal
 * =========================================================================
 * QUÉ ES ESTO
 *
 * Hasta ahora los colores, los tamaños y los espacios estaban repetidos a
 * mano en cinco hojas de estilo. Cambiar un azul obligaba a buscarlo en todas
 * y siempre quedaba alguno sin cambiar.
 *
 * Aquí viven las decisiones. Se carga la ÚLTIMA a propósito: así corrige lo
 * que haga falta sin tener que reescribir las hojas anteriores, que están
 * portadas del diseño aprobado y conviene no tocar.
 *
 * TRES REGLAS QUE MANDAN SOBRE TODO LO DEMÁS
 *
 *   1. PRIMERO EL TELÉFONO. La mayoría entra desde un celular, muchas veces
 *      barato y con la pantalla pequeña. Lo que no funcione a 320 px no
 *      funciona.
 *
 *   2. QUE LO USE UN ADULTO MAYOR. Un hospital lo consulta gente de todas las
 *      edades y con toda clase de vista. Nada por debajo de 13 px, nada que
 *      haya que pulsar midiendo menos de 44 px, y nada con menos contraste
 *      del que exige la norma.
 *
 *   3. LOS COLORES DEL HOSPITAL SON LOS DEL HOSPITAL. No se cambian. Cuando
 *      uno de ellos no da el contraste que hace falta, se usa una variante
 *      oscurecida SOLO para el texto, no para el fondo: la marca se ve igual
 *      y el texto se lee.
 * ========================================================================= */

:root {

  /* ---------------------------------------------------------------------
   * COLOR
   * ------------------------------------------------------------------ */

  /* Los institucionales, tal cual. No se tocan. */
  --hospital:        #053272;
  --hospital-dark:   #032050;
  --hospital-light:  #eef3fb;
  --hospital-cyan:   #00AFEF;
  --hospital-green:  #A8CF45;

  /* Variantes SOLO PARA TEXTO.
     El cian y el verde de la marca son luminosos: sobre fondo claro dan
     2,5:1 y la norma pide 4,5:1. Oscurecidos siguen siendo reconocibles
     como el mismo color y ya se leen. */
  --cyan-texto:  #05628a;   /* sobre blanco ≈ 5,6:1 */
  --verde-texto: #4f6b0f;   /* sobre blanco ≈ 5,3:1 */

  /* Estados. Rojo y ámbar accesibles sobre blanco. */
  --error:   #b42318;
  --aviso:   #8a5a00;
  --exito:   #15803d;

  /* ---------------------------------------------------------------------
   * TIPOGRAFÍA
   * ---------------------------------------------------------------------
   * La escala arranca en 13 px y no baja de ahí. El 11 px de las fechas y
   * el 12 px de la barra superior eran ilegibles para media población.
   * ------------------------------------------------------------------ */
  --txt-xs:   0.8125rem;  /* 13px — el suelo: fechas, etiquetas, pies */
  --txt-sm:   0.875rem;   /* 14px — texto secundario */
  --txt-base: 1rem;       /* 16px — lectura */
  --txt-md:   1.0625rem;  /* 17px — entradillas */
  --txt-lg:   1.25rem;
  --txt-xl:   1.5rem;
  --txt-2xl:  1.875rem;
  --txt-3xl:  2.25rem;

  /* ---------------------------------------------------------------------
   * ESPACIO, FORMA Y PROFUNDIDAD
   * ------------------------------------------------------------------ */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;

  --radius:    .5rem;
  --radius-sm: .375rem;
  --radius-lg: .875rem;
  --radius-full: 9999px;

  --sombra-1: 0 1px 2px rgba(16, 32, 56, .06);
  --sombra-2: 0 4px 12px rgba(16, 32, 56, .08);
  --sombra-3: 0 12px 28px rgba(16, 32, 56, .12);

  /* ---------------------------------------------------------------------
   * ZONA TÁCTIL
   * ---------------------------------------------------------------------
   * 44 px es lo que mide la yema de un dedo adulto. La norma exige 24 como
   * mínimo absoluto; 44 es lo que hace que no haya que apuntar.
   * ------------------------------------------------------------------ */
  --tap: 44px;
  --tap-min: 24px;

  /* Ancho cómodo de lectura: entre 60 y 75 caracteres por línea. */
  --ancho-lectura: 44rem;
}

/* =========================================================================
 * 1 · CONTRASTE
 * =========================================================================
 * Los dos fallos reales que salieron en la auditoría, los dos por el mismo
 * motivo: el cian institucional usado como color de texto.
 * ====================================================================== */

/* El botón cian llevaba letra blanca: 2,51:1. Con la letra en el azul del
   hospital sube a 4,7:1 y el botón sigue siendo cian. */
.btn-cyan,
a.btn-cyan,
.btn-cyan:visited {
  color: var(--hospital-dark);
  font-weight: 700;
}
.btn-cyan:hover { background: #0b9cd4; color: var(--hospital-dark); }

/* El rótulo de sección ("Actualidad", "Publicaciones"…) iba en cian sobre
   blanco: ilegible para quien no tenga vista de veinte años.
   Se nombra también ".titulo-seccion .kicker" porque así está escrito en
   extras.css y en govco.css, y con menos especificidad no ganaba. */
.kicker,
.titulo-seccion .kicker,
.qs-cabecera .kicker,
.text-cyan { color: var(--cyan-texto); }

/* =========================================================================
 * 2 · TAMAÑO DE LETRA
 * =========================================================================
 * Nada por debajo de 13 px. Afecta sobre todo a fechas, categorías, la barra
 * superior y el pie, que estaban a 11 y 12 px.
 * ====================================================================== */
.inst-bar, .inst-bar a,
.govco-bar, .govco-bar a { font-size: var(--txt-xs); }

.kicker,
.titulo-seccion .kicker,
.qs-cabecera .kicker { font-size: var(--txt-xs); letter-spacing: .06em; }

.news-card p, .card p,
.tarjeta-resumen { font-size: var(--txt-sm); }

/* Las fechas y las etiquetas de categoría de las tarjetas. */
.news-card [style*="font-size:.6875rem"],
.news-card [style*="font-size: .6875rem"],
.card [style*="font-size:.6875rem"],
.card [style*="font-size: .6875rem"] { font-size: var(--txt-xs) !important; }

.footer-link, .footer a { font-size: var(--txt-sm); }
small, .text-xs { font-size: var(--txt-xs); }

/* =========================================================================
 * 3 · ZONAS TÁCTILES
 * =========================================================================
 * Un puntito de 8 px no lo acierta nadie con el dedo. Donde el elemento no
 * puede crecer sin descuadrar el diseño, se le añade un área invisible
 * alrededor con ::after, que es lo que de verdad recibe el toque.
 * ====================================================================== */

/* Los puntos de los carruseles y del hero medían 8x8: nadie acierta eso con
   el dedo. Ahora el BOTÓN mide 36x44 y el puntito se dibuja dentro. Se ve
   igual de discreto y se pulsa sin apuntar.

   36 y no 44 de ancho por una razón práctica: ocho puntos a 44 px no caben
   en una pantalla de 360. A partir de ocho, el carrusel ya no pinta puntos
   sino "3 / 19" (ver carrusel.js). */
.carrusel-punto,
.hero-dot {
  position: relative;
  width: 36px;
  height: var(--tap);
  min-width: 36px;
  border-radius: 0;
  background: transparent;
  transform: none;
  padding: 0;
}
.carrusel-punto::before,
.hero-dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--gray-300, #d1d5db);
  transition: background .2s ease, transform .2s ease;
}
.hero-dot::before { background: rgba(255, 255, 255, .5); }

.carrusel-punto.activo::before { background: var(--hospital); transform: scale(1.35); }
.hero-dot.active::before       { background: #fff;           transform: scale(1.35); }

.carrusel-punto.activo, .hero-dot.active { background: transparent; transform: none; }
.carrusel-puntos { gap: 0; }
.hero-dots { gap: 0; }

/* Flechas de carrusel y del hero. */
.carrusel-flecha,
.hero-arrow,
#heroPrev, #heroNext {
  min-width: var(--tap);
  min-height: var(--tap);
}

/* Los enlaces de la barra institucional de arriba medían 19 px de alto. */
.inst-bar a,
.govco-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;          /* la barra es fina a propósito; 36 es el techo */
  padding: 0 .25rem;
}

/* Los chips de filtro de Informes. */
.chip {
  min-height: var(--tap);
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Enlaces del pie y de listas de navegación. */
.footer-link,
.footer-icon-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.footer-icon-link { min-width: 40px; justify-content: center; }

/* En el teléfono se sube todo a 44: ahí no hay puntero que ayude. */
@media (pointer: coarse) {
  .chip,
  .carrusel-flecha,
  .hero-arrow,
  .btn-primary, .btn-secondary, .btn-cyan,
  .pagina-num, .paginacion button, .paginacion a {
    min-height: var(--tap);
    min-width: var(--tap);
  }
  .footer-link { min-height: var(--tap); }
}

/* =========================================================================
 * 4 · EL FOCO DEL TECLADO
 * =========================================================================
 * Quien no usa ratón necesita ver SIEMPRE dónde está parado. Un solo estilo
 * para todo el sitio, y que se vea también sobre fondo azul.
 * ====================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--hospital-cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.govco-bar :focus-visible,
.inst-bar :focus-visible,
.hero :focus-visible,
[style*="background:var(--hospital)"] :focus-visible {
  outline-color: #fff;
}

/* =========================================================================
 * 5 · MOVIMIENTO
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
 * 6 · EL MENÚ MÓVIL
 * =========================================================================
 * Era una lista suelta debajo de la cabecera: al abrirla empujaba la página
 * y con cuarenta y seis enlaces había que recorrerla entera para volver.
 * Ahora es un panel con su propio alto, su propio desplazamiento y su botón
 * de cerrar siempre visible arriba.
 * ====================================================================== */
.hamburger-btn {
  min-width: var(--tap);
  min-height: var(--tap);
  justify-content: center;
}

@media (max-width: 1023px) {
  .mobile-menu {
    position: fixed;
    left: 0; right: 0;
    top: var(--alto-cabecera, 0px);
    bottom: 0;
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 2rem;
    box-shadow: var(--sombra-3);
    /* Respeta la barra del sistema en teléfonos con muesca. */
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  }

  /* La página de detrás se queda quieta mientras el menú está abierto. */
  body.menu-movil-abierto { overflow: hidden; }
}

.mobile-menu-cabecera {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.5rem;
  background: var(--hospital);
  color: #fff;
}
.mobile-menu-titulo {
  font-weight: 700;
  font-size: var(--txt-md);
  letter-spacing: .01em;
}
.mobile-menu-cerrar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--tap);
  padding: 0 .875rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: 600;
  cursor: pointer;
}
.mobile-menu-cerrar:hover { background: rgba(255, 255, 255, .14); }

/* Cada entrada del menú, con sitio de sobra para el dedo. */
.mobile-link {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .625rem 1.5rem;
  font-size: var(--txt-base);
}
.mobile-sub .mobile-link { padding-left: 2.5rem; font-size: var(--txt-sm); }
.mobile-link.nivel-3     { padding-left: 3.25rem; }
.mobile-acordeon { width: 100%; justify-content: space-between; }

/* =========================================================================
 * 7 · ENLACES DE TEXTO QUE HAY QUE PODER TOCAR
 * =========================================================================
 * "Ver todos los servicios →" medía 17 px de alto. Es un enlace de texto, y
 * a un enlace de texto no se le puede poner un recuadro sin afear la página;
 * lo que sí se puede es darle aire arriba y abajo para que el dedo tenga
 * dónde caer.
 * ====================================================================== */
.enlace-seccion,
a[class*="ver-todos"],
.footer-ext,
.footer-legal a,
.contacto-linea a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

@media (pointer: coarse) {
  /* En el pie, los enlaces a organismos externos iban en fila y a 19 px. */
  .footer-ext { min-height: var(--tap); padding: 0 .35rem; }
  .footer-legal a { min-height: var(--tap); }
}

/* El campo del boletín y su botón, que se tocan con el dedo. */
#boletin, .boletin input, .boletin button { min-height: var(--tap); }

/* =========================================================================
 * 8 · ANCHO DE LECTURA
 * =========================================================================
 * Un párrafo que cruza 1.300 px de pantalla se lee fatal: el ojo se pierde
 * al volver al principio de la línea siguiente. El contenido que viene de
 * WordPress se limita a un ancho cómodo, sin tocar lo que es a propósito
 * ancho (tablas, galerías, las tarjetas de conceptos).
 * ====================================================================== */
@media (min-width: 1024px) {
  .contenido-wp > p,
  .contenido-wp > ul,
  .contenido-wp > ol,
  .contenido-wp > h2,
  .contenido-wp > h3,
  .contenido-wp > h4 {
    max-width: var(--ancho-lectura);
  }
}

/* =========================================================================
 * 9 · CANALES DE ATENCIÓN
 * =========================================================================
 * Ocupa el sitio donde antes aparecía un código interno de WordPress. No
 * imita un formulario: dice, con los datos que el hospital ya publica, por
 * dónde se radica de verdad una PQRSD.
 * ====================================================================== */
.hlpl-canales {
  margin: 1.75rem 0;
  padding: 1.5rem;
  border: 1px solid var(--hospital-light);
  border-left: 4px solid var(--hospital);
  border-radius: var(--radius);
  background: var(--hospital-light);
}
.contenido-wp .hlpl-canales h3 {
  margin: 0 0 .5rem;
  font-size: var(--txt-lg);
  color: var(--hospital);
}
.hlpl-canales > p { margin: 0 0 1rem; font-size: var(--txt-sm); color: var(--gray-700); }

.hlpl-canales-lista { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .875rem; }
.hlpl-canales-lista li { font-size: var(--txt-base); color: var(--gray-800); }
.hlpl-canales-lista span {
  display: block;
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cyan-texto);
  margin-bottom: .1rem;
}
.contenido-wp .hlpl-canales-lista a { color: var(--hospital); font-weight: 600; text-decoration: underline; }

.contenido-wp a.hlpl-canales-ir {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 1.25rem;
  border-radius: var(--radius);
  background: var(--hospital);
  color: #fff;
  font-size: var(--txt-sm);
  font-weight: 600;
  text-decoration: none;
}
.contenido-wp a.hlpl-canales-ir:hover { background: var(--hospital-dark); color: #fff; }

/* =========================================================================
 * 10 · EL PIE EN EL TELÉFONO
 * =========================================================================
 * Las listas de enlaces se pliegan detrás de su título. El título sigue
 * visible y ahora es un botón de 44 px. Los datos del hospital no se pliegan.
 * ====================================================================== */
.pie-titulo-caja { margin: 0; }

.pie-titulo {
  display: none;                 /* en el computador manda el h3 de siempre */
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap);
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.pie-titulo svg { transition: transform .2s ease; flex: none; }
.pie-titulo[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 1023px) {
  .pie-plegado .pie-titulo { display: flex; }
  .pie-plegado .pie-titulo-caja {
    border-bottom: 1px solid var(--gray-200);
    padding: .25rem 0;
  }
  /* Plegado sin florituras: display none/block.
     El truco de animar con grid-template-rows: 0fr solo colapsa la PRIMERA
     fila, y aquí cada enlace es una fila; el pie no se encogía nada. Además
     así los enlaces plegados salen del recorrido del tabulador, que es lo
     correcto: no se tabula hacia algo que no se ve. */
  /* El !important es a propósito y está justificado: uno de estos grupos
     lleva display:flex escrito en el propio atributo style del HTML, y un
     estilo en línea gana a cualquier clase. Sin esto, "Enlaces de interés"
     era el único que no se plegaba. */
  .pie-plegado .pie-plegable:not(.abierto) { display: none !important; }
  .pie-plegado .pie-plegable.abierto { padding-bottom: .5rem; }
  /* El pie deja de ser una escalera de cuatro pisos. */
  .pie-plegado .footer-grid,
  .pie-plegado [class*="grid"] { gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pie-plegado .pie-plegable { transition: none; }
}

/* =========================================================================
 * 11 · ALTURA DE LA PORTADA EN EL TELÉFONO
 * =========================================================================
 * La portada medía 6.400 px: unas siete pantallas para llegar al final. No se
 * quita información: se aprieta lo que estaba suelto y se pone en fila lo que
 * estaba en columna.
 *
 * Las líneas de contacto NO se meten en un carrusel. Son tres teléfonos de un
 * hospital: es justo lo que alguien busca con prisa, y esconder dos de tres
 * detrás de un gesto sería un mal cambio aunque ahorre píxeles.
 * ====================================================================== */
@media (max-width: 1023px) {

  /* --- Las tres tarjetas de teléfono: 288 px cada una --------------------
     El icono de 64 px y el aire de escritorio no hacen falta aquí. */
  .contact-line-card {
    padding: 1.125rem 1rem;
    text-align: left;
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-areas:
      "icono titulo"
      "icono desc"
      "tel   tel"
      "hora  hora";
    column-gap: .875rem;
    row-gap: .15rem;
    align-items: center;
  }
  .contact-line-card > .ic,
  .contact-line-card > div:first-child {
    grid-area: icono;
    width: 42px; height: 42px;
    margin: 0;
    align-self: start;
  }
  .contact-line-card > .ic svg,
  .contact-line-card > div:first-child svg { width: 22px; height: 22px; }
  .contact-line-card h3 { grid-area: titulo; font-size: var(--txt-md); margin: 0; }
  .contact-line-card p:not(:last-child) {
    grid-area: desc;
    font-size: var(--txt-sm);
    margin: 0;
    color: var(--gray-600);
  }
  .contact-line-card a {
    grid-area: tel;
    margin-top: .5rem;
    justify-self: start;
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
  }
  .contact-line-card p:last-child {
    grid-area: hora;
    font-size: var(--txt-xs);
    margin: 0;
  }

  /* --- "Enlaces de interés" ---------------------------------------------
     Se probó a ponerlos en fichas redondeadas y salió el tiro por la culata:
     el relleno los hacía más anchos, cabía uno por línea y el pie creció.
     Ahora ese grupo se pliega como los demás (su rótulo pasó a ser un h3 de
     verdad en footer.php) y aquí solo se le quita aire. */
  .footer-ext { min-height: 40px; padding: 0; }

  /* Menos aire entre secciones: en el teléfono, 4 rem arriba y 4 abajo
     entre cada bloque suman más de una pantalla entera de nada. */
  main > section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .section-title { margin-bottom: 1.5rem !important; }
}

/* =========================================================================
 * 12 · QUE SE VEA QUE HAY MÁS TARJETAS
 * =========================================================================
 * Antes cada tarjeta ocupaba el ancho entero de la pista: se veía una y
 * parecía que no había nada más. La señal de que hay más contenido era que
 * la tarjeta se moviera sola, y eso estorba a quien lee despacio.
 *
 * La solución es la de siempre en un teléfono: que asome un trozo de la
 * siguiente. Se entiende sin explicar nada y sin que nada se mueva solo.
 * Además hay un degradado en el borde derecho que refuerza el aviso.
 * ====================================================================== */
@media (max-width: 1023px) {
  .carrusel-pista > * {
    /* Lo que sobra es la tarjeta siguiente asomando.
       Se probó con 86 % y asomaba tanto que se leían palabras cortadas por la
       mitad: en vez de "hay más", parecía que una tarjeta invadía a la otra.
       Con 92 % asoma solo el canto, como el borde de una carta debajo de otra,
       que es justo la señal y nada más. */
    flex-basis: 92%;
    scroll-snap-align: start;
  }

  /* TODAS DEL MISMO ALTO — y por qué con rejilla y no con flex.
     ---------------------------------------------------------------------
     Las tarjetas salían de distinto alto (128 a 202 px en Valores, 373 y 441
     en Noticias) y al deslizar la caja pegaba saltos.

     La causa era la misma en todos los casos: un `height: 100%` heredado. En
     un contenedor flex sin altura propia ese 100 % no se puede calcular, y
     encima anula el estirado, así que cada tarjeta se quedaba con el alto de
     su texto. Y en Noticias venía escrito con un selector de #id, imposible
     de ganar desde una clase.

     En una REJILLA la fila sí tiene altura definida —la de la tarjeta más
     alta—, así que ese mismo `height: 100%` se resuelve bien y todas quedan
     iguales. Se arregla de una vez, sin perseguir cada regla suelta. */
  .carrusel-pista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 92%;
    align-items: stretch;
  }
  /* Con una sola tarjeta no debe sobrar hueco a la derecha. */
  .carrusel-pista:has(> :only-child) { grid-auto-columns: 100%; }

  /* Solo cuando hay más de una: con una sola tarjeta no debe asomar nada. */
  .carrusel-pista > :only-child { flex-basis: 100%; }

  /* SIN VELO, A PROPÓSITO.
     Hubo un degradado blanco en el borde derecho para tapar lo que asomaba.
     Servía cuando asomaba media tarjeta, pero se rompía en cuanto la tarjeta
     de al lado era oscura —como la de "Quiénes Somos"—: el blanco encima del
     azul se veía como un manchón descolorido, no como un degradado.

     Ya no hace falta: con las tarjetas al 92 % asoma solo el canto, y un
     canto no hay que taparlo. */
}


/* =========================================================================
 * 13 · LO QUE NO CABE EN 320 px
 * =========================================================================
 * A 320 px —que existe, y es el teléfono de mucha gente— tres cosas se salían
 * de la pantalla y provocaban desplazamiento horizontal accidental.
 * ====================================================================== */
@media (max-width: 560px) {
  /* La barra de arriba llevaba tres enlaces en una fila que a 320 px no cabía,
     y se llevaba por delante toda la página con desplazamiento horizontal.

     Hay que apuntar también al div interior —el que agrupa los tres enlaces—
     y usar !important: tanto la fila como el grupo llevan display:flex y gap
     escritos en el atributo style del HTML, y eso gana a cualquier clase. */
  .inst-bar .container,
  .govco-bar .container {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 0;
    column-gap: .75rem;
  }
  .inst-bar .container > div,
  .govco-bar .container > div {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 .75rem !important;
  }
  .inst-bar a, .govco-bar a { min-height: 34px; }

  /* Los mandos del carrusel se salían seis píxeles.
     Al agrandar flechas y puntos para el dedo, la fila entera pasó a medir
     más que la pantalla. Las flechas mantienen su tamaño —son lo que hay que
     poder pulsar— y lo que cede es la tira de puntos del medio. */
  .carrusel-mandos {
    max-width: 100%;
    gap: .35rem;
    padding: 0;
  }
  .carrusel-mandos .carrusel-flecha { flex: none; }
  .carrusel-puntos {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    justify-content: center;
  }

  /* Los botones "Descargar ↓" de Informes no cabían al lado del texto. */
  .govco-btn, .govco-btn-borde {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .govco-card { flex-wrap: wrap; }
}


/* =========================================================================
 * 14 · LOS ÚLTIMOS RESQUICIOS
 * =========================================================================
 * Cosas que la auditoría siguió señalando después de la primera pasada.
 * Van juntas al final para que se vea de un vistazo qué quedaba suelto.
 * ====================================================================== */

/* --- Suelo de 13 px, esta vez sin excepciones -------------------------
   Varios textos llevan el tamaño escrito en el atributo style del propio
   HTML (font-size:.75rem = 12 px). Un estilo en línea gana a cualquier
   hoja, así que hay que nombrarlo y forzarlo. */
.contact-line-card p:last-child,
[style*="font-size:.75rem"],
[style*="font-size: .75rem"],
[style*="font-size:.6875rem"],
[style*="font-size: .6875rem"] { font-size: var(--txt-xs) !important; }

/* --- Enlaces de sección: "Ver todos los servicios →" -------------------
   Medían 17 px de alto. No llevan clase, así que se les llega por donde
   están: son el enlace que cierra una tarjeta de acceso. */
/* Los enlaces de acción que cierran una tarjeta ("Ver todos los servicios →")
   llevan su estilo escrito en el atributo style del HTML y no tienen clase,
   así que se les llega justo por ahí: son los únicos enlaces con negrita
   puesta en línea. Medían 17 px de alto. */
a[style*="font-weight:600"],
.tarjeta-pie {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* --- La franja legal del pie ------------------------------------------ */
.footer-legal a,
footer [style*="rgba(255,255,255,.85)"] {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* --- Teléfonos y correos: se pulsan para llamar o escribir ------------- */
a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* --- Botones que se quedaron a un píxel -------------------------------- */
.carrusel-mas,
.hlpl-doc-ver,
.hlpl-doc-bajar { min-height: var(--tap); }

/* Los que quedaban por debajo del suelo de 13 px. */
.footer-ext,
.a11y-marca,
.govco-ayuda { font-size: var(--txt-xs); }

/* La tarjeta destacada de "Líneas de contacto" va sobre azul, y su párrafo
   heredaba el gris del resto: 1,63:1, ilegible. Sobre azul, texto claro. */
.contact-line-card.featured,
.contact-line-card.featured p,
.contact-line-card.featured h3 { color: #fff; }
.contact-line-card.featured p { color: rgba(255, 255, 255, .92); }
.contact-line-card.featured a { color: #fff; text-decoration: underline; }

/* --- Las migas de pan --------------------------------------------------
   "Inicio › Servicios › Urgencias" medía 16 px de alto. No es texto corrido:
   es una lista de navegación, así que la excepción de los enlaces en línea
   no le vale y hay que darle sitio para el dedo. */
nav[aria-label="Ruta de navegación"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .15rem;
}
nav[aria-label="Ruta de navegación"] a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 .15rem;
}

/* =========================================================================
 * 15 · LOS BOTONES FLOTANTES
 * =========================================================================
 * El de accesibilidad estaba pegado al borde izquierdo y centrado en vertical,
 * justo encima del texto: en la portada tapaba media frase del hero. Y en un
 * teléfono, el centro de la pantalla es donde está el contenido que se lee.
 *
 * Se baja a la esquina inferior izquierda, enfrente del de "volver arriba",
 * que vive en la derecha. Así ninguno tapa nada y los dos quedan donde el
 * pulgar llega sin estirarse.
 * ====================================================================== */
.a11y-launcher {
  top: auto;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: none;
  width: var(--tap);
  height: var(--tap);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.volver-arriba {
  width: var(--tap);
  height: var(--tap);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
}

/* La insignia de conexión es una herramienta del equipo, no del ciudadano:
   en el teléfono ocupa la misma esquina que el botón de accesibilidad. */
@media (max-width: 1023px) {
  .estado-api { display: none; }
}

/* Mientras el menú móvil está abierto, los flotantes no deben quedar
   encima de él. */
body.menu-movil-abierto .a11y-launcher,
body.menu-movil-abierto .volver-arriba { display: none; }

/* --- El hueco del principio -------------------------------------------
   El primer título del contenido lleva 2,5 rem de margen arriba, pensado
   para separarlo del párrafo anterior. Al principio no hay párrafo anterior:
   solo deja un vacío raro debajo de la banda azul. */
.contenido-wp > :first-child,
.contenido-wp > :first-child > :first-child { margin-top: 0; }

/* --- Que los flotantes no se sienten encima del último renglón ---------
   Los dos botones fijos viven en las esquinas de abajo. En la franja legal
   del final —"Mapa del sitio · Políticas de privacidad · Términos…"— caían
   justo encima de un enlace y lo tapaban. Se le da al pie el sitio que
   ocupan, contando además la barra del sistema en los móviles con muesca. */
@media (max-width: 1023px) {
  footer > :last-child,
  .footer-legal,
  .govco-pie {
    padding-bottom: calc(var(--tap) + 28px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================================
 * 16 · LA TIERRA DE NADIE DE LA TABLET
 * =========================================================================
 * A 768 px la portada medía 6.305 px: MÁS que en un teléfono de 480, que
 * medía 5.115. Suena raro y tiene una explicación sencilla.
 *
 * Hay dos umbrales que no se hablaban entre sí:
 *   · El carrusel del teléfono entra por debajo de 640 px.
 *   · Las rejillas caen a UNA columna por debajo de 768 px.
 *
 * Entre 641 y 768 no había ni lo uno ni lo otro: tarjetas a todo el ancho,
 * una debajo de otra, sin carrusel que las recogiera. La franja más alta del
 * sitio era justo la de las tabletas.
 *
 * Con dos columnas en esa franja el espacio se aprovecha y la altura baja.
 * ====================================================================== */
@media (min-width: 641px) and (max-width: 1023px) {
  .grid-3, .grid-4, .grid-2, .grid-2-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* =========================================================================
 * 17 · EL FORMULARIO DE PQRSD
 * =========================================================================
 * Lo dibuja Contact Form 7 y llega con su propio HTML. Aquí solo se le pone
 * la ropa del sitio y, sobre todo, los ESTADOS: enviando, enviado, y qué
 * campo falta. Un formulario donde no se sabe si el envío salió es un
 * formulario en el que la gente no vuelve a confiar.
 *
 * OJO CON EL ALCANCE: todo esto colgaba de `.contenido-wp`, o sea que solo
 * vestía al formulario cuando venía dentro de una página de WordPress. Al
 * llevarlo a Contacto se quedó en cueros: campos de 19 px de alto y un botón
 * gris del navegador. En un teléfono eso no se puede ni pulsar. El formulario
 * es el mismo esté donde esté, así que las reglas ya no piden permiso de
 * contenedor: se enganchan a `.wpcf7-form`, que solo existe donde hay uno.
 * ====================================================================== */

/* Ni pegado a los bordes ni de punta a punta en un monitor grande: una
   columna de lectura cómoda, centrada. */
.pqrsd-formulario { max-width: 40rem; margin: 0 auto; }
.wpcf7 { margin: 1.5rem 0; }
.wpcf7-form p { margin: 0 0 1.125rem; }

/* Contact Form 7 mete sus campos ocultos en un <fieldset>. Los campos no se
   ven, pero el <fieldset> sí: el navegador le pinta su marco por defecto, y
   sobre el formulario salía una caja gris vacía encima del primer campo. */
.wpcf7-form .hidden-fields-container { display: none; }

.wpcf7-form label {
  display: block;
  font-weight: 600;
  font-size: var(--txt-sm);
  color: var(--gray-800);
  margin-bottom: .35rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .625rem .875rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--txt-base);   /* 16 px: por debajo, el iPhone hace zoom solo */
  color: var(--gray-800);
  background: #fff;
}
.wpcf7-form textarea { min-height: 8rem; resize: vertical; }

/* La lista desplegable se quedaba 4 px mas baja que las cajas de al lado: el
   navegador la mide a su manera y el relleno no le cunde igual. Cuatro pixeles
   no rompen nada, pero se ven, y una columna de campos desalineados da la
   impresion de que la pagina esta a medio hacer. */
.wpcf7-form select { min-height: 3rem; height: 3rem; }

.wpcf7-form input:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form textarea:focus-visible {
  outline: 3px solid var(--hospital-cyan);
  outline-offset: 1px;
  border-color: var(--hospital);
}

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
  min-height: var(--tap);
  padding: 0 1.75rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--hospital);
  color: #fff;
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: 700;
  cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover { background: var(--hospital-dark); }
.wpcf7-form input[type="submit"]:disabled {
  background: var(--gray-400);
  cursor: progress;
}

/* --- El campo que falta ------------------------------------------------ */
.hlpl-campo-mal { border-color: var(--error) !important; }
.hlpl-campo-error {
  margin: .35rem 0 0 !important;
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--error);
}

/* --- Cómo fue el envío -------------------------------------------------- */
.hlpl-form-aviso {
  margin-top: 1.25rem;
  padding: .875rem 1rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size: var(--txt-sm);
  line-height: 1.6;
}
.hlpl-form-aviso[data-tipo="enviando"] {
  border-color: var(--gray-400); background: var(--gray-50); color: var(--gray-600);
}
.hlpl-form-aviso[data-tipo="bien"] {
  border-color: var(--exito); background: #f0fdf4; color: #14532d; font-weight: 600;
}
.hlpl-form-aviso[data-tipo="mal"] {
  border-color: var(--error); background: #fef2f2; color: #7f1d1d; font-weight: 600;
}

/* Los avisos que trae Contact Form 7 por su cuenta se esconden: los suyos
   salen abajo del todo y sin estilo, y aquí ya se cuenta lo mismo mejor. */
.wpcf7-response-output,
.wpcf7-not-valid-tip { display: none; }

/* =============================================================================
 * LAS FICHAS DE QUIÉNES SOMOS EN EL TELÉFONO
 * =============================================================================
 * QUÉ SE VEÍA MAL
 *
 * Misión, Visión y Objetivos son fichas que se voltean: delante el título,
 * detrás una frase. Al voltearse, el reverso es azul institucional macizo, y
 * por eso su borde también es azul: sobre azul, un borde azul no se ve.
 *
 * Pero en el teléfono no existe "pasar por encima", así que ahí el volteo se
 * desactiva y las dos caras se apilan como una sola tarjeta blanca. El fondo
 * pasaba a blanco... y el borde se quedaba azul. Resultado: la mitad de abajo
 * de esas tres fichas llevaba una raya azul marino por tres lados, cortando la
 * tarjeta por la mitad. Eso es lo que se veía roto.
 *
 * Y de paso: cada cara pedía 15rem de alto por su cuenta, así que la tarjeta
 * apilada medía 30rem —el doble de lo necesario— con dos huecos vacíos dentro.
 *
 * QUÉ SE HACE
 *
 * 1. Se devuelve el borde a su color, y se quita la costura entre las dos
 *    caras: quien la mira debe ver UNA tarjeta, no dos pegadas.
 * 2. El alto lo pide la tarjeta entera, una vez, no cada cara.
 * 3. Las fichas se pintan con los colores del hospital. En el escritorio eso
 *    lo hace el puntero al pasar por encima; en el teléfono no hay puntero, y
 *    por eso quedaban blancas y sosas al lado de la primera, que sí es azul.
 *    Ahora la línea de color de arriba está siempre, el ícono va en azul
 *    institucional y el título también. El texto sigue en negro sobre blanco,
 *    que es lo que se lee bien: el color acompaña, no estorba.
 * ========================================================================== */

@media (hover: none) {

  /* --- 1. La costura ---------------------------------------------------- */
  .qs-volteable .qs-reverso {
    /* Esto es el arreglo: heredaba border-color: var(--hospital) del volteo. */
    border-color: var(--gray-200);
  }

  /* --- 2. El alto, una sola vez ----------------------------------------- */
  #qs-carrusel .qs-volteable          { min-height: 15rem; }
  #qs-carrusel .qs-volteable .qs-cara { min-height: 0; }
  #qs-carrusel .qs-volteable .qs-frente  { flex: none; }
  #qs-carrusel .qs-volteable .qs-reverso { flex: 1 1 auto; }

  /* --- 3. Los colores del hospital -------------------------------------- */

  /* OJO CON EL SELECTOR: `qs-intro` no está en la ficha, está en la CARA. Con
     `.qs-ficha:not(.qs-intro)` la primera tarjeta —la azul de presentación—
     entraba igual por la puerta, y se le ponía el ícono y el título en azul
     marino sobre su propio fondo azul marino: invisibles. Va en la cara. */

  /* La línea de arriba: en el escritorio crece al pasar el puntero; aquí no
     hay puntero, así que está puesta desde el principio. Solo en la cara de
     delante: en el reverso apilado saldría una segunda raya a media tarjeta. */
  .qs-cara:not(.qs-intro):not(.qs-reverso)::before { width: 100%; }
  .qs-reverso::before { display: none; }

  /* El ícono, macizo. Antes era un cuadrito azul muy pálido que en pantalla
     pequeña casi no se distinguía del blanco de la tarjeta. */
  .qs-cara:not(.qs-intro) .qs-icono {
    background: var(--hospital);
    color: #fff;
  }
  .qs-cara:not(.qs-intro) .qs-titulo { color: var(--hospital); }

  /* El borde, del azul más pálido de la casa en vez de gris neutro: ata la
     tarjeta a la marca sin gritar. */
  .qs-cara:not(.qs-intro) { border-color: #d5e0f0; }
}

/* =============================================================================
 * LA VENTANA DE QUIÉNES SOMOS EN EL IPHONE
 * =============================================================================
 * En las capturas del teléfono la ventana salía SIN su banda azul y sin el
 * título: se abría "Alianza de Usuarios" y lo que aparecía era un muro de
 * texto sin encabezado, sin saber de qué se estaba leyendo ni dónde estaba la
 * X para cerrar.
 *
 * No era el diseño: era la unidad `vh`. En Safari de iPhone, `100vh` es la
 * pantalla CON la barra de direcciones escondida, no la que se está viendo.
 * La ventana pedía `max-height: 88vh` y se anclaba abajo, así que se hacía más
 * alta que el hueco visible y lo que se salía por arriba era justo la banda
 * del título. En Chrome de escritorio no pasa, y por eso no se había visto.
 *
 * `dvh` es la misma medida pero de lo que de verdad se está viendo en ese
 * momento. Se deja `vh` escrito antes: el navegador que no entienda `dvh` se
 * queda con la línea anterior en vez de quedarse sin ninguna.
 * ========================================================================== */

.qs-modal-caja { max-height: min(85dvh, 46rem); }

@media (max-width: 640px) {
  .qs-modal-caja { max-height: 88dvh; }

  /* Y que el final del texto no quede debajo de la barra del iPhone. */
  .qs-modal { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* --- El texto largo, más fácil de seguir --------------------------------- */
/* Documentos como el Código de Ética o la Alianza de Usuarios son párrafos de
   800 caracteres seguidos. No se toca ni una palabra —el texto es el del
   hospital— pero sí se le da aire: separación clara entre párrafos, para que
   se vea dónde acaba una idea, y cortes de línea que no dejan palabras
   sueltas al final. */
.qs-modal-cuerpo p { text-wrap: pretty; }
.qs-modal-cuerpo p + p { margin-top: 1.15em; }
.qs-modal-cuerpo ul, .qs-modal-cuerpo ol { margin: 1.15em 0; padding-left: 1.4em; }
.qs-modal-cuerpo li + li { margin-top: .5em; }
.qs-modal-cuerpo h2, .qs-modal-cuerpo h3, .qs-modal-cuerpo h4 {
  color: var(--hospital);
  margin-top: 1.6em;
}

/* =============================================================================
 * EL TEXTO DE LOS DOCUMENTOS, JUSTIFICADO — PERO NO EN EL TELÉFONO
 * =============================================================================
 * Justificar da presencia de documento oficial, y en una pantalla ancha se ve
 * mejor: el margen derecho queda recto y los huecos entre palabras casi no se
 * notan. Pero eso depende de cuántas palabras caben en una línea.
 *
 * Al justificar, el navegador estira los espacios hasta que la línea llegue al
 * margen. Si caben catorce palabras, el estiramiento se reparte entre trece
 * huecos y no se aprecia. Si caben cinco, se reparte entre cuatro, y se abren
 * zanjas blancas que cortan la lectura en vertical. Medido sobre el Código de
 * Ética, con la letra y el ancho reales de este sitio:
 *
 *     ancho    palabras/línea   el peor hueco        huecos que se ven raros
 *     320 px        5,2         33,6 px  (7,5×)              39 %
 *     390 px        7           15,7 px  (3,5×)              38 %
 *     768 px       14           14,8 px                      14 %
 *    1280 px       14           13,5 px                      14 %
 *
 * En castellano se nota más que en inglés: nuestras palabras son largas
 * —«responsabilidades», «confidencialidad»— y dejan menos sitio para repartir.
 *
 * Lo que normalmente rescata a la justificación en pantalla es partir palabras
 * a final de línea. Se pide aquí (`hyphens`), pero NO se cuenta con ello: se
 * comprobó y el Chrome de esta máquina no trae el diccionario de español, así
 * que no parte nada. Donde sí esté —Safari del iPhone, por ejemplo— mejora
 * sola; donde no, la línea de arriba (el corte en 768 px) es la que protege.
 *
 * De 768 px para arriba se justifica. Por debajo, se lee mejor con el margen
 * derecho irregular de siempre.
 * ========================================================================== */

@media (min-width: 768px) {
  .contenido-wp p,
  .contenido-wp li,
  .qs-modal-cuerpo p,
  .qs-modal-cuerpo li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Los pies de foto y las celdas de tabla, no: son textos cortos donde una
     sola línea estirada de punta a punta canta muchísimo. */
  .contenido-wp figcaption,
  .contenido-wp td, .contenido-wp th,
  .qs-modal-cuerpo figcaption,
  .qs-modal-cuerpo td, .qs-modal-cuerpo th {
    text-align: left;
    hyphens: manual;
  }
}

/* =============================================================================
 * ENLACES DE INTERÉS — de una fila de texto a fichas
 * =============================================================================
 * Eran seis enlaces de texto seguidos, uno detrás de otro. Se leían como una
 * nota al pie, y lo que son es las entidades con las que trabaja el hospital.
 *
 * Cada una tiene ahora su ficha con sitio para el logotipo. Mientras el
 * logotipo no esté, la ficha NO deja un hueco roto: se queda con el nombre
 * bien compuesto, que ya es mejor que la fila de antes. Cuando el archivo
 * aparezca en assets/img/enlaces/, se pinta solo.
 *
 * En el teléfono pasan de lado con las flechas —ver ui.js— y ahí el bucle sí
 * está encendido: son seis, el orden da igual, y llegar al tope sin poder
 * seguir se siente como que algo se atascó.
 * ========================================================================== */

.enlaces-interes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .75rem;
}

.enlace-ficha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 6.5rem;
  padding: 1rem .75rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  color: var(--gray-700);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* El logotipo, si lo hay: se le da una altura fija para que las seis fichas
   queden a la misma altura vengan como vengan los archivos. */
/* La caja del logotipo se mide en ALTO, igual para las seis, y se le deja
   todo el ancho de la ficha. Con 2,25rem los logotipos anchos —Funcion
   Publica, la Gobernacion— se quedaban en una mancha ilegible: el limite no
   era el alto sino el ancho, y al encogerse por ahi perdian tambien altura. */
.enlace-marca:not(:empty) {
  display: grid;
  place-items: center;
  width: 100%;
  height: 3rem;
}
.enlace-marca img {
  max-height: 3rem;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.enlace-nombre {
  font-size: var(--txt-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--gray-800);
}

/* "Ir al sitio" solo aparece al acercarse: en reposo sería ruido repetido
   seis veces. En pantalla táctil no hay puntero, así que ahí no se enseña. */
.enlace-ir {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--cyan-texto);
  opacity: 0;
  transition: opacity .2s ease;
}

@media (hover: hover) {
  .enlace-ficha:hover {
    border-color: var(--hospital);
    box-shadow: 0 6px 18px rgba(16,32,56,.10);
    transform: translateY(-2px);
  }
  .enlace-ficha:hover .enlace-ir { opacity: 1; }
}
.enlace-ficha:focus-visible {
  outline: 3px solid var(--hospital);
  outline-offset: 2px;
}
.enlace-ficha:focus-visible .enlace-ir { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .enlace-ficha, .enlace-ir { transition: none; }
  .enlace-ficha:hover { transform: none; }
}

/* Mientras no haya logotipo, la ficha se encoge. Reservar la altura del logo
   para dejarla vacia daba una caja con el nombre flotando en medio de la nada,
   que es justo lo que se queria arreglar. Cuando el archivo aparezca, la ficha
   crece sola y recupera su sitio. */
.enlace-ficha:not(:has(img)) { min-height: 4.5rem; }

/* En el teléfono las fichas van en el carrusel, y ahí la rejilla estorba:
   el carrusel monta su propia pista. */
.enlaces-interes.montado { display: block; }

/* =============================================================================
 * SECCIONES: EL SELECTOR DE DISEÑO Y LAS FICHAS DE CUALQUIER CATEGORÍA
 * =============================================================================
 * Una sección es una categoría de WordPress con sitio en el menú, y se puede
 * ver con dos diseños. El selector para cambiar de uno a otro vive en la barra
 * del equipo: solo lo ve quien tiene sesión, nunca el ciudadano.
 * ========================================================================== */

/* --- El selector, en la barra del equipo -------------------------------- */
.be-etiqueta {
  font-size: var(--txt-xs);
  opacity: .7;
  padding: 0 .25rem;
  white-space: nowrap;
}
.be-diseno-activo {
  background: rgba(255,255,255,.16);
  font-weight: 700;
}

/* --- La ficha de una publicación ---------------------------------------- */
/* Son las mismas de Quiénes Somos, pero estas llevan fecha: allí son
   documentos que no caducan —la misión, los valores— y aquí publicaciones,
   donde saber de cuándo son es parte de la información. */
.qs-fecha {
  font-size: .6875rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* La pista va abajo del todo, pegada al borde, aunque los textos midan
   distinto: si cada tarjeta la pone a una altura, la fila se ve rota. */
.qs-ficha .qs-cara { justify-content: flex-start; }
.qs-ficha .qs-pista { margin-top: auto; }

/* --- Cuando no hay nada que enseñar -------------------------------------- */
/* Una sección recién creada, o una a la que le ocultaron todas sus entradas,
   no es una avería: es una sección vacía, y se dice con esas palabras. Lo que
   no puede pasar es que se quede en blanco o diga algo técnico. */
.estado-seccion {
  display: block;
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
}
.estado-seccion .estado {
  padding: 2.5rem 1.25rem;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius);
  background: var(--gray-50);
}
.estado-seccion .estado[data-tipo="mal"] {
  border-style: solid;
  border-color: #fca5a5;
  background: #fef2f2;
}

/* =============================================================================
 * EL PANEL DE SECCIONES (uso interno)
 * =============================================================================
 * La lista de categorías con sus dos botones para verla con cada diseño. Es la
 * puerta de entrada que faltaba: sin esto, para llegar a una sección recién
 * creada había que escribir la dirección a mano.
 * ========================================================================== */

.tabla-secciones {
  /* La tabla se desplaza dentro de su caja, no arrastra la página entera. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: #fff;
}
.tabla-secciones table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.tabla-secciones th, .tabla-secciones td {
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.tabla-secciones thead th {
  background: var(--hospital-light);
  color: var(--hospital);
  font-size: var(--txt-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tabla-secciones tbody tr:last-child th,
.tabla-secciones tbody tr:last-child td { border-bottom: 0; }

.sec-slug {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--txt-xs);
  color: var(--gray-500);
  font-weight: 400;
}
.sec-numero { font-variant-numeric: tabular-nums; color: var(--gray-600); }

.sec-marca {
  display: inline-block;
  font-size: var(--txt-xs);
  font-weight: 600;
  padding: .2rem .625rem;
  border-radius: 9999px;
  white-space: nowrap;
}
.sec-si { background: #f0fdf4; color: #14532d; }
.sec-no { background: var(--gray-100); color: var(--gray-600); }

.sec-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.sec-acciones .btn-cyan {
  padding: .5rem 1rem;
  font-size: var(--txt-xs);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

.sec-ayuda {
  max-width: 44rem;
  margin: 2.5rem auto 0;
  padding: 1.5rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.sec-ayuda h2 { font-size: 1.0625rem; margin: 0 0 .875rem; color: var(--hospital); }
.sec-ayuda ol { margin: 0; padding-left: 1.35rem; }
.sec-ayuda li { margin-bottom: .5rem; line-height: 1.6; font-size: var(--txt-sm); }
.sec-nota {
  margin: 1rem 0 0;
  padding-top: .875rem;
  border-top: 1px solid var(--gray-200);
  font-size: var(--txt-sm);
  color: var(--gray-600);
}

/* El diseño que tiene guardado cada sección, en el panel. */
.sec-diseno { background: var(--hospital-light); color: var(--hospital); }

/* Guardar el diseño: es la acción principal del selector, y se ve. */
.be-guardar-diseno {
  background: var(--hospital-green) !important;
  color: #24310a !important;
  font-weight: 700;
}
.be-guardar-diseno:disabled { opacity: .6; cursor: progress; }

/* =============================================================================
 * EL RECUADRO QUE DICE QUÉ DOCUMENTO LLEVA DENTRO
 * =============================================================================
 * Muchas publicaciones del hospital no traen foto ni video: traen un DOCUMENTO.
 * Un informe de rendición de cuentas en PDF, un mapa de riesgos en Drive, un
 * pliego en ZIP.
 *
 * Esas se quedaban con el recuadro azul liso, que es exactamente el mismo que
 * sale cuando no hay absolutamente nada. Y entonces el recuadro miente: dice
 * «aquí no hay nada» al lado de una publicación que sí tiene contenido, y la
 * gente no la abre.
 *
 * Mismo azul de siempre —no se inventa un color nuevo— con el nombre de la
 * extensión escrito encima. Quien pasa la vista sabe que ahí hay algo que
 * abrir. Las que de verdad no llevan nada se quedan como están: lisas.
 * ========================================================================== */

.sin-imagen-archivo {
  display: grid;
  /* place-CONTENT y no place-items: dentro hay dos hijos —el sello y el texto
     que solo oye un lector de pantalla—, asi que con place-items cada uno se
     centraba en SU fila y el sello quedaba arriba, no en medio. */
  place-content: center;
  place-items: center;
}
/* El emoji del hospital del recuadro liso sobra aquí: lo que hay que leer es
   la extensión, y dos cosas en el mismo sitio no se leen ninguna. */
.sin-imagen-archivo::after { content: none; }

.sin-imagen-sello {
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: .14em;
  color: #fff;
  padding: .5rem 1.125rem;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: var(--radius);
  background: rgba(255,255,255,.12);
  /* Para que se lea sobre la parte clara del degradado. */
  text-shadow: 0 1px 3px rgba(3,32,80,.45);
}

/* --- El sello pequeño, cuando la publicación TIENE foto y además un documento */
/* El recuadro grande taparía la foto. Esto es una etiquetita en la esquina:
   lo bastante chica para no estorbar, lo bastante clara para que quien pase la
   vista sepa que ahí dentro hay algo que abrir. */
.miniatura-con-sello { position: relative; overflow: hidden; }
.miniatura-con-sello > img,
.miniatura-con-sello > video { display: block; }

.sello-esquina {
  position: absolute;
  top: .625rem;
  left: .625rem;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #fff;
  padding: .25rem .5rem;
  border-radius: 4px;
  /* El azul de la casa, no un color nuevo. Y opaco: encima de una foto clara
     una etiqueta translúcida no se lee. */
  background: var(--hospital);
  box-shadow: 0 1px 4px rgba(3,32,80,.35);
}

/* El botón de añadir una sección al menú, en el panel interno. */
.btn-menu {
  padding: .5rem 1rem;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  font-size: var(--txt-xs);
  font-weight: 700;
  font-family: inherit;
  color: #24310a;
  background: var(--hospital-green);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.btn-menu:hover { filter: brightness(.94); }
.btn-menu:disabled { opacity: .65; cursor: progress; }
.btn-menu:focus-visible { outline: 3px solid var(--hospital); outline-offset: 2px; }

/* Una sección con su diseño hecho a medida. No se le ofrecen los genéricos:
   cambiarla por uno sería perder el que ya tiene. */
.sec-propia { background: #fff7e6; color: #7a4a00; }

/* --- Una diapositiva de la portada que no trae foto ---------------------- */
/* Se publica igual: quien la escribió quiere que su anuncio se vea, y hacerla
   desaparecer en silencio por no llevar imagen deja a alguien mirando la
   pantalla sin entender qué hizo mal. Se pinta con el azul de la casa. */
.hero-slide.hero-sin-foto {
  background: linear-gradient(135deg, var(--hospital) 0%, var(--hospital-dark) 100%);
}
.hero-slide.hero-sin-foto .hero-overlay { background: none; }

/* Una categoría que hace un trabajo en vez de ser una sección: "Giro" son las
   imágenes que giran en la portada. No se abre, no lleva diseño y no va al
   menú, así que no se le ofrecen esos botones. */
.sec-sistema { background: #eef3fb; color: var(--hospital); }
.sec-nota-uso { font-size: var(--txt-xs); color: var(--gray-600); }

/* =========================================================================
 * 18 · APROVECHAR LA PANTALLA DEL COMPUTADOR
 * =========================================================================
 * Todo el sitio estaba topado a 1.272 px, fuese la pantalla de 1366 o de
 * 1920. En un monitor de 1920 quedaban 324 px en blanco a cada lado: un
 * tercio de la pantalla vacío, y las noticias apretadas en el centro.
 *
 * Se ensancha TODO a la vez —cabecera, menú, secciones y pie— y no solo las
 * tarjetas: si las tarjetas fueran más anchas que el logo y el menú, el sitio
 * se vería descuadrado, como pegado a trozos.
 *
 * Por qué no de punta a punta: en un monitor de 2560 o en un televisor, cuatro
 * tarjetas de 600 px ya no se leen como una lista sino como carteles sueltos.
 * El tope de 1680 px deja un margen que respira.
 *
 * Qué NO cambia:
 *   · Cuántas tarjetas por fila. Siguen siendo las mismas, solo más grandes.
 *     Así no se descuadra la paginación (8 por página = 2 filas justas) ni
 *     quedan huecos al final de una fila.
 *   · El ancho de los párrafos: sigue en --ancho-lectura (sección 8), porque
 *     una línea de 1.500 px no hay quien la lea.
 *   · El teléfono y la tableta: esto empieza en 1280 px.
 * ====================================================================== */
@media (min-width: 1280px) {
  /* Solo los contenedores SIN ancho propio. Los que lo traen escrito (el
     texto de una entrada va a 52rem) se quedan como estaban: con el margen
     nuevo por dentro, la columna de lectura adelgazaba 80 px. */
  .container:not([style*="max-width"]),
  .contenedor:not([style*="max-width"]) {
    max-width: 1680px;
    padding-left: clamp(1.5rem, 4vw, 4rem);
    padding-right: clamp(1.5rem, 4vw, 4rem);
  }

  /* Las rejillas que se reparten solas («caben las que quepan») saltaban a
     cinco columnas con el ancho nuevo, y Servicios quedaba en 5 + 3 con
     huecos. Se quedan en cuatro, como antes, solo que más grandes. */
  .grid,
  .qs-rejilla-marco {
    grid-template-columns: repeat(4, 1fr);
  }

  /* La foto de la tarjeta crece con la tarjeta. Con los 196 px fijos de
     antes, una tarjeta de 370 px de ancho quedaba con la foto aplastada. */
  .grid-3 .news-card img,
  .grid-3 .news-card video,
  .grid-3 .news-card .sin-imagen,
  .grid-4 .news-card img,
  .grid-4 .news-card video,
  .grid-4 .news-card .sin-imagen {
    height: clamp(196px, 13vw, 240px) !important;
  }

  /* Los enlaces del pie: los de «Transparencia» llevaban escrito que van uno
     por línea, y los de «Enlaces rápidos» no. Con la columna más ancha
     cabían todos en una fila y se leían como una sola frase: «Inicio Quiénes
     Somos Servicios Informes Contacto». */
  .footer-main .list-none > .footer-link { display: flex; }

  /* (sigue abajo, en la 19, lo que depende del ALTO de la pantalla) */

  /* Y el titular también: a 15 px en una tarjeta ancha se veía perdido, y
     es lo primero que lee alguien que no ve bien de cerca. */
  .grid-3 .news-card .tarjeta-titulo,
  .grid-4 .news-card .tarjeta-titulo {
    font-size: var(--txt-md) !important;
  }
}

/* =========================================================================
 * 18b · CONTACTO: TARJETAS Y MAPA
 * =========================================================================
 * Cada dato va en su línea (cada una editable por separado), y los enlaces
 * para llamar y escribir se ven como enlaces: a quien usa el teléfono le
 * basta con tocarlos.
 * ====================================================================== */
.contacto-tarjetas { gap: 1.5rem; }
.contacto-lineas {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .9375rem;
  color: var(--gray-700);
}
.contacto-lineas a {
  color: var(--hospital);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
@media (pointer: coarse) { .contacto-lineas a { min-height: var(--tap); } }

.contacto-mapa-seccion { background: var(--gray-50); }
.contacto-mapa-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.25rem;
}
.contacto-mapa-cabecera h2 { font-size: var(--txt-2xl); color: var(--hospital); margin-bottom: .25rem; }
.contacto-mapa-cabecera p  { color: var(--gray-600); margin: 0; }
.contacto-llegar { min-height: var(--tap); display: inline-flex; align-items: center; }

/* El mapa ocupa el ancho del contenedor y se ajusta al alto de la pantalla:
   en un portátil no se come la página entera y en un monitor no queda en
   una tira. */
.contacto-mapa {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--sombra-2);
  background: var(--gray-100);
  height: clamp(300px, 55vh, 520px);
}
.contacto-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 640px) {
  .contacto-llegar { width: 100%; justify-content: center; }
  .contacto-mapa { height: 340px; }
}

/* =========================================================================
 * 19 · QUE LA PARTE DE ARRIBA SE AJUSTE AL ALTO DE LA PANTALLA
 * =========================================================================
 * Los márgenes eran los mismos en un monitor de 1080 de alto que en un
 * portátil de 768. En el portátil, antes de la primera tarjeta ya se habían
 * ido 339 px —cabecera 173, margen 56, título 70, hueco 40— y no se veía
 * ninguna tarjeta entera sin bajar. En la portada, cabecera más carrusel
 * sumaban 753 px: la pantalla entera, y nada debajo.
 *
 * Ahora los márgenes se miden en `vh` (una fracción del alto de la pantalla)
 * con un suelo y un techo:
 *   · en un monitor de 1080 de alto salen igual que antes;
 *   · en un portátil de 768 se encogen lo justo;
 *   · nunca bajan del suelo, para que nada quede pegado.
 *
 * Solo computador. El teléfono tiene sus propios márgenes (sección 11).
 * ====================================================================== */
@media (min-width: 1024px) {
  section {
    padding-top: clamp(1.75rem, 5.2vh, 3.5rem);
    padding-bottom: clamp(1.75rem, 5.2vh, 3.5rem);
  }
  .qs-seccion,
  .qs-portada {
    padding-top: clamp(1.75rem, 5.2vh, 3.5rem);
    padding-bottom: clamp(1.75rem, 5.2vh, 3.5rem);
  }
  .page-hero {
    padding-top: clamp(1.5rem, 4.4vh, 3rem);
    padding-bottom: clamp(1.5rem, 4.4vh, 3rem);
  }
  .titulo-seccion { margin-bottom: clamp(1.25rem, 3.7vh, 2.5rem); }

  /* Las secciones que traen su margen escrito en la propia etiqueta (la
     portada, Contacto, el texto de las entradas). Sin !important no se les
     puede ganar. */
  section[style*="padding:3rem 0"] {
    padding-top: clamp(1.5rem, 4.4vh, 3rem) !important;
    padding-bottom: clamp(1.5rem, 4.4vh, 3rem) !important;
  }
  section[style*="padding:3.5rem 0"] {
    padding-top: clamp(1.75rem, 5.2vh, 3.5rem) !important;
    padding-bottom: clamp(1.75rem, 5.2vh, 3.5rem) !important;
  }
  section[style*="padding:4rem 0"],
  section[style*="padding:4.5rem 0"] {
    padding-top: clamp(2rem, 5.9vh, 4rem) !important;
    padding-bottom: clamp(2rem, 5.9vh, 4rem) !important;
  }

  /* El carrusel de la portada: 580 px en un monitor grande, y en un
     portátil lo que deja ver que hay algo debajo. */
  .hero-wrap { height: clamp(420px, 62vh, 580px); }
}

/* Las tres barras de arriba (GOV.CO, la del hospital y el menú) medían 173 px
   juntas. En una pantalla baja se afinan: siguen ahí, se leen igual y se
   pulsan igual con el ratón, pero ocupan menos. */
@media (min-width: 1024px) and (max-height: 880px) {
  .govco-bar { padding-top: .25rem; padding-bottom: .25rem; }
  .govco-bar a { min-height: 32px; }
  .inst-bar { padding-top: .125rem; padding-bottom: .125rem; }
  .main-nav { padding-top: .375rem; padding-bottom: .375rem; }
}