/* ============================================================
   stocky-tema.css  —  Sistema de paletas de Stocky
   ------------------------------------------------------------
   3 paletas COHESIVAS (todo el color se mueve junto):
     data-palette="noche"  -> oscura neón (la de siempre)
     data-palette="claro"  -> clara / minimalista (set frío suave)
     data-palette="arena"  -> cálida / terrosa (terracota + salvia)

   Todas las vistas usan las mismas variables (--verde, --bg-card,
   etc.), así que basta con enlazar este archivo y fijar data-palette
   en <html> para que la vista soporte las 3 paletas SIN tocar su HTML.

   Se usa html[data-palette="..."] (especificidad 0,1,1) para GANARLE
   al :root que cada vista define en su propio <style> (0,1,0).
   ============================================================ */

/* ---- Tokens estructurales (iguales en las 3 paletas) ---- */
:root{
    --sidebar-width: 240px;
    --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 24px;
    --transition: .3s ease;
    --bounce: .4s cubic-bezier(.68,-.55,.265,1.55);
}

/* ==========================================================
   1) NOCHE  (oscura neón — la actual)
   ========================================================== */
html[data-palette="noche"]{
    --naranja:#FF6B35; --verde:#00E676; --purpura:#D500F9;
    --cyan:#00E5FF; --amarillo:#FFD600; --rojo:#FF1744;

    --naranja-glow:rgba(255,107,53,.40); --verde-glow:rgba(0,230,118,.40);
    --purpura-glow:rgba(213,0,249,.40);  --cyan-glow:rgba(0,229,255,.40);
    --amarillo-glow:rgba(255,209,0,.55);

    --on-verde:#04140a; --on-amarillo:#1a1400; --on-cyan:#00141a;
    --on-purpura:#ffffff; --on-naranja:#180a00;

    --bg-primary:#0a0a0f; --bg-card:#161622; --bg-sidebar:#0d0d14; --bg-input:#1a1a28;
    --bg-soft:rgba(255,255,255,.04); --bg-soft-2:rgba(255,255,255,.025);

    --text-primary:#ffffff; --text-secondary:#b0b0c0; --text-muted:#6b6b80;

    --border:rgba(255,255,255,.07); --border-hover:rgba(255,255,255,.14);
    --shadow:0 8px 32px rgba(0,0,0,.5); --shadow-lg:0 16px 48px rgba(0,0,0,.6);

    --swal-bg:#161622; --swal-text:#ffffff;
    color-scheme: dark;
}

/* ==========================================================
   2) CLARO  (clara / minimalista — set frío coordinado)
   ========================================================== */
html[data-palette="claro"]{
    --naranja:#E56A2E; --verde:#10A05A; --purpura:#7A5AF5;
    --cyan:#0C93C4; --amarillo:#F5B301; --rojo:#E23B4E;

    --naranja-glow:rgba(229,106,46,.16); --verde-glow:rgba(16,160,90,.16);
    --purpura-glow:rgba(122,90,245,.16);  --cyan-glow:rgba(12,147,196,.16);
    --amarillo-glow:rgba(245,179,1,.30);

    --on-verde:#ffffff; --on-amarillo:#241900; --on-cyan:#ffffff;
    --on-purpura:#ffffff; --on-naranja:#ffffff;

    --bg-primary:#F4F6F9; --bg-card:#FFFFFF; --bg-sidebar:#FFFFFF; --bg-input:#EEF1F5;
    --bg-soft:rgba(28,40,64,.045); --bg-soft-2:rgba(28,40,64,.028);

    --text-primary:#1B2333; --text-secondary:#5A6478; --text-muted:#98A1B3;

    --border:rgba(28,40,64,.10); --border-hover:rgba(28,40,64,.18);
    --shadow:0 6px 24px rgba(28,40,64,.08); --shadow-lg:0 16px 44px rgba(28,40,64,.14);

    --swal-bg:#FFFFFF; --swal-text:#1B2333;
    color-scheme: light;
}

/* ==========================================================
   3) ARENA  (cálida — terracota + salvia, set coordinado)
   ========================================================== */
