/* ============================================================
   Zhong Yi · 中医 — Tokens, layout, topbar, sidebar
   ============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
    /* Brand — verdes corporativos */
    --brand-50:   #e8f5ea;
    --brand-100:  #c8e6cd;
    --brand-300:  #81c784;
    --brand-500:  #4caf50;   /* claro — gradientes */
    --brand-600:  #2e7c34;   /* primario */
    --brand-700:  #235d27;
    --brand-shadow: rgba(46,124,52,.35);

    /* Tipografía */
    --font-sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --text-xs:   .72rem;
    --text-sm:   .82rem;
    --text-base: .92rem;
    --text-md:   1rem;
    --text-lg:   1.15rem;
    --text-xl:   1.35rem;
    --text-2xl:  1.6rem;
    --text-3xl:  2rem;
    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.7;

    /* Espaciado */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* Radius */
    --radius-sm:   6px;
    --radius-md:   9px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 2px 12px rgba(0,0,0,.07);
    --shadow-lg: 0 4px 24px rgba(0,0,0,.10);
    --shadow-xl: 0 16px 40px rgba(0,0,0,.16);

    /* Transiciones */
    --t-fast: 120ms ease;
    --t-base: 200ms ease;
    --t-slow: 300ms ease;

    /* Z-index */
    --z-sidebar: 200;
    --z-topbar:  300;
    --z-modal:   1050;
    --z-toast:   1100;

    /* ── Semánticos (tema CLARO) ── */
    --color-bg:           #f0f2f5;
    --color-surface:      #ffffff;
    --color-surface-alt:  #fafcfb;
    --color-surface-soft: #f8faf9;
    --color-border:       #e2e8f0;
    --color-border-soft:  #e2ece7;
    --color-border-strong:#cbd5e0;

    --color-text:         #1a1f2e;
    --color-text-muted:   #64748b;
    --color-text-soft:    #94a3b8;
    --color-text-inverse: #ffffff;

    --color-primary:        var(--brand-600);
    --color-primary-hover:  var(--brand-700);
    --color-primary-soft:   var(--brand-50);
    --color-primary-shadow: var(--brand-shadow);

    --color-danger:        #dc2626;
    --color-danger-soft:   rgba(220,38,38,.1);
    --color-success:       #16a34a;
    --color-success-soft:  rgba(22,163,74,.12);
    --color-warning:       #f59e0b;
    --color-warning-soft:  rgba(234,179,8,.15);
    --color-info:          #1d4ed8;
    --color-info-soft:     rgba(29,78,216,.12);

    --color-sidebar:           #1e2635;
    --color-sidebar-text:      rgba(255,255,255,.5);
    --color-sidebar-text-hover:rgba(255,255,255,.85);
    --color-sidebar-active:    var(--brand-600);
    --color-sidebar-section:   rgba(255,255,255,.85);

    --gradient-brand: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    --gradient-login: linear-gradient(135deg, #0d1b2a 0%, #1b3a4b 40%, #0d2818 100%);

    /* ── Aliases retrocompatibles ── */
    --jade:        var(--color-primary);
    --jade-lt:     var(--brand-500);
    --jade-shadow: var(--color-primary-shadow);
    --sidebar-bg:  var(--color-sidebar);
    --ink:         var(--color-text);
    --body-bg:     var(--color-bg);
    --card-radius: var(--radius-lg);
    --btn-radius:  var(--radius-md);

    color-scheme: light;
}

/* ── Tema OSCURO ── */
[data-theme="dark"] {
    --color-bg:           #0f1419;
    --color-surface:      #1a212c;
    --color-surface-alt:  #232b38;
    --color-surface-soft: #1e2630;
    --color-border:       #2a3340;
    --color-border-soft:  #283142;
    --color-border-strong:#3d4858;

    --color-text:         #e8eaed;
    --color-text-muted:   #a0aab6;
    --color-text-soft:    #6b7585;

    --color-primary-soft: rgba(76,175,80,.15);
    --color-danger-soft:  rgba(220,38,38,.18);
    --color-success-soft: rgba(22,163,74,.18);
    --color-warning-soft: rgba(234,179,8,.20);
    --color-info-soft:    rgba(29,78,216,.20);

    --color-sidebar:      #0a0e13;
    --color-sidebar-text: rgba(255,255,255,.55);
    --color-sidebar-text-hover: rgba(255,255,255,.92);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 2px 12px rgba(0,0,0,.35);
    --shadow-lg: 0 4px 24px rgba(0,0,0,.45);
    --shadow-xl: 0 16px 40px rgba(0,0,0,.55);
    --gradient-login: linear-gradient(135deg, #06090d 0%, #141d28 50%, #06090d 100%);

    color-scheme: dark;
}

/* ── Tema AZUL (Rentger) — claro con acento azul ── */
[data-theme="blue"] {
    --brand-50:   #eef4ff;
    --brand-100:  #d6e4ff;
    --brand-300:  #93b4fd;
    --brand-500:  #3b82f6;
    --brand-600:  #1d4ed8;
    --brand-700:  #1e40af;
    --brand-shadow: rgba(29,78,216,.35);
    --color-primary-soft: rgba(29,78,216,.10);
    --color-sidebar:      #0f172a;
    --gradient-login: linear-gradient(135deg, #0a1426 0%, #16345c 45%, #0a1f3d 100%);
    color-scheme: light;
}

/* ── Base ── */
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); transition: background var(--t-base), color var(--t-base); }
*, input, button, select, textarea { font-family: var(--font-sans); }

