/* =============================================================================
 * wordpress.css — El contenido que escribe el hospital, con la ropa del sitio
 * =============================================================================
 * POR QUÉ EXISTE ESTE ARCHIVO
 *
 * Todo lo que el equipo publica en WordPress llega aquí como HTML en crudo.
 * WordPress lo dibuja en su web con dos cosas que aquí NO tenemos:
 *
 *   · la hoja de estilos del tema, que da la tipografía, los colores y los
 *     márgenes;
 *   · un <style> que WordPress genera para cada página con las separaciones
 *     y los colores elegidos en el editor.
 *
 * El sitio nuevo no ejecuta WordPress —eso es lo que significa headless— así
 * que ninguna de las dos llega. Sin esto, una tabla sale como una tabla de
 * 1998 y un texto centrado sale a la izquierda.
 *
 * Aquí se viste todo eso con el diseño del hospital. Está ordenado por lo que
 * más se usa, medido sobre las 143 publicaciones reales del sitio:
 *
 *   1. Texto y títulos            5. Tablas
 *   2. Clases de WordPress        6. Listas y citas
 *   3. Cajas y columnas           7. Bloques de plugins que ya no están
 *   4. Imágenes y medios
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. TEXTO Y TÍTULOS
 * -------------------------------------------------------------------------- */
.contenido-wp h1 {
  font-size: 1.875rem; font-weight: 700; line-height: 1.25;
  color: var(--gray-800); margin: 2.5rem 0 1rem;
}
.contenido-wp h5,
.contenido-wp h6 {
  font-size: .9375rem; font-weight: 700; color: var(--gray-800); margin-top: 1.5rem;
}
.contenido-wp strong, .contenido-wp b { font-weight: 700; color: var(--gray-800); }
.contenido-wp em, .contenido-wp i { font-style: italic; }

/* El resaltador del editor. Sin estilo se veía como un fondo amarillo chillón
   del navegador, que no pega con nada. */
.contenido-wp mark {
  background: var(--hospital-light);
  color: var(--hospital);
  padding: .05em .25em;
  border-radius: 3px;
}
/* Cuando el editor lo usa solo para dar color a la letra, no para resaltar. */
.contenido-wp mark.has-inline-color { background: transparent; padding: 0; }

.contenido-wp code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em; background: var(--gray-100); color: var(--gray-800);
  padding: .1em .35em; border-radius: 4px;
}
.contenido-wp pre {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 1rem 1.25rem;
  overflow-x: auto; font-size: .875rem; line-height: 1.6;
}
.contenido-wp pre code { background: none; padding: 0; }

/* <center> y <font> son etiquetas de hace veinte años que aún aparecen en
   entradas viejas del hospital. Se respetan sin ensuciar el resto. */
.contenido-wp center { display: block; text-align: center; margin: 1.25rem 0; }
.contenido-wp font { font-family: inherit !important; font-size: inherit !important; }

.contenido-wp hr {
  border: 0; border-top: 1px solid var(--gray-200);
  margin: 2.5rem auto; max-width: 8rem;
}

/* -----------------------------------------------------------------------------
 * 2. LAS CLASES QUE PONE EL EDITOR DE WORDPRESS
 * -------------------------------------------------------------------------- */
/* Alineación elegida en el editor. Sin esto, todo salía a la izquierda. */
.contenido-wp .has-text-align-center  { text-align: center; }
.contenido-wp .has-text-align-right   { text-align: right; }
.contenido-wp .has-text-align-left    { text-align: left; }
.contenido-wp .has-text-align-justify { text-align: justify; }

/* Tamaños de letra del editor. */
.contenido-wp .has-small-font-size   { font-size: .875rem; }
.contenido-wp .has-medium-font-size  { font-size: 1.125rem; }
.contenido-wp .has-large-font-size   { font-size: 1.5rem; line-height: 1.3; }
.contenido-wp .has-x-large-font-size { font-size: 2rem; line-height: 1.2; }

/* La paleta que ofrece WordPress. El equipo la usa sobre todo para el rojo de
   los botones de descarga y el blanco sobre fondos oscuros. */
