/*
 * GTEC POS — Sistema de temas (claro / oscuro)
 * Se carga DESPUÉS del <style> inline de cada página para poder sobrescribir.
 * Las variables cubren todos los naming conventions usados en el proyecto.
 */

/* ══════════════════════════════════════
   VARIABLES MODO CLARO
══════════════════════════════════════ */
html[data-theme="light"] {

    /* ── COMUNES ── */
    --bg:          #eef6ff;
    --bg2:         #ddeeff;
    --card:        #ffffff;
    --panel:       rgba(255,255,255,.97);

    /* texto */
    --txt:         #0f172a;
    --text:        #0f172a;
    --muted:       #475569;

    /* bordes */
    --line:        rgba(2,132,199,.18);
    --border:      rgba(2,132,199,.18);
    --border-cyan: rgba(2,132,199,.28);

    /* acento cyan (más oscuro para legibilidad en fondo claro) */
    --cel:         #0284c7;
    --cel2:        #0369a1;
    --celeste:     #0284c7;
    --celeste2:    #0369a1;
    --cyan:        #0284c7;
    --cyan2:       #0369a1;

    /* estados */
    --ok:          #16a34a;
    --warn:        #d97706;
    --danger:      #dc2626;
    --err:         #dc2626;
}

/* ══════════════════════════════════════
   BODY — fondo general
══════════════════════════════════════ */
[data-theme="light"] body {
    background:
        radial-gradient(900px 500px at 10%   0%, rgba(2,132,199,.07), transparent 60%),
        radial-gradient(900px 500px at 100% 10%, rgba(2,132,199,.05), transparent 55%),
        #eef6ff !important;
    color: #0f172a !important;
}

/* ══════════════════════════════════════
   CABECERAS / TOPBAR / NAVBAR
══════════════════════════════════════ */
[data-theme="light"] header,
[data-theme="light"] .topbar,
[data-theme="light"] .navbar,
[data-theme="light"] .page-header {
    background: rgba(240,249,255,.97) !important;
    border-bottom-color: rgba(2,132,199,.15) !important;
}

[data-theme="light"] .topbar-inner,
[data-theme="light"] .header-inner {
    background: transparent !important;
}

/* ══════════════════════════════════════
   SIDEBAR / NAVEGACIÓN LATERAL
══════════════════════════════════════ */
[data-theme="light"] .sidebar {
    background: #ddeeff !important;
    border-right: 1px solid rgba(2,132,199,.15) !important;
}

[data-theme="light"] .nav-link,
[data-theme="light"] .sidebar a {
    color: #1e3a5f !important;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active,
[data-theme="light"] .sidebar a:hover {
    background: rgba(2,132,199,.12) !important;
    color: #0284c7 !important;
}

[data-theme="light"] .nav-section {
    color: #64748b !important;
}

/* ══════════════════════════════════════
   CARDS / PANELES
══════════════════════════════════════ */
[data-theme="light"] .card,
[data-theme="light"] .stat-card,
[data-theme="light"] .panel {
    background: #ffffff !important;
    border-color: rgba(2,132,199,.15) !important;
    box-shadow: 0 2px 8px rgba(2,132,199,.08) !important;
}

[data-theme="light"] .card .head,
[data-theme="light"] .card-header {
    background: rgba(2,132,199,.05) !important;
    border-bottom-color: rgba(2,132,199,.12) !important;
}

/* ══════════════════════════════════════
   INPUTS / SELECTS / TEXTAREA
══════════════════════════════════════ */
[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: #f0f8ff !important;
    border-color: rgba(2,132,199,.25) !important;
    color: #0f172a !important;
}

[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2,132,199,.12) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: rgba(15,23,42,.35) !important;
    opacity: 1 !important;
}

/* ══════════════════════════════════════
   BOTONES SECUNDARIOS
══════════════════════════════════════ */
[data-theme="light"] button.sec,
[data-theme="light"] a.sec,
[data-theme="light"] .btn-sec,
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-outline,
[data-theme="light"] .nav-buttons a.sec {
    background: rgba(2,132,199,.08) !important;
    border-color: rgba(2,132,199,.20) !important;
    color: #0f172a !important;
}

[data-theme="light"] .btn-home,
[data-theme="light"] .btn-secondary {
    background: rgba(2,132,199,.07) !important;
    border-color: rgba(2,132,199,.18) !important;
    color: #334155 !important;
}

/* ══════════════════════════════════════
   PILLS / BADGES / TAGS
══════════════════════════════════════ */
[data-theme="light"] .pill,
[data-theme="light"] .user-pill,
[data-theme="light"] .tag {
    background: rgba(2,132,199,.07) !important;
    border-color: rgba(2,132,199,.20) !important;
    color: #334155 !important;
}