html[data-palette="arena"]{
    --naranja:#CC6438; --verde:#5C8A52; --purpura:#A15773;
    --cyan:#3E8C82; --amarillo:#E8A317; --rojo:#B8442E;

    --naranja-glow:rgba(204,100,56,.20); --verde-glow:rgba(92,138,82,.20);
    --purpura-glow:rgba(161,87,115,.18);  --cyan-glow:rgba(62,140,130,.18);
    --amarillo-glow:rgba(232,163,23,.32);

    --on-verde:#ffffff; --on-amarillo:#2a1e00; --on-cyan:#ffffff;
    --on-purpura:#ffffff; --on-naranja:#ffffff;

    --bg-primary:#F3EBDD; --bg-card:#FEFAF2; --bg-sidebar:#ECE1CE; --bg-input:#EBE0CC;
    --bg-soft:rgba(96,66,33,.05); --bg-soft-2:rgba(96,66,33,.035);

    --text-primary:#3B2F24; --text-secondary:#786A57; --text-muted:#A8977F;

    --border:rgba(96,66,33,.14); --border-hover:rgba(96,66,33,.22);
    --shadow:0 6px 24px rgba(96,66,33,.10); --shadow-lg:0 16px 44px rgba(96,66,33,.16);

    --swal-bg:#FEFAF2; --swal-text:#3B2F24;
    color-scheme: light;
}

/* Fallback: si no hay data-palette, usar NOCHE */
html:not([data-palette]){
    --naranja:#FF6B35; --verde:#00E676; --purpura:#D500F9; --cyan:#00E5FF; --amarillo:#FFD600; --rojo:#FF1744;
    --naranja-glow:rgba(255,107,53,.40); --verde-glow:rgba(0,230,118,.40); --purpura-glow:rgba(213,0,249,.40); --cyan-glow:rgba(0,229,255,.40); --amarillo-glow:rgba(255,214,0,.40);
    --bg-primary:#0a0a0f; --bg-card:#161622; --bg-sidebar:#0d0d14; --bg-input:#1a1a28;
    --bg-soft:rgba(255,255,255,.04); --bg-soft-2:rgba(255,255,255,.025);
    --text-primary:#fff; --text-secondary:#b0b0c0; --text-muted:#6b6b80;
    --border:rgba(255,255,255,.07); --border-hover:rgba(255,255,255,.14);
    --on-verde:#04140a; --on-amarillo:#1a1400; --on-cyan:#00141a; --on-purpura:#fff; --on-naranja:#180a00;
    --shadow:0 8px 32px rgba(0,0,0,.5); --shadow-lg:0 16px 48px rgba(0,0,0,.6);
    --swal-bg:#161622; --swal-text:#fff;
}

/* ============================================================
   SELECTOR DE PALETA (botón flotante + popover)
   Lo inyecta stocky-tema.js — se estiliza con las variables
   activas para que combine con la paleta elegida.
   ============================================================ */
#stk-tema-btn{
    position:fixed; top:14px; right:14px; z-index:1200;
    width:42px; height:42px; border-radius:50%;
    background:var(--bg-card); color:var(--text-secondary);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; cursor:pointer; transition:var(--transition);
}
#stk-tema-btn:hover{ color:var(--verde); border-color:var(--border-hover); transform:rotate(-8deg); }
#stk-tema-btn:active{ transform:scale(.94); }

#stk-tema-pop{
    position:fixed; top:64px; right:14px; z-index:1200;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    padding:12px; width:224px;
    opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none;
    transition:.22s cubic-bezier(.4,0,.2,1);
}
#stk-tema-pop.abierto{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#stk-tema-pop .stk-tt{
    font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1px;
    color:var(--text-muted); margin:2px 4px 10px;
}
.stk-op{
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:var(--radius-sm);
    cursor:pointer; transition:var(--transition); margin-bottom:4px;
    border:1px solid transparent;
}
.stk-op:hover{ background:var(--bg-soft); }
.stk-op.sel{ border-color:var(--border-hover); background:var(--bg-soft); }
.stk-op .stk-dots{ display:flex; gap:3px; flex-shrink:0; }
.stk-op .stk-dots span{ width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }
.stk-op .stk-nombre{ font-size:.85rem; font-weight:600; color:var(--text-primary); flex:1; }
.stk-op .stk-check{ color:var(--verde); font-size:.85rem; opacity:0; }
.stk-op.sel .stk-check{ opacity:1; }

