/* ============================================================
   MANGO · TEMA "MERCADO" (crema y ámbar)
   Etapa 1 — capa de tokens. Se carga DESPUÉS de style.css.
   No requiere tocar HTML ni JS.

   En index.html, justo debajo de la línea de style.css:
     <link rel="stylesheet" href="mango-theme.css?v=1">
   ============================================================ */

/* Las tipografías se cargan desde vendor/fonts.css, enlazado en el HTML antes que
   esta hoja. Antes había aquí un @import a Google Fonts, que dejaba la interfaz sin
   su tipografía cuando la PC del negocio se quedaba sin internet. */

/* ---------- 1. Tokens: modo claro ---------- */
:root, body.light-mode {
    --primary-color: #B06A12;
    --primary-hover: #8A5209;
    --primary-gradient: #B06A12;              /* un solo acento, sin degradado */
    --primary-light: #FBEEDB;
    --primary-glow: 0 0 0 3px #FBEEDB;

    --secondary-color: #5F5A51;
    --secondary-light: #F1EAE0;
    --secondary-gradient: #5F5A51;

    --success-color: #2E7D57;                 /* cobrado / pagado */
    --success-light: #E7F1EB;
    --success-gradient: #2E7D57;

    --danger-color: #B4443C;                  /* vencido / anular */
    --danger-light: #F8E8E5;
    --danger-gradient: #B4443C;

    --warning-color: #8A5209;                 /* cotización / por vencer */
    --warning-light: #FBEEDB;
    --warning-gradient: #C98B3A;

    --bg-color: #F6F1E8;                      /* papel cálido */
    --bg-secondary: #EFE9DE;
    --card-bg: #FFFFFF;                       /* panel opaco, sin cristal */
    --sidebar-bg: #FFFFFF;
    --text-color: #1C1A17;
    --text-secondary: #3C3830;
    --text-muted: #6E6A63;
    --border-color: #E7DFD2;
    --glass-border: #E7DFD2;
    /* Borde de las superficies (tarjetas, tablas). Más marcado que --border-color:
       una tarjeta blanca sobre papel crema tiene 1.13:1 de contraste, y con el borde
       suave quedaba 1.18:1, es decir sin canto perceptible. Al quitar las sombras,
       el borde es lo único que separa la tarjeta del fondo, así que debe verse. */
    --border-surface: #D5C8B0;

    --shadow-sm: 0 1px 2px rgba(28,26,23,.05);
    --shadow: 0 1px 3px rgba(28,26,23,.06);
    --shadow-lg: 0 10px 24px rgba(28,26,23,.10);
    --shadow-xl: 0 20px 44px rgba(28,26,23,.14);

    --radius: 14px;
    --radius-sm: 9px;
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --transition: all .18s ease;
    --transition-fast: all .12s ease;
    --transition-spring: all .2s ease;
}

/* ---------- 2. Tokens: modo oscuro (mismo set, un solo giro) ---------- */
body.dark-mode {
    --bg-color: #17150F;
    --bg-secondary: #100E0A;
    --card-bg: #201D17;
    --sidebar-bg: #201D17;
    --text-color: #F4EFE5;
    --text-secondary: #D8D1C3;
    --text-muted: #9E968A;
    --border-color: #332E25;
    --glass-border: #332E25;
    --border-surface: #453D30;

    --primary-color: #E5A455;
    --primary-hover: #F2BB6C;
    --primary-light: #2E2517;
    --primary-gradient: #E5A455;
    --primary-glow: 0 0 0 3px #3A2E1B;

    --success-color: #58B487;
    --success-light: #1B2A22;
    --danger-color: #E08880;
    --danger-light: #2E1D1B;
    --warning-color: #E5A455;
    --warning-light: #2E2517;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 1px 3px rgba(0,0,0,.45);
    --shadow-lg: 0 10px 24px rgba(0,0,0,.5);
    --shadow-xl: 0 20px 44px rgba(0,0,0,.55);
}