.contenido-wp .has-white-color         { color: #fff; }
.contenido-wp .has-black-color         { color: #111827; }
.contenido-wp .has-vivid-red-color     { color: #b91c1c; }
.contenido-wp .has-luminous-vivid-orange-color { color: #c2410c; }
.contenido-wp .has-vivid-green-cyan-color      { color: #047857; }
.contenido-wp .has-pale-cyan-blue-color        { color: #0e7490; }
.contenido-wp .has-white-background-color      { background-color: #fff; }
.contenido-wp .has-black-background-color      { background-color: #111827; }
.contenido-wp .has-vivid-red-background-color  { background-color: #b91c1c; }

/* -----------------------------------------------------------------------------
 * 3. CAJAS Y COLUMNAS
 * -------------------------------------------------------------------------- */
/* WordPress escribe estas clases para decir cómo se colocan las cosas dentro
   de una caja. Su significado lo pone el tema; aquí se define a mano. */
.contenido-wp .is-layout-flow > * + *        { margin-top: 1.25rem; }
.contenido-wp .is-layout-constrained > * + * { margin-top: 1.25rem; }
.contenido-wp .is-layout-flex {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
}
.contenido-wp .is-layout-flex.is-content-justification-center { justify-content: center; }
.contenido-wp .is-layout-flex.is-content-justification-right  { justify-content: flex-end; }
.contenido-wp .is-layout-flex.is-vertical { flex-direction: column; align-items: flex-start; }

/* Un grupo con fondo o borde propio necesita aire por dentro; uno sin nada,
   no, o dejaría huecos raros en mitad del texto. */
.contenido-wp .wp-block-group[style*="background"],
.contenido-wp .wp-block-group[class*="background-color"] {
  padding: 1.5rem; border-radius: var(--radius);
}

/* -----------------------------------------------------------------------------
 * 4. IMÁGENES Y MEDIOS
 * -------------------------------------------------------------------------- */
.contenido-wp .wp-block-image.is-resized img { height: auto; }
.contenido-wp .wp-block-image.alignleft  { float: left;  margin: .5rem 1.5rem 1rem 0; max-width: 50%; }
.contenido-wp .wp-block-image.alignright { float: right; margin: .5rem 0 1rem 1.5rem; max-width: 50%; }
.contenido-wp .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.contenido-wp .wp-block-image.aligncenter img { margin-inline: auto; }

/* Que un flotante no se salga de su sección. */
.contenido-wp::after { content: ""; display: table; clear: both; }

@media (max-width: 640px) {
  .contenido-wp .wp-block-image.alignleft,
  .contenido-wp .wp-block-image.alignright {
    float: none; max-width: 100%; margin: 1.25rem 0;
  }
}

/* -----------------------------------------------------------------------------
 * 5. TABLAS
 * -------------------------------------------------------------------------- */
/* La de Convocatorias se veía en crudo: sin cabecera marcada, sin filas
   alternas y con las celdas pegadas al borde. */
.contenido-wp .wp-block-table { margin: 2rem 0; overflow-x: auto; }
.contenido-wp .wp-block-table table,
.contenido-wp table {
  width: 100%; border-collapse: collapse;
  font-size: .9375rem; line-height: 1.55;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  overflow: hidden;
}
.contenido-wp thead th,
.contenido-wp table th {
  background: var(--hospital); color: #fff;
  font-weight: 600; font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .04em;
  text-align: left; padding: .75rem .9rem; border: 0;
  vertical-align: middle;
}
.contenido-wp table td {
  padding: .8rem .9rem; border: 0;
  border-top: 1px solid var(--gray-200);
  vertical-align: top; color: var(--gray-700);
}
.contenido-wp .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--gray-50); }
.contenido-wp table tbody tr:hover { background: var(--hospital-light); }

/* En una celda de descargas suele haber varios enlaces seguidos: se separan
   para poder pulsarlos con el dedo sin equivocarse. */
.contenido-wp table td a {
  display: inline-block; padding: .15rem 0; font-weight: 600;
}
.contenido-wp table td a + a { margin-top: .35rem; }

/* Filas que quedaron vacías al editar. Ocupaban una banda gris sin nada. */
.contenido-wp table tr:not(:has(td:not(:empty))):not(:has(th)) { display: none; }

.contenido-wp .wp-block-table figcaption {
  font-size: .8125rem; color: var(--gray-500); text-align: center; margin-top: .6rem;
}

@media (max-width: 640px) {
  .contenido-wp table { font-size: .875rem; }
  .contenido-wp thead th, .contenido-wp table td { padding: .6rem .55rem; }
}

/* -----------------------------------------------------------------------------
 * 6. LISTAS Y CITAS
 * -------------------------------------------------------------------------- */
.contenido-wp .wp-block-list { padding-left: 1.5rem; }
.contenido-wp .wp-block-list li::marker { color: var(--hospital); }
.contenido-wp ul.has-background,
.contenido-wp ol.has-background { padding: 1rem 1rem 1rem 2.25rem; border-radius: var(--radius); }

.contenido-wp .wp-block-quote,
.contenido-wp blockquote {
  border-left: 3px solid var(--hospital);
  background: var(--gray-50);
  padding: 1rem 1.25rem; margin: 1.75rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.contenido-wp blockquote cite {
  display: block; margin-top: .5rem; font-size: .8125rem;
  color: var(--gray-500); font-style: normal;
}

/* -----------------------------------------------------------------------------
 * 7. BLOQUES DE PLUGINS QUE YA NO ESTÁN
 * -------------------------------------------------------------------------- */
/* Línea de tiempo (Otter). El plugin se quitó y sin su hoja de estilos las
   fechas quedaban en una lista suelta. Se dibuja la línea a mano: es solo un
   borde y un punto por cada hito. */
.contenido-wp .o-timeline-root { position: relative; padding-left: 1.75rem; margin: 2rem 0; }
.contenido-wp .o-timeline-root::before {
  content: ""; position: absolute; left: .4rem; top: .5rem; bottom: .5rem;
  width: 2px; background: var(--gray-200);
}
.contenido-wp .wp-block-themeisle-blocks-timeline-item { position: relative; margin-bottom: 2rem; }
.contenido-wp .o-timeline-icon {
  position: absolute; left: -1.75rem; top: .3rem;
  width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--hospital); border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--gray-200);
}
.contenido-wp .o-timeline-icon i { display: none; }   /* usaba una tipografía que ya no se carga */
.contenido-wp .o-timeline-content > * + * { margin-top: .4rem; }
.contenido-wp .o-timeline-content h3 { margin-top: 0; font-size: 1.125rem; }

/* Visor de PDF (PDF Embedder). El plugin se quitó y el bloque quedó vacío:
   un párrafo sin nada dentro. Se le quita el hueco. El documento en sí lo
   recupera el plugin del hospital, que lo convierte en un bloque de archivo
   con su botón de descarga. */
.contenido-wp .wp-block-pdfemb-pdf-embedder-viewer:empty { display: none; }

/* Bloque de archivo de WordPress: el visor y su botón. */
.contenido-wp .wp-block-file {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.75rem 0;
}
.contenido-wp .wp-block-file > a:first-child { font-weight: 600; flex: 1 1 14rem; }

/* -----------------------------------------------------------------------------
 * 8. FOTOS QUE FALTAN, DENTRO DE UNA GALERÍA
 * -------------------------------------------------------------------------- */
/* Las galerías las dibuja la hoja de bloques de WordPress con reglas más
   específicas que las nuestras, así que su "display:block" ganaba y las fotos
   perdidas seguían ocupando su casilla: nueve recuadros vacíos en la noticia
   de la jornada de vacunación. Aquí se les gana de mano.

   Se oculta la casilla entera, no solo la imagen, para que la galería no
   quede con huecos; y si TODAS las fotos se perdieron, se oculta la galería,
   que si no deja una caja vacía en mitad del texto. */
.contenido-wp img.imagen-perdida { display: none !important; }

.contenido-wp .wp-block-gallery figure.wp-block-image:has(img.imagen-perdida) { display: none; }
.contenido-wp .wp-block-gallery:not(:has(img:not(.imagen-perdida))) { display: none; }

/* Lo mismo para una imagen suelta con su pie: sin esto quedaba el pie de foto
   flotando debajo de una imagen que ya no está. */
.contenido-wp figure.wp-block-image:has(> img.imagen-perdida) { display: none; }

/* -----------------------------------------------------------------------------
 * 9. TABLAS EN EL TELÉFONO
 * -------------------------------------------------------------------------- */
/* Una tabla de cuatro columnas no cabe en 375 px. Se desplaza dentro de su
   propia caja —la página nunca se mueve de lado—, pero sin ninguna señal el
   ciudadano no sabe que puede deslizarla y se pierde la columna de descargas.

   Estas dos sombras aparecen en el borde por el que queda tabla escondida y
   desaparecen solas al llegar al final. El truco es "background-attachment:
   local": los degradados blancos viajan con el contenido y tapan la sombra
   cuando ya no hay nada más que ver. Sin una línea de JavaScript. */
@media (max-width: 720px) {
  .contenido-wp .wp-block-table {
    background:
      linear-gradient(to right, #fff 28%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), #fff 72%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(18,35,59,.16), rgba(18,35,59,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(18,35,59,.16), rgba(18,35,59,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 42px 100%, 42px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Y se aprieta un poco para que haga falta deslizar lo menos posible. */
  .contenido-wp table { font-size: .8125rem; }
  .contenido-wp thead th, .contenido-wp table td { padding: .5rem .45rem; }
  .contenido-wp table td { overflow-wrap: break-word; }
  .contenido-wp table td a { font-size: .8125rem; }
}

/* El aviso que pone ui.js debajo de una tabla que no cabe. Solo aparece
   cuando de verdad sobra ancho, así que en el computador no se ve nunca. */
.contenido-wp .aviso-desliza {
  margin: -1.25rem 0 1.75rem;
  font-size: .8125rem;
  color: var(--gray-500);
  display: flex; align-items: center; gap: .4rem;
}
.contenido-wp .aviso-desliza::before { content: "↔"; font-size: 1rem; color: var(--hospital); }