/* =====================================================================
   PÁGINA PRINCIPAL / LANDING PAGE — NUEVA PALETA (ESTILO LIBRERÍA)
   ===================================================================== */

:root {
    /* Paleta central: actualizada con los valores extraídos de la interfaz. */
    --pos-primary: #3a5d50;        /* Azul oscuro (antes vino) */
    --pos-primary-hover: #2a6d6c;  /* Verde-azulado (hover y acentos) */
    --pos-primary-highlight: #2a6d6c;
    --pos-primary-button: #3a4c5d;
    --pos-primary-button-hover: #1d2d2c;
    --pos-primary-action: #2a6d6c;
    --pos-primary-action-hover: #1d2d2c;
    --pos-primary-border: #c9c1b9;
    --pos-selection: #3a4c5d;
    --pos-sidebar: #3b5c59;
    --pos-sidebar-border: #314c4a;
    --pos-sidebar-brand: #314c4a;
    --pos-sidebar-hover: #2a6d6c;
    --pos-sidebar-active: #2a6d6c;
    --pos-dashboard-primary: #3a4c5d;
    --pos-dashboard-success: #2a6d6c;
    --pos-dashboard-neutral: #c9c1b9;
    /* Estados semánticos (todos con contraste AA contra texto blanco) */
    --pos-success: #2f6b4f;
    --pos-success-soft: #e3efe8;
    --pos-warning: #8a5a12;
    --pos-warning-soft: #f6ecd9;
    --pos-warning-border: #6e460d;
    --pos-danger: #9b3b3b;
    --pos-danger-soft: #f8e7e7;
    --pos-danger-border: #7a2b2b;
    --pos-info: #3a4c5d;
    --pos-info-soft: #e6ebf0;
    --pos-muted: #5b6b6a;          /* texto secundario sobre crema (AA) */
    --pos-paper: #f3f0ec;          /* Crema claro (fondo principal) */
    --pos-content-light: #F5F3EF;
    --pos-surface: #F5F3EF;        /* Blanco puro para tarjetas */
    --pos-border: #c9c1b9;         /* Beige-marrón claro */
    --pos-cream: #f5f3ef;          /* Header y acentos claros */
    --pos-text: #1f1f1f;           /* Gris oscuro/Negro */
    --pos-title: #1d2d2c;
    --pos-navbar-text: #1f1f1f;
    --pos-dark-page: #1f2a33;
    --pos-dark-content: #2b3a48;
    --pos-dark-card: #3a4c5d;
    --pos-dark-border: #4a5f72;
    --pos-white: #ffffff;

    /* Tokens que antes se usaban sin estar definidos */
    --pos-dark-navbar: #1f2a33;
    --pos-dark-sidebar: #24313b;
    --pos-dark-sidebar-border: #34444f;
    --pos-dark-muted: #c3cdd6;
    --pos-dark-input: #2b3a48;
    --pos-dark-input-border: #5a7087;
    --pos-dark-pagination: #3a4c5d;
    --pos-dark-pagination-hover: #4a5f72;
    --pos-accent: #2a6d6c;              /* antes --pos-old-wine */
    --pos-accent-hover: #1d2d2c;
    --pos-accent-border: #1d2d2c;
    --pos-light-pagination-hover: #e6ebf0;

    /* Forma y sombra comunes */
    --pos-radius: 12px;
    --pos-radius-sm: 8px;
    --pos-shadow: 0 4px 12px rgba(29, 45, 44, 0.06);
    --pos-shadow-lg: 0 12px 24px -8px rgba(29, 45, 44, 0.18);
    /* ---- Tokens semánticos "--ui-*": cambian solos entre claro y oscuro.
       Úsalos en vistas nuevas en lugar de colores fijos (#fff, #1d2d2c...). ---- */
    --ui-page: var(--pos-paper);
    --ui-surface: #f5f3ef;        /* tarjetas */
    --ui-inset: #ffffff;          /* paneles internos, chips, cuerpo de modal */
    --ui-surface-2: #f5f3ef;      /* fondos suaves, cabeceras de bloque */
    --ui-border: #c9c1b9;
    --ui-divider: #e6e0d9;
    --ui-text: #1f1f1f;
    --ui-title: #1d2d2c;
    --ui-body: #3a4c5d;
    --ui-muted: #5b6b6a;
    --ui-chip-on: #e6ebf0;
    --ui-nav: #f5f3ef;            /* barra superior */
    --ui-link: #2a6d6c;
    --ui-sidebar: #3b5c59;
    --ui-sidebar-brand: #314c4a;
    --ui-sidebar-border: #314c4a;
    --ui-sidebar-hover: #2a6d6c;
    --ui-sidebar-text: #f5f3ef;
    --ui-sidebar-head: #e3ded8;
    --ui-focus: rgba(42, 109, 108, .25);
    --ui-danger: #9b3b3b;
    --ui-danger-text: #b91c1c;
    --ui-danger-icon: #9b3b3b;
    --ui-success: #2f6b4f;
    --ui-success-text: #047857;
    --ui-warn-icon: #8a5a12;
    --pos-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Variables de alias renombradas para coincidir con el nuevo estilo */
    --azul-primario: var(--pos-primary);
    --teal-hover: var(--pos-primary-hover);
    --beige-borde: var(--pos-border);
    --crema-claro: var(--pos-cream);
    --fondo-papel: var(--pos-paper);
    --texto-oscuro: var(--pos-text);
}

/* 1. FONDO Y TEXTO GENERAL DE LA PÁGINA */
body, 
.bg-light,
.min-h-screen {
    background-color: var(--ui-page) !important;
    color: var(--ui-text) !important;
}