[data-theme="light"] .chip,
[data-theme="light"] .badge {
    background: rgba(2,132,199,.10) !important;
}

/* ══════════════════════════════════════
   TABLAS
══════════════════════════════════════ */
[data-theme="light"] table {
    color: #0f172a !important;
}

[data-theme="light"] th {
    color: #475569 !important;
    border-bottom-color: rgba(2,132,199,.15) !important;
}

[data-theme="light"] td {
    border-bottom-color: rgba(2,132,199,.10) !important;
    color: #0f172a !important;
}

[data-theme="light"] tr:hover td {
    background: rgba(2,132,199,.05) !important;
}

[data-theme="light"] tbody tr:nth-child(even) {
    background: rgba(2,132,199,.03) !important;
}

/* ══════════════════════════════════════
   ALERTAS / MENSAJES
══════════════════════════════════════ */
[data-theme="light"] .msg-ok,
[data-theme="light"] .alert-ok {
    background: rgba(22,163,74,.08) !important;
    border-color: rgba(22,163,74,.25) !important;
    color: #166534 !important;
}

[data-theme="light"] .msg-err,
[data-theme="light"] .alert-err,
[data-theme="light"] .alert-danger {
    background: rgba(220,38,38,.08) !important;
    border-color: rgba(220,38,38,.25) !important;
    color: #991b1b !important;
}

[data-theme="light"] .alert-warn {
    background: rgba(217,119,6,.08) !important;
    border-color: rgba(217,119,6,.25) !important;
    color: #92400e !important;
}

/* ══════════════════════════════════════
   HINT BOXES / NOTAS
══════════════════════════════════════ */
[data-theme="light"] .hint,
[data-theme="light"] .hint-box,
[data-theme="light"] .note {
    background: rgba(2,132,199,.06) !important;
    border-color: rgba(2,132,199,.18) !important;
    color: #334155 !important;
}

/* ══════════════════════════════════════
   LOGOUT / BOTÓN PELIGRO
══════════════════════════════════════ */
[data-theme="light"] .logout-btn {
    background: rgba(220,38,38,.10) !important;
    color: #dc2626 !important;
    border-color: rgba(220,38,38,.20) !important;
}
[data-theme="light"] .logout-btn:hover {
    background: #dc2626 !important;
    color: #fff !important;
}

/* ══════════════════════════════════════
   OVERLAYS / MODALES / DRAWERS
══════════════════════════════════════ */
[data-theme="light"] .overlay,
[data-theme="light"] .modal-bg {
    background: rgba(0,0,0,.40) !important;
}

[data-theme="light"] .modal,
[data-theme="light"] .drawer,
[data-theme="light"] .carrito-panel {
    background: #ffffff !important;
    border-color: rgba(2,132,199,.15) !important;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
[data-theme="light"] footer,
[data-theme="light"] .footer-gtc {
    background: rgba(2,132,199,.05) !important;
    border-top-color: rgba(2,132,199,.12) !important;
    color: #475569 !important;
}

/* ══════════════════════════════════════
   LINKS GENERALES
══════════════════════════════════════ */
[data-theme="light"] a.secondary,
[data-theme="light"] .link-cyan {
    color: #0284c7 !important;
}

/* ══════════════════════════════════════
   BOTÓN TOGGLE — ajuste para modo claro
══════════════════════════════════════ */
[data-theme="light"] #pos-theme-toggle {
    background: rgba(255,255,255,.95) !important;
    border-color: rgba(2,132,199,.30) !important;
    box-shadow: 0 4px 14px rgba(2,132,199,.20) !important;
    color: #0284c7 !important;
}

/* ══════════════════════════════════════
   CORRECCIONES ESPECÍFICAS POR PÁGINA
   (valores hardcodeados que no usan vars)
══════════════════════════════════════ */

/* index.php: sidebar hardcoded */
[data-theme="light"] .layout .sidebar {
    background: #ddeeff !important;
}

/* venta.php: carrito y paneles */
[data-theme="light"] .carrito {
    background: #ffffff !important;
    border-color: rgba(2,132,199,.15) !important;
}

[data-theme="light"] .productos-grid .prod-card {
    background: #ffffff !important;
    border-color: rgba(2,132,199,.15) !important;
}

[data-theme="light"] .prod-card:hover {
    border-color: #0284c7 !important;
    background: rgba(2,132,199,.04) !important;
}

/* Scrollbar en modo claro */
[data-theme="light"] ::-webkit-scrollbar-track { background: #e0eeff !important; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(2,132,199,.35) !important; }

/* Selección de texto */
[data-theme="light"] ::selection {
    background: rgba(2,132,199,.25);
    color: #0f172a;
}