/* ── Topbar ── */
.topbar { background: var(--color-sidebar); height: 54px; display: flex; align-items: center; padding: 0 var(--space-xl); justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,.3); position: sticky; top: 0; z-index: var(--z-topbar); }
.topbar .brand-zh  { font-size: var(--text-lg); color: #fff; letter-spacing: .15rem; }
.topbar .brand-es  { font-size: var(--text-base); font-weight: 600; color: rgba(255,255,255,.95); }
.topbar .user-badge { background: rgba(255,255,255,.1); border-radius: var(--radius-full); padding: 4px 12px; color: rgba(255,255,255,.75); font-size: var(--text-sm); }
.topbar .btn-out { background: rgba(220,53,69,.15); border: 1px solid rgba(220,53,69,.3); color: #f87171; border-radius: var(--radius-sm); padding: 4px 12px; font-size: var(--text-sm); text-decoration: none; transition: background var(--t-base); }
.topbar .btn-out:hover { background: rgba(220,53,69,.28); color: #fca5a5; }

/* ── Toggle tema (botón en topbar) ── */
.btn-theme-toggle {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
    border-radius: var(--radius-sm);
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1rem;
    transition: background var(--t-base), transform var(--t-base);
}
.btn-theme-toggle:hover { background: rgba(255,255,255,.14); transform: scale(1.05); }

/* Menú de selección de tema */
.theme-menu { min-width: 170px; }
.theme-menu .dropdown-item { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.theme-menu .dropdown-item .theme-dot {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.15);
}
.theme-dot-green { background: #2e7c34; }
.theme-dot-blue  { background: #1d4ed8; }
.theme-dot-dark  { background: #0f1419; }
.theme-menu .dropdown-item .theme-check { margin-left: auto; opacity: 0; }
.theme-menu .dropdown-item.active { background: var(--color-primary-soft); color: var(--color-primary); }
.theme-menu .dropdown-item.active .theme-check { opacity: 1; }

/* ── Hamburguesa ── */
.btn-hamburger { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; padding: 4px 8px; display: none; line-height: 1; }

/* ── Layout ── */
.main-area { display: flex; min-height: calc(100vh - 54px); }

/* ── Sidebar ── */
.sidebar { width: 210px; min-width: 210px; background: var(--color-sidebar); padding: var(--space-xl) var(--space-md); border-right: 1px solid rgba(255,255,255,.05); flex-shrink: 0; }
.sidebar-section { font-size: var(--text-xs); font-weight: 700; color: var(--color-sidebar-section); text-transform: uppercase; letter-spacing: .1rem; padding: 0 var(--space-sm); margin: 14px 0 var(--space-xs); }
.sidebar .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px var(--space-md); border-radius: var(--radius-sm); color: var(--color-sidebar-text); font-size: var(--text-sm); text-decoration: none; transition: all var(--t-fast); background: none; border: none; width: 100%; text-align: left; cursor: pointer; }
.sidebar .nav-item i { width: 18px; text-align: center; }
.sidebar .nav-item:hover  { background: rgba(255,255,255,.07); color: var(--color-sidebar-text-hover); }
.sidebar .nav-item.active { background: var(--color-sidebar-active); color: #fff; font-weight: 500; }
.sidebar .nav-item.danger { color: #f87171; }
.sidebar .nav-item.danger:hover { background: rgba(220,53,69,.15); }

/* ── Overlay ── */
.sidebar-overlay { display: none; position: fixed; inset: 54px 0 0 0; background: rgba(0,0,0,.5); z-index: 199; }
.sidebar-overlay.open { display: block; }

/* ── Contenido ── */
.content { flex: 1; padding: 28px 32px; overflow-y: auto; color: var(--color-text); background: var(--color-bg); }

/* ── Accesibilidad: focus visible para teclado ── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .btn-hamburger { display: flex; }
    .topbar .brand-es { display: none; }
    .sidebar { position: fixed; top: 54px; left: -220px; height: calc(100vh - 54px); z-index: var(--z-sidebar); transition: left .25s ease; box-shadow: 4px 0 20px rgba(0,0,0,.4); }
    .sidebar.open { left: 0; }
    .content { padding: var(--space-lg) var(--space-lg) 70px; overflow-x: hidden; width: 100%; }
    .card-table { overflow-x: hidden; }
    .table      { min-width: unset; width: 100%; }
    .page-title { font-size: 1.1rem; }
    .d-flex.justify-content-between { flex-wrap: wrap; gap: 10px; }
}