/* =============================================================================
 * lovable.css — La vista del diseño original (Lovable: puerto-libertador-salud-web)
 * =============================================================================
 * QUÉ ES
 *
 * El sitio nació de un prototipo hecho en Lovable (React + Tailwind). Con el
 * tiempo la vista se fue separando: otros anchos, otros tamaños, otras
 * sombras. El 2026-09-14 se pidió volver a ella, «copia fiel de la vista, no
 * del contenido».
 *
 * Aquí están los valores de Tailwind del prototipo traducidos a CSS normal,
 * leídos de su código (tailwind.config.ts, index.css, Index.tsx, Navbar.tsx,
 * Footer.tsx, NewsCard.tsx, HealthTipCard.tsx, auto-carousel.tsx). No se
 * adivinó ninguno: al lado de cada bloque va la clase de Tailwind de la que sale.
 *
 * Carga la ÚLTIMA, después de sistema.css, para ganarle sin tener que
 * desmontarlo: si algún día se quiere volver atrás, basta con quitar la línea
 * que la carga en partials/header.php.
 *
 * LO QUE NO SE COPIÓ, A PROPÓSITO
 *
 *   · El carrusel NO pasa solo (en Lovable, cada 7 s). Lo pidió el hospital.
 *   · El botón cian lleva letra OSCURA. En Lovable la lleva blanca, con un
 *     contraste de 2,5:1; la ley pide 4,5:1.
 *   · Los puntos del carrusel se VEN de 12 px, como en Lovable, pero el botón
 *     que se pulsa sigue midiendo 36 × 44 (sistema.css, sección 3).
 *   · Ningún texto baja de 13 px (el suelo de sistema.css).
 *   · Las miniaturas de las notas de salud se quedan (Lovable pone un ícono).
 * ========================================================================== */

:root {
  /* hsl(215 91% 23%) y compañía, de src/index.css. Salen prácticamente iguales
     a los de la casa; se escriben para que nadie tenga que convertirlos. */
  --lv-hospital:      #053270;
  --lv-hospital-dark: #032049;
  --lv-cyan:          #00b0f0;
  --lv-texto:         #1a1a1a;            /* --foreground: 0 0% 10% */
  --lv-gris-50:  #f9fafb;
  --lv-gris-100: #f3f4f6;
  --lv-gris-200: #e5e7eb;
  --lv-gris-300: #d1d5db;
  --lv-gris-500: #6b7280;
  --lv-gris-600: #4b5563;
  --lv-gris-800: #1f2937;
  --lv-sombra-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --lv-sombra-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --lv-sombra-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --lv-radio:    .5rem;                   /* rounded-lg */
  --lv-radio-md: .375rem;                 /* rounded-md */
}

body { color: var(--lv-texto); line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.025em; }

/* ---------------------------------------------------------------------------
 * EL CONTENEDOR — container mx-auto px-4, con screens 2xl: 1400px
 * Ancho completo con 16 px de margen, y tope de 1400 px desde pantallas de 1400.
 * Los contenedores con ancho propio escrito (el texto de una entrada) se
 * respetan: son columnas de lectura.
 * ------------------------------------------------------------------------ */
