/*
  Cabecera de página (la "barra azul")
  ------------------------------------------------------------------
  La barra era un bloque plano de #15558d con el título en blanco, heredado de la
  plantilla. Se veía pesada, no compartía paleta con el resto del sitio y en la portada
  repetía "Inicio" justo encima del titular.

  Aquí se sustituye por una cabecera clara sobre la paleta real de la plataforma
  (cian #20c0f3, menta #09e5ab, navy #272b41), en la línea de MeCare y KiviCare: fondo
  suave, un filete de color como acento y la ruta de navegación en pequeño sobre el
  título. En la portada la barra ya no se dibuja.

  Se carga en _Layout después de la hoja de la plantilla, así que gana sin !important.
*/

.breadcrumb-bar {
    --cm-cyan: #20c0f3;
    --cm-mint: #09e5ab;
    --cm-navy: #272b41;
    --cm-gray: #6b7385;
    --cm-rule: #e3e8ef;

    position: relative;
    background: linear-gradient(180deg, #f7fbfd 0%, #ffffff 100%);
    border-bottom: 1px solid var(--cm-rule);
    padding: 26px 0 24px;
}

/* Filete de acento: reemplaza el bloque de color por una línea fina. */
.breadcrumb-bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cm-cyan) 0%, var(--cm-mint) 100%);
}

.breadcrumb-bar .breadcrumb-title {
    color: var(--cm-navy);
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin: 6px 0 0;
}

/* Ruta de navegación: encima del título, discreta. */
.breadcrumb-bar .page-breadcrumb ol,
.breadcrumb-bar .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .02em;
}

.breadcrumb-bar .breadcrumb-item a {
    color: var(--cm-gray);
    text-decoration: none;
    transition: color .15s ease;
}

.breadcrumb-bar .breadcrumb-item a:hover { color: var(--cm-cyan); }

.breadcrumb-bar .breadcrumb-item.active { color: var(--cm-navy); font-weight: 600; }

/* El separador de Bootstrap 4 es un "/" gris por defecto; se suaviza. */
.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
    color: #c2cad6;
    content: "›";
    padding: 0 8px 0 6px;
    font-weight: 400;
}

@media (max-width: 600px) {
    .breadcrumb-bar { padding: 20px 0 18px; }
}

/*
  Firma de la empresa que opera la plataforma. Va junto al copyright, en un tono
  discreto para no competir con la marca del producto.
*/
.cm-powered {
    display: inline-block;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .22);
    font-size: .82em;
    opacity: .78;
    white-space: nowrap;
}

.cm-powered strong { font-weight: 600; letter-spacing: .01em; }

@media (max-width: 575px) {
    .cm-powered {
        display: block;
        margin: 6px 0 0;
        padding: 0;
        border-left: 0;
    }
}

/*
  Cabecera fija
  ------------------------------------------------------------------
  El menú se perdía al hacer scroll y había que subir del todo para navegar. Ahora la
  barra se queda arriba. Al desplazarse gana sombra y se compacta un poco, para que no
  robe altura de lectura en pantallas cortas.
*/

.header {
    position: sticky;
    /* Arriba del todo. La banda de ambiente de pruebas va dentro de la cabecera, así
       que no hay nada con lo que coordinarse. */
    top: 0;
    z-index: 1030;
    background: #fff;
    transition: box-shadow .2s ease, padding .2s ease;
}

.header.cm-header--fixed {
    box-shadow: 0 2px 4px rgba(39, 43, 65, .04), 0 8px 24px rgba(39, 43, 65, .09);
}

/* El logo NO se compacta al desplazarse. Lo hacía —de 42 a 38 píxeles— para
   recuperar altura útil, pero cuatro píxeles no se leen como un efecto: se leen
   como un salto, y lo primero que se pregunta quien lo ve es si está roto. O el
   cambio es visible y con intención, o no se hace. */

/* La banda vive dentro de la cabecera, así que no necesita posicionarse: se queda
   arriba porque la cabecera se queda arriba. */
.cm-band-test {
    position: relative;
    z-index: 1;
}

/* La plantilla declara la banda como fixed y compensa con
   "body.has-test-banner { margin-top: 20px !important }". Aquí es sticky, así que
   ocupa su sitio en el flujo y ese margen sobra: dejaba una franja gris de veinte
   píxeles sobre la banda y descuadraba todo lo que se apoya en su altura. */
/* La plantilla declara la banda como fixed y compensa con
   "body.has-test-banner { margin-top: 20px !important }". Aquí va dentro de la
   cabecera y ocupa su sitio en el flujo, así que ese margen sobra: dejaba una franja
   gris de veinte píxeles sobre la banda. */
