/* ==========================================================================
   Nav móvil off-canvas — svf_theme
   Breakpoint: 1200px (alineado con el resto del sitio)
   ========================================================================== */
:root {
  --mnav-bg: #4E2568;
  --mnav-bg-2: #3E1D54;
  --mnav-line: rgba(255, 255, 255, .16);
  --mnav-cta-bg: var(--svf-acento-suave, #D7EBA5);
  --mnav-cta-text: #1C1C1C;
  --mnav-z: 1080;
}

/* --- Hamburguesa existente (bloque de contenido) ----------------------- */
.navbar-brand__btn-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.navbar-brand__btn-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
@media (min-width: 1200px) {
  .navbar-brand__btn-menu { display: none; }
}

/* --- Ocultar menú de escritorio en móvil -------------------------------
   Se apunta solo por .menu--menu-home. El ID de la colocación lleva el
   nombre del tema adentro (#block-svf-theme-menuhome contra
   #block-svf-theme-rionegro-menuhome), así que no sirve entre portales. */
@media (max-width: 1199.98px) {
  .menu--menu-home { display: none !important; }
}

/* --- Compensar barra de administración de Drupal ----------------------- */
body.toolbar-fixed .r-mobilenav,
body.toolbar-horizontal .r-mobilenav { top: 39px; }
body.toolbar-horizontal.toolbar-tray-open .r-mobilenav { top: 79px; }

/* --- Contenedor -------------------------------------------------------- */
.r-mobilenav {
  position: fixed;
  inset: 0;
  z-index: var(--mnav-z);
}
.r-mobilenav[hidden] { display: none; }

.r-mobilenav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .25s ease;
}
.r-mobilenav.is-open .r-mobilenav__backdrop { opacity: 1; }

/* --- Panel ------------------------------------------------------------- */
.r-mobilenav__panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  background: var(--mnav-bg);
  color: #fff;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  overscroll-behavior: contain;
}
.r-mobilenav.is-open .r-mobilenav__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .r-mobilenav__panel,
  .r-mobilenav__backdrop { transition: none; }
}

/* --- Cabecera ---------------------------------------------------------- */
.r-mobilenav__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mnav-line);
}
.r-mobilenav__logo {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
}
.r-mobilenav__logo img {
  display: block;
  height: 38px;
  width: auto;
}
.r-mobilenav__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* --- Cuerpo ------------------------------------------------------------ */
.r-mobilenav__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0 8px;
}

/* --- Buscador del panel ------------------------------------------------ */
.r-mobilenav__search {
  display: flex;
  align-items: center;
  margin: 0 20px 20px;
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  overflow: hidden;
}
.r-mobilenav__search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 18px;
  color: #fff;
  font-size: 16px;
  background: transparent;
  border: 0;
}
.r-mobilenav__search input::placeholder { color: rgba(255, 255, 255, .7); }
.r-mobilenav__search input:focus { outline: none; }
.r-mobilenav__search button {
  flex: 0 0 auto;
  width: 48px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}