/* ---------- 3. Tipografía ---------- */
* { font-family: var(--font-sans); }

body { background: var(--bg-color); color: var(--text-color); }

h1, h2, h3, h4,
.top-bar h1,
.login-box h2,
.sidebar-header h2,
.card h2 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -.01em;
}
.top-bar h1 { font-size: 1.6rem; font-weight: 600; }
.login-box h2 { font-weight: 700; letter-spacing: -.02em; }
.login-box h2 span, .sidebar-header h2 span { color: var(--primary-color); font-weight: 400; }

/* Cifras tabulares: montos, SKU, fechas y totales.
   Aplica solo, y además puedes marcar celdas nuevas con class="num". */
.stat-info p,
.badge,
.num,
td:has(> .num),
.table-container td.text-right,
#current-date {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.stat-info p { font-weight: 600; font-size: 1.6rem; }
.stat-info h3 { font-weight: 500; letter-spacing: .04em; }

/* ---------- 4. Fuera el cristal, los degradados y los orbes ---------- */
.login-orb { display: none !important; }

.login-overlay { background: var(--bg-secondary); }

.login-box,
.sidebar,
.card,
.stat-card,
.modal-content,
.toast,
.btn-secondary,
.form-control {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.login-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 2.75rem 2.5rem;
}
.login-box:hover { transform: none; box-shadow: var(--shadow-lg); }

.login-box h2 i,
.sidebar-header h2 i {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--primary-color);
}

.modal-content::before { display: none; }
.stat-card::after { display: none; }

/* ---------- 5. Sidebar ---------- */
.sidebar {
    background: var(--card-bg);
    border: 1px solid var(--border-surface);
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.nav-links li { border-radius: var(--radius-sm); }
.nav-links li:hover { background: var(--bg-color); transform: none; }
.nav-links li.active {
    background: var(--primary-light);
    box-shadow: none;
}
.nav-links li.active::before { background: var(--primary-color); border-radius: 3px; }
.nav-links li.active a,
.nav-links li.active:hover a,
.nav-links li.active i { color: var(--primary-hover); font-weight: 600; }
.nav-links li a { font-size: .94rem; }

/* Caja de catálogo público: hereda tokens en vez de indigo fijo */
.sidebar-catalog-box {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
}

/* ---------- 6. Tarjetas y stats ---------- */
.card,
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-surface);
    border-radius: var(--radius);
    box-shadow: none;
    animation: none;
}
.card:hover { box-shadow: var(--shadow-sm); }
.stat-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: #DED5C6; }
.stat-card:hover .stat-icon { transform: none; }

/* Un solo tratamiento de icono: sin siete colores */
.stat-icon {
    background: var(--bg-color) !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    width: 42px;
    height: 42px;
    font-size: 1rem;
    box-shadow: none !important;
}

/* ---------- 7. Tablas ---------- */
.table-container {
    border: 1px solid var(--border-surface);
    border-radius: var(--radius);
    background: var(--card-bg);
}
.table-container th,
thead th {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}
tbody tr { border-bottom: 1px solid var(--bg-secondary); }
tbody tr:nth-child(even),
body.dark-mode tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover { background: var(--bg-color); }

/* ---------- 8. Badges: color solo con significado ---------- */
.badge {
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border: none;
    box-shadow: none;
}
.badge.success, .badge-success { background: var(--success-light); color: var(--success-color); }
.badge.danger,  .badge-danger  { background: var(--danger-light);  color: var(--danger-color); }
.badge.warning, .badge-warning { background: var(--warning-light); color: var(--warning-color); }
.badge.info,    .badge-info,
.badge.neutral, .badge-secondary { background: var(--secondary-light); color: var(--text-secondary); }

