/* ═══════════════════════════════════════════════════════════════════════════
   themes.css — Variables CSS de la paleta de marca Goldbarks
   Los valores reflejan GoldbarksTheme.cs para mantener sincronía entre
   el sistema de temas MudBlazor y los estilos CSS personalizados.
   Paleta y escala de superficies alineadas al sistema de diseño Material 3
   usado en los mockups de referencia (Google Stitch).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Paleta de marca ──────────────────────────────────────────────────── */
    --gb-primary:        #003EC7;   /* azul — texto/iconos de énfasis, enlaces  */
    --gb-primary-strong: #0052FF;   /* azul vivo — fondos de botón / CTA        */
    --gb-primary-soft:   #DDE1FF;   /* azul claro — superficies/chips sutiles   */
    --gb-on-primary:     #FFFFFF;

    --gb-secondary:      #006C49;   /* verde — éxito / positivo                 */
    --gb-secondary-soft: #6CF8BB;
    --gb-on-secondary-soft: #00714D;

    --gb-warning:        #9A6700;   /* ámbar — advertencia                      */
    --gb-error:          #BA1A1A;   /* rojo — error                             */
    --gb-error-soft:     #FFDAD6;
    --gb-on-error-soft:  #93000A;

    --gb-tertiary:       #3F4F65;   /* gris azulado — acento secundario         */
    --gb-tertiary-soft:  #D3E4FE;

    /* ── Tipografía ───────────────────────────────────────────────────────── */
    --gb-font-title: 'Inter', sans-serif;
    --gb-font-body:  'Inter', sans-serif;

    /* ── Superficies (modo claro) ────────────────────────────────────────── */
    --gb-bg:                #F7F9FB;  /* fondo de página                       */
    --gb-surface:           #FFFFFF;  /* cards, sidebar, appbar                */
    --gb-surface-low:       #F2F4F6;  /* hover                                 */
    --gb-surface-container: #ECEEF0;
    --gb-surface-high:      #E6E8EA;
    --gb-border:            #C3C5D9;

    /* ── Texto (modo claro) ───────────────────────────────────────────────── */
    --gb-text-heading:   #191C1E;  /* título / texto principal */
    --gb-text-body:      #434656;  /* párrafo principal */
    --gb-text-secondary: #434656;
    --gb-text-muted:     #737688;  /* texto suave / apoyo */

    /* ── Modo claro (alias de compatibilidad) ───────────────────────────────── */
    --gb-light-bg:          #F7F9FB;
    --gb-light-surface:     #FFFFFF;
    --gb-light-text:        #191C1E;
    --gb-light-text-sec:    #434656;
    --gb-light-drawer-bg:   #FFFFFF;
    --gb-light-drawer-text: #191C1E;

    /* ── Modo oscuro ──────────────────────────────────────────────────────── */
    --gb-dark-appbar:       #191C1E;
    --gb-dark-drawer-bg:    #2D3133;
    --gb-dark-drawer-text:  #EFF1F3;
    --gb-dark-bg:           #191C1E;
    --gb-dark-surface:      #2D3133;
    --gb-dark-surface-low:  #383C3F;
    --gb-dark-text:         #EFF1F3;
    --gb-dark-text-sec:     #B4B8BE;
    --gb-dark-primary:      #B7C4FF;
    --gb-dark-border:       rgba(255, 255, 255, 0.12);

    /* ── Decoración login ─────────────────────────────────────────────────── */
    --gb-login-gradient: linear-gradient(160deg, #0052FF 0%, #003EC7 50%, #191C1E 100%);

    /* ── Radios y sombra de card estándar ────────────────────────────────── */
    --gb-radius-card: 12px;
    --gb-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
    --gb-shadow-card-hover: 0 4px 12px rgba(16, 24, 40, 0.10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modo oscuro — override reactivo de los tokens neutros/texto.
   Se activa agregando la clase .gb-dark al layout raíz (ver MainLayout.razor)
   cuando IsDarkMode está activo; MudThemeProvider no expone esa clase por sí
   solo, así que los componentes que consumen var(--gb-*) directamente (no a
   través de la paleta de MudBlazor) necesitan este bloque para no quedar con
   texto oscuro sobre fondo oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */

.gb-dark {
    --gb-bg:                var(--gb-dark-bg);
    --gb-surface:           var(--gb-dark-surface);
    --gb-surface-low:       var(--gb-dark-surface-low);
    --gb-surface-container: var(--gb-dark-surface-low);
    --gb-surface-high:      var(--gb-dark-surface-low);
    --gb-border:            var(--gb-dark-border);

    --gb-text-heading:   var(--gb-dark-text);
    --gb-text-body:      var(--gb-dark-text-sec);
    --gb-text-secondary: var(--gb-dark-text-sec);
    --gb-text-muted:     var(--gb-dark-text-sec);

    --gb-primary:      var(--gb-dark-primary);
    --gb-primary-soft: rgba(183, 196, 255, 0.16);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Card estándar — superficie blanca, borde sutil, esquinas redondeadas
   ═══════════════════════════════════════════════════════════════════════════ */

.gb-card {
    background: var(--gb-surface);
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-card);
    box-shadow: var(--gb-shadow-card);
    transition: box-shadow 0.2s ease;
}

.gb-card:hover {
    box-shadow: var(--gb-shadow-card-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sidebar persistente — estructura de tres franjas (marca / nav / usuario)
   Superficie clara con borde derecho sutil (no un panel de color sólido).
   ═══════════════════════════════════════════════════════════════════════════ */

.gb-drawer .mud-drawer-content-in {
    height: 100%;
}

.gb-drawer {
    border-right: 1px solid var(--gb-border) !important;
}

.gb-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gb-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    flex-shrink: 0;
    /* Sin esto el contenido no puede encogerse dentro del flex y el subtítulo
       desborda el sidebar en vez de recortarse con puntos suspensivos. */
    min-width: 0;
}

.gb-brand-mark {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--gb-primary);
}

.gb-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gb-brand-name {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .2px;
    color: var(--gb-text-heading);
}

.gb-brand-tagline {
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gb-text-muted);
    /* El subtítulo es largo y el sidebar angosto: se corta con elipsis en vez
       de empujar el layout o quedar cortado a la mitad de una palabra. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gb-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 8px;
}

.gb-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--gb-border);
    flex-shrink: 0;
}

.gb-sidebar-footer-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.gb-sidebar-footer-text .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ítem de navegación activo: texto/ícono en azul de marca, fondo sutil y
   una franja de acento a la derecha — replica el patrón de los mockups. */
.gb-sidebar .mud-nav-link.active:not(.mud-nav-link-disabled),
.gb-sidebar .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--gb-primary) !important;
}

.gb-sidebar .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--gb-surface-low) !important;
    border-right: 2px solid var(--gb-primary);
    font-weight: 700;
}

.gb-sidebar .mud-nav-link:not(.active):not(.mud-nav-link-disabled):hover {
    background-color: var(--gb-surface-low) !important;
    color: var(--gb-text-heading) !important;
}

.gb-appbar-search {
    max-width: 340px;
    margin-left: 8px;
}

.gb-appbar-search .mud-input-outlined {
    border-radius: 8px;
}

/* ── Paneles de dashboard ──────────────────────────────────────────────── */

.gb-panel-title {
    font-weight: 700;
    color: var(--gb-text-heading);
}

.gb-progress-row + .gb-progress-row {
    margin-top: 14px;
}