.container:not([style*="max-width"]),
.contenedor:not([style*="max-width"]) {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 1400px) {
  .container:not([style*="max-width"]),
  .contenedor:not([style*="max-width"]) { max-width: 1400px; }
}
/* sistema.css (sección 18) lo llevaba a 1680 con márgenes de hasta 4 rem. */
@media (min-width: 1280px) {
  .container:not([style*="max-width"]),
  .contenedor:not([style*="max-width"]) { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------------------------------------------------------------------------
 * CABECERA
 * ------------------------------------------------------------------------ */
/* GovCoBar: bg-[#3366CC] py-2 text-sm; logo h-6 */
.govco-bar { background: #3366cc; padding: .5rem 0 !important; font-size: .875rem; }
.govco-bar img { height: 1.5rem !important; }
.govco-bar .desktop-only { gap: 1rem !important; }
/* Barra institucional: bg-hospital text-xs py-1.5, grupos con gap-4 */
.inst-bar { background: var(--lv-hospital); padding: .375rem 0 !important; }
.inst-bar .container > div { gap: 1rem !important; }
.inst-bar a, .govco-bar a {
  min-height: 24px;               /* el mínimo de la norma; en Lovable no hay */
  padding: 0;
  opacity: 1;
}
.inst-bar a:hover, .govco-bar a:hover { text-decoration: underline; }

/* nav: bg-white py-3 shadow-sm; enlaces text-gray-800 space-x-6 */
header.sticky { box-shadow: var(--lv-sombra-sm) !important; }
.main-nav { padding: .75rem 0 !important; border-bottom: 0; box-shadow: var(--lv-sombra-sm); }
/* HospitalLogo: caja h-10 (40 px) con la imagen h-14 (56 px) dentro. La imagen
   sobresale de su caja a propósito en Lovable, y por eso la barra mide 64 px
   y no 80. */
.main-nav .container > a:first-child { height: 2.5rem; overflow: visible; }
.main-nav .container > a img { height: 3.5rem !important; }
.nav-principal { gap: 1.5rem !important; }
.nav-link,
.nav-boton {
  color: var(--lv-gris-800);
  font-size: 1rem;
  font-weight: 400;
  transition: color .15s;
}
.nav-link:hover, .nav-boton:hover { color: var(--lv-hospital); }
/* En Lovable la página actual no se subraya. aria-current se queda: lo
   anuncia el lector de pantalla aunque no se vea. */
.nav-link.active { border-bottom: 0; color: var(--lv-gris-800); }

/* Desplegables del computador. Lovable no tiene submenús; se les da la forma
   del DropdownMenu de shadcn/ui del propio proyecto: bg-white border rounded-md
   shadow-md p-1; ítems rounded-sm px-2 py-1.5 text-sm, fondo gris al pasar. */
.submenu {
  padding: .25rem; border: 1px solid #dce1e7; border-radius: var(--lv-radio-md);
  box-shadow: var(--lv-sombra-md); min-width: 14rem;
}
.submenu a {
  padding: .5rem .5rem; border-radius: .125rem;
  font-size: .875rem; line-height: 1.25rem; color: var(--lv-texto);
}
.submenu a:hover, .submenu a:focus-visible { background: #f3f5f7; color: var(--lv-texto); }
.subsubmenu a { color: var(--lv-gris-600); font-size: .8125rem; }

/* Menú del teléfono — Navbar.tsx: bg-white border-t; enlaces py-2 text-gray-800
   hover:text-hospital, space-y-3, un <hr> antes de los accesos institucionales.
   Se conserva el panel con su propio desplazamiento (el menú del hospital tiene
   más de cuarenta enlaces) y el botón de cerrar, pero con la ropa de Lovable. */
@media (max-width: 1023px) {
  .mobile-menu { background: #fff; border-top: 1px solid #dce1e7; box-shadow: var(--lv-sombra-md); }
}
.mobile-menu-cabecera { background: #fff; color: var(--lv-texto); border-bottom: 1px solid #dce1e7; padding: .5rem 1rem; }
.mobile-menu-titulo { font-weight: 600; font-size: 1rem; }
.mobile-menu-cerrar { border: 1px solid #dce1e7; color: var(--lv-texto); border-radius: var(--lv-radio-md); }
.mobile-menu-cerrar:hover { background: #f3f5f7; }
.mobile-link {
  padding: .5rem 1rem; border-bottom: 0;
  font-size: 1rem; font-weight: 400; color: var(--lv-gris-800);
}
.mobile-link:hover { color: var(--lv-hospital); }
.mobile-sub { border-left: 0; margin: 0; padding-left: 0; }
.mobile-sub .mobile-link { padding-left: 2rem; font-size: .9375rem; color: var(--lv-gris-600); }
.mobile-link.nivel-3 { padding-left: 3rem; }
.mobile-menu > div:last-child { border-top: 1px solid #dce1e7 !important; margin: .5rem 1rem 0 !important; padding-top: .5rem !important; }
.mobile-menu > div:last-child .mobile-link { padding-left: 0; }

@media (max-width: 560px) {
  /* En el teléfono de Lovable el logo de GOV.CO va a la izquierda y los tres
     accesos van seguidos, alineados a la izquierda. */
  .govco-bar .container,
  .inst-bar .container { justify-content: flex-start !important; }
  .inst-bar .container > div { justify-content: flex-start; gap: .25rem 1rem !important; }
}

/* ---------------------------------------------------------------------------
 * BOTONES — .btn-primary de index.css: bg-hospital px-8 py-3 rounded-md font-medium
 * ------------------------------------------------------------------------ */
.btn-primary,
a.btn-primary {
  display: inline-block;
  background: var(--lv-hospital);
  color: #fff;
  padding: .75rem 2rem;
  border-radius: var(--lv-radio-md);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  transition: background-color .3s;
}
.btn-primary:hover { background: var(--lv-hospital-dark); color: #fff; }
@media (max-width: 768px) { .btn-primary, a.btn-primary { padding: .5rem 1.5rem; } }

/* Hero: bg-hospital-cyan px-8 py-3 rounded-md font-medium (letra oscura, ver arriba) */
.btn-cyan,
a.btn-cyan {
  background: var(--lv-cyan);
  padding: .75rem 2rem;
  border-radius: var(--lv-radio-md);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
.btn-cyan:hover { background: #0b9cd4; }

/* ---------------------------------------------------------------------------
 * CARRUSEL DE LA PORTADA — h-[600px]; velo negro al 50 %; max-w-xl
 * ------------------------------------------------------------------------ */
.hero-wrap { height: 600px !important; }
.hero-overlay { background: rgb(0 0 0 / .5); }
.hero-slide.hero-sin-foto .hero-overlay { background: none; }
/* La diapositiva es flex (para centrar en vertical), y dentro de un flex un
   bloque se encoge al ancho de su texto: el .container quedaba de 608 px y el
   margin:auto lo centraba, con el titular en mitad de la pantalla. En Tailwind
   .container lleva width:100%, y eso es lo que lo pega a la izquierda. */
.hero-slide > .container { width: 100%; }
.hero-content { max-width: 36rem; }
.hero-content h1,
.hero-content .hero-titulo {
  font-size: 3rem;                 /* text-5xl */
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.025em;
  margin-bottom: 1rem;
  text-shadow: none;
}
.hero-content p {
  font-size: 1.25rem;              /* text-xl */
  line-height: 1.75rem;
  opacity: 1;
  margin-bottom: 2rem;
}

/* Flechas: bg-white/70 rounded-full p-2 shadow-md, ícono h-6 text-gray-800 */
.hero-arrow,
#heroPrev, #heroNext {
  background: rgb(255 255 255 / .7);
  border: 0;
  backdrop-filter: none;
  color: var(--lv-gris-800);
  box-shadow: var(--lv-sombra-md);
  width: 44px; height: 44px;
  transition: background-color .15s;
}
#heroPrev { left: 1rem !important; }
#heroNext { right: 1rem !important; }
.hero-arrow:hover { background: #fff; }
.hero-arrow svg { width: 24px; height: 24px; }

/* Puntos: w-3 h-3 rounded-full, activo bg-hospital, resto bg-gray-300, bottom-4 */
.hero-dots { bottom: .25rem; gap: 0; }
.hero-dot::before {
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--lv-gris-300);
  transform: none;
}
.hero-dot.active::before { background: var(--lv-hospital); transform: none; }

/* En el teléfono Lovable junta las dos flechas abajo, en el centro (bottom-16). */
@media (max-width: 767px) {
  #heroPrev, #heroNext {
    top: auto;
    bottom: 4rem;
    transform: none;
    width: 40px; height: 40px;
  }
  #heroPrev { left: calc(50% - 48px) !important; }
  #heroNext { right: calc(50% - 48px) !important; }
  .hero-arrow svg { width: 20px; height: 20px; }
}

/* ---------------------------------------------------------------------------
 * LAS SECCIONES DE LA PORTADA
 * Clases nuevas (lv-…), para que las reglas antiguas de sistema.css —que
 * apuntan a .contact-line-card o a los estilos escritos en línea— no las toquen.
 * ------------------------------------------------------------------------ */
section.lv-seccion { padding: 4rem 0; }                   /* py-16 */
section.lv-seccion.lv-py-12 { padding: 3rem 0; }         /* py-12 */
.lv-fondo-gris   { background: var(--lv-gris-50); }
.lv-fondo-blanco { background: #fff; }
@media (max-width: 1023px) {
  main > section.lv-seccion { padding: 4rem 0 !important; }
  main > section.lv-seccion.lv-py-12 { padding: 3rem 0 !important; }
}

.lv-cabecera { text-align: center; margin-bottom: 3rem; }  /* text-center mb-12 */
.lv-h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; }   /* text-3xl */
.lv-subtitulo { color: var(--lv-gris-600); margin-top: .5rem; }
.lv-pie-seccion { text-align: center; margin-top: 3rem; }  /* mt-12 */

.lv-rejilla-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .lv-rejilla-3 { grid-template-columns: repeat(3, 1fr); } }
.lv-rejilla-3.lv-gap-10 { gap: 2.5rem; }

/* Accesos: flex items-start space-x-4; círculo w-12 h-12 bg-hospital */
.lv-acceso { display: flex; align-items: flex-start; gap: 1rem; }
.lv-circulo {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: var(--lv-hospital);
}
.lv-circulo-12 { width: 3rem; height: 3rem; }
.lv-circulo-12 svg { width: 1.5rem; height: 1.5rem; }
.lv-circulo-16 { width: 4rem; height: 4rem; margin: 0 auto 1rem; }
.lv-circulo-16 svg { width: 2rem; height: 2rem; }
.lv-h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: .5rem; }  /* text-xl */
.lv-gris { color: var(--lv-gris-600); }
.lv-enlace {
  color: var(--lv-hospital);
  font-weight: 500;
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.lv-enlace:hover { text-decoration: underline; }

/* Líneas de contacto: bg-gray-50 p-8 rounded-lg text-center */
.lv-linea {
  background: var(--lv-gris-50);
  padding: 2rem;
  border-radius: var(--lv-radio);
  text-align: center;
  transition: box-shadow .15s, transform .15s;
}
.lv-linea:hover { box-shadow: var(--lv-sombra-md); }
.lv-linea p { color: var(--lv-gris-600); margin-bottom: 1rem; }
.lv-linea .lv-tel {
  display: block;
  font-size: 1.5rem; line-height: 2rem;            /* text-2xl */
  font-weight: 700;
  color: var(--lv-hospital);
}
.lv-linea .lv-horario { font-size: .875rem; color: var(--lv-gris-500); margin: .5rem 0 0; }

/* «Llamar»: el número es texto editable (data-cms) y este botón, al lado, arma
   su tel: con ese texto (ui.js, data-tel). Zona táctil de 44 px. */
.lv-llamar {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  min-height: 2.75rem; padding: .25rem .875rem; border-radius: 9999px;
  font-size: .9375rem; font-weight: 600; color: var(--lv-hospital);
  text-decoration: underline; text-underline-offset: 3px;
}
.lv-llamar::before { content: "📞"; font-size: .875rem; text-decoration: none; }
.lv-llamar:hover { background: #f0f5fb; }
.lv-linea .lv-llamar { margin-top: -.25rem; }
.lv-linea.lv-destacada .lv-llamar { color: #fff; }
.lv-linea.lv-destacada .lv-llamar:hover { background: rgba(255,255,255,.12); }
/* La del centro: bg-hospital text-white, círculo blanco con ícono azul, hover:scale-105 */
.lv-linea.lv-destacada { background: var(--lv-hospital); color: #fff; }
.lv-linea.lv-destacada:hover { box-shadow: none; transform: scale(1.05); }
.lv-linea.lv-destacada p,
.lv-linea.lv-destacada .lv-tel,
.lv-linea.lv-destacada .lv-horario { color: #fff; }
.lv-linea.lv-destacada .lv-circulo { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .lv-linea.lv-destacada:hover { transform: none; }
}

/* Sobre el hospital: max-w-3xl, p text-lg mb-8, h2 mb-6 */
.lv-sobre { max-width: 48rem; margin: 0 auto; text-align: center; }
.lv-sobre .lv-h2 { margin-bottom: 1.5rem; }
.lv-sobre p { font-size: 1.125rem; line-height: 1.75rem; color: var(--lv-gris-600); margin-bottom: 2rem; }

/* Urgencias: py-12 bg-hospital; h2 text-2xl mb-2; recuadros bg-white text-hospital px-5 py-3 rounded-md */
.lv-urgencias { background: var(--lv-hospital); color: #fff; }
.lv-urgencias-fila { display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.lv-urgencias-fila > div:first-child { margin-bottom: 1.5rem; }
.lv-urgencias h2 { font-size: 1.5rem; line-height: 2rem; margin-bottom: .5rem; color: #fff; }
.lv-urgencias-botones { display: flex; gap: 1rem; }
.lv-urgencias-caja,
a.lv-urgencias-caja {
  background: #fff;
  color: var(--lv-hospital);
  padding: .75rem 1.25rem;
  border-radius: var(--lv-radio-md);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
a.lv-urgencias-caja:hover { background: var(--lv-gris-100); }
@media (min-width: 768px) {
  .lv-urgencias-fila { flex-direction: row; }
  .lv-urgencias-fila > div:first-child { margin-bottom: 0; }
}

/* ---------------------------------------------------------------------------
 * TARJETAS — NewsCard y HealthTipCard
 * bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg
 * ------------------------------------------------------------------------ */
.lv-tarjeta,
.card.lv-tarjeta {
  background: #fff;
  border: 0;
  border-radius: var(--lv-radio);
  box-shadow: var(--lv-sombra-md);
  overflow: hidden;
  transition: box-shadow .15s;
  color: inherit;
}
.lv-tarjeta:hover,
.news-card.lv-tarjeta:hover { box-shadow: var(--lv-sombra-lg); transform: none; }

/* Foto: w-full h-48 object-cover. sistema.css (sección 18) la estiraba con
   !important según el ancho; aquí manda la medida de Lovable. */
.news-card.lv-tarjeta img,
.news-card.lv-tarjeta video,
.news-card.lv-tarjeta .sin-imagen,
.grid-3 .news-card.lv-tarjeta img,
.grid-3 .news-card.lv-tarjeta video,
.grid-3 .news-card.lv-tarjeta .sin-imagen,
.grid-4 .news-card.lv-tarjeta img,
.grid-4 .news-card.lv-tarjeta video,
.grid-4 .news-card.lv-tarjeta .sin-imagen {
  height: 12rem !important;
  width: 100%;
  object-fit: cover;
}
.lv-tarjeta-cuerpo { padding: 1.25rem; }                    /* p-5 */
.lv-fecha {
  display: flex; align-items: center; gap: .25rem;
  color: var(--lv-gris-500);
  font-size: .875rem;
  margin-bottom: .5rem;
}
.lv-tarjeta .tarjeta-titulo,
.grid-3 .news-card.lv-tarjeta .tarjeta-titulo,
.grid-4 .news-card.lv-tarjeta .tarjeta-titulo {
  font-size: 1.25rem !important;   /* text-xl */
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--lv-texto);
  margin-bottom: .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lv-tarjeta .tarjeta-resumen {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--lv-gris-600);
  margin-bottom: 1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lv-tarjeta .tarjeta-pie {
  color: var(--lv-hospital);
  font-weight: 500;
  font-size: 1rem;
  display: inline-flex; align-items: center; gap: .25rem;
  min-height: 24px;
}
.lv-tarjeta:hover .tarjeta-pie,
.lv-tarjeta .tarjeta-pie:hover { text-decoration: underline; }

/* Nota de salud: bg-white p-6 rounded-lg shadow-md (con miniatura, a propósito) */
.lv-nota { padding: 1.5rem; }
.lv-nota .cabecera-nota { margin: 0 0 1rem; border-radius: var(--lv-radio-md); overflow: hidden; }
.lv-nota .cabecera-nota .sin-imagen { height: 150px; }

/* ---------------------------------------------------------------------------
 * PIE — bg-gray-100 py-10; grid 4 gap-8
 * ------------------------------------------------------------------------ */
.lv-pie { background: var(--lv-gris-100); padding: 2.5rem 0; }
.lv-pie-rejilla { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .lv-pie-rejilla { grid-template-columns: repeat(4, 1fr); } }
.lv-pie-logo img { height: 3.5rem !important; width: auto; }
.lv-pie-texto { margin-top: 1rem; color: var(--lv-gris-600); font-size: .875rem; }
.lv-pie-dato { color: var(--lv-gris-500); font-size: var(--txt-xs, .8125rem); margin-top: .25rem; }
.lv-pie-dato:first-of-type { margin-top: .5rem; }
.lv-pie h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; margin-bottom: 1rem; }   /* text-lg font-semibold */
.lv-pie-lista { list-style: none; padding: 0; margin: 0; }
.lv-pie-lista li + li { margin-top: .5rem; }                /* space-y-2 */
.lv-pie .footer-link,
.lv-pie-lista a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  color: var(--lv-gris-600);
  font-size: .875rem;
}
.lv-pie .footer-link:hover, .lv-pie-lista a:hover { color: var(--lv-hospital); }
@media (pointer: coarse) { .lv-pie .footer-link { min-height: 24px; } }

/* NewsletterForm: h3 mb-2; p text-sm text-gray-500 mb-3; botón bg-hospital px-4 py-2 rounded */
.lv-boletin h3 { margin-bottom: .5rem; }
.lv-boletin > p { font-size: .875rem; color: var(--lv-gris-500); margin-bottom: .75rem; }
.lv-boletin .form-input { background: #fff; border-color: var(--lv-gris-200); border-radius: var(--lv-radio-md); }
.lv-boletin button {
  background: var(--lv-hospital); color: #fff;
  padding: .5rem 1rem; border: 0; border-radius: .25rem;
  font: inherit; font-size: 1rem; cursor: pointer;
  width: 100%; min-height: 40px;
}
.lv-boletin button:hover { background: var(--lv-hospital-dark); }
.lv-boletin .lv-aviso { font-size: var(--txt-xs, .8125rem); color: var(--lv-gris-500); margin-top: .5rem; }

/* Enlaces de interés: mt-8 pt-6 border-t; h3 text-sm font-semibold mb-3; fila flex-wrap gap-4 text-xs */
.lv-interes { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--lv-gris-200); }
.lv-pie .lv-interes h3 { font-size: .875rem; line-height: 1.25rem; margin-bottom: .75rem; }
.lv-interes-fila { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.lv-interes-fila a {
  color: var(--lv-gris-500);
  font-size: var(--txt-xs, .8125rem);
  display: inline-flex; align-items: center; min-height: 24px;
}
.lv-interes-fila a:hover { color: var(--lv-hospital); }

/* Derechos + redes: mt-6 pt-6 border-t; flex-col md:flex-row justify-between */
.lv-derechos {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lv-gris-200);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.lv-derechos p { text-align: center; color: var(--lv-gris-600); font-size: .875rem; }
.lv-redes { display: flex; gap: 1rem; margin-top: 1rem; }
.lv-redes a {
  color: var(--lv-gris-600);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px;
}
.lv-redes a:hover { color: var(--lv-hospital); }
.lv-redes svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) {
  .lv-derechos { flex-direction: row; }
  .lv-redes { margin-top: 0; }
}

/* Franja GOV.CO del pie: bg-[#3366CC] py-6; logo h-8; enlaces text-xs gap-4 */
.lv-govco-pie { background: #3366cc; color: #fff; padding: 1.5rem 0; }
.lv-govco-fila { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 768px) { .lv-govco-fila { flex-direction: row; } }
.lv-govco-pie img { height: 2rem !important; width: auto; }
.lv-govco-enlaces { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; font-size: var(--txt-xs, .8125rem); }
.lv-govco-enlaces a { color: #fff; display: inline-flex; align-items: center; min-height: 24px; }
.lv-govco-enlaces a:hover { text-decoration: underline; }
.lv-govco-enlaces span { opacity: .5; }

/* =============================================================================
 * PÁGINAS INTERIORES
 * ========================================================================== */

/* Paddings de sección que no se dejan pisar por sistema.css (que mete los
   suyos con !important en el teléfono y según el alto de pantalla). */
main > section.lv-cab-gris,
section.lv-cab-gris              { padding: 3rem 0 !important; }
main > section.lv-cab-azul,
section.lv-cab-azul              { padding: 4rem 0 !important; }
main > section.lv-cab-azul.lv-cab-compacta,
section.lv-cab-azul.lv-cab-compacta { padding: 3rem 0 !important; }
main > section.lv-pad-8,  section.lv-pad-8  { padding: 2rem 0 !important; }
main > section.lv-pad-10, section.lv-pad-10 { padding: 2.5rem 0 !important; }
main > section.lv-pad-12, section.lv-pad-12 { padding: 3rem 0 !important; }
main > section.lv-pad-16, section.lv-pad-16 { padding: 4rem 0 !important; }

/* Cabecera gris — bg-gray-50 py-12; h1 text-4xl text-center; p mt-4 max-w-3xl */
.lv-cab-gris { background: var(--lv-gris-50); }
.lv-cab-gris h1 {
  font-size: 2.25rem; line-height: 2.5rem; font-weight: 700;
  text-align: center; color: var(--lv-texto); margin: 0;
}
.lv-cab-gris p { color: var(--lv-gris-600); text-align: center; margin: 1rem auto 0; max-width: 48rem; }

/* Cabecera azul — bg-hospital py-16; max-w-3xl; h1 text-3xl md:text-4xl mb-4; p text-lg opacity-90 */
.lv-cab-azul { background: var(--lv-hospital); color: #fff; }
.lv-cab-azul-texto { max-width: 48rem; }
.lv-cab-azul h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: #fff; margin-bottom: 1rem; }
.lv-cab-azul p  { font-size: 1.125rem; line-height: 1.75rem; opacity: .9; margin: 0; color: #fff; }
@media (min-width: 768px) { .lv-cab-azul h1 { font-size: 2.25rem; line-height: 2.5rem; } }

/* Barra de búsqueda y filtros — py-8 bg-white border-b */
.lv-barra { background: #fff; border-bottom: 1px solid #dce1e7; }
.lv-barra-fila { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .lv-barra-fila { flex-direction: row; align-items: center; justify-content: space-between; } }
.lv-buscar { position: relative; flex-grow: 1; max-width: 28rem; }
.lv-buscar svg {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: #9ca3af; pointer-events: none;
}
.lv-input {
  display: flex; width: 100%; height: 2.5rem;
  border: 1px solid #dce1e7; border-radius: var(--lv-radio-md);
  background: #fff; padding: .5rem .75rem;
  font: inherit; font-size: 1rem; color: var(--lv-texto);
}
@media (min-width: 768px) { .lv-input { font-size: .875rem; } }
.lv-buscar .lv-input { padding-left: 2.5rem; }
.lv-input::placeholder { color: #6b7a8c; }
.lv-input:focus-visible { outline: 2px solid var(--lv-cyan); outline-offset: 2px; }
.lv-pastillas { display: flex; flex-wrap: wrap; gap: .5rem; }
.lv-pastilla {
  padding: .25rem .75rem; min-height: 32px;
  font: inherit; font-size: .875rem;
  border: 0; border-radius: 9999px; cursor: pointer;
  background: var(--lv-gris-100); color: #374151;
  transition: background-color .15s, color .15s;
}
.lv-pastilla:hover { background: var(--lv-gris-200); }
.lv-pastilla[aria-pressed="true"] { background: var(--lv-hospital); color: #fff; }

/* Rejilla de noticias — grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 */
.lv-rejilla-noticias { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px)  { .lv-rejilla-noticias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lv-rejilla-noticias { grid-template-columns: repeat(3, 1fr); } }
.lv-rejilla-noticias > .estado { grid-column: 1 / -1; }

/* Estado vacío — text-center py-16; h3 text-xl font-semibold mb-2 */
.lv-vacio { text-align: center; padding: 4rem 0; grid-column: 1 / -1; }
.lv-vacio h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; margin-bottom: .5rem; }
.lv-vacio p { color: var(--lv-gris-600); }
.lv-vacio .btn-primary { margin-top: 1rem; }

/* Paginación — la de shadcn/ui (components/ui/pagination.tsx) */
.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem; margin-top: 3rem; }
.paginacion .pag-btn {
  height: 2.5rem; min-width: 2.5rem; padding: 0 .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--lv-radio-md);
  background: transparent; color: var(--lv-texto);
  font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer;
  transition: background-color .15s;
}
.paginacion .pag-btn:hover:not(:disabled) { background: var(--lv-gris-100); }
.paginacion .pag-btn.actual { border-color: #dce1e7; background: #fff; }
.paginacion .pag-btn:disabled { opacity: .5; cursor: default; }
.paginacion .pag-puntos { width: 2.25rem; text-align: center; color: var(--lv-gris-500); }

/* Detalle — una sola columna centrada (2026-09-15). La columna lateral de
   NoticiaDetalle.tsx (últimas noticias, notas, urgencias) se quitó a pedido del
   hospital: descentraba el contenido y las imágenes centradas se veían corridas. */
.lv-detalle-fila { display: block; }
/* Mismo ancho que los párrafos (--ancho-lectura de sistema.css): así el título,
   la portada, el texto y una imagen centrada comparten el mismo eje. Con una
   columna más ancha que el texto, la imagen centrada quedaba corrida a la derecha. */
.lv-detalle-principal { width: 100%; max-width: var(--ancho-lectura, 44rem); min-width: 0; margin-inline: auto; }

/* Visor de documentos de Informes: la entrada que solo trae un PDF lo muestra
   aquí mismo, con sus botones de abrir y descargar. */
.lv-visor { margin-bottom: 2rem; }
.lv-visor + .lv-visor { margin-top: 2.5rem; }
.lv-visor-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .875rem 1rem; border: 1px solid #dce1e7; border-bottom: 0;
  border-radius: var(--lv-radio) var(--lv-radio) 0 0; background: var(--lv-gris-50, #f9fafb);
}
.lv-visor-nombre { font-weight: 600; color: var(--lv-texto); overflow-wrap: anywhere; }
.lv-visor-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.lv-visor-acciones a { min-height: 2.75rem; }   /* zona táctil de 44 px, también en el teléfono */
.lv-visor-marco {
  display: block; width: 100%; height: 80vh; min-height: 32rem;
  border: 1px solid #dce1e7; border-radius: 0 0 var(--lv-radio) var(--lv-radio); background: #fff;
}
.lv-visor-sin, .lv-visor-movil { padding: 1.25rem 1rem; color: var(--lv-gris-600, #4b5563); }
.lv-visor-movil {
  display: none; border: 1px solid #dce1e7; border-radius: 0 0 var(--lv-radio) var(--lv-radio);
}
/* En el teléfono los navegadores no muestran un PDF incrustado (o solo su
   primera página): se abre aparte con el botón. */
@media (max-width: 767px) {
  .lv-visor-marco { display: none; }
  .lv-visor-movil { display: block; }
  .lv-visor-acciones, .lv-visor-acciones a { width: 100%; justify-content: center; }
}
.lv-boton-contorno {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  padding: .5rem 1rem; border: 1px solid var(--lv-hospital); border-radius: var(--lv-radio-md);
  color: var(--lv-hospital); background: #fff; font-weight: 500; text-decoration: none;
}
.lv-boton-contorno:hover { background: var(--lv-hospital); color: #fff; }
.lv-migas { font-size: .875rem; color: var(--lv-gris-500); margin-bottom: .75rem; }
.lv-migas a { color: var(--lv-gris-500); text-decoration: underline; text-underline-offset: 3px; }
.lv-migas a:hover { color: var(--lv-hospital); }
.lv-detalle-titulo { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--lv-texto); }
@media (max-width: 640px) { .lv-detalle-titulo { font-size: 1.875rem; line-height: 2.25rem; } }
.lv-detalle-fecha { color: var(--lv-gris-500); margin-bottom: 1.5rem; }
.lv-detalle-portada {
  width: 100%; height: 16rem; object-fit: cover;
  border-radius: var(--lv-radio); margin-bottom: 2rem; display: block;
}
@media (min-width: 768px) { .lv-detalle-portada { height: 24rem; } }

/* Card de shadcn/ui — rounded-lg border bg-card shadow-sm; CardContent p-4 */
.lv-card { border: 1px solid #dce1e7; border-radius: var(--lv-radio); background: #fff; box-shadow: var(--lv-sombra-sm); color: var(--lv-texto); }
.lv-card-cuerpo { padding: 1rem; }
.lv-card-titulo { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 1rem; }
.lv-lista-aside { list-style: none; margin: 0; padding: 0; }
.lv-lista-aside li + li { border-top: 1px solid #dce1e7; margin-top: .75rem; padding-top: .75rem; }
.lv-lista-aside a { display: block; color: var(--lv-texto); transition: color .15s; }
.lv-lista-aside a:hover { color: var(--lv-hospital); }
.lv-aside-titulo { display: block; font-weight: 500; }
.lv-aside-fecha { display: block; font-size: .875rem; color: var(--lv-gris-500); }
.lv-card-azul { background: var(--lv-hospital); border-color: var(--lv-hospital); color: #fff; }
.lv-card-azul .lv-card-titulo { margin-bottom: .5rem; color: #fff; }
.lv-card-azul p { margin-bottom: 1rem; color: #fff; }
.lv-boton-blanco {
  display: inline-flex; align-items: center; min-height: 40px;
  background: #fff; color: var(--lv-hospital);
  font-weight: 600; padding: .5rem 1rem; border-radius: .25rem;
}
.lv-boton-blanco:hover { background: var(--lv-gris-100); }

/* 404 — NotFound.tsx */
.lv-404 { text-align: center; padding: 4rem 1rem; }
.lv-404-circulo {
  width: 5rem; height: 5rem; margin: 0 auto 1.5rem;
  border-radius: 9999px; background: var(--lv-hospital); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.875rem; font-weight: 700;
}
.lv-404 h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
.lv-404 p { font-size: 1.25rem; line-height: 1.75rem; color: var(--lv-gris-600); margin: 0 auto 2rem; max-width: 40rem; }

/* Mapa del sitio — MapaSitio.tsx */
.lv-mapa { max-width: 56rem; margin: 0 auto; display: grid; gap: 2rem; }
.lv-mapa h2 {
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--lv-hospital);
  margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #dce1e7;
}
.lv-mapa ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 640px) { .lv-mapa ul { grid-template-columns: repeat(2, 1fr); } }
.lv-mapa a { color: var(--lv-texto); display: inline-flex; align-items: center; gap: .25rem; min-height: 24px; text-underline-offset: 4px; }
.lv-mapa a:hover { color: var(--lv-hospital); text-decoration: underline; }
.lv-mapa .lv-sub a { padding-left: 1rem; color: var(--lv-gris-600); }
.lv-caja-muted { background: #f3f5f7; border-radius: var(--lv-radio); padding: 1.5rem; }
.lv-caja-muted h2 { border: 0; padding: 0; margin-bottom: .75rem; }
.lv-caja-muted p { font-size: .875rem; color: var(--lv-gris-600); }

/* ServiceCard — Card overflow-hidden hover:shadow-lg h-full flex flex-col;
   CardHeader p-6 pb-3 centrado; ícono text-hospital h-12 mb-4; CardTitle text-xl;
   CardDescription text-sm text-muted-foreground; botón ghost text-hospital */
.lv-servicio {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid #dce1e7; border-radius: var(--lv-radio);
  background: #fff; box-shadow: var(--lv-sombra-sm); overflow: hidden;
  color: var(--lv-texto); transition: box-shadow .3s;
}
.lv-servicio:hover { box-shadow: var(--lv-sombra-lg); }
.lv-servicio-cab { padding: 1.5rem 1.5rem .75rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lv-servicio-icono { color: var(--lv-hospital); margin-bottom: 1rem; display: flex; }
.lv-servicio-icono svg { width: 3rem; height: 3rem; }
.lv-servicio h2 { font-size: 1.25rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -.025em; margin: 0; }
.lv-servicio-desc { padding: 0 1.5rem .5rem; flex-grow: 1; font-size: .875rem; line-height: 1.25rem; color: #5c6f8a; text-align: center; margin: 0; }
.lv-servicio-pie { padding: 0 1.5rem 1.5rem; display: flex; justify-content: center; }
.lv-boton-fantasma {
  display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem;
  border-radius: var(--lv-radio-md); font-size: .875rem; font-weight: 500;
  color: var(--lv-hospital); transition: background-color .15s;
}
.lv-servicio:hover .lv-boton-fantasma { background: #eef3fb; }
.lv-servicio:focus-visible { outline: 3px solid var(--lv-cyan); outline-offset: 2px; }

/* Anchos de lectura de Lovable: max-w-4xl / max-w-5xl mx-auto */
.lv-ancho-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; }
.lv-ancho-5xl { max-width: 64rem; margin-left: auto; margin-right: auto; }

/* Participa — h2 text-2xl font-bold text-hospital text-center mb-8;
   grid md:2 lg:3 gap-6; Card hover:shadow-md; ícono text-hospital-cyan h-8 */
.lv-h2-hospital { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--lv-hospital); text-align: center; margin-bottom: 2rem; }
.lv-rejilla-canales { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px)  { .lv-rejilla-canales { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lv-rejilla-canales { grid-template-columns: repeat(3, 1fr); } }
.lv-canal { display: block; padding: 1.5rem; transition: box-shadow .15s; }
.lv-canal:hover { box-shadow: var(--lv-sombra-md); }
.lv-canal:focus-visible { outline: 3px solid var(--lv-cyan); outline-offset: 2px; }
.lv-canal-icono { display: flex; color: var(--lv-cyan); margin-bottom: .5rem; }
.lv-canal-icono svg { width: 2rem; height: 2rem; }
.lv-canal h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -.025em; margin: 0 0 .75rem; color: var(--lv-texto); }
.lv-canal p { font-size: .875rem; line-height: 1.25rem; color: #5c6f8a; margin: 0; }
.lv-canal:hover h3 { color: var(--lv-hospital); }

/* Card con borde cian suave — border-hospital-cyan/30 bg-hospital-cyan/5 */
.lv-card-cian { border-color: rgb(0 176 240 / .3); background: rgb(0 176 240 / .05); padding: 1.5rem; }
.lv-card-titulo-grande { font-size: 1.5rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -.025em; color: var(--lv-hospital); margin-bottom: 1.25rem; }
.lv-lista-ley { list-style: disc; padding-left: 1.25rem; margin: 0; font-size: .875rem; line-height: 1.25rem; color: #5c6f8a; }
.lv-lista-ley li + li { margin-top: .5rem; }
.lv-lista-ley strong { color: var(--lv-texto); }

/* Nota legal — bg-hospital-cyan/10 border-l-4 border-hospital-cyan py-4 text-sm */
main > section.lv-pad-4, section.lv-pad-4 { padding: 1rem 0 !important; }
.lv-nota-legal { background: rgb(0 176 240 / .1); border-left: 4px solid var(--lv-cyan); }
.lv-nota-legal p { font-size: .875rem; line-height: 1.25rem; color: #5c6f8a; margin: 0; }
.lv-nota-legal strong { color: var(--lv-texto); }
.lv-nota-legal a { color: var(--lv-hospital); text-decoration: underline; }

/* Acordeón de shadcn/ui — space-y-3; item border rounded-lg px-4 bg-card;
   trigger py-4 font-semibold con ícono text-hospital y chevron que gira */
.lv-acordeon { display: flex; flex-direction: column; gap: .75rem; }
.lv-acordeon-item { border: 1px solid #dce1e7; border-radius: var(--lv-radio); background: #fff; padding: 0 1rem; }
.lv-acordeon-titulo {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--lv-texto);
}
.lv-acordeon-titulo::-webkit-details-marker { display: none; }
.lv-acordeon-titulo:focus-visible { outline: 3px solid var(--lv-cyan); outline-offset: 2px; border-radius: .25rem; }
.lv-acordeon-icono { display: flex; color: var(--lv-hospital); flex: none; }
.lv-acordeon-icono svg { width: 1.25rem; height: 1.25rem; }
.lv-acordeon-texto { flex: 1; text-align: left; }
.lv-acordeon-flecha { width: 1rem; height: 1rem; flex: none; transition: transform .2s; }
.lv-acordeon-item[open] .lv-acordeon-flecha { transform: rotate(180deg); }
.lv-acordeon-cuerpo { padding: 0 0 1rem; font-size: .875rem; line-height: 1.25rem; color: #5c6f8a; }
.lv-acordeon-cuerpo p + ul, .lv-acordeon-cuerpo p + p { margin-top: .75rem; }
.lv-acordeon-cuerpo a { color: var(--lv-hospital); text-decoration: underline; text-underline-offset: 3px; }
.lv-lista-enlaces { list-style: disc; padding-left: 1.25rem; margin: 0; }
.lv-lista-enlaces li + li { margin-top: .5rem; }
.lv-lista-enlaces a { display: inline-flex; align-items: center; min-height: 24px; }
@media (prefers-reduced-motion: reduce) { .lv-acordeon-flecha { transition: none; } }

.lv-con-icono { display: flex; align-items: center; gap: .5rem; }
.lv-con-icono svg { width: 1.25rem; height: 1.25rem; }
.lv-texto-apagado { font-size: .875rem; line-height: 1.25rem; color: #5c6f8a; margin-bottom: 1rem; }
.lv-texto-apagado strong { color: var(--lv-texto); }
.lv-boton-icono { display: inline-flex !important; align-items: center; gap: .5rem; padding: .5rem 1rem !important; }
.lv-boton-icono svg { width: 1rem; height: 1rem; }

/* Contacto — Contacto.tsx: grid lg:grid-cols-2 gap-8; tarjeta bg-white p-8
   rounded-lg shadow-md; mapa h-[550px] rounded-lg shadow-md; debajo
   grid md:2 lg:4 gap-8 de tarjetas p-6 con círculo bg-hospital-light */
.lv-tarjeta-blanca { background: #fff; border-radius: var(--lv-radio); box-shadow: var(--lv-sombra-md); }
.lv-contacto-fila { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .lv-contacto-fila { grid-template-columns: repeat(2, 1fr); } }
.lv-contacto-pqrsd { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.lv-contacto-pqrsd h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1rem; }
.lv-contacto-pqrsd > p { color: var(--lv-gris-600); margin-bottom: 1.5rem; }
.lv-boton-ancho {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 3rem; padding: .75rem 1rem; border-radius: var(--lv-radio-md);
  background: var(--lv-hospital); color: #fff; font-weight: 500;
  transition: background-color .15s;
}
.lv-boton-ancho:hover { background: var(--lv-hospital-dark); color: #fff; }
.lv-contacto-o { text-align: center; font-size: .875rem; color: var(--lv-gris-500); margin: 1.25rem 0 .75rem !important; }
.lv-boton-borde {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 3rem; padding: .75rem 1rem; border-radius: var(--lv-radio-md);
  background: #fff; border: 1px solid var(--lv-hospital); color: var(--lv-hospital); font-weight: 500;
}
.lv-boton-borde:hover { background: var(--lv-gris-50); }
.lv-contacto-mapa {
  position: relative; height: 550px; background: #fff;
  border-radius: var(--lv-radio); box-shadow: var(--lv-sombra-md); overflow: hidden;
}
.lv-contacto-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.lv-mapa-abrir {
  position: absolute; right: .75rem; bottom: .75rem;
  display: inline-flex; align-items: center; min-height: 40px; padding: .5rem 1rem;
  background: #fff; color: var(--lv-hospital); font-weight: 600; font-size: .875rem;
  border-radius: var(--lv-radio-md); box-shadow: var(--lv-sombra-md);
}
@media (max-width: 640px) { .lv-contacto-mapa { height: 380px; } }

.lv-contacto-datos { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px)  { .lv-contacto-datos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lv-contacto-datos { grid-template-columns: repeat(4, 1fr); } }
.lv-dato { display: flex; align-items: flex-start; gap: 1rem; background: #fff; padding: 1.5rem; border-radius: var(--lv-radio); box-shadow: var(--lv-sombra-md); }
.lv-dato-icono { flex: none; width: 3rem; height: 3rem; border-radius: 9999px; background: #f5f7fa; color: var(--lv-hospital); display: flex; align-items: center; justify-content: center; }
.lv-dato-icono svg { width: 1.5rem; height: 1.5rem; }
.lv-dato h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; margin-bottom: .25rem; }
.lv-dato .contacto-lineas { color: var(--lv-gris-600); font-size: 1rem; }
.lv-dato .contacto-lineas a { color: var(--lv-hospital); }

/* Informes — Tabs de shadcn/ui: TabsList h-10 rounded-md bg-muted p-1;
   TabsTrigger rounded-sm px-3 py-1.5 text-sm font-medium, activa bg-background
   shadow-sm. Filas: bg-white p-6 rounded-lg shadow-sm border-gray-100
   hover:shadow-md; h3 text-lg font-semibold; botón bg-hospital px-4 py-2 text-sm */
.lv-pestanas-barra { display: flex; justify-content: center; margin-bottom: 2rem; overflow-x: auto; }
.lv-pestanas-lista {
  display: inline-flex; align-items: center; gap: .125rem;
  min-height: 2.5rem; padding: .25rem; border-radius: var(--lv-radio-md);
  background: #f3f5f7; color: #5c6f8a; white-space: nowrap;
}
.lv-pestanas-lista[hidden] { display: none !important; }
.lv-pestana {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2rem; padding: .375rem .75rem; border: 0; border-radius: .125rem;
  background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 500;
  transition: background-color .15s, color .15s;
}
.lv-pestana[aria-selected="true"] { background: #fff; color: var(--lv-texto); box-shadow: var(--lv-sombra-sm); }
.lv-pestana:focus-visible { outline: 2px solid var(--lv-cyan); outline-offset: 2px; }
@media (max-width: 767px) {
  .lv-pestanas-barra { justify-content: flex-start; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem; }
}
.lv-panel + .lv-panel { margin-top: 3rem; }
.lv-panel[hidden] { display: none; }
.lv-panel-titulo { font-size: 1.5rem; line-height: 2rem; font-weight: 700; text-align: center; margin-bottom: 1.5rem; }
.lv-documentos { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1rem; }
.lv-documento {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; padding: 1.5rem; border: 1px solid var(--lv-gris-100);
  border-radius: var(--lv-radio); box-shadow: var(--lv-sombra-sm); transition: box-shadow .15s;
}
.lv-documento:hover { box-shadow: var(--lv-sombra-md); }
.lv-documento-icono { flex: none; display: flex; color: var(--lv-hospital); }
.lv-documento-icono svg { width: 1.5rem; height: 1.5rem; }
.lv-documento-texto { flex: 1; min-width: 0; }
.lv-documento h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.lv-documento-boton {
  flex: none; display: inline-flex; align-items: center; min-height: 40px;
  background: var(--lv-hospital); color: #fff; padding: .5rem 1rem;
  border-radius: var(--lv-radio-md); font-size: .875rem; transition: background-color .15s;
}
.lv-documento-boton:hover { background: var(--lv-hospital-dark); color: #fff; }
/* Las cabeceras grises de Lovable van en mayúsculas: NOTICIAS, SERVICIOS,
   QUIÉNES SOMOS, INFORMES, CONTACTO. El texto sigue siendo el de WordPress o
   el de «Editar textos»; solo cambia cómo se ve. */
.lv-cab-gris h1 { text-transform: uppercase; }

/* Contacto — la tarjeta del formulario: bg-white p-8 rounded-lg shadow-md; h2 text-2xl mb-6 */
.lv-contacto-form { padding: 2rem; }
.lv-contacto-form > h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1.5rem; }
.lv-contacto-nota { margin-top: 1rem; font-size: .875rem; color: var(--lv-gris-500); }
.lv-contacto-nota a { color: var(--lv-hospital); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .lv-contacto-form { padding: 1.25rem; } }

/* Servicios — la tarjeta es un botón que abre la ventana (Dialog de ServiceCard) */
.lv-servicio-ficha { height: 100%; }
button.lv-servicio { width: 100%; font: inherit; cursor: pointer; text-align: center; padding: 0; }
.lv-servicio-ficha .qs-titulo { font-size: 1.25rem; line-height: 1.5rem; font-weight: 600; margin: 0; text-align: center; color: var(--lv-texto); }
.lv-servicio-ficha .qs-cara { display: none; }

/* «Publicado: 15 de abril de 2024» — text-gray-500 text-sm mt-1 */
.lv-documento-fecha { color: var(--lv-gris-500); font-size: .875rem; margin: .25rem 0 0; }
.lv-vacio-corto { padding: 2rem 0; }
/* «También puedes ver: Notas de Salud · Boletín de Prensa» — lo que colgaba del
   desplegable de Noticias, ahora a la vista bajo el buscador */
.lv-relacionadas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; font-size: .875rem; color: var(--lv-gris-500); }
.lv-relacionadas a { color: var(--lv-hospital); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 24px; }
/* Menú plano (Navbar.tsx): space-x-6, sin flechas */
.nav-principal .nav-link { display: inline-flex; align-items: center; }
/* Fichas de Quiénes Somos y del diseño «Fichas» — QuienesSomos.tsx:
   bg-white p-8 rounded-lg shadow-md; círculo w-12 h-12 bg-hospital mb-6 con
   ícono blanco h-6; h3 text-xl font-bold mb-4; p text-gray-600 */
.lv-rejilla-3.qs-rejilla, .lv-rejilla-noticias.qs-rejilla { gap: 2rem; }
.qs-ficha.lv-ficha, .qs-ficha { height: 100%; }
.qs-ficha .qs-cara {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  width: 100%; height: 100%; padding: 2rem;
  background: #fff; border: 0; border-radius: var(--lv-radio);
  box-shadow: var(--lv-sombra-md); text-align: left;
  transition: box-shadow .15s; transform: none;
}
.qs-ficha .qs-cara::before { display: none; }
.qs-ficha .qs-cara:hover { box-shadow: var(--lv-sombra-lg); transform: none; border-color: transparent; }
.qs-ficha .qs-icono {
  width: 3rem; height: 3rem; border-radius: 9999px; margin-bottom: 1.5rem;
  background: var(--lv-hospital); color: #fff; transform: none;
}
.qs-ficha .qs-cara:hover .qs-icono { background: var(--lv-hospital); color: #fff; transform: none; }
.qs-ficha .qs-icono svg { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
.qs-ficha .qs-titulo { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--lv-texto); margin: 0 0 1rem; }
.qs-ficha .qs-cara:hover .qs-titulo { color: var(--lv-texto); }
.qs-ficha .qs-breve { font-size: 1rem; line-height: 1.5rem; color: var(--lv-gris-600); margin: 0; }
.qs-ficha .qs-pista { margin-top: auto; padding-top: 1.25rem; font-size: 1rem; font-weight: 500; color: var(--lv-hospital); }
.qs-ficha .qs-cara:hover .qs-pista { text-decoration: underline; }
.qs-ficha .qs-cara:focus-visible { outline: 3px solid var(--lv-cyan); outline-offset: 2px; }
.qs-cabecera { margin-bottom: 3rem; }
.qs-cabecera h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--lv-texto); }
.qs-cabecera .kicker { display: none; }
.qs-cabecera p { color: var(--lv-gris-600); margin-top: .5rem; }
main > section.qs-seccion { padding: 4rem 0 !important; }

/* Salud.tsx — bg-hospital-light p-8 rounded-lg; flex md:flex-row items-center
   gap-6; círculo w-24 h-24 bg-hospital con ícono w-12; h2 text-2xl mb-3.
   Llamada final: py-16 bg-gray-50 text-center; h2 text-3xl mb-6; p text-lg
   mb-8 max-w-2xl; botones flex-col md:flex-row gap-4 */
.lv-salud-intro {
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  background: #f5f7fa; padding: 2rem; border-radius: var(--lv-radio);
}
@media (min-width: 768px) { .lv-salud-intro { flex-direction: row; } }
.lv-salud-circulo {
  flex: none; width: 6rem; height: 6rem; border-radius: 9999px;
  background: var(--lv-hospital); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.lv-salud-circulo svg { width: 3rem; height: 3rem; }
.lv-salud-intro h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: .75rem; }
.lv-salud-intro p { color: #374151; }
.lv-llamada { text-align: center; }
.lv-llamada h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; margin-bottom: 1.5rem; }
.lv-llamada p { font-size: 1.125rem; line-height: 1.75rem; color: var(--lv-gris-600); max-width: 42rem; margin: 0 auto 2rem; }
.lv-llamada-botones { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
@media (min-width: 768px) { .lv-llamada-botones { flex-direction: row; } }
.lv-boton-secundario {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 2rem; border-radius: var(--lv-radio-md);
  background: #fff; border: 1px solid var(--lv-hospital); color: var(--lv-hospital); font-weight: 500;
}
.lv-boton-secundario:hover { background: var(--lv-gris-50); }

/* PQRSD / Atención al Ciudadano — AtencionCiudadano.tsx:
   canales grid md:2 lg:4 gap-6, Card text-center, ícono text-hospital-cyan h-8;
   bloques max-w-4xl mb-12; tiempos y datos grid md:2 gap-6 */
.lv-bloque { margin-top: 3rem; }
.lv-canales-atencion { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px)  { .lv-canales-atencion { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lv-canales-atencion { grid-template-columns: repeat(4, 1fr); } }
.lv-canal-centro { text-align: center; padding: 1.5rem; }
.lv-canal-centro .lv-canal-icono { justify-content: center; margin-bottom: .75rem; }
.lv-canal-centro h3 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; margin-bottom: .5rem; }
.lv-canal-centro p { font-size: .875rem; color: #5c6f8a; margin: 0; }
.lv-canal-centro a { color: var(--lv-hospital); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 24px; align-items: center; }
.lv-romper { overflow-wrap: anywhere; }
.lv-izquierda { text-align: left; margin-bottom: 1.5rem; }
.lv-dos-columnas { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .lv-dos-columnas { grid-template-columns: repeat(2, 1fr); } }
.lv-card-padding { padding: 1.5rem; }
.lv-card-subtitulo { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--lv-hospital); margin-bottom: 1rem; }
.lv-lista-plana { list-style: none; padding: 0; margin: 0; font-size: .875rem; color: #5c6f8a; }
.lv-lista-plana li + li { margin-top: .5rem; }
.lv-lista-plana strong { color: var(--lv-texto); }
.lv-nota-pequena { font-size: .8125rem; font-style: italic; color: #5c6f8a; margin-top: .75rem; }

/* La tarjeta del formulario — Contacto.tsx: bg-white p-8 rounded-lg shadow-md;
   h2 text-2xl mb-6; label text-sm font-medium text-gray-700 mb-1;
   Input h-10 rounded-md border px-3; botón w-full bg-hospital py-3 rounded-md */
.lv-form-tarjeta { padding: 2rem; }
.lv-form-tarjeta > h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: .5rem; }
@media (max-width: 640px) { .lv-form-tarjeta { padding: 1.25rem; } }
.lv-form.pqrsd-formulario { max-width: none; margin: 0; }
.lv-form .wpcf7-form p { margin: 0 0 1.5rem; }
.lv-form .wpcf7-form label { display: block; font-size: .875rem; font-weight: 500; color: #374151; }
.lv-form .wpcf7-form input[type="text"],
.lv-form .wpcf7-form input[type="email"],
.lv-form .wpcf7-form input[type="tel"],
.lv-form .wpcf7-form select,
.lv-form .wpcf7-form textarea {
  display: block; width: 100%; margin-top: .25rem;
  min-height: 2.75rem; padding: .5rem .75rem;
  border: 1px solid #dce1e7; border-radius: var(--lv-radio-md); background: #fff;
  font: inherit; font-size: 1rem; color: var(--lv-texto);
}
.lv-form .wpcf7-form textarea { min-height: 8rem; }
.lv-form .wpcf7-form input:focus-visible,
.lv-form .wpcf7-form select:focus-visible,
.lv-form .wpcf7-form textarea:focus-visible { outline: 2px solid var(--lv-cyan); outline-offset: 2px; border-color: var(--lv-cyan); }
.lv-form .wpcf7-form input[type="submit"],
.lv-form .wpcf7-form button[type="submit"] {
  width: 100%; min-height: 3rem; padding: .75rem 1rem;
  border: 0; border-radius: var(--lv-radio-md);
  background: var(--lv-hospital); color: #fff;
  font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer;
  transition: background-color .15s;
}
.lv-form .wpcf7-form input[type="submit"]:hover,
.lv-form .wpcf7-form button[type="submit"]:hover { background: var(--lv-hospital-dark); }
.lv-form .wpcf7-form input[type="submit"]:disabled { opacity: .7; cursor: progress; }

@media (max-width: 640px) {
  .lv-documento { flex-wrap: wrap; padding: 1.25rem; }
  .lv-documento-texto { flex-basis: calc(100% - 2.5rem); }
  .lv-documento-boton { width: 100%; justify-content: center; }
}