/* =============================================================================
 * 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); }

/* =========================================================================
 * 10 · LISTAS DE CONCEPTOS COMO TARJETAS
 * =========================================================================
 * Las arma tarjetas-contenido.js a partir de documentos que en WordPress son
 * una lista de conceptos: valores, principios, políticas. Tres por fila en el
 * computador; en el teléfono se convierten en carrusel y mandan sus estilos.
 *
 * NO SE PULSAN: son contenido, no un índice. Por eso no llevan sombra de
 * "botón" ni cambian al pasar el puntero más de lo justo para que se note
 * que son piezas separadas.
 * ====================================================================== */
.hlpl-conceptos {
  display: grid;
  gap: 1.125rem;
  /* Con el ancho de lectura del sitio (52rem) esto da exactamente tres.
     Dentro de la ventana de Quiénes somos, que es más estrecha, da dos. */
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  margin: 1.75rem 0;
}

.hlpl-concepto {
  position: relative;
  border-radius: var(--radius, .5rem);
  padding: 1.5rem 1.25rem 1.35rem;
  background: var(--tono-fondo);
  border: 1px solid var(--tono-borde);
  overflow: hidden;
}

/* La franja de color de arriba, que es lo que las agrupa visualmente. */
.hlpl-concepto::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--tono);
}

/* El titulo llega de WordPress tal cual, y alli casi siempre viene dentro de
   un <strong>. Hay que nombrar tambien ese <strong>: la regla general de mas
   arriba lo pinta gris oscuro y se comia el color de la tarjeta. */