body.has-test-banner {
    margin-top: 0 !important;
}



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

/* ==========================================================================
   Menús desplegables: visibilidad con Bootstrap 5
   --------------------------------------------------------------------------
   La plantilla anima los menús con opacidad, visibilidad y desplazamiento, y
   los muestra con una regla apoyada en que el elemento padre tenga la clase
   "show". Eso era cierto en Bootstrap 4, que la ponía en el contenedor y en el
   menú; la 5 la pone sólo en el menú y en el disparador.

   Resultado: el menú del perfil se abría de verdad (Bootstrap le añadía show y
   creaba su instancia) pero se quedaba con opacidad 0 y visibilidad oculta, así
   que no se veía nada al pulsar. Aquí se muestra a partir de la clase del
   propio menú, que es donde la 5 la pone.
   ========================================================================== */
/* La regla de la plantilla es ".header-navbar-rht li.show > .dropdown-menu", así
   que hay que igualar esa especificidad apoyándose en la clase del propio menú,
   que es donde Bootstrap 5 la pone. chrome.css se carga después de style.css, de
   modo que a igual especificidad gana esta. */
.header-navbar-rht li > .dropdown-menu.show,
.navbar .dropdown-menu.show,
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto;
}

/* En Bootstrap 5 la alineación a la derecha se llama end. Se acepta el nombre
   antiguo para no tener que tocar cada menú de la aplicación. */
.dropdown-menu-right {
    --bs-position: end;
    right: 0;
    left: auto;
}

/* La plantilla deja los menús de la cabecera con display:block aunque estén cerrados
   —los esconde con opacidad y visibilidad para poder animarlos—, así que ocupan sitio
   en la maqueta todo el rato. Bootstrap 5 sólo alinea a la derecha una vez que Popper
   los ha abierto (".dropdown-menu-end[data-bs-popper]"), de modo que en reposo el menú
   del perfil se quedaba colgando 36 px por fuera del ancho de la ventana: en el panel
   del doctor y en el del paciente la página entera podía desplazarse de lado. Se alinea
   también en reposo, que es cuando pasa el 99 % del tiempo. */
.header-navbar-rht li > .dropdown-menu-end,
.header-navbar-rht li > .dropdown-menu-right {
    right: 0;
    left: auto;
}

/* ============================================================================
   Menú del teléfono
   ----------------------------------------------------------------------------
   El panel lateral venía de la plantilla: azul marino, filas separadas por
   líneas, tipografía pequeña y la equis de cerrar de doce píxeles. Se veía como
   lo que era, un menú de 2019.

   Se rehace con el lenguaje del resto: fondo claro, ítems altos con estado
   activo reconocible, la persona identificada arriba y la única acción
   destructiva —cerrar sesión— separada al final.

   Todo va dentro de la consulta de ancho: por encima de 992px este mismo
   marcado es la barra horizontal del escritorio, que no se toca.
   ============================================================================ */

