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

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

  .app-navbar.is-minimized {
    transform: translateY(-120%);
  }

  .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);
  }

  .app-navbar .navbar-toggler {
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    padding: 0.38rem 0.6rem;
  }

  .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%28246,251,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

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

  .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) {
    .app-navbar .navbar-collapse {
      margin-top: 0.6rem;
      background: rgba(6, 32, 56, 0.2);
      border-radius: 12px;
      padding: 0.55rem;
    }

    .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;
    }

    .med-user-chip,
    .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;
  }

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

  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' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

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

  /* 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 */
  .app-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .app-theme-toggle:hover,
  .app-theme-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.26);
  }

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

  html[data-app-theme="tricorder"] .app-theme-toggle:hover,
  html[data-app-theme="tricorder"] .app-theme-toggle:focus-visible {
    background: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
  }

  /* 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) {
    .app-navbar .nav-label,
    .app-navbar .app-brand__subtitle,
    .app-navbar .med-plan-chip span,
    .app-navbar .med-user-chip > span {
      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;
  }

} /* end @layer components */