.contenido-wp .hlpl-concepto-titulo {
  margin: 0 0 .55rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tono-texto);
}
.contenido-wp .hlpl-concepto-titulo strong,
.contenido-wp .hlpl-concepto-titulo b {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.hlpl-concepto-cuerpo {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--gray-700, #374151);
}
.hlpl-concepto-cuerpo p:first-child { margin-top: 0; }
.hlpl-concepto-cuerpo p:last-child  { margin-bottom: 0; }
.hlpl-concepto-cuerpo strong        { color: var(--gray-800, #1f2937); }

/* --- Los tres tonos institucionales, turnándose --------------------------
   El color del título no es el mismo que el de la franja: el cian y el verde
   de la marca son luminosos y sobre fondo claro no se leerían. Se usa una
   versión oscurecida de cada uno, que sí contrasta. */
.hlpl-concepto[data-tono="0"] {
  --tono: #053272; --tono-texto: #053272; --tono-fondo: #eef3fb; --tono-borde: #d7e3f4;
}
.hlpl-concepto[data-tono="1"] {
  --tono: #00AFEF; --tono-texto: #05628a; --tono-fondo: #e9f7fd; --tono-borde: #cfeaf7;
}
.hlpl-concepto[data-tono="2"] {
  --tono: #A8CF45; --tono-texto: #5b7a12; --tono-fondo: #f3f8e7; --tono-borde: #e2eec6;
}

/* Un movimiento mínimo al pasar por encima: suficiente para que se entienda
   que son piezas sueltas, sin prometer que se pueden pulsar. */
@media (hover: hover) {
  .hlpl-concepto { transition: transform .25s ease, box-shadow .25s ease; }
  .hlpl-concepto:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(16, 32, 56, .09);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hlpl-concepto { transition: none; }
  .hlpl-concepto:hover { transform: none; }
}

/* En el carrusel del teléfono todas las tarjetas tienen que medir lo mismo,
   o al deslizar la caja da saltos y una parece más importante que otra.

   OJO CON height: 100%. Estaba puesto aquí y era justo lo que lo rompía:
   fijar una altura CANCELA el estirado de flex, y como la pista no tiene
   altura propia, ese 100 % no se puede calcular y acaba valiendo el alto del
   contenido. Resultado: cada tarjeta con su alto, de 128 a 202 px.

   Lo correcto es no decir nada de la altura y dejar que "align-items:
   stretch" iguale a todas con la más alta. */
.hlpl-conceptos-movil .hlpl-concepto {
  display: flex;
  flex-direction: column;
}
.hlpl-conceptos-movil .carrusel-pista { align-items: stretch; }

/* =========================================================================
 * 11 · DOCUMENTOS PDF
 * =========================================================================
 * Los arma documentos.js. Un informe oficial merece verse como un documento
 * —con su nombre, su peso y su botón— y no como una palabra subrayada.
 *
 * Y cuando el archivo ya no está en el servidor, la ficha lo dice en vez de
 * llevar al ciudadano a una página de error.
 * ====================================================================== */
.hlpl-doc {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.25rem 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-left: 4px solid var(--hospital);
  border-radius: var(--radius, .5rem);
  background: #fff;
}

.hlpl-doc-icono {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: .5rem;
  background: var(--hospital-light, #eef3fb);
  color: var(--hospital);
}
.hlpl-doc-icono svg { width: 1.5rem; height: 1.5rem; }

.hlpl-doc-txt { flex: 1 1 12rem; min-width: 0; display: block; }
.hlpl-doc-nombre {
  display: block;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--gray-800, #1f2937);
  overflow-wrap: anywhere;
}
.hlpl-doc-meta {
  display: block;
  font-size: .8125rem;
  color: var(--gray-500, #6b7280);
  margin-top: .15rem;
}

.hlpl-doc-acciones { display: flex; gap: .5rem; flex: none; flex-wrap: wrap; }
.hlpl-doc-ver, .hlpl-doc-bajar {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: var(--radius, .5rem);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
/* Con .contenido-wp delante: la regla general de los enlaces del contenido
   los pinta azules, y el boton azul se quedaba con la letra azul sobre azul,
   o sea invisible. */
.contenido-wp .hlpl-doc-ver,
.hlpl-doc-ver   { background: var(--hospital); color: #fff; }
.contenido-wp .hlpl-doc-bajar,
.hlpl-doc-bajar { background: transparent; color: var(--hospital);
                  border: 1px solid var(--gray-300, #d1d5db); }
.contenido-wp .hlpl-doc-ver:hover,
.hlpl-doc-ver:hover   { background: var(--hospital-dark, #032050); color: #fff; }
.contenido-wp .hlpl-doc-bajar:hover,
.hlpl-doc-bajar:hover { border-color: var(--hospital); }

/* Mientras se comprueba, no se ofrecen botones que quizá no lleven a nada. */
.hlpl-doc[data-estado="comprobando"] .hlpl-doc-acciones { opacity: .45; pointer-events: none; }

/* El archivo ya no está: se dice, y no se ofrece descargarlo. */
.hlpl-doc[data-estado="falta"] {
  border-left-color: var(--gray-300, #d1d5db);
  background: var(--gray-50, #f9fafb);
}
.hlpl-doc[data-estado="falta"] .hlpl-doc-icono { background: var(--gray-100, #f3f4f6); color: var(--gray-400, #9ca3af); }
.hlpl-doc[data-estado="falta"] .hlpl-doc-nombre { color: var(--gray-500, #6b7280); }
.hlpl-doc-aviso { font-size: .8125rem; color: var(--gray-500, #6b7280); font-style: italic; }

/* --- Enlaces sueltos dentro de una frase o de una tabla ------------------
   Ahí no cabe una ficha: rompería la tabla. Solo se les pone el icono. */
.contenido-wp a.hlpl-doc-enlace::before {
  content: "";
  display: inline-block;
  width: .85em; height: .85em;
  margin-right: .3em;
  vertical-align: -.08em;
  background: currentColor;
  -webkit-mask: var(--icono-pdf) center/contain no-repeat;
  mask: var(--icono-pdf) center/contain no-repeat;
}
:root {
  --icono-pdf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
}
.contenido-wp a.hlpl-doc-enlace-falta {
  color: var(--gray-500, #6b7280);
  text-decoration-line: line-through;
  pointer-events: none;
}
.hlpl-doc-nota { font-size: .8125rem; font-style: italic; text-decoration: none; }

@media (max-width: 640px) {
  .hlpl-doc { align-items: flex-start; }
  .hlpl-doc-acciones { width: 100%; }
  .hlpl-doc-ver, .hlpl-doc-bajar { flex: 1; text-align: center; }
}