@media (max-width: 991.98px) {

    .main-menu-wrapper {
        width: 300px;
        background: var(--cm-white);
        box-shadow: 0 0 40px rgba(39, 43, 65, .18);

        /*
          El desplazamiento de cierre va en porcentaje, no en píxeles. La plantilla lo
          tenía en -260px porque su menú medía 260; al ensancharlo a 300 se quedaba corto
          y asomaban cuarenta píxeles del panel sobre la portada, con el aspa y todo.
          En porcentaje el menú se esconde entero mida lo que mida.
        */
        transform: translateX(-100%);
    }

    /*
      Y la apertura va aquí al lado, no sólo en la plantilla: las dos reglas describen
      el mismo movimiento y separarlas fue justo lo que dejó el menú a medio esconder.
    */
    html.menu-opened .main-menu-wrapper {
        transform: translateX(0);
    }

    /* ------------------------------------------------------------ Cabecera */

    .main-menu-wrapper .menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        padding: 0 .5rem 0 1.1rem;
        border-bottom: 1px solid var(--cm-rule);
        background: var(--cm-white);
    }

    .main-menu-wrapper .menu-logo img {
        max-height: 30px;
    }

    .main-menu-wrapper .menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 12px de ancho tenía la equis original: imposible de acertar. */
        width: 44px;
        height: 44px;
        border-radius: 50%;
        color: var(--cm-gray);
        font-size: 1.05rem;
    }

    .main-menu-wrapper .menu-close:hover {
        background: var(--cm-bg);
        color: var(--cm-ink);
    }

    /* --------------------------------------------------------------- Ítems */

    .main-menu-wrapper .main-nav {
        display: block;
        padding: .5rem 0 1.5rem;
        background: var(--cm-white);
    }

    .main-menu-wrapper .main-nav > li {
        border: 0;
    }

    .main-menu-wrapper .main-nav > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .6rem;
        min-height: 50px;
        margin: 0 .5rem;
        padding: .7rem .85rem;
        border-radius: var(--cm-radius-sm);
        color: var(--cm-ink);
        font-size: .95rem;
        font-weight: 500;
    }

    .main-menu-wrapper .main-nav > li > a:hover {
        background: var(--cm-bg);
    }

    /* La página en la que se está: fondo suave y una barra a la izquierda, que
       se reconoce sin depender sólo del color. */
    .main-menu-wrapper .main-nav > li.active > a {
        position: relative;
        background: var(--cm-cyan-soft);
        color: var(--cm-cyan-dark);
        font-weight: 700;
    }

    .main-menu-wrapper .main-nav > li.active > a::before {
        content: "";
        position: absolute;
        top: 20%;
        bottom: 20%;
        left: -.5rem;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--cm-cyan);
    }

    .main-menu-wrapper .main-nav > li > a > i {
        flex: 0 0 auto;
        color: var(--cm-gray-light);
        font-size: .8rem;
        transition: transform .18s ease;
    }

    /* ------------------------------------------------------------ Submenús */

    .main-menu-wrapper .submenu {
        margin: .1rem .5rem .4rem 1.6rem;
        padding: 0;
        border-left: 2px solid var(--cm-rule);
        background: transparent;
    }

    /* Se repite el selector largo de la plantilla —".main-nav > li .submenu li a"—
       porque pesa un elemento más que el corto y ganaba: los enlaces se quedaban
       con el blanco que usaba sobre el menú azul, y sobre fondo blanco quedaban
       invisibles. Estaban ahí, ocupando su sitio, sin verse. */
    .main-menu-wrapper .submenu li a,
    .main-menu-wrapper .main-nav > li .submenu li a {
        display: block;
        min-height: 42px;
        padding: .6rem .85rem;
        border-radius: var(--cm-radius-sm);
        color: var(--cm-gray);
        font-size: .89rem;
    }

    .main-menu-wrapper .submenu li a:hover,
    .main-menu-wrapper .main-nav > li .submenu li a:hover {
        background: var(--cm-bg);
        color: var(--cm-ink);
    }

    /* El activo dentro de un submenú: la plantilla lo pintaba de verde menta. */
    .main-menu-wrapper .main-nav .has-submenu.active > a,
    .main-menu-wrapper .main-nav .has-submenu.active .submenu li.active > a {
        color: var(--cm-cyan-dark);
    }

    /* --------------------------------------------------- Quién ha entrado */

    .cm-menu-user {
        margin: .6rem .5rem .3rem;
        border-top: 1px solid var(--cm-rule);
        padding-top: .7rem;
    }

    .cm-menu-user .nav-link {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .6rem .85rem;
        border-radius: var(--cm-radius-sm);
        background: var(--cm-bg);
    }

    .cm-menu-user__photo {
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        border-radius: 50%;
        object-fit: cover;
        background: var(--cm-rule);
    }

    .cm-menu-user__text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .cm-menu-user__name {
        color: var(--cm-ink);
        font-size: .92rem;
        font-weight: 600;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cm-menu-user__role {
        color: var(--cm-gray);
        font-size: .78rem;
    }

    /* Los enlaces de sesión llevan icono; se alinean con el texto de los demás. */
    .main-menu-wrapper .login-link .nav-link {
        display: flex;
        align-items: center;
        /* Los ítems de primer nivel usan space-between para separar el chevron;
           aquí eso empujaba el texto al borde y dejaba el icono solo. */
        justify-content: flex-start;
        gap: .65rem;
        min-height: 48px;
        margin: 0 .5rem;
        padding: .65rem .85rem;
        border-radius: var(--cm-radius-sm);
        color: var(--cm-ink);
        font-size: .93rem;
    }

    .main-menu-wrapper .login-link .nav-link:hover {
        background: var(--cm-bg);
    }

    .main-menu-wrapper .login-link .nav-link i {
        width: 18px;
        color: var(--cm-gray-light);
        text-align: center;
    }

    /* Cerrar sesión es la única que deshace algo: se separa y se distingue. */
    .cm-menu-logout {
        margin-top: .4rem;
        padding-top: .5rem;
        border-top: 1px solid var(--cm-rule);
    }

    .cm-menu-logout .nav-link,
    .cm-menu-logout .nav-link i {
        color: var(--cm-red);
    }

    .cm-menu-logout .nav-link:hover {
        background: var(--cm-red-bg);
    }

    /* El velo de detrás: sin él el panel parece pegado sobre la página. */
    .sidebar-overlay.opened {
        background: rgba(39, 43, 65, .45);
    }

    /* El panel vive dentro de .header, que es sticky con z-index 1030 y por eso
       crea su propio contexto de apilamiento: el 1060 del panel sólo compite
       ahí dentro. Frente al velo, que cuelga del body con 1040, lo que contaba
       era el 1030 del header, así que el velo cubría también el menú y todo se
       veía apagado. Mientras el menú está abierto, el header sube por encima. */
    html.menu-opened .header {
        z-index: 1050;
    }

    /* El botón de tres rayas de la cabecera. */
    #mobile_btn .bar-icon span {
        background: var(--cm-cyan);
        border-radius: 2px;
    }
}


