/* ==============================================================================
   chrome-tricorder.css — Chrome unificado TecsaS3 (navbar + spinner + content)
   ------------------------------------------------------------------------------
   - Fuente única del header compartido por dashboard/header.html y
     paciente/header.html via la clase .app-navbar (antes .med-nav / .med-navbar).
   - LOOK BASE (sin tema)  = paleta médica azul legacy (no rompe páginas claras).
   - LOOK TRICORDER        = scoped bajo html[data-app-theme="tricorder"], reutiliza
     los tokens --tricorder-* / --space-* / --radius-* definidos en custom.css.
   - Incluye overrides theme-aware del spinner y del #content-wrapper.
   - @layer components: misma capa que sidebar.css / headers para evitar fugas.
   ============================================================================== */

@layer components {

  /* ==========================================================================
     1. TOKENS BASE (paleta médica azul legacy)
     ========================================================================== */
  :root {
    --med-nav-primary: #0f4e7a;
    --med-nav-secondary: #1f6e9d;
    --med-nav-accent: #2e88b8;
    --med-nav-text: #f6fbff;
    --med-nav-muted: rgba(246, 251, 255, 0.86);
    --med-nav-danger: #9f1d2b;
    /* Acento de AVISO del chrome superior. No puede derivarse de --ui-warn
       (theme-tokens.css): ese esta calibrado a 5.93:1 sobre fondo CLARO y el
       navbar es azul oscuro en AMBOS temas. Mismo criterio y mismo valor de
       luminancia que --ui-privilege, pero token aparte a proposito: privilegio
       y aviso son significados distintos y deben poder retonificarse por
       separado. Se usa solo en borde e icono -- elementos no textuales, umbral
       3:1 -- mientras el texto sigue en blanco. */
    --med-nav-warn: #ffc107;
  }

  /* ==========================================================================
     2. APP NAVBAR — LOOK BASE (default, sin data-app-theme)
     ========================================================================== */
  .app-navbar {
    background: linear-gradient(120deg, var(--med-nav-primary) 0%, var(--med-nav-secondary) 54%, var(--med-nav-accent) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px rgba(15, 42, 70, 0.24);
    padding: 0.58rem 0;
    transition: transform 220ms ease, visibility 0s linear 0s;
  }

  .app-navbar.is-minimized {
    transform: translateY(-120%);
    /* Tras el slide sale del orden de tabulación (visibility con delay =
       duración del transform): sin esto un usuario de teclado podía enfocar
       enlaces invisibles. Al expandir, visibility vuelve de inmediato y la
       entrada anima. */
    visibility: hidden;
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }

  .app-navbar .navbar-brand {
    color: var(--med-nav-text);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .app-navbar .navbar-brand small {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--med-nav-muted);
    margin-top: 0.28rem;
    letter-spacing: 0.01em;
  }

  .app-navbar .nav-link {
    color: var(--med-nav-muted) !important;
    border-radius: 10px;
    padding: 0.48rem 0.72rem !important;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
  }

  .app-navbar .nav-link:hover,
  .app-navbar .nav-link:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.14);
  }

  /* El hamburger NO se estiliza aqui: sus reglas viven al final del fichero,
     FUERA de `@layer components`. Medido en navegador (2026-09-23, a 375 y
     768 px) las de esta capa perdian ENTERAS contra el CSS de Bootstrap, que
     declara `.navbar-toggler` sin capa -- y una declaracion sin capa gana a
     cualquiera capada, por especifica que sea. Lo que se pintaba era el
     default de Bootstrap: fondo `rgba(0,0,0,0)`, borde `rgba(0,0,0,0.15)`,
     radio 6px y trazo del icono `rgba(33,37,41,0.75)` -- gris casi negro
     sobre el azul del navbar, 1.52:1 de contraste contra el 3:1 que pide
     WCAG 1.4.11. Mismo fenomeno que el bloque del conmutador de tema del
     final de este fichero. */

  /* Plan chip + selector embebido */
  .med-plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    padding: 0.4rem 0.78rem;
    font-weight: 700;
    max-width: 360px;
  }

  .med-plan-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------- Clases que sustituyen estilos en linea de header.html ----------
     Salieron de la plantilla al saldar la deuda de djlint (H021). Mismos
     valores que tenian en linea: no cambian el aspecto. */
  .med-plan-chip--fluid {
    max-width: none;
  }

  .med-user-name {
    max-width: 152px;
  }

  /* Estado inicial del avatar de respaldo. El onerror de la imagen lo revela
     escribiendo `style.display = 'inline-flex'`, y el estilo en linea gana a
     esta clase, asi que el comportamiento es el mismo que antes.

     Las DOS clases en el selector no son decoracion: `.med-user-avatar--
     fallback` declara `display: inline-flex` mas abajo en este mismo fichero
     (y en la misma capa), asi que con una sola clase aqui las dos reglas
     empataban en especificidad y ganaba la ultima escrita -- la del fallback.
     Resultado medido en navegador el 2026-09-23: el chip de usuario mostraba
     DOS avatares de 44 px a la vez, el real y el de respaldo, y se llevaba
     117.8 px del rail. A 375 px, con la fila en `nowrap`, esos 44 px de mas
     salian de la marca. */
  .med-user-avatar--fallback.med-user-avatar--hidden {
    display: none;
  }

  /* ---------- Pildora de privilegio (solo superusuarios de Django) ----------
     Parte de la forma de .med-plan-chip para no desentonar y anade el acento
     ambar --ui-privilege. El texto se queda BLANCO como el resto de chips: el
     ambar va solo en borde y punto, que no son texto y por tanto se rigen por
     el umbral 3:1. El significado lo llevan el icono y la etiqueta, nunca el
     color por si solo. */
  .app-navbar .admin-global-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-height: var(--touch-target, 44px);
    padding: 0.4rem 0.78rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid var(--ui-privilege);
    transition: background-color var(--duration-fast, 160ms) var(--ease-out, ease-out);
  }

  .app-navbar .admin-global-pill:hover,
  .app-navbar .admin-global-pill:focus-visible {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
  }

  .app-navbar .admin-global-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.55);
  }

  .admin-global-pill__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ui-privilege);
    flex: 0 0 auto;
  }

  /* El punto late solo si el usuario no ha pedido menos movimiento. */
  @media (prefers-reduced-motion: no-preference) {
    .admin-global-pill__dot {
      animation: adminPrivilegePulse 2.4s ease-in-out infinite;
    }
  }

  @keyframes adminPrivilegePulse {
    50% {
      opacity: 0.35;
    }
  }

  /* Por debajo de lg se oculta la etiqueta; quedan icono y punto, manteniendo
     el objetivo tactil y el aria-label como nombre accesible. */
  @media (max-width: 991.98px) {
    .app-navbar .admin-global-pill__label {
      display: none;
    }
  }

  .med-plan-selector-shell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.45rem;
    border-radius: 999px;
  }

  .med-plan-selector-shell .plan-selector-prominent {
    margin-right: 0;
    z-index: 1070;
  }

  .med-plan-selector-shell .plan-selector-prominent .btn-lg {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: none !important;
    min-width: 200px;
  }

  .med-plan-selector-shell .plan-selector-prominent .btn-lg:hover,
  .med-plan-selector-shell .plan-selector-prominent .btn-lg:focus {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.16));
    transform: none;
  }

  .med-plan-selector-shell .plan-selector-prominent .plan-selector-label {
    color: #f6fbff;
    font-weight: 700;
  }

  .med-plan-selector-shell .plan-selector-prominent .badge {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #12496b !important;
  }

  /* User chip + avatar */
  .med-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    padding: 0.34rem 0.72rem 0.34rem 0.34rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.14);
  }

  .med-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.2);
  }

  /* Logout */
  .med-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    border-radius: 999px;
    padding: 0.47rem 0.8rem !important;
    border: 1px solid rgba(255, 218, 222, 0.42);
    background: rgba(159, 29, 43, 0.34);
    color: #fff !important;
    font-weight: 700;
  }

  .med-logout-btn:hover,
  .med-logout-btn:focus-visible {
    background: rgba(159, 29, 43, 0.62);
    color: #fff !important;
  }

  /* Dropdown */
  .app-navbar .dropdown-menu {
    border: 1px solid #d6e4f2;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(18, 38, 58, 0.14);
    padding: 0.4rem;
  }

  .app-navbar .dropdown-item {
    color: #17324a;
    font-weight: 600;
    border-radius: 8px;
  }

  .app-navbar .dropdown-item:hover {
    background: #eaf2fb;
  }

  /* Botón flotante de colapso del header */
  .header-collapse-toggle {
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 1060;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(8, 42, 68, 0.82);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(8, 42, 68, 0.28);
    cursor: pointer;
  }

  /* Responsive (compartido) */
  @media (max-width: 991.98px) {
    /* ---------- El flotante de colapso sale de la fila del header ----------
       Arriba-derecha funciona en escritorio, donde navbar.css le reserva
       72 px de `padding-right` a partir de 1200 px. En movil no hay carril
       que reservar: la fila va llena y el boton, al ser `fixed`, se pintaba
       ENCIMA del hamburger. Medido en navegador el 2026-09-23:

           375 px  hamburger [292, 43.9, 56, 40]  colapso [306, 12, 40, 40]
                   -> solape de 40 x 8.1 px
           768 px  hamburger [685, 17.7, 56, 40]  colapso [699, 12, 40, 40]
                   -> solape de 40 x 34.3 px, y `elementFromPoint` sobre el
                      CENTRO del hamburger devolvia el icono del boton de
                      colapso: pulsar el hamburger MINIMIZABA el header en
                      vez de abrir el menu.

       Lo segundo es un defecto funcional, no estetico. Se intento antes
       reservarle carril con `margin-inline-end` en el hamburger: no sirve,
       porque sin espacio libre que repartir el margen se desborda por la
       derecha en lugar de mover el boton (medido: margen de 52 px aplicado,
       posicion del hamburger sin cambio util). La fila de 375 px no tiene
       50 px que ceder, asi que quien se aparta es el flotante.

       Baja al hueco inmediatamente inferior al header, que esta libre. */
    .header-collapse-toggle {
      top: calc(var(--app-header-height, 70px) + 0.5rem);
      right: 0.75rem;
      width: 38px;
      height: 38px;
    }

    /* Con el menu desplegado el flotante caeria sobre el panel -- que arranca
       justo en ese borde -- y taparia el primer enlace. Ademas la accion no
       tiene sentido ahi: no se minimiza un header con su menu abierto. */
    .header-collapse-toggle:has(~ .app-navbar .navbar-collapse.show) {
      display: none;
    }

    /* El PANEL del hamburger (fondo opaco, posicion, scroll) NO se estiliza
       aqui sino en navbar.css. Esta hoja la comparten dos headers --
       dashboard/header.html y dashboard/paciente/header.html -- y solo el
       primero carga navbar.css, que es quien ya declara el panel como
       `position: fixed`. Tocar la geometria del panel desde aqui cambiaria
       tambien la del header de paciente, cuyo layout no se ha medido. El
       arreglo del BOTON si se comparte a proposito: es contraste y tamano
       tactil, no geometria. */

    .med-plan-chip {
      max-width: 180px;
      font-size: 0.82rem;
      padding: 0.34rem 0.64rem;
    }

    .med-plan-selector-shell {
      width: 100%;
      border-radius: 12px;
      margin-bottom: 0.5rem;
      padding: 0.4rem;
    }

    .med-plan-selector-shell .plan-selector-prominent {
      width: 100%;
      max-width: none;
    }

    .med-plan-selector-shell .plan-selector-prominent .plan-selector-btn {
      width: 100%;
      max-width: none !important;
      justify-content: space-between;
    }

    /* Acotado al collapse a proposito (antes era `.med-user-chip,
       .med-logout-btn` a secas). En dashboard/header.html estos controles
       viven ahora en .app-navbar__actions, FUERA del collapse, y un
       width:100% alli reventaria el rail de iconos. Dentro del collapse
       (paciente/header.html) el comportamiento no cambia. */
    .navbar-collapse .med-user-chip,
    .navbar-collapse .med-logout-btn {
      width: 100%;
      justify-content: flex-start;
    }
  }

  /* ==========================================================================
     3. APP NAVBAR — OVERRIDE TRICORDER (scoped, no afecta páginas claras)
     ========================================================================== */
  html[data-app-theme="tricorder"] .app-navbar {
    background: var(--tricorder-card-bg, linear-gradient(145deg, rgba(10, 22, 40, 0.95) 0%, rgba(20, 40, 60, 0.9) 100%));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--tricorder-border-soft, rgba(0, 229, 255, 0.15));
    box-shadow: var(--shadow-3, 0 12px 32px rgba(0, 0, 0, 0.4));
    position: relative;
  }

  /* Hairline glow superior (HUD) */
  html[data-app-theme="tricorder"] .app-navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--tricorder-primary, #00E5FF) 50%, transparent 100%);
    opacity: 0.55;
    pointer-events: none;
  }

  html[data-app-theme="tricorder"] .app-navbar .navbar-brand {
    color: var(--tricorder-text, #E0F7FA);
    font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  }

  html[data-app-theme="tricorder"] .app-navbar .navbar-brand small {
    color: var(--tricorder-muted, #82B4C7);
    letter-spacing: var(--tracking-wide, 0.04em);
    text-transform: uppercase;
  }

  html[data-app-theme="tricorder"] .app-navbar .nav-link {
    color: var(--tricorder-muted, #82B4C7) !important;
  }

  html[data-app-theme="tricorder"] .app-navbar .nav-link:hover,
  html[data-app-theme="tricorder"] .app-navbar .nav-link:focus-visible {
    color: var(--tricorder-primary, #00E5FF) !important;
    background: rgba(0, 229, 255, 0.1);
  }

  html[data-app-theme="tricorder"] .app-navbar .nav-link i {
    color: var(--tricorder-primary, #00E5FF);
    opacity: 0.9;
  }

  /* La variante tricorder del hamburger tampoco vive aqui, por la misma razon
     que la base: ver el bloque sin capa del final del fichero. */

  /* Chips: glass cyan */
  html[data-app-theme="tricorder"] .med-plan-chip,
  html[data-app-theme="tricorder"] .med-user-chip {
    background: rgba(0, 229, 255, 0.08);
    border-color: var(--tricorder-border-soft, rgba(0, 229, 255, 0.15));
    color: var(--tricorder-text, #E0F7FA);
  }

  html[data-app-theme="tricorder"] .med-plan-chip i,
  html[data-app-theme="tricorder"] .med-user-chip {
    color: var(--tricorder-text, #E0F7FA);
  }

  html[data-app-theme="tricorder"] .med-user-avatar {
    border-color: var(--tricorder-border, rgba(0, 229, 255, 0.3));
    background: rgba(0, 229, 255, 0.12);
  }

  /* Logout: danger tricorder */
  html[data-app-theme="tricorder"] .med-logout-btn {
    background: rgba(255, 82, 82, 0.16);
    border-color: rgba(255, 82, 82, 0.4);
    color: var(--tricorder-danger, #FF5252) !important;
  }

  html[data-app-theme="tricorder"] .med-logout-btn:hover,
  html[data-app-theme="tricorder"] .med-logout-btn:focus-visible {
    background: rgba(255, 82, 82, 0.3);
    color: #fff !important;
  }

  /* Dropdown: superficie oscura */
  html[data-app-theme="tricorder"] .app-navbar .dropdown-menu {
    background: var(--tricorder-surface-2, rgba(20, 40, 60, 0.95));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--tricorder-border-soft, rgba(0, 229, 255, 0.15));
    box-shadow: var(--shadow-3, 0 12px 32px rgba(0, 0, 0, 0.4));
  }

  html[data-app-theme="tricorder"] .app-navbar .dropdown-item {
    color: var(--tricorder-text, #E0F7FA);
  }

  html[data-app-theme="tricorder"] .app-navbar .dropdown-item:hover {
    background: rgba(0, 229, 255, 0.12);
    color: var(--tricorder-primary, #00E5FF);
  }

  /* La variante tricorder del panel del hamburger vive en navbar.css, junto a
     la base, por el mismo motivo de alcance explicado alli. */

  /* Botón flotante de colapso: glass cyan */
  html[data-app-theme="tricorder"] .header-collapse-toggle {
    background: var(--tricorder-surface-2, rgba(20, 40, 60, 0.9));
    border-color: var(--tricorder-border, rgba(0, 229, 255, 0.3));
    color: var(--tricorder-primary, #00E5FF);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 229, 255, 0.2);
  }

  /* ==========================================================================
     4. SPINNER + CONTENT WRAPPER (theme-aware)
     ========================================================================== */
  html[data-app-theme="tricorder"] .loading-content .spinner-border {
    color: var(--tricorder-primary, #00E5FF) !important;
  }

  html[data-app-theme="tricorder"] .loading-text {
    color: var(--tricorder-primary, #00E5FF);
  }

  html[data-app-theme="tricorder"] .loading-text i {
    color: var(--tricorder-accent, #1DE9B6);
  }

  html[data-app-theme="tricorder"] #content-wrapper {
    background: transparent;
  }

  /* ==========================================================================
     5. APP TOPBAR (users_navbar.html — SB Admin 2) — OVERRIDE TRICORDER
     Restilizado scoped: solo aplica bajo data-app-theme="tricorder". Sin tema,
     conserva el look claro de navbar.css (.navbar.topbar).
     ========================================================================== */
  html[data-app-theme="tricorder"] .app-topbar {
    background: var(--tricorder-card-bg, linear-gradient(145deg, rgba(10, 22, 40, 0.95) 0%, rgba(20, 40, 60, 0.9) 100%)) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--tricorder-border-soft, rgba(0, 229, 255, 0.15)) !important;
    box-shadow: var(--shadow-2, 0 4px 12px rgba(0, 0, 0, 0.28)) !important;
  }

  /* Buscador */
  html[data-app-theme="tricorder"] .app-topbar .form-control,
  html[data-app-theme="tricorder"] .app-topbar .form-control.bg-light {
    background: rgba(5, 14, 26, 0.6) !important;
    border: 1px solid var(--tricorder-border-soft, rgba(0, 229, 255, 0.15)) !important;
    color: var(--tricorder-text, #E0F7FA);
    color-scheme: dark;
  }

  html[data-app-theme="tricorder"] .app-topbar .form-control::placeholder {
    color: var(--tricorder-muted, #82B4C7);
  }

  html[data-app-theme="tricorder"] .app-topbar .form-control:focus {
    background: rgba(5, 14, 26, 0.8) !important;
    border-color: var(--tricorder-primary, #00E5FF) !important;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18);
  }

  html[data-app-theme="tricorder"] .app-topbar .btn-primary {
    background: linear-gradient(135deg, var(--tricorder-primary, #00E5FF) 0%, var(--tricorder-secondary, #00B8D4) 100%);
    border: none;
    color: var(--tricorder-dark, #0A1628);
  }

  /* Iconos de acción (búsqueda, alertas, mensajes) */
  html[data-app-theme="tricorder"] .app-topbar .nav-link {
    color: var(--tricorder-muted, #82B4C7);
  }

  html[data-app-theme="tricorder"] .app-topbar .nav-link:hover,
  html[data-app-theme="tricorder"] .app-topbar .nav-link:focus-visible {
    color: var(--tricorder-primary, #00E5FF);
  }

  /* Texto e info secundaria (clases SB Admin 2 text-gray-*) */
  html[data-app-theme="tricorder"] .app-topbar .text-gray-400,
  html[data-app-theme="tricorder"] .app-topbar .text-gray-500,
  html[data-app-theme="tricorder"] .app-topbar .text-gray-600 {
    color: var(--tricorder-muted, #82B4C7) !important;
  }

  /* Dropdowns: alertas, mensajes y perfil */
  html[data-app-theme="tricorder"] .app-topbar .dropdown-menu,
  html[data-app-theme="tricorder"] .app-topbar .dropdown-list {
    background: var(--tricorder-surface-2, rgba(20, 40, 60, 0.95));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--tricorder-border-soft, rgba(0, 229, 255, 0.15));
    box-shadow: var(--shadow-3, 0 12px 32px rgba(0, 0, 0, 0.4));
    color: var(--tricorder-text, #E0F7FA);
  }

  html[data-app-theme="tricorder"] .app-topbar .dropdown-header {
    background: rgba(0, 229, 255, 0.08);
    color: var(--tricorder-primary, #00E5FF);
    font-weight: 600;
    letter-spacing: var(--tracking-wide, 0.04em);
  }

  html[data-app-theme="tricorder"] .app-topbar .dropdown-item {
    color: var(--tricorder-text, #E0F7FA);
  }

  html[data-app-theme="tricorder"] .app-topbar .dropdown-item p,
  html[data-app-theme="tricorder"] .app-topbar .dropdown-item span {
    color: inherit;
  }

  html[data-app-theme="tricorder"] .app-topbar .dropdown-item:hover {
    background: rgba(0, 229, 255, 0.12);
    color: var(--tricorder-primary, #00E5FF);
  }

  html[data-app-theme="tricorder"] .app-topbar .dropdown-divider {
    border-color: var(--tricorder-border-soft, rgba(0, 229, 255, 0.15));
  }

  /* Divider, avatar y badges */
  html[data-app-theme="tricorder"] .app-topbar .topbar-divider {
    border-right: 1px solid var(--tricorder-border-soft, rgba(0, 229, 255, 0.15));
  }

  html[data-app-theme="tricorder"] .app-topbar .img-profile,
  html[data-app-theme="tricorder"] .app-topbar .rounded-circle {
    border-color: var(--tricorder-border, rgba(0, 229, 255, 0.3)) !important;
  }

  html[data-app-theme="tricorder"] .app-topbar .badge-counter.bg-danger {
    background: var(--tricorder-danger, #FF5252) !important;
    box-shadow: 0 0 8px rgba(255, 82, 82, 0.5);
  }

  /* ==========================================================================
     6. BRAND, MODO SOLO-ICONOS Y AVATAR FALLBACK
     ========================================================================== */
  .app-navbar .app-brand {
    line-height: 1.1;
  }

  .app-navbar .app-brand__title {
    display: block;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
  }

  .app-navbar .app-brand__subtitle {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.85;
    margin-top: 2px;
  }

  html[data-app-theme="tricorder"] .app-navbar .app-brand__title {
    font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
    color: var(--tricorder-text, #E0F7FA);
  }

  html[data-app-theme="tricorder"] .app-navbar .app-brand__accent {
    background: linear-gradient(135deg, var(--tricorder-primary, #00E5FF), var(--tricorder-accent, #1DE9B6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--tricorder-primary, #00E5FF);
  }

  .app-navbar .nav-link .nav-label {
    margin-left: 0.42rem;
  }

  /* Avatar genérico cuando no hay foto (equilibrado con la estética) */
  .med-user-avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #1a6b97 0%, #2d87b8 100%);
    font-size: 1.1rem;
  }

  html[data-app-theme="tricorder"] .med-user-avatar--fallback {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(29, 233, 182, 0.25));
    color: var(--tricorder-primary, #00E5FF);
    border-color: var(--tricorder-border, rgba(0, 229, 255, 0.3));
  }

  /* Conmutador de tema claro/oscuro/auto (componente components/theme_toggle.html).
     El estado vive en data-theme-state (light|tricorder|auto) que escribe
     theme-toggle.js; cada estado muestra su icono. Objetivo tactil 44px. */
  .app-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ui-border, rgba(255, 255, 255, 0.28));
    background: var(--ui-surface-2, rgba(255, 255, 255, 0.14));
    color: var(--ui-text, #fff);
    cursor: pointer;
    transition: background var(--duration-fast, 0.2s) ease,
      color var(--duration-fast, 0.2s) ease,
      border-color var(--duration-fast, 0.2s) ease;
  }

  .app-theme-toggle i {
    font-size: 1rem;
    line-height: 1;
  }

  .app-theme-toggle__icon {
    display: none;
  }

  .app-theme-toggle[data-theme-state="light"] .app-theme-toggle__icon--light,
  .app-theme-toggle[data-theme-state="tricorder"] .app-theme-toggle__icon--tricorder,
  .app-theme-toggle[data-theme-state="auto"] .app-theme-toggle__icon--auto {
    display: inline-block;
  }

  .app-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.26);
    border-color: var(--ui-primary, rgba(255, 255, 255, 0.4));
  }

  .app-theme-toggle:focus-visible {
    outline: 2px solid var(--ui-focus-ring, var(--ui-primary, currentColor));
    outline-offset: 2px;
  }

  html[data-app-theme="tricorder"] .app-theme-toggle {
    border-color: var(--tricorder-border, rgba(0, 229, 255, 0.3));
    background: var(--tricorder-panel, rgba(0, 229, 255, 0.1));
    color: var(--tricorder-primary, #00E5FF);
  }

  html[data-app-theme="tricorder"] .app-theme-toggle:hover {
    background: rgba(0, 229, 255, 0.2);
  }

  /* Modo SOLO-ICONOS de la barra horizontal cuando el ancho es ajustado (lg..xl).
     Debajo de lg el navbar colapsa a menú vertical (allí sí se muestran labels). */
  @media (min-width: 992px) and (max-width: 1199.98px) {
    /* `.med-user-chip > span` a secas (como estaba antes) tambien casaba el
       span del AVATAR de respaldo, que es igualmente hijo directo: en esta
       franja el usuario sin foto se quedaba sin avatar ninguno. Se acota al
       nombre -- el unico hijo con .text-truncate -- y se excluye
       .app-navbar__label, que en el rail nuevo se oculta con la tecnica
       visually-hidden (seccion 9) en vez de con display:none, para no sacar la
       etiqueta del arbol de accesibilidad. */
    .app-navbar .nav-label,
    .app-navbar .med-plan-chip span,
    .app-navbar .med-user-chip > span.text-truncate:not(.app-navbar__label) {
      display: none !important;
    }

    .app-navbar .nav-link {
      padding: 0.48rem 0.55rem !important;
    }

    .app-navbar .nav-link .nav-label {
      margin-left: 0;
    }
  }

  /* ==========================================================================
     7. NAV LINKS — subrayado glow animado + estado activo (aria-current)
     ========================================================================== */
  .app-navbar .nav-link {
    position: relative;
    min-height: var(--touch-target, 44px);
    display: inline-flex;
    align-items: center;
  }

  .app-navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity var(--duration-fast, 150ms) var(--ease-out-quart, ease-out),
                transform var(--duration-fast, 150ms) var(--ease-out-quart, ease-out);
    pointer-events: none;
  }

  .app-navbar .nav-link:hover::after,
  .app-navbar .nav-link:focus-visible::after,
  .app-navbar .nav-link[aria-current="page"]::after {
    opacity: 0.9;
    transform: scaleX(1);
  }

  html[data-app-theme="tricorder"] .app-navbar .nav-link[aria-current="page"] {
    color: var(--tricorder-primary, #00E5FF) !important;
  }

  html[data-app-theme="tricorder"] .app-navbar .nav-link[aria-current="page"]::after {
    background: var(--tricorder-primary, #00E5FF);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
  }

  /* Focus visible consistente en el chrome superior */
  .app-navbar a:focus-visible,
  .app-navbar button:focus-visible {
    outline: 2px solid var(--tricorder-primary, #00E5FF);
    outline-offset: 2px;
    border-radius: var(--radius-xs, 4px);
  }

  /* ==========================================================================
     8. REDUCE MOTION
     ========================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .app-navbar,
    .app-navbar.is-minimized {
      transition: none !important;
    }

    .app-navbar .nav-link::after {
      transition: none;
    }
  }

  html[data-reduced-motion] .app-navbar .nav-link::after {
    transition: none;
  }

  /* ==========================================================================
     9. RAIL DE ACCIONES SIEMPRE VISIBLE + PILDORA TENANT > PLAN
     --------------------------------------------------------------------------
     `.app-navbar__actions` vive FUERA de `.navbar-collapse`. Antes de esta
     seccion todos los controles del header -- incluido cerrar sesion -- estaban
     dentro del collapse, asi que por debajo de 992 px desaparecian tras el
     hamburger: en movil solo quedaban la marca y un boton. Aqui el rail no se
     oculta nunca; al estrecharse degrada a SOLO ICONOS.

     REGLA DE ORO DE ESTA SECCION
     El texto se oculta con la tecnica visually-hidden (position+clip), NUNCA
     con display:none. Es la diferencia entre "icono sin texto" (accesible,
     porque el lector de pantalla sigue leyendo la etiqueta) e "icono mudo"
     (no accesible). Toda regla de esta seccion que esconda texto usa clip.
     ========================================================================== */
  .app-navbar__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    /* `flex: 0 0 auto` -> el rail se dimensiona por su contenido y NO cede
       espacio. Es lo ultimo que puede desaparecer del header, asi que quien
       cede es el collapse (ver la regla de `.navbar-collapse` justo debajo).
       Medido en navegador: sin esto, a 1440 px el enlace de cerrar sesion
       arrancaba en x=1426 con el navbar midiendo 1425 -- fuera de pantalla --
       y a 375 px tapaba el hamburger e interceptaba su click. */
    flex: 0 0 auto;
  }

  /* Contrapartida imprescindible de lo anterior. Un item flex tiene
     `min-width: auto`, asi que el collapse no baja de su ancho de contenido y
     empuja al rail fuera del navbar. Con `min-width: 0` si puede encogerse.
     Por debajo de lg el collapse es una fila aparte (`flex-basis: 100%`) y
     esta regla no le afecta. */
  .app-navbar .navbar-collapse {
    min-width: 0;
  }

  .app-navbar__actions > * {
    flex: 0 0 auto;
  }

  /* La pildora SI cede: su nombre de tenant ya trunca con ellipsis, asi que
     encogerla degrada de forma legible en vez de desbordar. */
  .app-navbar__actions .tenant-pill {
    flex: 0 1 auto;
  }

  .app-navbar__actions .nav-link {
    white-space: nowrap;
  }

  /* ---------- La marca cede sitio al rail ----------
     Medido en navegador: a 768 px la marca ocupaba 408 px y el rail arrancaba
     en x=360 -- se SOLAPABAN, y a 375 px la marca interceptaba el click del
     hamburger. Dos causas, las dos aqui:

     1. `.navbar-brand` es un item flex con `min-width: auto`, asi que no
        bajaba de su ancho de contenido por estrecha que fuera la pantalla.
     2. El subtitulo solo se ocultaba en la franja 992-1199.98 px, o sea que
        REAPARECIA en movil, justo donde menos sitio hay. */
  .app-navbar .app-brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .app-navbar .app-brand__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* El subtitulo desaparece en TODO ancho por debajo de 1200 px, no solo en la
     franja de portatil. Es decorativo: la marca sigue nombrada por el titulo. */
  @media (max-width: 1199.98px) {
    .app-navbar .app-brand__subtitle {
      display: none !important;
    }
  }

  @media (max-width: 991.98px) {
    .app-navbar .navbar-brand {
      margin-right: 0.75rem;
    }
  }

  @media (max-width: 575.98px) {
    .app-navbar .app-brand__title {
      font-size: 0.92rem;
    }
  }

  /* Objetivo tactil minimo en TODOS los controles del rail: al quedarse en
     modo icono son lo unico pulsable del header en movil.
     `min-width` ademas de `min-height` porque al ocultarse la etiqueta el
     control se encoge al ancho del icono: medido, cerrar sesion caia a
     33.6 px y el conmutador de tema se quedaba en sus 40 px fijos. */
  .app-navbar__actions .tenant-pill,
  .app-navbar__actions .app-theme-toggle,
  .app-navbar__actions .admin-global-pill,
  .app-navbar__actions .med-user-chip,
  .app-navbar__actions .med-logout-btn,
  .app-navbar__actions .med-login-btn {
    min-height: var(--touch-target, 44px);
    min-width: var(--touch-target, 44px);
  }

  /* Contraparte de .med-logout-btn para la sesion cerrada: el rail se pinta
     igual haya o no usuario, y un enlace de texto suelto desentonaba. */
  .med-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    border-radius: 999px;
    padding: 0.47rem 0.8rem !important;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.14);
    color: #fff !important;
    font-weight: 700;
  }

  .med-login-btn:hover,
  .med-login-btn:focus-visible {
    background: rgba(255, 255, 255, 0.26);
    color: #fff !important;
  }

  /* ---------- Pildora de contexto Tenant > Plan ----------
     Sustituye a los DOS chips estaticos que repetian el nombre del plan: el
     header mostraba TRES copias simultaneas del mismo `plan_actual` por encima
     de 992 px. Ademas expresa la jerarquia real del modelo de datos, que el
     chrome nunca habia mostrado: Tenant contiene Plan. */
  .tenant-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 260px;
    min-width: 0;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
  }

  .tenant-pill__icon {
    flex: 0 0 auto;
    font-size: 1rem;
  }

  .tenant-pill__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.18;
  }

  .tenant-pill__tenant,
  .tenant-pill__plan {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tenant-pill__tenant {
    font-weight: 700;
    font-size: 0.86rem;
  }

  .tenant-pill__plan {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.86;
  }

  /* Estados de aviso. El acento ambar va SOLO en borde e icono -- elementos no
     textuales, umbral 3:1 -- y el texto se queda blanco, igual que hace
     .admin-global-pill. El significado NO depende del color: cada estado trae
     su icono y su etiqueta de texto propios. */
  .tenant-pill--sin_membresia,
  .tenant-pill--sin_seleccion {
    border-width: 1.5px;
    border-color: var(--med-nav-warn);
  }

  .tenant-pill--sin_membresia .tenant-pill__icon,
  .tenant-pill--sin_seleccion .tenant-pill__icon {
    color: var(--med-nav-warn);
  }

  /* Acceso de plataforma: informativo, no un aviso. Staff y superusuarios
     hacen bypass de apply_plan_filter y ven todas las organizaciones, asi que
     decirles "falta tu organizacion" seria enganoso. Borde discontinuo =
     "sin frontera de tenant", sin tomar el ambar de los avisos reales. */
  .tenant-pill--global {
    border-style: dashed;
  }

  /* ---------- Degradacion responsiva del rail ----------
     >=1200 px: iconos + texto. Por debajo: solo iconos, con el texto retenido
     en el arbol de accesibilidad mediante clip. */
  @media (max-width: 1199.98px) {
    .app-navbar__actions .app-navbar__label,
    .app-navbar__actions .tenant-pill__plan {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .app-navbar__actions {
      gap: 0.4rem;
    }

    .app-navbar__actions .tenant-pill {
      max-width: 190px;
    }

    /* El triangulito del dropdown del chip de usuario tambien se retira en
       modo icono, pero su regla NO cabe aqui: `.dropdown-toggle::after` es de
       Bootstrap y va sin capa. Vive al final del fichero, con el hamburger. */
  }

  @media (max-width: 991.98px) {
    .app-navbar__actions .tenant-pill {
      max-width: 150px;
    }
  }

  /* Telefono: la pildora queda en icono puro. El nombre del tenant sigue
     disponible para el lector de pantalla (clip, no display:none) y en el
     atributo title. */
  @media (max-width: 575.98px) {
    .app-navbar__actions .tenant-pill__body {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .app-navbar__actions {
      gap: 0.3rem;
    }

    .app-navbar__actions .tenant-pill {
      max-width: none;
      gap: 0;
      padding: 0.3rem 0.62rem;
    }
  }

} /* end @layer components */

/* ==========================================================================
   Conmutador de tema (claro/oscuro/auto) — visibilidad de glifos.
   Va SIN @layer a propósito: FontAwesome inyecta
   `svg:not(:root).svg-inline--fa { display: inline-block }` sin capa y las
   reglas encapsadas pierden contra cualquier regla sin capa (mismo patrón
   que los estilos críticos del shell). El estado (light|tricorder|auto) lo
   escribe theme-toggle.js en data-theme-state del botón.
   ========================================================================== */
.app-theme-toggle .app-theme-toggle__icon {
  display: none;
}

.app-theme-toggle[data-theme-state="light"] .app-theme-toggle__icon--light,
.app-theme-toggle[data-theme-state="tricorder"] .app-theme-toggle__icon--tricorder,
.app-theme-toggle[data-theme-state="auto"] .app-theme-toggle__icon--auto {
  display: inline-block;
}

/* ==========================================================================
   HAMBURGER DEL HEADER (.app-navbar .navbar-toggler)
   --------------------------------------------------------------------------
   VA SIN @layer A PROPOSITO, igual que el bloque de arriba. Bootstrap declara
   `.navbar-toggler` y `.navbar-toggler-icon` sin capa, y en la cascada las
   declaraciones sin capa ganan a TODAS las capadas sin mirar la
   especificidad. Mientras estas reglas vivieron dentro de
   `@layer components` no pintaron nada: lo medido en navegador el 2026-09-23
   a 375 y 768 px era el default de Bootstrap intacto.

       propiedad      antes (Bootstrap)        ahora
       fondo          rgba(0, 0, 0, 0)         rgba(255,255,255,0.16)
       borde          rgba(0, 0, 0, 0.15) 1px  rgba(255,255,255,0.55) 1.5px
       radio          6px                      --radius-md
       trazo icono    rgba(33, 37, 41, 0.75)   blanco hueso
       alto           40px                     --touch-target (44px)

   Contrastes sobre el azul del navbar (WCAG 1.4.11 pide 3:1 para controles no
   textuales): el trazo del icono pasa de 1.52:1 a 5.31:1 y el borde queda en
   3.95:1. Esa cifra de 1.52:1 es, literalmente, el «se confunde con el fondo»
   que motivo esta reparacion.

   El fondo es translucido y NO opaco a proposito: el control tiene que
   leerse como parte del chrome del header, no como un boton pegado encima.
   El 16% basta para despegarlo del gradiente -- es el mismo recurso que ya
   usan .tenant-pill y .med-user-chip -- y ademas funciona igual en los dos
   temas.
   ========================================================================== */
.app-navbar .navbar-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.5. Medido antes: 56x40 -- se quedaba corto de alto. */
  min-width: var(--touch-target, 44px);
  min-height: var(--touch-target, 44px);
  padding: 0.5rem;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0, 0, 0, 0.18));
  transition:
    background-color var(--duration-fast, 150ms) var(--ease-out-quart, ease),
    border-color var(--duration-fast, 150ms) var(--ease-out-quart, ease);
}

.app-navbar .navbar-toggler:hover {
  background-color: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.9);
}

/* El foco de Bootstrap es un `box-shadow` que toma su color de
   `--bs-navbar-toggler-focus-width` + el color del texto del navbar: sobre
   este azul queda invisible. Se sustituye por un contorno blanco solido, y se
   anula el box-shadow heredado para que no queden los dos halos. */
.app-navbar .navbar-toggler:focus,
.app-navbar .navbar-toggler:focus-visible {
  box-shadow: none;
}

.app-navbar .navbar-toggler:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.app-navbar .navbar-toggler-icon {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28246,251,255,0.98%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Estado abierto ----------
   Antes no habia ninguno: el boton se veia identico con el menu desplegado y
   con el menu cerrado, asi que el unico indicio de estado era el panel en si.
   Se invierte el control (fondo solido, aspa azul) porque la inversion se lee
   sin depender del color -- el glifo cambia de tres rayas a un aspa, que es
   lo que exige WCAG 1.4.1. `aria-expanded` ya lo mantiene Bootstrap. */
.app-navbar .navbar-toggler[aria-expanded="true"] {
  background-color: #fff;
  border-color: #fff;
}

.app-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230f4e7a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e");
}

/* ---------- Variante tricorder ---------- */
html[data-app-theme="tricorder"] .app-navbar .navbar-toggler {
  background-color: rgba(0, 229, 255, 0.12);
  border-color: var(--tricorder-border, rgba(0, 229, 255, 0.3));
}

html[data-app-theme="tricorder"] .app-navbar .navbar-toggler:hover {
  background-color: rgba(0, 229, 255, 0.24);
  border-color: var(--tricorder-primary, #00e5ff);
}

html[data-app-theme="tricorder"] .app-navbar .navbar-toggler:focus-visible {
  outline-color: var(--tricorder-primary, #00e5ff);
}

html[data-app-theme="tricorder"] .app-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,229,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html[data-app-theme="tricorder"]
  .app-navbar
  .navbar-toggler[aria-expanded="true"] {
  background-color: var(--tricorder-primary, #00e5ff);
  border-color: var(--tricorder-primary, #00e5ff);
}

html[data-app-theme="tricorder"]
  .app-navbar
  .navbar-toggler[aria-expanded="true"]
  .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23062038' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e");
}

/* El reset de movimiento de theme-tokens.css vive en `@layer base`, asi que no
   alcanza a este bloque sin capa: hay que repetir la renuncia aqui. */
@media (prefers-reduced-motion: reduce) {
  .app-navbar .navbar-toggler {
    transition: none;
  }
}

/* El `display: inline-flex` de arriba, al no tener capa ni media query,
   también pisaba el `.navbar-expand-lg .navbar-toggler { display: none }`
   de Bootstrap: el hamburger se veía en escritorio (medido a 1865px), donde
   el menú ya está desplegado y el botón no hace nada. */
@media (min-width: 992px) {
  .app-navbar.navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

/* Icono y texto en línea en los enlaces de la barra. Hasta 2026-10-08 lo
   daba, por accidente, la regla global `.nav-link { display: flex
   !important }` de sidebar.css; al acotarla al sidebar, los enlaces de la
   barra volvían al `display: block` de Bootstrap (icono encima del texto).
   Sin capa por lo mismo que el hamburger: Bootstrap declara `.nav-link`
   sin capa. */
.app-navbar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* La marca nunca cede ancho. MEDIDO en tricorder a 1440px: con la fila en
   nowrap y los destinos con etiqueta, la marca quedaba en 0px y la lista
   (622px en un hueco de 403) se salía 191px por la izquierda. */
.app-navbar .app-brand {
  flex-shrink: 0;
}

/* El símbolo ({% ui_brand_mark %}) sólo tenía tamaño bajo tecsa-clinico:
   en los demás temas el SVG medía 0x0 y la marca no se veía. Tamaño por
   defecto aquí; components.css del tema lo ajusta con más especificidad. */
.app-navbar .app-brand__mark {
  width: 28px;
  height: 28px;
}

/* Misma franja que ya usa tecsa-clinico (components.css): destinos en
   sólo-icono entre 1200 y 1599px, donde con etiquetas no caben junto al
   rail. Por debajo de 1200 ya lo hace la sección 9. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  html[data-app-theme="tricorder"] .app-navbar .nav-label {
    display: none;
  }
}

/* ==========================================================================
   El triangulito del dropdown, fuera del rail en modo icono.
   --------------------------------------------------------------------------
   Sin capa por lo mismo que el hamburger: `.dropdown-toggle::after` lo
   declara Bootstrap sin capa, y la primera version de esta regla, escrita
   dentro de `@layer components`, no movio un pixel (medido: el chip seguia
   en 117.8 px).

   No es cosmetica. Medido a 375 px, ese pseudo-elemento ocupaba 85.4 px de
   ancho -- mas 4.1 de margen -- de los 117.8 del chip entero: como item flex
   del chip se estiraba muy por encima de los ~8 px del triangulo que dibuja.
   Con la fila del header en `nowrap` (navbar.css) ese ancho muerto salia
   integro de la marca, que quedaba reducida a la letra «T»: 8.7 px de los
   247 que pide su texto.

   `display: none` es aqui lo correcto y no contradice la regla de oro de la
   seccion 9: no hay texto que sacar del arbol de accesibilidad, el nombre
   del control lo da su `aria-label` y el menu sigue abriendose igual.
   ========================================================================== */
@media (max-width: 1199.98px) {
  .app-navbar__actions .dropdown-toggle::after {
    display: none;
  }
}