/* --- Menú: forzar vertical (vence flex heredado del tema) -------------- */
.r-mobilenav__body ul,
.r-mobilenav__body ul.menu {
  display: block !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  align-items: unset !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.r-mobilenav__body li,
.r-mobilenav__body li.menu-item {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.r-mobilenav__body > ul > li > a,
.r-mobilenav__body .r-mobilenav__toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100% !important;
  min-height: 56px;
  padding: 14px 20px !important;
  color: #fff !important;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  text-decoration: none !important;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mnav-line);
  cursor: pointer;
}
.r-mobilenav__body > ul > li > a:hover,
.r-mobilenav__body .r-mobilenav__toggle:hover,
.r-mobilenav__body > ul > li > a.is-active {
  background: rgba(255, 255, 255, .08);
}

.r-mobilenav__toggle svg {
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.r-mobilenav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* --- Submenú ----------------------------------------------------------- */
.r-mobilenav__body li ul {
  display: none !important;
  background: var(--mnav-bg-2);
}
.r-mobilenav__body li ul.is-open { display: block !important; }
.r-mobilenav__body li ul > li > a {
  display: block !important;
  min-height: 48px;
  padding: 13px 20px 13px 36px !important;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* --- Pie --------------------------------------------------------------- */
.r-mobilenav__foot {
  flex: 0 0 auto;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mnav-line);
  background: var(--mnav-bg);
}
.r-mobilenav__cta {
  display: block;
  padding: 14px 20px;
  color: var(--mnav-cta-text) !important;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  background: var(--mnav-cta-bg);
  border-radius: 999px;
}
.r-mobilenav__portal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  color: rgba(255, 255, 255, .85) !important;
  font-size: 15px;
  text-decoration: none !important;
}

/* --- Foco -------------------------------------------------------------- */
.r-mobilenav a:focus-visible,
.r-mobilenav button:focus-visible,
.r-mobilenav input:focus-visible {
  outline: 2px solid var(--svf-acento-suave, #D7EBA5);
  outline-offset: -2px;
}

/* --- Bloqueo de scroll ------------------------------------------------- */
html.r-mobilenav-open,
body.r-mobilenav-open {
  overflow: hidden;
  touch-action: none;
}

/* --- Desktop ----------------------------------------------------------- */
@media (min-width: 1200px) {
  .r-mobilenav { display: none !important; }
}

/* ==========================================================================
   Header móvil — barra sólida estilo Figma

   Orden objetivo:  logo | ......... | Dona aquí | lupa | hamburguesa

   Para lograrlo hay que aplanar la jerarquía de Drupal con display:contents,
   de modo que el logo, el CTA, el buscador y el hamburguesa sean hermanos
   directos de .r-logo_col y el 'order' funcione entre ellos.

   REGLA DE ORO DE ESTE ARCHIVO: ningún selector cuelga de un ID de
   colocación de bloque. Esos IDs llevan el nombre del tema adentro y
   cambian entre instalaciones, así que rompen el header al cruzar de
   portal sin dar ningún aviso. Casos ya vistos:
     - logo:      #block-portalsanvicentelogo -> .block--logo-portal
                  (el ID real es 'portalsanvicentelogoo' en el local de EA
                   y 'portalsvflogos' en el servidor de Medellín)
     - buscador:  #block-formulariodebusqueda -> .r-logo_col .block-search
                  (en el subtema svf_theme_rionegro el ID es otro, así que
                   la lupa se quedaba con su forma de escritorio, con el
                   texto "Buscar" visible y unos 115px de ancho en vez de
                   38, y el logo cedía ese ancho hasta desaparecer)
     - menú:      #block-svf-theme-menuhome -> .menu--menu-home

   Las clases .block-search y .search-block-form las pone Drupal en el
   bloque de búsqueda sin importar el tema. Se baja la especificidad
   respecto al ID, pero todas las declaraciones de este bloque llevan
   !important, así que le siguen ganando a sv-main.css igual.
   ========================================================================== */
@media (max-width: 1199.98px) {

  /* Fondo sólido: vence el overlay transparente */
  body.has-header-overlay .r-header--home .r-logo,
  .r-header--home .r-logo,
  .r-logo {
    background: var(--mnav-bg) !important;
    background-color: var(--mnav-bg) !important;
    padding: 14px 0 !important;
  }

  /* Contenedor en fila */
  .r-logo_col {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 0 16px !important;
  }

  /* Aplanado de la jerarquía del bloque del logo */
  .block--logo-portal,
  .block--logo-portal .content,
  .block--logo-portal .field__item,
  .logo__menu__principal {
    display: contents !important;
  }

  /* Orden final. Se distingue el logo del CTA por clase: el CTA es un <a>
     que r-mobilenav.js agrega dentro de .logo__menu__principal, así que un
     selector genérico '> a' los agarraba a los dos. */
  .logo__menu__principal > a.brand-link {
    order: 1;
    margin-right: auto;
  }
  .logo__menu__principal > a.r-header-cta {
    order: 2;
    margin-right: 0;
  }
  .r-logo_col .block-search {
    order: 3;
  }

  /* La hamburguesa no cede ancho: con flex-shrink heredado en 1 pasaba de
     32px a 28px entre 480 y 440, encogiendo el área táctil justo cuando
     menos espacio hay. El único elemento negociable es el logo. */
  .navbar-brand__btn-menu {
    order: 4;
    flex: 0 0 auto;
  }

  /* Logo.

     Los PNG móviles llevan el nombre del hospital bajo el colibrí, así que
     necesitan bastante más alto que el corporativo. 75px es el tope, no un
     valor fijo: el archivo servido es de 205x77, de modo que a 75px de alto
     la imagen pide 200px de ancho y a partir de ahí ya no cabía junto al
     CTA, la lupa y la hamburguesa.

     El enlace tiene flex-shrink:1 y sí encoge, pero antes el <img> llevaba
     'height' fija y 'max-width:none', así que conservaba su ancho intrínseco
     y se salía por la derecha del enlace, quedando bajo el CTA "Dona aquí".
     Esa era la causa del descuadre entre 465-400 y entre 369-320: el mismo
     desborde en dos escalas de altura.

     La pareja que lo resuelve es 'max-width:100%' + 'height:auto'. Con la
     altura fija y solo max-width, el navegador recortaría el ancho
     manteniendo el alto y deformaría el logo; con las dos en auto y dos
     topes, respeta la proporción y se ajusta al hueco real.

     El min-width es un piso de seguridad: al volverse encogible, el logo
     cede TODO el ancho que le pidan. En Rionegro, con la lupa sin compactar
     llevándose 115px, quedaba reducido a un colibrí ilegible. Con el piso,
     si algo vuelve a robar ancho el síntoma es un desborde visible en vez
     de un logo que se desvanece en silencio. */
  .logo__menu__principal > a.brand-link {
    flex: 0 1 auto;
    min-width: 0;
  }
  .logo__menu__principal > a.brand-link picture {
    display: block;
    max-width: 100% !important;
  }
  .logo__menu__principal > a.brand-link img {
    display: block;
    width: auto !important;
    height: auto !important;
    min-width: 90px !important;
    max-width: 100% !important;
    max-height: 75px !important;
  }

  /* CTA colocado por JS */
  .r-header-cta {
    flex: 0 0 auto;
    padding: 11px 20px;
    color: var(--mnav-cta-text) !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    background: var(--mnav-cta-bg);
    border-radius: 999px;
  }

  /* Lupa.

     El botón es un <a class="btn-search"> vacío: la lupa la dibuja
     navbar-menu-home.css con un ::before y mask-image. El ícono se redibuja
     aquí con su propio mask en vez de heredar el de navbar-menu-home.css,
     para no depender de la ruta relativa a img/icons/ico-search.svg ni del
     orden de carga entre los dos archivos.

     El font-size:0 oculta el texto "Buscar" que el botón trae en su forma
     de escritorio. Antes no hacía falta porque el ancho fijo de 44px lo
     recortaba, pero conviene explícito: ese texto visible fue justamente
     lo que delató el problema en Rionegro.

     La apertura y el cierre del campo los sigue gobernando
     navbar-menu-home.css con .active-search; aquí no se tocan. */
  /* align-items y align-self llevan !important porque el selector nuevo
     (0,3,0) empata con '.r-header--home .search-block-form' de
     navbar-menu-home.css, que pone align-self:stretch. Con el ID viejo
     ganábamos por especificidad; ahora decidiría el orden de carga de
     las librerías, que no conviene dar por sentado. */
  .r-logo_col .block-search {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .r-logo_col .block-search .btn-search {
    display: grid !important;
    place-items: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: #ffffff !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
  }

  .r-logo_col .block-search .btn-search::after {
    content: none !important;
  }

  .r-logo_col .block-search .btn-search::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    transform: none !important;
    width: 26px !important;
    height: 26px !important;
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* El campo de texto recupera su tamaño: el font-size:0 del botón no debe
     heredarse al input cuando el buscador se abre. */
  .r-logo_col .block-search input {
    font-size: 16px !important;
    line-height: normal !important;
  }
}

/* --------------------------------------------------------------------------
   Pantallas muy angostas (< 400px)

   Con el logo a 75px, el CTA y los dos botones ya no caben en una fila de
   320-375px. Se reduce todo un escalón en vez de dejar que la barra se
   parta en dos líneas.
   -------------------------------------------------------------------------- */
@media (max-width: 399.98px) {
  .r-logo_col {
    gap: 6px !important;
    padding: 0 12px !important;
  }

  /* Solo baja el tope de altura: el ancho lo sigue gobernando el
     max-width:100% del bloque general, que es lo que impide el desborde. */
  .logo__menu__principal > a.brand-link img {
    max-height: 58px !important;
  }

  .r-header-cta {
    padding: 9px 14px;
    font-size: 13px;
  }

  .r-logo_col .block-search .btn-search {
    width: 38px !important;
    height: 38px !important;
  }

  .navbar-brand__btn-menu {
    width: 38px;
    height: 38px;
    padding: 8px;
  }

  /* Campo de búsqueda abierto.

     navbar-menu-home.css lo ancla con right:0 al propio botón de la lupa
     y le da 290px de ancho. A 320px eso se sale de la pantalla por la
     izquierda, porque el botón está a unos 60px del borde derecho.

     Aquí se ancla a la fila completa: se quita el position:relative del
     bloque para que el absolute resuelva contra .r-logo_col, y se estira
     de borde a borde con 12px de aire a cada lado. */
  .r-logo_col {
    position: relative !important;
  }

  .r-logo_col .block-search {
    position: static !important;
  }

  .r-logo_col .block-search .content {
    top: 50% !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: translateY(-50%) !important;
  }
}

/* ------------------------------------------------------------
   El CTA "Dona aquí" lo coloca r-mobilenav.js dentro de
   .logo__menu__principal para la barra móvil. En desktop el
   enlace ya viene de menu-home, así que se oculta el duplicado.
------------------------------------------------------------ */
@media (min-width: 1200px) {
  .logo__menu__principal .r-header-cta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Neutralizar el layout heredado de sv-main.css bajo 768px

   sv-main.css trae dos reglas del header viejo que rompen esta barra:

   1. .r-logo_col::before { content: ""; display: block; order: 1; }
      Un pseudoelemento vacío que servía de salto de línea cuando la fila
      iba en wrap. Con la barra en nowrap no salta: se queda ocupando
      ancho a la izquierda y empuja todo hacia la derecha.

   2. .r-logo_col > *:not(.navbar-brand__btn-menu):not(.navbar-brand):not(.block-search)
      { order: 2; }
      Especificidad (0,4,0), que le gana a los selectores de arriba y
      deshace el orden logo | CTA | lupa | hamburguesa.

   No se tocan esas reglas en su archivo porque siguen gobernando el header
   viejo mientras exista. Se anulan aquí, y solo en el tramo donde aplican.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .r-logo_col::before {
    content: none !important;
    display: none !important;
  }

  .r-logo_col > *:not(.navbar-brand__btn-menu):not(.navbar-brand):not(.block-search) {
    order: initial;
  }

  .logo__menu__principal > a.brand-link {
    order: 1 !important;
    margin-right: auto !important;
  }

  .logo__menu__principal > a.r-header-cta {
    order: 2 !important;
    margin-right: 0 !important;
  }

  .r-logo_col .block-search {
    order: 3 !important;
    display: flex !important;
  }

  .navbar-brand__btn-menu {
    order: 4 !important;
  }
}

/* --------------------------------------------------------------------------
   Tablet (768px – 1199.98px)

   En este tramo sobra ancho, así que el grupo de la derecha —Dona aquí,
   lupa y hamburguesa— se separa y respira. Por debajo de 768px se vuelve
   al espaciado compacto del bloque general, donde el ancho manda.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .r-logo_col {
    gap: 22px !important;
    padding: 0 32px !important;
  }

  .r-header-cta {
    padding: 13px 26px;
    font-size: 16px;
  }

  .r-logo_col .block-search .btn-search {
    width: 48px !important;
    height: 48px !important;
  }

  .r-logo_col .block-search .btn-search::before {
    width: 28px !important;
    height: 28px !important;
  }

  .navbar-brand__btn-menu {
    width: 48px;
    height: 48px;
    padding: 10px;
  }
}

/* --------------------------------------------------------------------------
   Color por portal en móvil

   Rionegro y el Home general conservan el morado corporativo; Medellín usa
   el verde institucional. Se hace redefiniendo las dos variables de las que
   ya cuelgan la barra, el panel off-canvas, su pie y los submenús, así que
   no hay que repetir el color en cada regla.

   La clase portal-medellin del <body> la pone svf_theme_preprocess_html().

   Va dentro del media query porque estas variables solo se usan por debajo
   de 1200px: en escritorio el header tiene su propio fondo en
   navbar-menu-home.css y .r-mobilenav está oculto.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  body.portal-medellin {
    --mnav-bg: var(--svf-primario, #004628);
    --mnav-bg-2: var(--svf-primario-oscuro, #00351E);
  }
}