/* ═══════════════════════════════════════════════════════════════
   POS Negocios — Design Tokens
   Sistema: Warm Sand & Roasted Espresso
   Versión: 2.0 (con soporte para dark mode via [data-theme="dark"])
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Accentos de Marca (fijos, no cambian por tema) ────── */
    --accent-emerald:   #059669;
    --accent-teal:      #0d9488;
    --accent-cyan:      #0284c7;
    --accent-amber:     #d97706;
    --accent-coral:     #e11d48;

    /* ─── Gradientes (fijos) ─────────────────────────────────── */
    --gradient-primary: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    --gradient-warm:    linear-gradient(135deg, #d97706 0%, #059669 100%);
    --gradient-tech:    linear-gradient(135deg, #0d9488 0%, #0284c7 100%);

    /* ─── Status Semántico (fijos) ───────────────────────────── */
    --status-success:   #059669;
    --status-warning:   #d97706;
    --status-danger:    #e11d48;
    --status-info:      #0d9488;

    /* ─── Tipografía ─────────────────────────────────────────── */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* ─── Radios ─────────────────────────────────────────────── */
    --radius-sm:  8px;
    --radius-md:  16px;
    --radius-lg:  24px;

    /* ══════════════════════════════════════════════════════════
       LIGHT MODE (default) — Warm Sand
       ══════════════════════════════════════════════════════════ */

    /* Lienzos & Fondos */
    --bg-main:          #eee7da;   /* Structured Sand */
    --bg-surface:       #ffffff;   /* Pure White Surface */
    --bg-surface-alt:   #f7f4ee;   /* Warm Sand Base */
    --bg-card:          #ffffff;
    --bg-card-hover:    #fdfbf7;
    --border-color:     #ded5c4;   /* Warm Sand Border */
    --border-glow:      rgba(16, 185, 129, 0.35);

    /* Sidebar & Nav (Medium Stone #9e9382) */
    --bg-sidebar:               #9e9382;
    --bg-sidebar-deeper:        #8d8271;
    --border-sidebar:           rgba(25, 22, 19, 0.14);
    --nav-link-color:           #191613;
    --nav-link-hover-bg:        rgba(255, 255, 255, 0.35);
    --nav-link-hover-color:     #120f0d;
    --nav-active-bg:            #ffffff;
    --nav-active-color:         #059669;
    --nav-active-border:        #059669;
    --nav-section-color:        rgba(25, 22, 19, 0.75);

    /* Header / Topbar */
    --bg-header:        #9e9382;
    --border-header:    rgba(25, 22, 19, 0.14);

    /* Tipografía sobre fondos claros */
    --text-primary:     #1f1b16;   /* Café carbón oscuro */
    --text-secondary:   #5c5346;   /* Café medio suave */
    --text-muted:       #9e9382;   /* Detalles y timestamps */

    /* Inputs */
    --input-bg:           #ffffff;
    --input-border:       #ded5c4;
    --input-focus-border: #059669;
    --input-focus-shadow: rgba(16, 185, 129, 0.15);
    --input-color:        #1f1b16;

    /* Modales */
    --modal-bg:       #ffffff;
    --modal-border:   #ded5c4;
    --modal-backdrop: rgba(25, 22, 19, 0.65);

    /* Glass & Misc */
    --glass:              rgba(255, 255, 255, 0.60);
    --shadow-card:        0 4px 18px rgba(31, 27, 22, 0.05);
    --shadow-card-hover:  0 10px 25px rgba(31, 27, 22, 0.10);
    --shadow-modal:       0 24px 60px rgba(31, 27, 22, 0.18);
    --scrollbar-thumb:    #ded5c4;

    /* ─── Compat aliases (usado en global-admin.css legacy) ── */
    --bg:              var(--bg-main);
    --card-bg:         var(--bg-card);
    --text-main:       var(--text-primary);
    --border:          var(--border-color);
    --primary:         var(--accent-emerald);
    --primary-hover:   var(--accent-teal);
    --success:         var(--status-success);
    --warning:         var(--status-warning);
    --danger:          var(--status-danger);

    /* Precios */
    --price-color-light: #a35a05;
    --price-color-dark:  #d97706;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Espresso
   Activado con: document.documentElement.setAttribute('data-theme','dark')
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Lienzos & Fondos */
    --bg-main:          #191613;               /* Roasted Espresso */
    --bg-surface:       #241f1b;               /* Espresso Card */
    --bg-surface-alt:   #2a2420;
    --bg-card:          rgba(36, 31, 27, 0.90);
    --bg-card-hover:    rgba(44, 38, 32, 0.95);
    --border-color:     rgba(217, 119, 6, 0.18);  /* Ámbar cálido tenue */

    /* Sidebar (se profundiza en dark mode) */
    --bg-sidebar:           #120f0d;           /* Deep Espresso */
    --bg-sidebar-deeper:    #0e0c0a;
    --border-sidebar:       rgba(217, 119, 6, 0.10);

    /* Header */
    --bg-header:        rgba(25, 22, 19, 0.94);
    --border-header:    rgba(217, 119, 6, 0.12);

    /* Tipografía sobre fondos oscuros */
    --text-primary:     #faf8f5;               /* Blanco marfil cálido */
    --text-secondary:   #b8b0a2;               /* Arena suave */
    --text-muted:       #7c7467;

    /* Inputs */
    --input-bg:           rgba(36, 31, 27, 0.80);
    --input-border:       rgba(217, 119, 6, 0.22);
    --input-focus-border: #059669;
    --input-focus-shadow: rgba(5, 150, 105, 0.18);
    --input-color:        #faf8f5;

    /* Modales */
    --modal-bg:       #241f1b;
    --modal-border:   rgba(217, 119, 6, 0.20);
    --modal-backdrop: rgba(10, 8, 6, 0.80);

    /* Glass & Misc */
    --glass:              rgba(36, 31, 27, 0.50);
    --shadow-card:        0 4px 18px rgba(0, 0, 0, 0.25);
    --shadow-card-hover:  0 10px 28px rgba(0, 0, 0, 0.40);
    --shadow-modal:       0 24px 60px rgba(0, 0, 0, 0.55);
    --scrollbar-thumb:    rgba(217, 119, 6, 0.25);

    /* ─── Compat aliases ────────────────────────────────────── */
    --bg:      var(--bg-main);
    --card-bg: var(--bg-card);
    --text-main: var(--text-primary);
    --border:    var(--border-color);
}

/* ══════════════════════════════════════════════════════════════
   Accesibilidad & Utilidades Globales
   ══════════════════════════════════════════════════════════════ */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-emerald);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.admin-link {
    color: var(--accent-emerald);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(5, 150, 105, 0.08);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(5, 150, 105, 0.20);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.logout-btn {
    background: rgba(225, 29, 72, 0.10);
    color: var(--accent-coral);
    border: 1px solid rgba(225, 29, 72, 0.25);
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logout-btn:hover {
    background: rgba(225, 29, 72, 0.20);
}