/* ---------- 9. Botones ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .9rem;
    padding: .62rem 1.1rem;
    box-shadow: none;
    letter-spacing: 0;
}
.btn:hover { transform: none; }
.btn:active { transform: none; }

.btn-primary { background: var(--primary-color); color: #fff; border: none; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: none; }

.btn-secondary {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.btn-secondary:hover { background: var(--bg-color); color: var(--text-color); border-color: #DED5C6; }

.btn-success { background: var(--success-color); color: #fff; }
.btn-success:hover { background: #256B49; box-shadow: none; }

.btn-danger  { background: var(--danger-color);  color: #fff; }
.btn-danger:hover { background: #9C382F; box-shadow: none; }

.btn-warning { background: var(--warning-color); color: #fff; }
.btn-warning:hover { background: #71430A; box-shadow: none; }

/* Acción destructiva secundaria: texto, no bloque rojo */
.btn-danger.btn-quiet {
    background: transparent;
    color: var(--danger-color);
    border: 1px solid var(--border-color);
}

/* ---------- 10. Formularios ---------- */
.form-control {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-color);
    font-size: .95rem;
    padding: .65rem .9rem;
}
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: var(--primary-glow);
}
.form-group label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: .82rem;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- 11. Modales y toasts ---------- */
.modal { background: rgba(28,26,23,.35); backdrop-filter: none; }
.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-surface);
    border-radius: 18px;
    box-shadow: var(--shadow-xl);
}
.close-modal { color: var(--text-muted); border-radius: var(--radius-sm); }
.close-modal:hover { color: var(--danger-color); background: var(--danger-light); }

.toast {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

/* Los cuatro tipos de aviso deben distinguirse entre sí. Advertencia (#8A5209) e
   info (#B06A12) eran casi el mismo ámbar, así que el color no separaba nada: un
   aviso informativo y uno de advertencia se veían igual.
   Se mueve INFO a un neutro en lugar de tocar la advertencia: es el aviso menos
   urgente y no necesita el acento de marca, que queda libre para advertir.
   Solo afecta a los avisos emergentes; las etiquetas de estado y los botones
   conservan sus colores. */
.toast.info { border-left-color: var(--secondary-color); }
.toast.info::after { background: var(--secondary-color); }
.toast.info i { color: var(--secondary-color); }

/* ---------- 12. Top bar y footer ---------- */
.top-bar { border-bottom: 1px solid var(--border-color); }
.user-info { font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); }
.app-footer { border-top: 1px solid var(--border-color); background: transparent; }
.footer-col ul li a:hover { color: var(--primary-color); transform: none; }

/* ---------- 13. Enlaces ---------- */
a { color: var(--primary-color); }
a:hover { color: var(--primary-hover); }

/* ---------- 14. Menos movimiento ---------- */
.product-item-card:hover { transform: none; box-shadow: var(--shadow-sm); }
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------- 15. Reglas de style.css que la capa de tokens no alcanzaba ----------
   Añadido al aplicar el tema: dos reglas de style.css ganaban por min-width o por
   !important y dejaban restos del diseño anterior a la vista. */

/* El icono quedaba en 52px: style.css fija width, height Y min-width. */
.stat-icon {
    min-width: 42px;
    height: 42px;
}

/* La tarjeta del carrito activo (pantalla de Ventas) traía un resplandor índigo
   fijo con !important, que chocaba con el ámbar del tema. */
.card#sale-cart-card.cart-active,
.dark-mode .card#sale-cart-card.cart-active {
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--card-bg) !important;
}

/* ---------- 16. Logo en modo oscuro ----------
   El logo a color se apaga sobre fondo oscuro; esta versión usa ámbar claro. */
body.dark-mode .sidebar-header img,
body.dark-mode .login-box img,
body.dark-mode .footer-logo img { content: url('logo-oscuro.png'); }

/* ---------- 17. Etapa 2 · columnas numéricas ----------
   Montos y cantidades alineados a la derecha, encabezado incluido.
   El tema ya referenciaba .text-right, pero ninguna hoja la definía. */
th.text-right,
td.text-right { text-align: right; }