/* 2. BARRA SUPERIOR (NAVBAR) */
header, 
nav, 
.navbar {
    background-color: var(--ui-nav) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

/* Subtítulo debajo del Logo "PUNTO DE VENTA • INVENTARIO" */
header span, 
header small, 
.logo-subtitle {
    color: var(--ui-link) !important;
    font-weight: 700 !important;
}

/* 3. BOTONES DE IDIOMA Y MODO OSCURO (ES / EN / 🌙) */
.lang-btn, 
.theme-toggle-btn,
header .border,
header button:not(.btn-primary) {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-link) !important;
}

/* Botón de idioma activo (ES) */
.lang-btn.active,
.lang-btn-active {
    background-color: var(--azul-primario) !important;
    color: var(--crema-claro) !important;
    border-color: var(--azul-primario) !important;
}

/* 4. SECCIÓN HERO (TÍTULO Y TEXTOS) */
h1 span, 
.text-primary, 
.hero-title span, 
span.text-blue-600, 
span.text-indigo-600 {
    color: var(--ui-link) !important;
}

h1, .hero-title {
    color: var(--ui-title) !important;
}

p.hero-subtitle, 
.text-gray-600, 
.text-slate-600 {
    color: var(--ui-link) !important;
}

/* 5. BOTONES PRINCIPALES DE ACCIÓN */
.btn-primary, 
a.bg-blue-600, 
button.bg-blue-600,
.hero-btn-primary {
    background-color: var(--pos-primary-action) !important;
    border-color: var(--pos-primary-action) !important;
    color: var(--crema-claro) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(58, 76, 93, 0.25) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-primary:hover, 
a.bg-blue-600:hover, 
button.bg-blue-600:hover,
.hero-btn-primary:hover {
    background-color: var(--pos-primary-action-hover) !important;
    border-color: var(--pos-primary-action-hover) !important;
    color: var(--pos-white) !important;
}

/* Botón secundario "Ver Módulos" */
.btn-outline-secondary, 
.hero-btn-secondary,
a.border-gray-300 {
    background-color: var(--ui-surface) !important;
    border: 1.5px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
    font-weight: 600 !important;
}

.btn-outline-secondary:hover, 
.hero-btn-secondary:hover {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-link) !important;
}

/* 6. TARJETAS DE MÓDULOS DEL SISTEMA */
.card, 
.module-card {
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: 0 4px 12px rgba(29, 45, 44, 0.05) !important;
}

/* =====================================================================
   SOBREESCRITURA DE TAILWIND 
   ===================================================================== */

/* 1. CAMBIAR EL FONDO GENERAL DE LA PÁGINA */
body, 
.bg-slate-50, 
.bg-gray-50, 
.bg-gray-100, 
.bg-slate-100 {
    background-color: var(--ui-page) !important;
}

/* 2. CAMBIAR TODOS LOS TEXTOS DE ACENTO */
.text-blue-600, 
.text-blue-700, 
.text-indigo-600, 
.text-indigo-700 {
    color: var(--ui-link) !important;
}

.text-slate-600, 
.text-gray-600 {
    color: var(--ui-muted) !important;
}

/* 3. CAMBIAR TODOS LOS BOTONES */
.bg-blue-600, 
.bg-blue-700, 
.bg-indigo-600, 
.bg-indigo-700,
a.bg-blue-600,
button.bg-blue-600 {
    background-color: var(--pos-primary-button) !important;
    color: var(--pos-cream) !important;
}

.bg-blue-600:hover, 
.bg-blue-700:hover, 
.bg-indigo-600:hover, 
.bg-indigo-700:hover,
a.bg-blue-600:hover,
button.bg-blue-600:hover {
    background-color: var(--pos-primary-button-hover) !important;
    color: var(--pos-white) !important;
}

/* 4. BORDES Y BOTONES SECUNDARIOS */
.border-gray-200, 
.border-gray-300, 
.border-slate-200 {
    border-color: var(--ui-border) !important;
}

/* 5. TARJETAS DE ABAJO (Módulos del Sistema) */
.bg-white {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

/* =====================================================================
   MODO OSCURO — "Pizarra azulada"
   Se activa con la clase .dark-mode en <html> y <body> (js/dark-mode.js)
   ===================================================================== */
html.dark-mode,
body.dark-mode,
.dark-mode {
    --ui-page: #1f2a33;
    --ui-surface: #3a4c5d;
    --ui-inset: #2b3a48;
    --ui-surface-2: #33434f;
    --ui-border: #4a5f72;
    --ui-divider: #44586b;
    --ui-text: #f5f3ef;
    --ui-title: #ffffff;
    --ui-body: #e1e7ec;
    --ui-muted: #d0d8df;
    --ui-chip-on: #1f4f4e;
    --ui-nav: #1f2a33;
    --ui-link: #8fd0ce;
    --ui-sidebar: #24313b;
    --ui-sidebar-brand: #1f2a33;
    --ui-sidebar-border: #34444f;
    --ui-sidebar-hover: #33434f;
    --ui-sidebar-text: #e1e7ec;
    --ui-sidebar-head: #9fb0bf;
    --ui-focus: rgba(143, 208, 206, .35);
    --ui-danger: #f7bcbc;
    --ui-danger-text: #f7bcbc;
    --ui-danger-icon: #e58a8a;
    --ui-success: #7fc4a0;
    --ui-success-text: #a6dcc0;
    --ui-warn-icon: #e0b455;
}