/* Muestras de color de cada paleta dentro del selector */
.stk-sw-noche span:nth-child(1){ background:#0a0a0f; }
.stk-sw-noche span:nth-child(2){ background:#00E676; }
.stk-sw-noche span:nth-child(3){ background:#FF6B35; }
.stk-sw-claro span:nth-child(1){ background:#F4F6F9; }
.stk-sw-claro span:nth-child(2){ background:#10A05A; }
.stk-sw-claro span:nth-child(3){ background:#7A5AF5; }
.stk-sw-arena span:nth-child(1){ background:#F3EBDD; }
.stk-sw-arena span:nth-child(2){ background:#CC6438; }
.stk-sw-arena span:nth-child(3){ background:#5C8A52; }

@media (max-width:768px){
    #stk-tema-btn{ width:38px; height:38px; top:10px; right:10px; }
    #stk-tema-pop{ top:56px; right:10px; }
}

/* ============================================================
   CORRECCIÓN DE CONTRASTE (para que las paletas claras se lean)
   ------------------------------------------------------------
   Muchas pantallas traen "color:white" fijo en títulos, logos,
   textos e inputs (se diseñaron para fondo oscuro). En Claro/Arena
   eso queda invisible. Aquí forzamos esos elementos a usar la
   variable de texto (en Noche sigue siendo blanco, así que no
   cambia nada).  Se usa html[data-palette] para ganarle por
   especificidad al CSS de cada página.

   OJO: NO se tocan íconos/iniciales/botones con fondo de color
   (.logo-icon, .user-avatar, .btn-*), que SÍ deben quedar blancos.
   ============================================================ */
html[data-palette] .logo h2,
html[data-palette] .nav-item:hover,
html[data-palette] .sidebar a:hover,
html[data-palette] .sidebar nav a:hover,
html[data-palette] .user-name,
html[data-palette] .user-chip-name,
html[data-palette] .topbar-left h3,
html[data-palette] .topbar-left h1,
html[data-palette] .topbar h3,
html[data-palette] .topbar h1,
html[data-palette] .page-title,
html[data-palette] .page-header h1,
html[data-palette] .card-stocky h4,
html[data-palette] .card-lista-header h4,
html[data-palette] .card-header-text h4,
html[data-palette] .header-lista h4,
html[data-palette] .card-header h3,
html[data-palette] .section-title,
html[data-palette] .section-head-left h2,
html[data-palette] .rank-info h4,
html[data-palette] .prov-info h4,
html[data-palette] .emp-info h4,
html[data-palette] .btn-empleados-card .emp-text h4,
html[data-palette] .incluye h4,
html[data-palette] .producto-nombre,
html[data-palette] .product-card-name,
html[data-palette] .modal-title,
html[data-palette] .resumen-total .label,
html[data-palette] .resumen-item .value,
html[data-palette] .empty-state h3,
html[data-palette] .costo-preview strong,
html[data-palette] .stat-value{
    color: var(--text-primary);
}

/* Texto dentro de campos de formulario (se veía blanco sobre input claro) */
html[data-palette] .form-control,
html[data-palette] .form-select,
html[data-palette] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-palette] textarea,
html[data-palette] select{
    color: var(--text-primary);
}

/* Placeholder legible en paletas claras */
html[data-palette] input::placeholder,
html[data-palette] textarea::placeholder{ color: var(--text-muted); opacity: 1; }

/* ============================================================
   TABLAS  —  neutralizar Bootstrap ".table-dark"
   ------------------------------------------------------------
   Varias vistas usan class="table table-dark", y Bootstrap fuerza
   el fondo oscuro ignorando la paleta. Aquí redirigimos las
   variables de Bootstrap a las de la paleta para que la tabla
   siga el tema (oscura en Noche, clara en Claro/Arena).
   ============================================================ */
html[data-palette] .table,
html[data-palette] .table-dark{
    --bs-table-color: var(--text-primary);
    --bs-table-bg: var(--bg-card);
    --bs-table-border-color: var(--border);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-striped-bg: var(--bg-soft);
    --bs-table-active-color: var(--text-primary);
    --bs-table-active-bg: var(--bg-soft-2);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-hover-bg: var(--bg-soft);
    color: var(--text-primary);
    border-color: var(--border);
}
html[data-palette] .table > :not(caption) > * > *{
    background-color: var(--bs-table-bg);
    color: var(--text-primary);
}
html[data-palette] .table thead th{
    background: var(--bg-soft) !important;
    color: var(--text-muted) !important;
}
html[data-palette] .table tbody tr:hover > *{
    background: var(--bg-soft) !important;
}

/* ============================================================
   SIDEBAR UNIFORME  —  mismos tamaños en TODAS las vistas
   ------------------------------------------------------------
   Algunas páginas traían el sidebar más grande/pequeño. Aquí se
   fija el mismo tamaño del dashboard en los 3 breakpoints.
   (En la app el sidebar está oculto, así que esto solo afecta web.)
   ============================================================ */
html[data-palette] .sidebar{
    width: var(--sidebar-width) !important;
    padding: 28px 18px !important;
}
html[data-palette] .sidebar .logo-icon{
    width: 40px !important; height: 40px !important; font-size: 1.3rem !important;
    border-radius: var(--radius-sm) !important;
}
html[data-palette] .sidebar .nav-item,
html[data-palette] .sidebar nav a{
    padding: 11px 14px !important;
    font-size: 0.9rem !important;
    gap: 12px !important;
    margin: 2px 0 !important;
    border-radius: var(--radius-sm) !important;
}

@media (max-width: 768px){
    html[data-palette] .sidebar{ width: 52px !important; padding: 18px 6px !important; }
    html[data-palette] .sidebar .logo-icon{ width: 28px !important; height: 28px !important; font-size: 0.9rem !important; border-radius: 8px !important; }
    html[data-palette] .sidebar .nav-item,
    html[data-palette] .sidebar nav a{ justify-content: center !important; padding: 10px 6px !important; font-size: 1rem !important; border-radius: 8px !important; }
}
@media (max-width: 400px){
    html[data-palette] .sidebar{ width: 40px !important; padding: 14px 3px !important; }
    html[data-palette] .sidebar .logo-icon{ width: 22px !important; height: 22px !important; font-size: 0.7rem !important; }
    html[data-palette] .sidebar .nav-item,
    html[data-palette] .sidebar nav a{ padding: 8px 3px !important; font-size: 0.85rem !important; }
}

/* El COLOR del item activo lo pone cada página (naranja, verde, cyan,
   morado, etc. según la sección). Aquí solo se unifica el peso. */
html[data-palette] .sidebar .nav-item.active,
html[data-palette] .sidebar nav a.active{ font-weight: 600 !important; }

/* Estructura del sidebar uniforme (que el CSS de cada página no lo deforme) */
html[data-palette] .sidebar nav{ display:flex; flex-direction:column; }
html[data-palette] .sidebar .nav-section{ margin-bottom:8px !important; }
html[data-palette] .sidebar .nav-label{ font-size:.65rem !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:1.5px !important; padding:0 12px !important; margin-bottom:4px !important; }
html[data-palette] .sidebar .nav-item{ display:flex !important; align-items:center !important; margin:2px 0 !important; }

/* Logo real en el sidebar (reemplaza el rayo): caja transparente + imagen */
html[data-palette] .sidebar .logo-icon.logo-img{
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}
html[data-palette] .sidebar .logo-icon.logo-img img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* ============================================================
   ANIMACIONES DE ENTRADA  —  el "efecto" del dashboard en TODAS
   ------------------------------------------------------------
   El dashboard tenía animaciones propias y las demás páginas
   aparecían de golpe. Aquí se aplican a todas por igual:
     · sidebar entra deslizándose desde la izquierda
     · el contenido sube con un fundido
     · las tarjetas aparecen escalonadas
   Solo se anima transform/opacity (lo que la GPU maneja bien),
   para no afectar el rendimiento del WebView de la app.
   ============================================================ */
@keyframes stkSlideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes stkFadeInUp   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes stkCardAppear { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

html[data-palette] .sidebar{ animation: stkSlideInLeft .5s ease-out; }
html[data-palette] .main,
html[data-palette] .contenido,
html[data-palette] .main-wrapper{ animation: stkFadeInUp .6s ease-out; }

/* Tarjetas: aparecen escalonadas (solo las primeras, para no
   retrasar listas largas) */
html[data-palette] .stat,
html[data-palette] .stat-card,
html[data-palette] .card-stocky,
html[data-palette] .settings-card,
html[data-palette] .pricing-card,
html[data-palette] .emp-card,
html[data-palette] .card{
    animation: stkCardAppear .5s ease-out both;
}
html[data-palette] .stat:nth-child(1),  html[data-palette] .stat-card:nth-child(1){ animation-delay: .05s; }
html[data-palette] .stat:nth-child(2),  html[data-palette] .stat-card:nth-child(2){ animation-delay: .12s; }
html[data-palette] .stat:nth-child(3),  html[data-palette] .stat-card:nth-child(3){ animation-delay: .19s; }
html[data-palette] .stat:nth-child(4),  html[data-palette] .stat-card:nth-child(4){ animation-delay: .26s; }
html[data-palette] .stat:nth-child(5),  html[data-palette] .stat-card:nth-child(5){ animation-delay: .33s; }
html[data-palette] .stat:nth-child(6),  html[data-palette] .stat-card:nth-child(6){ animation-delay: .40s; }

/* Hover del menú igual en todas (el color lo pone cada página) */
html[data-palette] .sidebar .nav-item,
html[data-palette] .sidebar nav a{ transition: var(--transition); }
html[data-palette] .sidebar .nav-item:hover,
html[data-palette] .sidebar nav a:hover{ transform: translateX(3px); }
html[data-palette] .sidebar .nav-item:hover i,
html[data-palette] .sidebar nav a:hover i{ transform: scale(1.15); }
html[data-palette] .sidebar .nav-item.active:hover,
html[data-palette] .sidebar nav a.active:hover{ transform: none; }

/* Tipografía del menú idéntica en todas (a veces cambiaba de tamaño) */
html[data-palette] .sidebar .nav-item span,
html[data-palette] .sidebar nav a span{ font-size: inherit !important; font-weight: inherit !important; letter-spacing: normal !important; }
html[data-palette] .sidebar .nav-item i,
html[data-palette] .sidebar nav a i{ width: 20px !important; text-align: center !important; font-size: 1.05rem !important; flex-shrink: 0 !important; }
html[data-palette] .sidebar .logo h2{ font-size: 1.5rem !important; font-weight: 900 !important; margin: 0 !important; }

@media (max-width: 768px){
    html[data-palette] .sidebar .nav-item i,
    html[data-palette] .sidebar nav a i{ width: auto !important; font-size: 1rem !important; }
    html[data-palette] .sidebar .nav-item:hover,
    html[data-palette] .sidebar nav a:hover{ transform: none; }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
    html[data-palette] .sidebar,
    html[data-palette] .main,
    html[data-palette] .contenido,
    html[data-palette] .main-wrapper,
    html[data-palette] .stat,
    html[data-palette] .stat-card,
    html[data-palette] .card-stocky,
    html[data-palette] .settings-card,
    html[data-palette] .pricing-card,
    html[data-palette] .emp-card,
    html[data-palette] .card{ animation: none !important; }
}

/* ============================================================
   UBICACIÓN DEL SELECTOR DE PALETA
   ------------------------------------------------------------
   Ahora vive DENTRO del menú lateral (item "Tema", junto a
   "Cerrar sesión"), en vez de flotar sobre el encabezado.
   El botón flotante solo aparece donde el menú no se ve
   (por ejemplo dentro de la app), y ahí va abajo a la derecha
   para no tapar el encabezado.
   ============================================================ */
#stk-tema-btn.con-trigger{ display: none !important; }

/* Popover anclado al menú lateral */
#stk-tema-pop.anclado{
    top: auto; right: auto;
    left: calc(var(--sidebar-width) + 12px);
    bottom: 18px;
    transform: translateY(8px) scale(.97);
}
#stk-tema-pop.anclado.abierto{ transform: translateY(0) scale(1); }

/* Botón flotante (solo cuando no hay menú visible: app) */
#stk-tema-btn:not(.con-trigger){
    top: auto; bottom: 92px; right: 16px;
    width: 46px; height: 46px;
    box-shadow: var(--shadow-lg);
}

@media (max-width: 768px){
    #stk-tema-pop.anclado{ left: 60px; bottom: 14px; }
    #stk-tema-btn:not(.con-trigger){ bottom: 88px; right: 14px; width: 44px; height: 44px; }
}
@media (max-width: 400px){
    #stk-tema-pop.anclado{ left: 48px; right: 10px; width: auto; }
}

/* ============================================================
   AUTOCOMPLETADO DEL NAVEGADOR
   ------------------------------------------------------------
   Chrome pinta los campos autocompletados con fondo blanco/amarillo
   y texto claro, dejándolos ilegibles. Aquí se fuerza a que usen
   los colores de la paleta. (El truco del box-shadow interno es la
   única forma de tapar ese fondo: Chrome ignora background-color.)
   ============================================================ */
html[data-palette] input:-webkit-autofill,
html[data-palette] input:-webkit-autofill:hover,
html[data-palette] input:-webkit-autofill:focus,
html[data-palette] input:-webkit-autofill:active,
html[data-palette] textarea:-webkit-autofill,
html[data-palette] select:-webkit-autofill{
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
            box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
    background-color: var(--bg-input) !important;
    background-image: none !important;
    transition: background-color 9999s ease-in-out 0s !important;
}
/* Firefox */
html[data-palette] input:autofill,
html[data-palette] textarea:autofill{
    color: var(--text-primary) !important;
    background: var(--bg-input) !important;
}