/* ═══════════════════════════════════════════════════════
   DESIGN SYSTEM — Sistema de Lotería
   Referencia de colores para Web (Blazor) y Móvil (Android)

   PRIMARY     #6C63FF  → botones, acentos, íconos activos
   NAV ACTIVE  #C5F441  → ítem activo del sidebar
   BG          #F5F6FA  → fondo general
   SURFACE     #FFFFFF  → cards, sidebar, appbar
   CARD-1      #EDE9FF  → tarjeta ventas (lavanda)
   CARD-2      #E6F4FF  → tarjeta comisión (azul)
   CARD-3      #E8FFF4  → tarjeta sorteo (verde menta)
   CARD-4      #0D9488  → tarjeta vendedores (teal oscuro)
   TEXT-1      #1A1A2E  → texto principal
   TEXT-2      #6B7280  → texto secundario
   BORDER      #F0F2F5  → bordes suaves
   SUCCESS     #22C55E
   WARNING     #F59E0B
   ERROR       #EF4444
   ═══════════════════════════════════════════════════════ */

:root {
    --c-primary:    #6C63FF;
    --c-nav-active: #C5F441;
    --c-bg:         #F5F6FA;
    --c-surface:    #FFFFFF;
    --c-card-1:     #EDE9FF;
    --c-card-2:     #E6F4FF;
    --c-card-3:     #E8FFF4;
    --c-card-4:     #0D9488;
    --c-text-1:     #1A1A2E;
    --c-text-2:     #6B7280;
    --c-border:     #F0F2F5;
    --radius-lg:    16px;
    --radius-md:    12px;
    --shadow-sm:    0 2px 8px rgba(0,0,0,.06);
    --shadow-md:    0 4px 20px rgba(0,0,0,.08);
}

html, body { margin: 0; padding: 0; height: 100%; background: var(--c-bg); }

/* ── MudBlazor overrides ─────────────────────────────── */

/* Sidebar blanco */
.mud-drawer { background: var(--c-surface) !important; border-right: 1px solid var(--c-border) !important; }
.mud-drawer-content { background: var(--c-surface) !important; }

/* AppBar blanco */
.mud-appbar { background: var(--c-surface) !important; color: var(--c-text-1) !important; border-bottom: 1px solid var(--c-border) !important; }
.mud-appbar .mud-icon-button { color: var(--c-text-2) !important; }

/* Nav links */
.mud-nav-link {
    color: var(--c-text-2) !important;
    border-radius: var(--radius-md) !important;
    margin: 2px 8px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    transition: background 0.15s, color 0.15s !important;
}
.mud-nav-link:hover { background: var(--c-bg) !important; color: var(--c-text-1) !important; }
.mud-nav-link.active {
    background: var(--c-nav-active) !important;
    color: var(--c-text-1) !important;
    font-weight: 700 !important;
}
.mud-nav-link.active .mud-icon-root { color: var(--c-text-1) !important; }
.mud-nav-link .mud-icon-root { color: var(--c-text-2); }

/* Fondo general */
.mud-main-content { background: var(--c-bg) !important; }
.mud-container { background: transparent !important; }

/* Chips, badges */
.mud-chip { border-radius: 8px !important; }

/* Tablas */
.mud-table-root { border-radius: var(--radius-lg) !important; overflow: hidden; }
.mud-table-head .mud-table-cell { background: #FAFAFA !important; font-weight: 700 !important; font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: 0.4px; color: var(--c-text-2) !important; }
.mud-table-row:hover td { background: #FAFBFF !important; }

/* Inputs */
.mud-input-outlined .mud-notched-outline { border-radius: 10px !important; }

/* ── Stat cards ──────────────────────────────────────── */
.sc {
    border-radius: var(--radius-lg) !important;
    padding: 1.4rem 1.6rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
}
.sc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sc-1 { background: var(--c-card-1); }
.sc-2 { background: var(--c-card-2); }
.sc-3 { background: var(--c-card-3); }
.sc-4 { background: var(--c-card-4); color: #fff; }

.sc-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    background: rgba(255,255,255,0.45);
}
.sc-4 .sc-icon { background: rgba(255,255,255,0.2); }

.sc-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--c-text-2); margin-bottom: 0.25rem; }
.sc-4 .sc-label { color: rgba(255,255,255,0.75); }

.sc-value { font-size: 1.65rem; font-weight: 800; color: var(--c-text-1); line-height: 1.1; }
.sc-4 .sc-value { color: #fff; }

.sc-sub { font-size: 0.72rem; color: var(--c-text-2); margin-top: 0.3rem; }
.sc-4 .sc-sub { color: rgba(255,255,255,0.65); }

/* ── Login ───────────────────────────────────────────── */
.login-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, #1A1A2E 0%, #6C63FF 60%, #C5F441 140%);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.login-paper { border-radius: 20px !important; }

/* ── Section cards ───────────────────────────────────── */
.section-card {
    background: var(--c-surface);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.section-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--c-border);
    display: flex; align-items: center; justify-content: space-between;
}
.section-title { font-weight: 700; font-size: 1rem; color: var(--c-text-1); }

/* ── Sidebar user block ──────────────────────────────── */
.sidebar-user {
    padding: 1rem 1.2rem;
    border-top: 1px solid var(--c-border);
    display: flex; align-items: center; gap: 0.75rem;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-weight: 700; font-size: 0.85rem; color: var(--c-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.72rem; color: var(--c-text-2); }

/* ── Utilidades ──────────────────────────────────────── */
.fw-800 { font-weight: 800 !important; }
.page-title { font-weight: 800 !important; font-size: 1.6rem !important; color: var(--c-text-1) !important; }
.page-subtitle { color: var(--c-text-2) !important; font-size: 0.85rem !important; }

/* ── Blazor error ────────────────────────────────────── */
#blazor-error-ui { background:#EF4444; color:#fff; padding:0.6rem 1rem; position:fixed; bottom:0; width:100%; z-index:9999; display:none; }
.blazor-error-boundary { background:#EF4444; padding:1rem; color:#fff; border-radius:8px; }