/* ── A qué pantalla pertenece cada pieza de la cabecera ────────────────────
   El panel del teléfono y la barra del escritorio son el mismo marcado: por
   debajo de 992px `.main-nav` se despliega como panel lateral y por encima es la
   barra horizontal. Un bloque pensado para el panel sale también en la barra si
   nadie lo esconde, y ahí no cabe.

   Antes eso se arreglaba enumerando selectores aquí. Enumerar obliga a acordarse
   de ampliar la lista al añadir un bloque, y acordarse falla: así se coló el
   selector de idioma en mitad de la barra. Ahora la pieza lleva escrito a qué
   pantalla pertenece, y la clase que la coloca es la misma que la esconde.

   Se usan en el marcado, no aquí:
     cm-only-mobile       → sólo en el panel del teléfono
     cm-only-desktop  → sólo en la barra ancha
   ------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .cm-only-mobile {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .cm-only-desktop {
        display: none !important;
    }
}

/* ── Idioma dentro del menú del teléfono ──────────────────────────────────
   El selector de la barra no llega al móvil: allí la zona derecha se recoge y
   quien entraba desde el teléfono no tenía forma de cambiar de idioma. Aquí van
   los idiomas como opciones de la propia lista. */

.cm-menu-language {
    margin: .6rem .5rem 0;
    padding-top: .8rem;
    border-top: 1px solid var(--cm-rule);
    list-style: none;
}

.cm-menu-language__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .85rem .4rem;
    color: var(--cm-gray-light);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cm-menu-language__options {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: 0 .85rem;
}

.cm-menu-language__options form {
    margin: 0;
}

.cm-menu-language__option {
    min-height: 40px;
    padding: 0 .9rem;
    border: 1px solid var(--cm-rule);
    border-radius: var(--cm-radius-sm);
    background: var(--cm-white);
    color: var(--cm-gray);
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
}

.cm-menu-language__option.es-current {
    border-color: var(--cm-cyan);
    background: var(--cm-cyan-soft);
    color: var(--cm-cyan-dark);
    font-weight: 600;
}

/* ============================================================================
   El logotipo, centrado en la pantalla y no en lo que sobra
   ----------------------------------------------------------------------------
   La cabecera del teléfono es una fila con el botón del menú y el logotipo. El
   botón ocupa sus sesenta y un píxeles a la izquierda, y el logotipo —que la
   plantilla centra con text-align dentro de un ancho del 100 %— se centraba en
   el hueco que quedaba después del botón: treinta y un píxeles a la derecha del
   centro de verdad. En una pantalla de 375 el centro del logotipo caía en 218 y
   el de la ventana en 188.

   La plantilla ya quería sacar el botón del flujo —tiene un position:absolute
   para menos de 768px— pero otra regla suya, más específica, lo devolvía a
   relative. Aquí se le saca de verdad y el logotipo se centra con la caja
   entera. El botón se ancla al centro vertical para que no dependa de la altura
   de la fila, que ahora la manda el logotipo.
   ========================================================================== */
@media (max-width: 991.98px) {

    .header-nav .navbar-header {
        position: relative;
        justify-content: center;
        align-items: center;
    }

    .header-nav #mobile_btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    /* Sin el 100 % de la plantilla: ya no hace falta para centrarlo, y con él
       el logotipo volvería a empujar contra el botón. */
    .header-nav .navbar-brand.logo {
        width: auto;
    }
}