/* ============================================================
   stocky-diseno.css — Sistema de diseño de Stocky (2026-09)
   ------------------------------------------------------------
   Diseños que el usuario elige en Tema > Apariencia:
     data-design="chispa"   (PRINCIPAL, por defecto)  Colores vivos con medida
     data-design="algodon"  (alternativo)             Soft Modern
     data-design="carton"   (alternativo)             Contemporary
     data-design="cristal"  (alternativo)             Glass Premium
   Cada uno en dos modos (data-palette):
     data-palette="claro"   (principal)
     data-palette="noche"   (oscuro)
   Se conserva data-palette porque muchas vistas ya distinguen
   [data-palette="noche"] de las claras; data-design agrega la
   identidad (formas, tipografía, sombras) encima.

   Se carga DESPUÉS de stocky-tema.css. Usa html[data-design]...
   para ganarle por especificidad a los estilos de cada vista.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
html[data-design="algodon"][data-palette="claro"]{
    --dz-c1:#12A366; --dz-c2:#6A52E0; --dz-c3:#D63D20; --dz-grid:rgba(34,48,58,.07);
    --naranja:#D63D20 !important; --verde:#0B7F4F !important; --purpura:#5B45D6 !important;
    --cyan:#0B7C8C !important; --amarillo:#9A6200 !important; --rojo:#C8341E !important;
    --naranja-glow:rgba(255,196,160,.9) !important; --verde-glow:rgba(169,230,197,.9) !important;
    --purpura-glow:rgba(205,194,255,.9) !important; --cyan-glow:rgba(181,232,238,.9) !important;
    --amarillo-glow:rgba(255,226,122,.9) !important; --rojo-glow:rgba(255,201,192,.9) !important;
    --on-verde:#FFFFFF !important; --on-amarillo:#FFFFFF !important; --on-cyan:#FFFFFF !important;
    --on-purpura:#FFFFFF !important; --on-naranja:#FFFFFF !important;
    --bg-primary:#EDF4F0 !important; --bg-card:#FFFFFF !important; --bg-sidebar:#FFFFFF !important; --bg-input:#F2F6F4 !important;
    --bg-soft:rgba(34,48,58,.045) !important; --bg-soft-2:rgba(34,48,58,.025) !important;
    --text-primary:#22303A !important; --text-secondary:#3E4C56 !important; --text-muted:#5E6B74 !important;
    --border:#E1EAE5 !important; --border-hover:#C7D6CE !important;
    --shadow:0 10px 30px rgba(34,48,58,.07) !important; --shadow-lg:0 18px 44px rgba(34,48,58,.12) !important;
    --radius-sm:14px !important; --radius:20px !important; --radius-lg:26px !important; --radius-xl:30px !important;
    --swal-bg:#FFFFFF !important; --swal-text:#22303A !important;
    --dz-cta:#D63D20; --dz-cta-hover:#BA3118; --dz-on-cta:#FFFFFF;
    --dz-sec:#F2F6F4; --dz-on-sec:#22303A;
    --dz-t1:#FFC4A0; --dz-t1-fg:#7A2E05; --dz-t2:#A9E6C5; --dz-t2-fg:#0F5132;
    --dz-t3:#CDC2FF; --dz-t3-fg:#3A2A94; --dz-t4:#FFE27A; --dz-t4-fg:#5C4300;
    --dz-t5:#FFC9C0; --dz-t5-fg:#8A1F10; --dz-t-mut:#4A5660;
    --dz-act:#CDC2FF; --dz-act-fg:#3A2A94; --dz-focus:#5B45D6;
    --dz-overlay:rgba(34,48,58,.38);
    color-scheme: light;
}
html[data-design="algodon"][data-palette="noche"]{
    --dz-c1:#4FE0A0; --dz-c2:#A996FF; --dz-c3:#FF7657; --dz-grid:rgba(255,255,255,.07);
    --naranja:#FF7657 !important; --verde:#4FE0A0 !important; --purpura:#B3A4FF !important;
    --cyan:#5FD3E0 !important; --amarillo:#FFD95C !important; --rojo:#FF8A7A !important;
    --naranja-glow:rgba(99,48,26,.95) !important; --verde-glow:rgba(21,80,58,.95) !important;
    --purpura-glow:rgba(60,49,128,.95) !important; --cyan-glow:rgba(18,72,80,.95) !important;
    --amarillo-glow:rgba(86,69,10,.95) !important; --rojo-glow:rgba(94,32,26,.95) !important;
    --on-verde:#0B2A1C !important; --on-amarillo:#2E2400 !important; --on-cyan:#062A30 !important;
    --on-purpura:#1C1640 !important; --on-naranja:#2A1510 !important;
    --bg-primary:#1C1B26 !important; --bg-card:#262535 !important; --bg-sidebar:#232231 !important; --bg-input:#2F2E40 !important;
    --bg-soft:rgba(255,255,255,.05) !important; --bg-soft-2:rgba(255,255,255,.03) !important;
    --text-primary:#EEEAF6 !important; --text-secondary:#CDC8DD !important; --text-muted:#A9A5BC !important;
    --border:#36354C !important; --border-hover:#48476A !important;
    --shadow:0 14px 34px rgba(0,0,0,.32) !important; --shadow-lg:0 20px 50px rgba(0,0,0,.45) !important;
    --radius-sm:14px !important; --radius:20px !important; --radius-lg:26px !important; --radius-xl:30px !important;
    --swal-bg:#262535 !important; --swal-text:#EEEAF6 !important;
    --dz-cta:#FF7657; --dz-cta-hover:#FF8D73; --dz-on-cta:#2A1510;
    --dz-sec:#2F2E40; --dz-on-sec:#EEEAF6;
    --dz-t1:#63301A; --dz-t1-fg:#FFB98C; --dz-t2:#15503A; --dz-t2-fg:#86E5B3;
    --dz-t3:#3C3180; --dz-t3-fg:#D3C9FF; --dz-t4:#56450A; --dz-t4-fg:#FFD95C;
    --dz-t5:#5E201A; --dz-t5-fg:#FFB0A5; --dz-t-mut:#E3DEEF;
    --dz-act:#3C3180; --dz-act-fg:#D3C9FF; --dz-focus:#B3A4FF;
    --dz-overlay:rgba(0,0,0,.55);
    color-scheme: dark;
}
html[data-design="carton"][data-palette="claro"]{
    --dz-c1:#E8620C; --dz-c2:#15803D; --dz-c3:#C8341E; --dz-grid:rgba(17,16,24,.10);
    --naranja:#C24E08 !important; --verde:#15803D !important; --purpura:#5B3DD6 !important;
    --cyan:#0B7C8C !important; --amarillo:#8A5A00 !important; --rojo:#C8341E !important;
    --naranja-glow:#FF7A1A !important; --verde-glow:#3BD16F !important; --purpura-glow:#B9A6FF !important;
    --cyan-glow:#7FE3EE !important; --amarillo-glow:#FFD23F !important; --rojo-glow:#FF9E9E !important;
    --on-verde:#FFFFFF !important; --on-amarillo:#FFFFFF !important; --on-cyan:#FFFFFF !important;
    --on-purpura:#FFFFFF !important; --on-naranja:#FFFFFF !important;
    --bg-primary:#EFEBFF !important; --bg-card:#FFFFFF !important; --bg-sidebar:#FFFFFF !important; --bg-input:#FFFFFF !important;
    --bg-soft:rgba(17,16,24,.05) !important; --bg-soft-2:rgba(17,16,24,.03) !important;
    --text-primary:#111018 !important; --text-secondary:#2E2A3D !important; --text-muted:#4A4560 !important;
    --border:#111018 !important; --border-hover:#000000 !important;
    --shadow:4px 4px 0 #111018 !important; --shadow-lg:6px 6px 0 #111018 !important;
    --radius-sm:10px !important; --radius:14px !important; --radius-lg:16px !important; --radius-xl:18px !important;
    --swal-bg:#FFFFFF !important; --swal-text:#111018 !important;
    --dz-cta:#FF7A1A; --dz-cta-hover:#FF8C3A; --dz-on-cta:#000000;
    --dz-sec:#FFFFFF; --dz-on-sec:#111018;
    --dz-t1:#FF7A1A; --dz-t1-fg:#000000; --dz-t2:#3BD16F; --dz-t2-fg:#000000;
    --dz-t3:#B9A6FF; --dz-t3-fg:#000000; --dz-t4:#FFD23F; --dz-t4-fg:#000000;
    --dz-t5:#FF9EC4; --dz-t5-fg:#000000; --dz-t-mut:#000000;
    --dz-act:#111018; --dz-act-fg:#FFFFFF; --dz-focus:#FF7A1A;
    --dz-bw:2.5px; --dz-sh:#111018; --dz-overlay:rgba(17,16,24,.45);
    color-scheme: light;
}
html[data-design="carton"][data-palette="noche"]{
    --dz-c1:#FF8A3D; --dz-c2:#4BE07F; --dz-c3:#FF8A80; --dz-grid:rgba(255,255,255,.10);
    --naranja:#FF8A3D !important; --verde:#4BE07F !important; --purpura:#C4B5FF !important;
    --cyan:#5FD3E0 !important; --amarillo:#FFD23F !important; --rojo:#FF8A80 !important;
    --naranja-glow:#FF7A1A !important; --verde-glow:#3BD16F !important; --purpura-glow:#B9A6FF !important;
    --cyan-glow:#7FE3EE !important; --amarillo-glow:#FFD23F !important; --rojo-glow:#FF9E9E !important;
    --on-verde:#000000 !important; --on-amarillo:#000000 !important; --on-cyan:#000000 !important;
    --on-purpura:#000000 !important; --on-naranja:#000000 !important;
    --bg-primary:#1D1B24 !important; --bg-card:#2A2733 !important; --bg-sidebar:#24212D !important; --bg-input:#1D1B24 !important;
    --bg-soft:rgba(255,255,255,.06) !important; --bg-soft-2:rgba(255,255,255,.03) !important;
    --text-primary:#F6F3FF !important; --text-secondary:#DAD4EA !important; --text-muted:#C9C3DA !important;
    --border:#F6F3FF !important; --border-hover:#FFFFFF !important;
    --shadow:4px 4px 0 #FF7A1A !important; --shadow-lg:6px 6px 0 #FF7A1A !important;
    --radius-sm:10px !important; --radius:14px !important; --radius-lg:16px !important; --radius-xl:18px !important;
    --swal-bg:#2A2733 !important; --swal-text:#F6F3FF !important;
    --dz-cta:#FF7A1A; --dz-cta-hover:#FF8C3A; --dz-on-cta:#000000;
    --dz-sec:#2A2733; --dz-on-sec:#F6F3FF;
    --dz-t1:#FF7A1A; --dz-t1-fg:#000000; --dz-t2:#3BD16F; --dz-t2-fg:#000000;
    --dz-t3:#B9A6FF; --dz-t3-fg:#000000; --dz-t4:#FFD23F; --dz-t4-fg:#000000;
    --dz-t5:#FF9EC4; --dz-t5-fg:#000000; --dz-t-mut:#000000;
    --dz-act:#F6F3FF; --dz-act-fg:#111018; --dz-focus:#FF8A3D;
    --dz-bw:2.5px; --dz-sh:#FF7A1A; --dz-overlay:rgba(0,0,0,.6);
    color-scheme: dark;
}
html[data-design="chispa"][data-palette="claro"]{
    --naranja:#7B2FD1 !important; --verde:#0A7A45 !important; --purpura:#7B2FD1 !important;
    --cyan:#0B7C8C !important; --amarillo:#7A5A00 !important; --rojo:#C2123A !important;
    --naranja-glow:#F0E3FF !important; --verde-glow:#DDFBEA !important; --purpura-glow:#F0E3FF !important;
    --cyan-glow:#DDF6FA !important; --amarillo-glow:#FFF5C2 !important; --rojo-glow:#FFE1E7 !important;
    --on-verde:#FFFFFF !important; --on-amarillo:#FFFFFF !important; --on-cyan:#FFFFFF !important;
    --on-purpura:#FFFFFF !important; --on-naranja:#FFFFFF !important;
    --bg-primary:#F6F6F9 !important; --bg-card:#FFFFFF !important; --bg-sidebar:#FFFFFF !important; --bg-input:#F3F3F7 !important;
    --bg-soft:rgba(16,16,24,.045) !important; --bg-soft-2:rgba(16,16,24,.025) !important;
    --text-primary:#101018 !important; --text-secondary:#3A3A4E !important; --text-muted:#5B5B72 !important;
    --border:#E7E6EE !important; --border-hover:#D6D5E0 !important;
    --shadow:0 1px 2px rgba(16,16,24,.04), 0 8px 24px rgba(16,16,24,.05) !important; --shadow-lg:0 24px 60px rgba(16,16,24,.12) !important;
    --radius-sm:12px !important; --radius:16px !important; --radius-lg:20px !important; --radius-xl:24px !important;
    --swal-bg:#FFFFFF !important; --swal-text:#101018 !important;
    --dz-cta:#8B3DF0; --dz-cta-hover:#7A2FE0; --dz-on-cta:#FFFFFF;
    --dz-sec:#FFFFFF; --dz-on-sec:#101018;
    --dz-t1:#FFFFFF; --dz-t2:#FFFFFF; --dz-t3:#FFFFFF; --dz-t4:#FFFFFF; --dz-t5:#FFFFFF;
    --dz-t1-fg:#3A3A4E; --dz-t2-fg:#3A3A4E; --dz-t3-fg:#3A3A4E; --dz-t4-fg:#3A3A4E; --dz-t5-fg:#3A3A4E; --dz-t-mut:#5B5B72;
    --dz-act:#F0E3FF; --dz-act-fg:#6A24C2; --dz-focus:#8B3DF0;
    --dz-overlay:rgba(16,16,24,.35);
    --dz-o1:#8B3DF0; --dz-o2:#00C766; --dz-o3:#9C3DF0; --dz-o4:#FFD600; --dz-o5:#00B8D4;
    --dz-c1:#8B3DF0; --dz-c2:#00C766; --dz-c3:#E0194A; --dz-grid:#EFEEF4;
    --dz-p-rgb:139,61,240;
    --dz-g-primario:linear-gradient(135deg,#8B3DF0,#6C4DFF); --dz-g-verde:linear-gradient(135deg,#00C766,#00BFA6);
    --dz-g-morado:linear-gradient(135deg,#9C3DF0,#7C4DFF); --dz-g-amarillo:linear-gradient(135deg,#FFE14D,#FFC400);
    --dz-g-cyan:linear-gradient(135deg,#00B8D4,#00D1B2); --dz-g-rojo:linear-gradient(135deg,#E0194A,#F0386B);
    --dz-gl-primario:rgba(139,61,240,.35); --dz-gl-verde:rgba(0,199,102,.32); --dz-gl-morado:rgba(124,77,255,.35);
    --dz-gl-amarillo:rgba(255,190,0,.35); --dz-gl-cyan:rgba(0,184,212,.32); --dz-gl-rojo:rgba(224,25,74,.32);
    --dz-tn-naranja:rgba(139,61,240,.10); --dz-tb-naranja:rgba(139,61,240,.20);
    --dz-tn-verde:rgba(0,199,102,.10); --dz-tb-verde:rgba(0,199,102,.20);
    --dz-tn-morado:rgba(156,61,240,.10); --dz-tb-morado:rgba(156,61,240,.20);
    --dz-tn-amarillo:rgba(255,190,0,.14); --dz-tb-amarillo:rgba(255,190,0,.28);
    --dz-tn-cyan:rgba(0,184,212,.10); --dz-tb-cyan:rgba(0,184,212,.22);
    --dz-tn-rojo:rgba(224,25,74,.08); --dz-tb-rojo:rgba(224,25,74,.18);
    --dz-ic-naranja:#7B2FD1; --dz-ic-verde:#0A7A45; --dz-ic-morado:#7B2FD1; --dz-ic-amarillo:#9A6B00; --dz-ic-cyan:#0B7C8C; --dz-ic-rojo:#C2123A;
    --ic-naranja:#7B2FD1; --ic-verde:#0A8F4E; --ic-morado:#7B2FD1; --ic-cyan:#0A8BA3; --ic-rosa:#C2267A; --ic-teal:#0E8C7F; --ic-indigo:#5A4BD6; --ic-rojo:#DC2626;
    color-scheme: light;
}
html[data-design="chispa"][data-palette="noche"]{
    --naranja:#C98BFF !important; --verde:#00E676 !important; --purpura:#C98BFF !important;
    --cyan:#00E5FF !important; --amarillo:#FFD600 !important; --rojo:#FF6B85 !important;
    --naranja-glow:rgba(139,61,240,.16) !important; --verde-glow:rgba(0,230,118,.14) !important; --purpura-glow:rgba(177,77,255,.16) !important;
    --cyan-glow:rgba(0,229,255,.12) !important; --amarillo-glow:rgba(255,214,0,.13) !important; --rojo-glow:rgba(255,77,109,.15) !important;
    --on-verde:#0A0A0F !important; --on-amarillo:#0A0A0F !important; --on-cyan:#0A0A0F !important;
    --on-purpura:#0A0A0F !important; --on-naranja:#0A0A0F !important;
    --bg-primary:#0B0B12 !important; --bg-card:#15151F !important; --bg-sidebar:#111119 !important; --bg-input:#1C1C28 !important;
    --bg-soft:rgba(255,255,255,.05) !important; --bg-soft-2:rgba(255,255,255,.03) !important;
    --text-primary:#FFFFFF !important; --text-secondary:#D0D0DE !important; --text-muted:#9A9AB2 !important;
    --border:rgba(255,255,255,.08) !important; --border-hover:rgba(255,255,255,.15) !important;
    --shadow:0 1px 0 rgba(255,255,255,.02) !important; --shadow-lg:0 24px 60px rgba(0,0,0,.55) !important;
    --radius-sm:12px !important; --radius:16px !important; --radius-lg:20px !important; --radius-xl:24px !important;
    --swal-bg:#15151F !important; --swal-text:#FFFFFF !important;
    --dz-cta:#8B3DF0; --dz-cta-hover:#7A2FE0; --dz-on-cta:#FFFFFF;
    --dz-sec:#15151F; --dz-on-sec:#FFFFFF;
    --dz-t1:#15151F; --dz-t2:#15151F; --dz-t3:#15151F; --dz-t4:#15151F; --dz-t5:#15151F;
    --dz-t1-fg:#D0D0DE; --dz-t2-fg:#D0D0DE; --dz-t3-fg:#D0D0DE; --dz-t4-fg:#D0D0DE; --dz-t5-fg:#D0D0DE; --dz-t-mut:#9A9AB2;
    --dz-act:#8B3DF0; --dz-act-fg:#FFFFFF; --dz-focus:#C98BFF;
    --dz-overlay:rgba(0,0,0,.6);
    --dz-o1:#8B3DF0; --dz-o2:#00E676; --dz-o3:#B14DFF; --dz-o4:#FFD600; --dz-o5:#00E5FF;
    --dz-c1:#8B3DF0; --dz-c2:#00E676; --dz-c3:#FF4D6D; --dz-grid:rgba(255,255,255,.06);
    --dz-p-rgb:177,77,255;
    --dz-g-primario:linear-gradient(135deg,#8B3DF0,#6C4DFF); --dz-g-verde:linear-gradient(135deg,#00E676,#00C9A7);
    --dz-g-morado:linear-gradient(135deg,#B14DFF,#7C4DFF); --dz-g-amarillo:linear-gradient(135deg,#FFE14D,#FFC400);
    --dz-g-cyan:linear-gradient(135deg,#00E5FF,#00C9A7); --dz-g-rojo:linear-gradient(135deg,#FF4D6D,#E0194A);
    --dz-gl-primario:rgba(139,61,240,.40); --dz-gl-verde:rgba(0,230,118,.30); --dz-gl-morado:rgba(177,77,255,.40);
    --dz-gl-amarillo:rgba(255,214,0,.30); --dz-gl-cyan:rgba(0,229,255,.28); --dz-gl-rojo:rgba(255,77,109,.35);
    --dz-tn-naranja:rgba(139,61,240,.12); --dz-tb-naranja:rgba(139,61,240,.24);
    --dz-tn-verde:rgba(0,230,118,.10); --dz-tb-verde:rgba(0,230,118,.22);
    --dz-tn-morado:rgba(177,77,255,.12); --dz-tb-morado:rgba(177,77,255,.26);
    --dz-tn-amarillo:rgba(255,214,0,.10); --dz-tb-amarillo:rgba(255,214,0,.22);
    --dz-tn-cyan:rgba(0,229,255,.10); --dz-tb-cyan:rgba(0,229,255,.22);
    --dz-tn-rojo:rgba(255,77,109,.10); --dz-tb-rojo:rgba(255,77,109,.24);
    --dz-ic-naranja:#C98BFF; --dz-ic-verde:#00E676; --dz-ic-morado:#C98BFF; --dz-ic-amarillo:#FFD600; --dz-ic-cyan:#00E5FF; --dz-ic-rojo:#FF6B85;
    --ic-naranja:#C98BFF; --ic-verde:#00E676; --ic-morado:#C98BFF; --ic-cyan:#00E5FF; --ic-rosa:#FF6FB5; --ic-teal:#2EE6D0; --ic-indigo:#A29BFE; --ic-rojo:#FF6B6B;
    color-scheme: dark;
}
html[data-design="chispa"]{ --dz-font:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif; --dz-font-d:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif; --dz-bw:0px; }
html[data-design="cristal"][data-palette="claro"]{
    --naranja:#B9531A !important; --verde:#0E7F4E !important; --purpura:#5153D6 !important;
    --cyan:#0B7C8C !important; --amarillo:#8F5B00 !important; --rojo:#C2341F !important;
    --naranja-glow:rgba(255,154,77,.22) !important; --verde-glow:rgba(72,213,151,.22) !important;
    --purpura-glow:rgba(140,141,255,.24) !important; --cyan-glow:rgba(106,212,226,.22) !important;
    --amarillo-glow:rgba(247,207,127,.30) !important; --rojo-glow:rgba(255,143,128,.22) !important;
    --on-verde:#FFFFFF !important; --on-amarillo:#FFFFFF !important; --on-cyan:#FFFFFF !important;
    --on-purpura:#FFFFFF !important; --on-naranja:#FFFFFF !important;
    --bg-primary:#EEF0F7 !important; --bg-card:rgba(255,255,255,.66) !important; --bg-sidebar:rgba(255,255,255,.74) !important; --bg-input:rgba(255,255,255,.72) !important;
    --bg-soft:rgba(21,23,42,.05) !important; --bg-soft-2:rgba(21,23,42,.03) !important;
    --text-primary:#15172A !important; --text-secondary:#33385A !important; --text-muted:#4B5170 !important;
    --border:rgba(21,23,42,.10) !important; --border-hover:rgba(21,23,42,.18) !important;
    --shadow:0 20px 50px rgba(40,44,90,.10) !important; --shadow-lg:0 30px 70px rgba(40,44,90,.18) !important;
    --radius-sm:14px !important; --radius:22px !important; --radius-lg:26px !important; --radius-xl:30px !important;
    --swal-bg:#F7F8FC !important; --swal-text:#15172A !important;
    --dz-cta:#15172A; --dz-cta-hover:#2A2D48; --dz-on-cta:#FFFFFF;
    --dz-sec:rgba(255,255,255,.72); --dz-on-sec:#15172A;
    --dz-t1:rgba(255,255,255,.62); --dz-t2:rgba(255,255,255,.62); --dz-t3:rgba(255,255,255,.62); --dz-t4:rgba(255,255,255,.62); --dz-t5:rgba(255,255,255,.62);
    --dz-t1-fg:#4B5170; --dz-t2-fg:#4B5170; --dz-t3-fg:#4B5170; --dz-t4-fg:#4B5170; --dz-t5-fg:#4B5170; --dz-t-mut:#4B5170;
    --dz-act:#15172A; --dz-act-fg:#FFFFFF; --dz-focus:#E4661C;
    --dz-overlay:rgba(21,23,42,.30);
    --dz-glass:rgba(255,255,255,.62); --dz-glass-bd:rgba(255,255,255,.95); --dz-solid:#F7F8FC;
    --dz-o1:#E4661C; --dz-o2:#0E8A55; --dz-o3:#6B6CF0; --dz-o4:#C43D7A; --dz-o5:#A36B00;
    --dz-fondo:radial-gradient(640px circle at 6% 8%, rgba(255,154,77,.55), transparent 62%),
               radial-gradient(560px circle at 58% -6%, rgba(140,141,255,.50), transparent 62%),
               radial-gradient(680px circle at 96% 96%, rgba(72,213,151,.42), transparent 62%), #EEF0F7;
    --dz-c1:#E4661C; --dz-c2:#0E8A55; --dz-c3:#C2341F; --dz-grid:rgba(21,23,42,.07);
    color-scheme: light;
}
/* Oscuro de Cristal (mejorado): el vidrio es oscuro y casi opaco, así el
   texto se lee igual sobre cualquier luz del fondo. La luz verde de abajo
   a la derecha bajó de intensidad porque apagaba etiquetas y montos. */
html[data-design="cristal"][data-palette="noche"]{
    --naranja:#FFA066 !important; --verde:#6BE3A8 !important; --purpura:#A5A6FF !important;
    --cyan:#6AD4E2 !important; --amarillo:#F7CF7F !important; --rojo:#FF8F80 !important;
    --naranja-glow:rgba(255,160,102,.16) !important; --verde-glow:rgba(107,227,168,.14) !important;
    --purpura-glow:rgba(165,166,255,.16) !important; --cyan-glow:rgba(106,212,226,.14) !important;
    --amarillo-glow:rgba(247,207,127,.16) !important; --rojo-glow:rgba(255,143,128,.16) !important;
    --on-verde:#07140E !important; --on-amarillo:#1F1604 !important; --on-cyan:#061B1F !important;
    --on-purpura:#0E0F2E !important; --on-naranja:#1F0E04 !important;
    --bg-primary:#0A0D1A !important; --bg-card:rgba(18,21,38,.76) !important; --bg-sidebar:rgba(15,18,33,.84) !important; --bg-input:rgba(255,255,255,.07) !important;
    --bg-soft:rgba(255,255,255,.06) !important; --bg-soft-2:rgba(255,255,255,.035) !important;
    --text-primary:#F1F2FA !important; --text-secondary:#D3D6EA !important; --text-muted:#B3B8D3 !important;
    --border:rgba(255,255,255,.11) !important; --border-hover:rgba(255,255,255,.20) !important;
    --shadow:0 20px 50px rgba(0,0,0,.40) !important; --shadow-lg:0 30px 70px rgba(0,0,0,.55) !important;
    --radius-sm:14px !important; --radius:22px !important; --radius-lg:26px !important; --radius-xl:30px !important;
    --swal-bg:#151A2E !important; --swal-text:#F1F2FA !important;
    --dz-cta:#FFFFFF; --dz-cta-hover:#E6E8F5; --dz-on-cta:#0A0D1A;
    --dz-sec:rgba(255,255,255,.08); --dz-on-sec:#F1F2FA;
    --dz-t1:rgba(18,21,38,.76); --dz-t2:rgba(18,21,38,.76); --dz-t3:rgba(18,21,38,.76); --dz-t4:rgba(18,21,38,.76); --dz-t5:rgba(18,21,38,.76);
    --dz-t1-fg:#B3B8D3; --dz-t2-fg:#B3B8D3; --dz-t3-fg:#B3B8D3; --dz-t4-fg:#B3B8D3; --dz-t5-fg:#B3B8D3; --dz-t-mut:#B3B8D3;
    --dz-act:#FFFFFF; --dz-act-fg:#0A0D1A; --dz-focus:#FFA066;
    --dz-overlay:rgba(0,0,0,.6);
    --dz-glass:rgba(18,21,38,.76); --dz-glass-bd:rgba(255,255,255,.11); --dz-solid:#151A2E;
    --dz-o1:#FF8A45; --dz-o2:#2FBF7E; --dz-o3:#7C7DFF; --dz-o4:#E0579A; --dz-o5:#E0A93A;
    --dz-fondo:radial-gradient(640px circle at 6% 8%, rgba(184,84,31,.42), transparent 62%),
               radial-gradient(560px circle at 58% -6%, rgba(75,76,201,.40), transparent 62%),
               radial-gradient(620px circle at 98% 98%, rgba(31,138,95,.16), transparent 60%), #0A0D1A;
    --dz-c1:#FF9A5C; --dz-c2:#5CD69A; --dz-c3:#FF8A7A; --dz-grid:rgba(255,255,255,.07);
    color-scheme: dark;
}
html[data-design="cristal"]{ --dz-font:'Sora','Segoe UI',system-ui,sans-serif; --dz-font-d:'Sora','Segoe UI',system-ui,sans-serif; --dz-bw:0px; }
html[data-design="algodon"]{ --dz-font:'Nunito Sans','Segoe UI',system-ui,sans-serif; --dz-font-d:'Outfit','Nunito Sans','Segoe UI',sans-serif; --dz-bw:0px; }
html[data-design="carton"]{ --dz-font:'Archivo','Segoe UI',system-ui,sans-serif; --dz-font-d:'Archivo','Arial Black','Segoe UI',sans-serif; }

/* ---------- 2. TIPOGRAFÍA ----------
   Las vistas fijan 'Inter' elemento por elemento. En vez de tocar cada
   vista, cada elemento toma la variable --dz-ff; los títulos la cambian
   a la fuente de titulares y sus hijos la heredan. Los íconos de Font
   Awesome y los SVG quedan fuera. */
html[data-design] body{ --dz-ff:var(--dz-font); font-family:var(--dz-font) !important; background:var(--bg-primary) !important; color:var(--text-primary); -webkit-font-smoothing:antialiased; }
html[data-design] :is(h1,h2,h3,h4,.page-title,.kpi-value,.stat-value,.stat-mini-value,.modal-title,.swal2-title,.stk-appbar-brand,.logo h2,.brand-name,.card-title,.section-title,.topbar h1,.topbar h3,.cab h3,.left-hero h1){ --dz-ff:var(--dz-font-d); }
html[data-design] body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(svg):not(svg *){ font-family:var(--dz-ff) !important; }
html[data-design] :is(h1,h2,h3,.page-title,.kpi-value,.stat-value,.modal-title){ letter-spacing:-.015em; }
html[data-design="carton"] :is(h1,h2,.page-title,.kpi-value,.stat-value,.stk-appbar-brand,.modal-title){ font-weight:900 !important; font-stretch:112%; }
html[data-design="algodon"] :is(h1,h2,h3,.page-title,.kpi-value,.modal-title){ font-weight:600 !important; }

/* ---------- 3. SUPERFICIES ---------- */
html[data-design] :is(.main,.main-wrapper,.content,.wrapper){ background:transparent !important; }
html[data-design] .topbar{ background:transparent !important; border-bottom:0 !important; box-shadow:none !important; }

/* ---------- 4. BARRA SUPERIOR Y MENÚ LATERAL ---------- */
html[data-design] .stk-appbar{ background:var(--bg-primary) !important; border-bottom:0 !important; }
html[data-design="algodon"] .stk-appbar{ background:rgba(237,244,240,.86) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
html[data-design="algodon"][data-palette="noche"] .stk-appbar{ background:rgba(28,27,38,.86) !important; }
html[data-design="carton"] .stk-appbar{ background:var(--bg-card) !important; border-bottom:var(--dz-bw) solid var(--border) !important; }
html[data-design] .stk-appbar-brand span{ background:none !important; -webkit-text-fill-color:currentColor !important; color:var(--naranja) !important; }
html[data-design] .stk-ham{ background:var(--bg-card) !important; color:var(--text-primary) !important; border:1px solid var(--border) !important; border-radius:14px !important; }
html[data-design="carton"] .stk-ham{ border:var(--dz-bw) solid var(--border) !important; box-shadow:3px 3px 0 var(--dz-sh) !important; border-radius:10px !important; }

/* Menú lateral: cada diseño tiene el suyo. Los selectores llevan
   "body .sidebar nav" para ganarle al CSS propio de config/sidebar.php,
   que usa html[data-palette] body .sidebar nav .nav-item con !important. */
html[data-design] body .sidebar{ background:var(--bg-sidebar) !important; color:var(--text-primary) !important; padding:20px 14px !important; }
html[data-design] body .sidebar .logo{ border-bottom:0 !important; padding:4px 6px 14px !important; margin-bottom:6px !important; gap:12px !important; }
html[data-design] body .sidebar .logo h2{ color:var(--text-primary) !important; font-family:var(--dz-font-d) !important; }
html[data-design] body .sidebar .logo h2 span{ background:none !important; -webkit-text-fill-color:currentColor !important; color:inherit !important; }
html[data-design] body .sidebar .stk-close{ color:var(--text-primary) !important; }
html[data-design] body .sidebar nav .nav-label{ text-transform:none !important; letter-spacing:0 !important; opacity:1 !important; }
html[data-design] body .sidebar nav .nav-item,html[data-design] body .sidebar nav a.nav-item{ min-height:44px; color:var(--text-primary) !important; }
html[data-design] body .sidebar nav .nav-item i{ opacity:1 !important; margin:0 !important; }
html[data-design] body .sidebar nav .nav-item.logout-link,html[data-design] body .sidebar nav .nav-item.logout-link i{ color:var(--rojo) !important; }
html[data-design] body .sidebar .nav-section{ margin-bottom:8px !important; }

/* — Algodón: tarjeta blanca redondeada, íconos en círculos, activo lila — */
html[data-design="algodon"] body .sidebar{ border-radius:0 30px 30px 0 !important; border-right:0 !important; box-shadow:none !important; }
html[data-design="algodon"] body .sidebar.stk-open{ box-shadow:12px 0 44px rgba(34,48,58,.16) !important; }
html[data-design="algodon"] body .sidebar .logo-icon.logo-img{ width:46px !important; height:46px !important; border-radius:50% !important; background:var(--bg-input) !important; padding:8px !important; }
html[data-design="algodon"] body .sidebar .logo h2{ font-size:1.45rem !important; font-weight:600 !important; text-transform:lowercase; letter-spacing:-.01em; }
html[data-design="algodon"] body .sidebar .stk-close{ width:42px !important; height:42px !important; border-radius:50% !important; background:var(--bg-input) !important; border:0 !important; }
html[data-design="algodon"] body .sidebar nav .nav-label{ font-size:.8rem !important; font-weight:800 !important; color:var(--text-muted) !important; padding:12px 12px 4px !important; }
html[data-design="algodon"] body .sidebar nav .nav-item{ padding:6px 10px !important; gap:12px !important; border-radius:16px !important; font-weight:700 !important; font-size:.95rem !important; border:0 !important; }
html[data-design="algodon"] body .sidebar nav .nav-item i{ width:32px !important; height:32px !important; border-radius:50% !important; display:inline-flex !important; align-items:center; justify-content:center;
    background:var(--bg-input) !important; color:var(--text-secondary) !important; font-size:.85rem !important; }
html[data-design="algodon"] body .sidebar nav .nav-item:hover{ background:var(--bg-soft) !important; color:var(--text-primary) !important; }
html[data-design="algodon"] body .sidebar nav .nav-item.active{ background:var(--dz-act) !important; color:var(--dz-act-fg) !important; box-shadow:none !important; }
html[data-design="algodon"] body .sidebar nav .nav-item.active i{ background:var(--bg-card) !important; color:var(--dz-act-fg) !important; }
html[data-design="algodon"] body .sidebar nav .nav-item.logout-link i{ background:var(--rojo-glow) !important; }
html[data-design="algodon"] body .sidebar .aviso-plan{ background:var(--dz-t4) !important; border:0 !important; border-radius:16px !important; }
html[data-design="algodon"] body .sidebar .aviso-plan :is(i,span,b){ color:var(--dz-t4-fg) !important; }

/* — Cartón: borde grueso, activo en bloque naranja con sombra sólida — */
html[data-design="carton"] body .sidebar{ border-right:var(--dz-bw) solid var(--border) !important; border-radius:0 !important; box-shadow:none !important; }
html[data-design="carton"] body .sidebar.stk-open{ box-shadow:6px 0 0 var(--dz-sh) !important; }
html[data-design="carton"] body .sidebar .logo{ border-bottom:var(--dz-bw) solid var(--border) !important; padding-bottom:16px !important; margin-bottom:10px !important; }
html[data-design="carton"] body .sidebar .logo-icon.logo-img{ width:48px !important; height:48px !important; background:#FFFFFF !important; border:var(--dz-bw) solid #111018 !important; border-radius:12px !important;
    padding:6px !important; transform:rotate(-6deg); box-shadow:3px 3px 0 var(--border) !important; }
html[data-design="carton"] body .sidebar .logo h2{ font-size:1.5rem !important; font-weight:900 !important; font-stretch:120%; }
html[data-design="carton"] body .sidebar .logo h2 span{ color:var(--naranja) !important; }
html[data-design="carton"] body .sidebar .stk-close{ width:42px !important; height:42px !important; border-radius:10px !important; background:var(--bg-card) !important;
    border:var(--dz-bw) solid var(--border) !important; box-shadow:3px 3px 0 var(--border) !important; }
html[data-design="carton"] body .sidebar nav .nav-label{ font-size:.8rem !important; font-weight:900 !important; color:var(--text-primary) !important; padding:12px 12px 4px !important; }
html[data-design="carton"] body .sidebar nav .nav-item{ padding:8px 12px !important; gap:12px !important; border-radius:12px !important; font-weight:800 !important; font-size:.95rem !important;
    border:var(--dz-bw) solid transparent !important; }
html[data-design="carton"] body .sidebar nav .nav-item i{ width:22px !important; height:auto !important; background:transparent !important; border:0 !important; color:var(--text-primary) !important; font-size:1rem !important; }
html[data-design="carton"] body .sidebar nav .nav-item:hover{ background:var(--bg-soft) !important; border-color:var(--border) !important; }
html[data-design="carton"] body .sidebar nav .nav-item.active{ background:var(--dz-cta) !important; color:var(--dz-on-cta) !important; border-color:#000000 !important; box-shadow:3px 3px 0 var(--border) !important; }
html[data-design="carton"] body .sidebar nav .nav-item.active i{ color:var(--dz-on-cta) !important; }
html[data-design="carton"] body .sidebar .aviso-plan{ background:var(--dz-t4) !important; border:var(--dz-bw) solid #000 !important; border-radius:12px !important; box-shadow:3px 3px 0 var(--border); }
html[data-design="carton"] body .sidebar .aviso-plan :is(i,span,b){ color:#000 !important; }

/* — Cristal: panel de vidrio, íconos limpios, activo en píldora sólida — */
html[data-design="cristal"] body .sidebar{ background:var(--bg-sidebar) !important; -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%);
    border-right:1px solid var(--dz-glass-bd) !important; border-radius:0 28px 28px 0 !important; box-shadow:none !important; }
html[data-design="cristal"] body .sidebar.stk-open{ box-shadow:var(--shadow-lg) !important; }
html[data-design="cristal"] body .sidebar .logo{ border-bottom:1px solid var(--border) !important; padding-bottom:16px !important; margin-bottom:10px !important; }
html[data-design="cristal"] body .sidebar .logo-icon.logo-img{ width:36px !important; height:36px !important; }
html[data-design="cristal"] body .sidebar .logo h2{ font-size:1.35rem !important; font-weight:700 !important; letter-spacing:-.03em; }
html[data-design="cristal"] body .sidebar .stk-close{ width:40px !important; height:40px !important; border-radius:50% !important; background:var(--dz-glass) !important; border:1px solid var(--dz-glass-bd) !important; }
html[data-design="cristal"] body .sidebar nav .nav-label{ font-size:.76rem !important; font-weight:600 !important; color:var(--text-muted) !important; padding:12px 12px 4px !important; }
html[data-design="cristal"] body .sidebar nav .nav-item{ padding:8px 12px !important; gap:12px !important; border-radius:14px !important; font-weight:500 !important; font-size:.92rem !important;
    color:var(--text-secondary) !important; border:0 !important; }
html[data-design="cristal"] body .sidebar nav .nav-item i{ width:20px !important; height:auto !important; background:transparent !important; color:inherit !important; font-size:.95rem !important; opacity:.9 !important; }
html[data-design="cristal"] body .sidebar nav .nav-item:hover{ background:var(--bg-soft) !important; color:var(--text-primary) !important; }
html[data-design="cristal"] body .sidebar nav .nav-item.active{ background:var(--dz-act) !important; color:var(--dz-act-fg) !important; font-weight:600 !important; box-shadow:0 8px 20px rgba(0,0,0,.14) !important; }
html[data-design="cristal"] body .sidebar nav .nav-item.active i{ color:var(--dz-act-fg) !important; opacity:1 !important; }
html[data-design="cristal"] body .sidebar .aviso-plan{ background:var(--amarillo-glow) !important; border:1px solid var(--dz-glass-bd) !important; border-radius:14px !important; }
html[data-design="cristal"] body .sidebar .aviso-plan i{ color:var(--amarillo) !important; }
html[data-design] .stk-overlay{ background:var(--dz-overlay) !important; }

/* ---------- 5. TARJETAS ---------- */
html[data-design="algodon"] .card-stocky,
html[data-design="algodon"] .kpi-card,
html[data-design="algodon"] .stat-card,
html[data-design="algodon"] .stat-mini-card,
html[data-design="algodon"] .dashboard-card,
html[data-design="algodon"] .card,
html[data-design="algodon"] .item-card,
html[data-design="algodon"] .venta-card,
html[data-design="algodon"] .lote-card,
html[data-design="algodon"] .card-lista,
html[data-design="algodon"] .resumen-card,
html[data-design="algodon"] .plan-card,
html[data-design="algodon"] .empty-state{ background:var(--bg-card); border:0 !important; border-radius:var(--radius-lg) !important; box-shadow:var(--shadow) !important; }
html[data-design="carton"] .card-stocky,
html[data-design="carton"] .kpi-card,
html[data-design="carton"] .stat-card,
html[data-design="carton"] .stat-mini-card,
html[data-design="carton"] .dashboard-card,
html[data-design="carton"] .card,
html[data-design="carton"] .item-card,
html[data-design="carton"] .venta-card,
html[data-design="carton"] .lote-card,
html[data-design="carton"] .card-lista,
html[data-design="carton"] .resumen-card,
html[data-design="carton"] .plan-card,
html[data-design="carton"] .empty-state{ background:var(--bg-card); border:var(--dz-bw) solid var(--border) !important; border-radius:var(--radius) !important; box-shadow:5px 5px 0 var(--dz-sh) !important; }
html[data-design] :is(.card-stocky,.dashboard-card,.card) :is(.card-header,.card-lista-header,.card-header-section){ background:transparent !important; border-color:var(--border) !important; }
html[data-design] .card-icon-circle,html[data-design] .kpi-icon,html[data-design] .stat-mini-icon{ border-radius:50% !important; }
html[data-design="carton"] .card-icon-circle,html[data-design="carton"] .kpi-icon,html[data-design="carton"] .stat-mini-icon{ border-radius:10px !important; border:2px solid var(--border) !important; }

/* KPI del inicio: cada cifra con su color, como en la propuesta */
html[data-design] .kpi-card{ color:var(--dz-t-mut) !important; }
html[data-design] .kpi-card.kpi-ventas{ background:var(--dz-t1) !important; }
html[data-design] .kpi-card.kpi-ganancias{ background:var(--dz-t2) !important; }
html[data-design] .kpi-card.kpi-caja{ background:var(--dz-t3) !important; }
html[data-design] .kpi-card.kpi-margen{ background:var(--dz-t4) !important; }
html[data-design] .kpi-card.kpi-deuda{ background:var(--dz-t5) !important; }
html[data-design] .kpi-card :is(.kpi-label,.kpi-subtext,.kpi-footer,.kpi-footer *){ color:var(--dz-t-mut) !important; }
html[data-design] .kpi-card.kpi-ventas .kpi-label{ color:var(--dz-t1-fg) !important; }
html[data-design] .kpi-card.kpi-ganancias .kpi-label{ color:var(--dz-t2-fg) !important; }
html[data-design] .kpi-card.kpi-caja .kpi-label{ color:var(--dz-t3-fg) !important; }
html[data-design] .kpi-card.kpi-margen .kpi-label{ color:var(--dz-t4-fg) !important; }
html[data-design] .kpi-card.kpi-deuda .kpi-label{ color:var(--dz-t5-fg) !important; }
html[data-design] .kpi-card .kpi-value{ color:var(--text-primary) !important; -webkit-text-fill-color:currentColor !important; background:none !important; }
html[data-design="carton"] .kpi-card .kpi-value{ color:#000 !important; }
html[data-design] .kpi-card .kpi-icon{ background:var(--bg-card) !important; color:var(--text-primary) !important; box-shadow:none !important; }
html[data-design="carton"] .kpi-card .kpi-icon{ background:#FFFFFF !important; color:#000 !important; border-color:#000 !important; }
html[data-design] .kpi-card::before,html[data-design] .kpi-card::after{ display:none !important; }

/* ---------- 6. BOTONES ---------- */
html[data-design] .btn-primary,
html[data-design] .btn-stocky,
html[data-design] .btn-primario,
html[data-design] .btn-guardar,
html[data-design] .btn-save,
html[data-design] .btn-agregar,
html[data-design] .btn-nueva-venta{ background:var(--dz-cta) !important; background-image:none !important; color:var(--dz-on-cta) !important; border-color:transparent !important; box-shadow:none !important; font-weight:700 !important; min-height:44px; }
html[data-design] .btn-primary:hover,
html[data-design] .btn-stocky:hover,
html[data-design] .btn-primario:hover,
html[data-design] .btn-guardar:hover,
html[data-design] .btn-save:hover,
html[data-design] .btn-agregar:hover,
html[data-design] .btn-nueva-venta:hover{ background:var(--dz-cta-hover) !important; transform:none !important; }
html[data-design="algodon"] :is(.btn-primary,.btn-stocky,.btn-primario,.btn-guardar,.btn-save,.btn-agregar,.btn-nueva-venta){ border-radius:16px !important; font-family:var(--dz-font-d) !important; }
html[data-design="carton"] :is(.btn-primary,.btn-stocky,.btn-primario,.btn-guardar,.btn-save,.btn-agregar,.btn-nueva-venta){ border:var(--dz-bw) solid #000 !important; border-radius:12px !important; box-shadow:4px 4px 0 var(--dz-sh) !important; font-weight:900 !important; }
html[data-design="carton"] :is(.btn-primary,.btn-stocky,.btn-primario,.btn-guardar,.btn-save,.btn-agregar,.btn-nueva-venta):active{ transform:translate(2px,2px) !important; box-shadow:2px 2px 0 var(--dz-sh) !important; }
html[data-design] :is(.btn-secondary,.btn-cancel,.btn-outline-secondary,.btn-light){ background:var(--dz-sec) !important; color:var(--dz-on-sec) !important; border:1px solid var(--border) !important; border-radius:var(--radius-sm) !important; font-weight:700; }
html[data-design="carton"] :is(.btn-secondary,.btn-cancel,.btn-outline-secondary,.btn-light){ border-width:var(--dz-bw) !important; }
html[data-design] .btn{ border-radius:var(--radius-sm); }
html[data-design="carton"] .btn{ font-weight:800; }
html[data-design] :is(.btn-success){ background:var(--verde) !important; border-color:var(--verde) !important; color:var(--on-verde) !important; }
html[data-design] :is(.btn-danger){ background:var(--rojo) !important; border-color:var(--rojo) !important; color:#FFFFFF !important; }
html[data-design="carton"] :is(.btn-success,.btn-danger,.btn-warning,.btn-info){ border:var(--dz-bw) solid var(--border) !important; box-shadow:3px 3px 0 var(--dz-sh) !important; }

/* ---------- 7. FORMULARIOS ---------- */
html[data-design="algodon"] .form-control,
html[data-design="algodon"] .form-select,
html[data-design="algodon"] .field-input,
html[data-design="algodon"] .producto-search-input,
html[data-design="algodon"] input[type="text"],
html[data-design="algodon"] input[type="email"],
html[data-design="algodon"] input[type="password"],
html[data-design="algodon"] input[type="number"],
html[data-design="algodon"] input[type="search"],
html[data-design="algodon"] input[type="tel"],
html[data-design="algodon"] input[type="date"],
html[data-design="algodon"] select,
html[data-design="algodon"] textarea{ background:var(--bg-input) !important; border:1.5px solid transparent !important; border-radius:14px !important; color:var(--text-primary) !important; box-shadow:none !important; }
html[data-design="carton"] .form-control,
html[data-design="carton"] .form-select,
html[data-design="carton"] .field-input,
html[data-design="carton"] .producto-search-input,
html[data-design="carton"] input[type="text"],
html[data-design="carton"] input[type="email"],
html[data-design="carton"] input[type="password"],
html[data-design="carton"] input[type="number"],
html[data-design="carton"] input[type="search"],
html[data-design="carton"] input[type="tel"],
html[data-design="carton"] input[type="date"],
html[data-design="carton"] select,
html[data-design="carton"] textarea{ background:var(--bg-input) !important; border:var(--dz-bw) solid var(--border) !important; border-radius:10px !important; color:var(--text-primary) !important; box-shadow:none !important; }
html[data-design] :is(.form-control,.form-select,.field-input,.producto-search-input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="date"],select,textarea):focus{ outline:none !important; border-color:var(--dz-focus) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--dz-focus) 28%, transparent) !important; }
html[data-design="carton"] :is(.form-control,.form-select,.field-input,.producto-search-input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="date"],select,textarea):focus{ box-shadow:4px 4px 0 var(--dz-focus) !important; border-color:var(--border) !important; }
html[data-design] :is(.form-control,.form-select,input,select,textarea)::placeholder{ color:var(--text-muted) !important; opacity:.85; }
html[data-design] :is(label,.form-label){ color:var(--text-secondary); font-weight:700; }
html[data-design] .form-check-input:checked{ background-color:var(--dz-focus) !important; border-color:var(--dz-focus) !important; }

/* ---------- 8. TABLAS (Bootstrap usa variables propias) ---------- */
html[data-design] :is(.table,.table-dark){
    --bs-table-bg:transparent; --bs-table-color:var(--text-primary); --bs-table-border-color:var(--border);
    --bs-table-striped-bg:var(--bg-soft-2); --bs-table-striped-color:var(--text-primary);
    --bs-table-hover-bg:var(--bg-soft); --bs-table-hover-color:var(--text-primary);
    --bs-table-active-bg:var(--bg-soft); --bs-table-active-color:var(--text-primary);
    color:var(--text-primary) !important;
}
html[data-design] :is(.table,.table-dark) > thead > tr > th{ background:var(--bg-input) !important; color:var(--text-secondary) !important; font-weight:700; border-bottom:0 !important; }
html[data-design="algodon"] :is(.table,.table-dark) > thead > tr > th:first-child{ border-radius:12px 0 0 12px; }
html[data-design="algodon"] :is(.table,.table-dark) > thead > tr > th:last-child{ border-radius:0 12px 12px 0; }
html[data-design="carton"] :is(.table,.table-dark) > thead > tr > th{ background:var(--dz-t4) !important; color:#000 !important; border-bottom:var(--dz-bw) solid #000 !important; }

/* ---------- 9. ETIQUETAS DE ESTADO ---------- */
html[data-design="algodon"] .badge{ border-radius:999px !important; font-weight:700 !important; padding:.42em .85em; }
html[data-design="carton"] .badge{ border-radius:8px !important; border:2px solid #000 !important; color:#000 !important; font-weight:800 !important; }
html[data-design] .badge.bg-success{ background:var(--dz-t2) !important; color:var(--dz-t2-fg) !important; }
html[data-design] .badge.bg-warning{ background:var(--dz-t4) !important; color:var(--dz-t4-fg) !important; }
html[data-design] .badge.bg-danger{ background:var(--dz-t5) !important; color:var(--dz-t5-fg) !important; }
html[data-design] .badge.bg-info,html[data-design] .badge.bg-primary{ background:var(--dz-t3) !important; color:var(--dz-t3-fg) !important; }
html[data-design] .badge.bg-secondary{ background:var(--bg-input) !important; color:var(--text-secondary) !important; }

/* ---------- 10. MODALES Y ALERTAS ---------- */
html[data-design] .modal-content{ background:var(--bg-card) !important; color:var(--text-primary) !important; border:var(--dz-bw) solid var(--border) !important; border-radius:var(--radius-lg) !important; box-shadow:var(--shadow-lg) !important; }
html[data-design] :is(.modal-header,.modal-footer){ border-color:var(--border) !important; }
html[data-design] .modal-backdrop.show{ opacity:1 !important; background:var(--dz-overlay) !important; }
html[data-design] .swal2-popup{ border-radius:var(--radius-lg) !important; font-family:var(--dz-font) !important; }
html[data-design="carton"] .swal2-popup{ border:var(--dz-bw) solid var(--border) !important; box-shadow:6px 6px 0 var(--dz-sh) !important; }
html[data-design] .swal2-styled.swal2-confirm{ background:var(--dz-cta) !important; color:var(--dz-on-cta) !important; border-radius:var(--radius-sm) !important; font-weight:700 !important; box-shadow:none !important; }
html[data-design] .swal2-styled.swal2-cancel,html[data-design] .swal2-styled.swal2-deny{ background:var(--dz-sec) !important; color:var(--dz-on-sec) !important; border-radius:var(--radius-sm) !important; font-weight:700 !important; }
html[data-design="carton"] .swal2-styled{ border:var(--dz-bw) solid #000 !important; box-shadow:3px 3px 0 var(--dz-sh) !important; }
html[data-design] .swal2-container.swal2-backdrop-show{ background:var(--dz-overlay) !important; }

/* ---------- 11. PANEL "APARIENCIA" (Tema) ---------- */
html[data-design] .stk-ap{ width:700px; max-width:94vw; max-height:92vh; overflow:auto; }
html[data-design] .stk-ap-sub{ margin:-12px 0 18px; color:var(--text-muted); font-size:.92rem; }
html[data-design] .stk-ap-sec{ font-family:var(--dz-font-d) !important; font-weight:700; font-size:1rem; margin:6px 0 10px; color:var(--text-primary); }
html[data-design] .stk-ap-disenos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-bottom:18px; }
@media (max-width: 640px){ html[data-design] .stk-ap-disenos{ grid-template-columns:1fr; } }
html[data-design] .stk-ap-diseno{ display:flex; flex-direction:column; align-items:stretch; gap:10px; width:100%; padding:12px; text-align:left; cursor:pointer;
    background:var(--bg-card); color:var(--text-primary); border:1.5px solid var(--border); border-radius:22px; }
html[data-design] .stk-ap-diseno.activo{ border-color:var(--dz-focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--dz-focus) 30%, transparent); }
html[data-design="carton"] .stk-ap-diseno{ border:var(--dz-bw) solid var(--border); border-radius:14px; }
html[data-design="carton"] .stk-ap-diseno.activo{ box-shadow:5px 5px 0 var(--dz-sh); outline:3px solid var(--dz-focus); outline-offset:2px; }
html[data-design] .stk-ap-nombre{ display:flex; align-items:center; gap:8px; font-family:var(--dz-font-d) !important; font-weight:700; font-size:1.05rem; }
html[data-design] .stk-ap-nombre em{ font-style:normal; font-size:.72rem; font-weight:800; padding:2px 9px; border-radius:999px; background:var(--dz-t2); color:var(--dz-t2-fg); }
html[data-design] .stk-ap-desc{ font-size:.85rem; color:var(--text-muted); }
html[data-design] .stk-ap-modos{ display:flex; gap:6px; padding:5px; border-radius:16px; background:var(--bg-input); }
html[data-design="carton"] .stk-ap-modos{ background:transparent; padding:0; gap:8px; }
html[data-design] .stk-ap-modo{ flex:1; min-height:44px; display:flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:12px;
    background:transparent; color:var(--text-primary); font-weight:700; font-size:.9rem; cursor:pointer; }
html[data-design] .stk-ap-modo.activo{ background:var(--bg-card); box-shadow:0 2px 8px rgba(0,0,0,.12); }
html[data-design="carton"] .stk-ap-modo{ border:2px solid var(--border); border-radius:10px; background:var(--bg-card); }
html[data-design="carton"] .stk-ap-modo.activo{ background:var(--text-primary); color:var(--bg-card); box-shadow:none; }
html[data-design] .stk-ap-nota{ margin:10px 2px 0; font-size:.8rem; color:var(--text-muted); }
/* Miniaturas: siempre muestran el diseño en modo claro */
.stk-thumb{ display:flex; gap:8px; width:100%; box-sizing:border-box; height:96px; padding:9px; border-radius:14px; overflow:hidden; flex-shrink:0; }
.stk-thumb span{ display:block; }
.stk-thumb-algodon{ background:#EDF4F0; }
.stk-thumb-algodon .tb-side{ width:22%; flex-shrink:0; border-radius:10px; background:#FFFFFF; }
.stk-thumb-algodon .tb-main{ flex:1; display:flex; flex-direction:column; gap:7px; }
.stk-thumb-algodon .tb-row{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.stk-thumb-algodon .tb-row span{ border-radius:9px; }
.stk-thumb-algodon .tb-row span:nth-child(1){ background:#FFC4A0; } .stk-thumb-algodon .tb-row span:nth-child(2){ background:#A9E6C5; }
.stk-thumb-algodon .tb-row span:nth-child(3){ background:#CDC2FF; } .stk-thumb-algodon .tb-row span:nth-child(4){ background:#FFE27A; }
.stk-thumb-algodon .tb-chart{ flex:1.3; border-radius:10px; background:#FFFFFF; }
.stk-thumb-carton{ background:#EFEBFF; border:2.5px solid #111018; display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:1fr 1fr; }
.stk-thumb-carton span{ border:2px solid #111018; border-radius:7px; box-shadow:2px 2px 0 #111018; }
.stk-thumb-carton span:nth-child(1){ grid-row:span 2; background:#FF7A1A; } .stk-thumb-carton span:nth-child(2){ background:#FFD23F; }
.stk-thumb-carton span:nth-child(3){ background:#3BD16F; } .stk-thumb-carton span:nth-child(4){ background:#B9A6FF; }
.stk-thumb-carton span:nth-child(5){ background:#FFFFFF; }

/* ---------- 12. INICIO DE SESIÓN (views/login.php) ---------- */
html[data-design="algodon"][data-palette="claro"] body.auth{ --lienzo:#EDF4F0; --panel:#FFFFFF; --panel-2:#FFFFFF; --linea:#E1EAE5; --linea-viva:#C7D6CE;
    --naranja:#D63D20; --teal:#0B7F4F; --purpura:#5B45D6; --verde:#0B7F4F; --txt:#22303A; --txt-dim:#3E4C56; --txt-mut:#5E6B74; --txt-3:#5E6B74; --rojo:#C8341E; }
html[data-design="algodon"][data-palette="noche"] body.auth{ --lienzo:#1C1B26; --panel:#262535; --panel-2:#262535; --linea:#36354C; --linea-viva:#48476A;
    --naranja:#FF7657; --teal:#4FE0A0; --purpura:#B3A4FF; --verde:#4FE0A0; --txt:#EEEAF6; --txt-dim:#CDC8DD; --txt-mut:#A9A5BC; --txt-3:#A9A5BC; --rojo:#FF8A7A; }
html[data-design="carton"][data-palette="claro"] body.auth{ --lienzo:#EFEBFF; --panel:#FFFFFF; --panel-2:#FFFFFF; --linea:#111018; --linea-viva:#000000;
    --naranja:#C24E08; --teal:#15803D; --purpura:#5B3DD6; --verde:#15803D; --txt:#111018; --txt-dim:#2E2A3D; --txt-mut:#4A4560; --txt-3:#4A4560; --rojo:#C8341E; }
html[data-design="carton"][data-palette="noche"] body.auth{ --lienzo:#1D1B24; --panel:#2A2733; --panel-2:#2A2733; --linea:#F6F3FF; --linea-viva:#FFFFFF;
    --naranja:#FF8A3D; --teal:#4BE07F; --purpura:#C4B5FF; --verde:#4BE07F; --txt:#F6F3FF; --txt-dim:#DAD4EA; --txt-mut:#C9C3DA; --txt-3:#C9C3DA; --rojo:#FF8A80; }
html[data-design="algodon"] body.auth .auth-left{ background:var(--dz-t3) !important; margin:16px 0 16px 16px; border-radius:32px; }
html[data-design="algodon"] body.auth .auth-left::before{ display:none; }
html[data-design="algodon"] body.auth .auth-left :is(h1,.brand-name,.feature-tx b){ color:#22303A !important; }
html[data-design="algodon"] body.auth .auth-left :is(p,.feature-tx span,.contacto-label){ color:#3A4650 !important; }
html[data-design="algodon"][data-palette="noche"] body.auth .auth-left :is(h1,.brand-name,.feature-tx b,p,.feature-tx span,.contacto-label){ color:#EEEAF6 !important; }
html[data-design="algodon"] body.auth .auth-left .feature-ic{ background:#FFFFFF !important; border:0 !important; border-radius:50% !important; }
html[data-design="algodon"][data-palette="noche"] body.auth .auth-left .feature-ic{ background:#262535 !important; }
html[data-design="algodon"] body.auth .tarjeta{ background:var(--panel) !important; border:0 !important; border-radius:32px !important; box-shadow:0 20px 50px rgba(34,48,58,.12) !important; }
html[data-design="algodon"] body.auth .tarjeta::before,html[data-design="algodon"] body.auth .auth-right::before{ display:none !important; }
html[data-design="algodon"] body.auth .entrada input{ background:var(--bg-input, #F2F6F4) !important; border-color:transparent !important; border-radius:16px !important; }
html[data-design="algodon"][data-palette="noche"] body.auth .entrada input{ background:#2F2E40 !important; }
html[data-design="algodon"] body.auth .btn-primario{ border-radius:16px !important; box-shadow:none !important; }
html[data-design="carton"] body.auth .auth-left{ background:var(--lienzo) !important; }
html[data-design="carton"] body.auth .auth-left::before,html[data-design="carton"] body.auth .tarjeta::before,html[data-design="carton"] body.auth .auth-right::before{ display:none !important; }
html[data-design="carton"] body.auth .tarjeta{ background:var(--panel) !important; border:2.5px solid var(--linea) !important; border-radius:18px !important; box-shadow:8px 8px 0 #111018 !important; }
html[data-design="carton"][data-palette="noche"] body.auth .tarjeta{ box-shadow:8px 8px 0 #FF7A1A !important; }
html[data-design="carton"] body.auth .entrada input{ border:2.5px solid var(--linea) !important; border-radius:10px !important; background:var(--panel) !important; }
html[data-design="carton"] body.auth .btn-primario{ background:#FF7A1A !important; color:#000 !important; border:2.5px solid #000 !important; border-radius:12px !important; box-shadow:4px 4px 0 #111018 !important; font-weight:900 !important; }
html[data-design="carton"] body.auth :is(.left-hero h1,.cab h3,.brand-name){ font-weight:900 !important; font-stretch:115%; }
html[data-design="carton"] body.auth .feature-ic{ border:2px solid var(--linea) !important; border-radius:10px !important; }

/* ---------- 13. APP MÓVIL (menú inferior) ---------- */
html[data-design="algodon"] .app-bottomnav{ background:var(--bg-card) !important; border-top:0 !important; box-shadow:0 -10px 30px rgba(34,48,58,.10) !important; border-radius:26px 26px 0 0; }
html[data-design="carton"] .app-bottomnav{ background:var(--bg-card) !important; border-top:var(--dz-bw) solid var(--border) !important; }
html[data-design] .app-bottomnav a{ color:var(--text-muted) !important; }
html[data-design="chispa"] .app-bottomnav a.active,html[data-design="chispa"] .app-bottomnav a.activo{ color:var(--dz-act-fg) !important; }
html[data-design]:not([data-design="chispa"]) .app-bottomnav a.active,html[data-design]:not([data-design="chispa"]) .app-bottomnav a.activo{ color:var(--naranja) !important; font-weight:800 !important; }
html[data-design] .app-bottomnav .nav-center{ background:var(--dz-cta) !important; color:var(--dz-on-cta) !important; box-shadow:0 10px 24px color-mix(in srgb, var(--dz-cta) 40%, transparent) !important; }
html[data-design="carton"] .app-bottomnav .nav-center{ border:var(--dz-bw) solid #000 !important; box-shadow:3px 3px 0 var(--dz-sh) !important; }
html[data-design] .app-sheet{ background:var(--bg-card) !important; color:var(--text-primary) !important; }
html[data-design="carton"] .app-sheet{ border-top:var(--dz-bw) solid var(--border) !important; }

/* ---------- 14. CRISTAL (Glass Premium) ---------- */
html[data-design="cristal"] body{ background:var(--dz-fondo) !important; background-attachment:fixed !important; }
html[data-design="cristal"] :is(h1,h2,h3,.page-title,.kpi-value,.modal-title){ font-weight:600 !important; letter-spacing:-.02em; }
html[data-design="cristal"] .card-stocky,
html[data-design="cristal"] .kpi-card,
html[data-design="cristal"] .stat-card,
html[data-design="cristal"] .stat-mini-card,
html[data-design="cristal"] .dashboard-card,
html[data-design="cristal"] .card,
html[data-design="cristal"] .item-card,
html[data-design="cristal"] .venta-card,
html[data-design="cristal"] .lote-card,
html[data-design="cristal"] .card-lista,
html[data-design="cristal"] .resumen-card,
html[data-design="cristal"] .plan-card,
html[data-design="cristal"] .empty-state{ background:var(--dz-glass) !important; border:1px solid var(--dz-glass-bd) !important; border-radius:var(--radius-lg) !important;
    box-shadow:var(--shadow) !important; -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%); }
html[data-design="cristal"] .kpi-card :is(.kpi-label,.kpi-subtext,.kpi-footer,.kpi-footer *){ color:var(--text-muted) !important; }
html[data-design="cristal"] .kpi-card .kpi-icon{ color:#FFFFFF !important; border:0 !important; }
html[data-design="cristal"] .kpi-card.kpi-ventas .kpi-icon{ background:var(--dz-o1) !important; box-shadow:0 8px 22px color-mix(in srgb, var(--dz-o1) 45%, transparent) !important; }
html[data-design="cristal"] .kpi-card.kpi-ganancias .kpi-icon{ background:var(--dz-o2) !important; box-shadow:0 8px 22px color-mix(in srgb, var(--dz-o2) 45%, transparent) !important; }
html[data-design="cristal"] .kpi-card.kpi-caja .kpi-icon{ background:var(--dz-o3) !important; box-shadow:0 8px 22px color-mix(in srgb, var(--dz-o3) 45%, transparent) !important; }
html[data-design="cristal"] .kpi-card.kpi-margen .kpi-icon{ background:var(--dz-o5) !important; box-shadow:0 8px 22px color-mix(in srgb, var(--dz-o5) 45%, transparent) !important; }
html[data-design="cristal"] .kpi-card.kpi-deuda .kpi-icon{ background:var(--dz-o4) !important; box-shadow:0 8px 22px color-mix(in srgb, var(--dz-o4) 45%, transparent) !important; }
html[data-design="cristal"] .stk-appbar{ background:var(--dz-glass) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid var(--dz-glass-bd) !important; }
html[data-design="cristal"] :is(.btn-primary,.btn-stocky,.btn-primario,.btn-guardar,.btn-save,.btn-agregar,.btn-nueva-venta){ border-radius:999px !important; }
html[data-design="cristal"] :is(.btn-secondary,.btn-cancel,.btn-outline-secondary,.btn-light){ border-radius:999px !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
html[data-design="cristal"] :is(.form-control,.form-select,.field-input,.producto-search-input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="date"],select,textarea){ background:var(--bg-input) !important; border:1px solid var(--dz-glass-bd) !important; border-radius:14px !important; color:var(--text-primary) !important; }
html[data-design="cristal"] :is(.table,.table-dark) > thead > tr > th{ background:var(--bg-soft) !important; }
html[data-design="cristal"] .badge{ border-radius:999px !important; font-weight:700 !important; }
html[data-design="cristal"] .badge.bg-success{ background:var(--verde-glow) !important; color:var(--verde) !important; }
html[data-design="cristal"] .badge.bg-warning{ background:var(--amarillo-glow) !important; color:var(--amarillo) !important; }
html[data-design="cristal"] .badge.bg-danger{ background:var(--rojo-glow) !important; color:var(--rojo) !important; }
html[data-design="cristal"] :is(.badge.bg-info,.badge.bg-primary){ background:var(--purpura-glow) !important; color:var(--purpura) !important; }
html[data-design="cristal"] :is(.modal-content,.stk-cuenta-menu,.stk-tema-panel){ background:var(--dz-solid) !important; border:1px solid var(--border) !important; }
html[data-design="cristal"] .swal2-popup{ border:1px solid var(--border) !important; }
html[data-design="cristal"] .app-bottomnav{ background:var(--dz-glass) !important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-top:1px solid var(--dz-glass-bd) !important; }
html[data-design="cristal"] .app-sheet{ background:var(--dz-solid) !important; }
html[data-design="cristal"] .stk-ap-diseno{ background:var(--bg-card); border-color:var(--border); }
html[data-design="cristal"] .stk-ap-diseno.activo{ border-color:var(--dz-focus); }
/* Si el equipo no soporta desenfoque, el vidrio se vuelve casi opaco */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    html[data-design="cristal"][data-palette="claro"]{ --dz-glass:rgba(255,255,255,.92); --bg-card:rgba(255,255,255,.92) !important; }
    html[data-design="cristal"][data-palette="noche"]{ --dz-glass:rgba(18,21,38,.95); --bg-card:rgba(18,21,38,.95) !important; }
}
/* Inicio de sesión en Cristal */
html[data-design="cristal"][data-palette="claro"] body.auth{ --lienzo:transparent; --panel:rgba(255,255,255,.66); --panel-2:rgba(255,255,255,.66); --linea:rgba(255,255,255,.95); --linea-viva:rgba(21,23,42,.18);
    --naranja:#B9531A; --teal:#0E7F4E; --purpura:#5153D6; --verde:#0E7F4E; --txt:#15172A; --txt-dim:#33385A; --txt-mut:#4B5170; --txt-3:#4B5170; --rojo:#C2341F; }
html[data-design="cristal"][data-palette="noche"] body.auth{ --lienzo:transparent; --panel:rgba(18,21,38,.78); --panel-2:rgba(18,21,38,.78); --linea:rgba(255,255,255,.12); --linea-viva:rgba(255,255,255,.22);
    --naranja:#FFA066; --teal:#6BE3A8; --purpura:#A5A6FF; --verde:#6BE3A8; --txt:#F1F2FA; --txt-dim:#D3D6EA; --txt-mut:#B3B8D3; --txt-3:#B3B8D3; --rojo:#FF8F80; }
html[data-design="cristal"] body.auth .auth-left{ background:transparent !important; }
html[data-design="cristal"] body.auth .auth-left::before,html[data-design="cristal"] body.auth .tarjeta::before,html[data-design="cristal"] body.auth .auth-right::before{ display:none !important; }
html[data-design="cristal"] body.auth .tarjeta{ background:var(--panel) !important; border:1px solid var(--linea) !important; border-radius:32px !important;
    -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%); box-shadow:var(--shadow-lg) !important; }
html[data-design="cristal"] body.auth .entrada input{ background:var(--bg-input) !important; border:1px solid var(--linea) !important; border-radius:14px !important; }
html[data-design="cristal"] body.auth .btn-primario{ background:var(--dz-cta) !important; color:var(--dz-on-cta) !important; border-radius:999px !important; box-shadow:none !important; }
html[data-design="cristal"] body.auth .feature-ic{ background:var(--bg-card) !important; border:1px solid var(--linea) !important; border-radius:50% !important; }
/* Miniatura del panel Apariencia */
.stk-thumb-cristal{ position:relative; background:radial-gradient(90px circle at 12% 18%, #FF9A4D, transparent 70%), radial-gradient(90px circle at 70% 0%, #8C8DFF, transparent 70%), radial-gradient(100px circle at 100% 100%, #48D597, transparent 70%), #EEF0F7; }
.stk-thumb-cristal .tb-side{ width:22%; flex-shrink:0; border-radius:12px; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.95); }
.stk-thumb-cristal .tb-main{ flex:1; display:flex; flex-direction:column; gap:7px; }
.stk-thumb-cristal .tb-row{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.stk-thumb-cristal .tb-row span{ border-radius:10px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.95); }
.stk-thumb-cristal .tb-chart{ flex:1.3; border-radius:12px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.95); }

/* ---------- 15. CUENTA EN LA APP (arriba del menú "Más") ---------- */
.app-sheet-cuenta{ display:flex; align-items:center; gap:12px; padding:4px 6px 14px; margin-bottom:6px; border-bottom:1px solid var(--border); }
.app-sheet-cuenta b{ display:block; font-size:1rem; color:var(--text-primary); }
.app-sheet-cuenta small{ display:block; font-size:.8rem; color:var(--text-muted); margin-top:2px; }
html[data-design="algodon"] .stk-cuenta-btn{ border:0 !important; }
html[data-design="carton"] .stk-cuenta-btn{ border:var(--dz-bw) solid var(--border) !important; box-shadow:3px 3px 0 var(--dz-sh) !important; }
html[data-design="carton"] .stk-plan-pill{ background:var(--dz-t4) !important; color:#000 !important; }
html[data-design="carton"] .stk-plan-pill i{ color:#000 !important; }
html[data-design="carton"] .stk-cuenta-menu{ box-shadow:6px 6px 0 var(--dz-sh) !important; }
html[data-design="cristal"] :is(.stk-cuenta-btn,.stk-plan-pill){ background:var(--dz-glass) !important; border:1px solid var(--dz-glass-bd) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
html[data-design="cristal"] .stk-avatar{ background:var(--dz-o3); color:#FFFFFF; }

/* ---------- 16. CHISPA (PRINCIPAL): colores vivos, con medida ----------
   Superficies planas y el color solo donde importa: botón principal,
   íconos de las cifras, gráfico, estados y la opción activa del menú. */
html[data-design="chispa"] :is(h1,h2,h3,.page-title,.kpi-value,.stat-value,.modal-title){ font-weight:800 !important; letter-spacing:-.02em; }
html[data-design="chispa"] .card-stocky,
html[data-design="chispa"] .kpi-card,
html[data-design="chispa"] .stat-card,
html[data-design="chispa"] .stat-mini-card,
html[data-design="chispa"] .dashboard-card,
html[data-design="chispa"] .card,
html[data-design="chispa"] .item-card,
html[data-design="chispa"] .venta-card,
html[data-design="chispa"] .lote-card,
html[data-design="chispa"] .card-lista,
html[data-design="chispa"] .resumen-card,
html[data-design="chispa"] .plan-card,
html[data-design="chispa"] .empty-state{ background:var(--bg-card) !important; border:1px solid var(--border) !important; border-radius:var(--radius-lg) !important; box-shadow:var(--shadow) !important; }
html[data-design="chispa"] .kpi-card .kpi-label{ color:var(--text-secondary) !important; }
html[data-design="chispa"] .kpi-card .kpi-icon{ color:#0A0A0F !important; border:0 !important; border-radius:12px !important; box-shadow:none !important; }
html[data-design="chispa"] .kpi-card.kpi-ventas .kpi-icon{ background:var(--dz-o1) !important; }
html[data-design="chispa"] .kpi-card.kpi-ganancias .kpi-icon{ background:var(--dz-o2) !important; }
html[data-design="chispa"] .kpi-card.kpi-caja .kpi-icon{ background:var(--dz-o3) !important; color:#FFFFFF !important; }
html[data-design="chispa"] .kpi-card.kpi-margen .kpi-icon{ background:var(--dz-o5) !important; }
html[data-design="chispa"] .kpi-card.kpi-deuda .kpi-icon{ background:var(--dz-o4) !important; }
html[data-design="chispa"] .stk-appbar{ background:var(--bg-card) !important; border-bottom:1px solid var(--border) !important; }
html[data-design="chispa"] :is(.btn-primary,.btn-stocky,.btn-primario,.btn-guardar,.btn-save,.btn-agregar,.btn-nueva-venta){ border-radius:14px !important; font-weight:800 !important; }
html[data-design="chispa"] :is(.btn-secondary,.btn-cancel,.btn-outline-secondary,.btn-light){ background:var(--bg-card) !important; border:1px solid var(--border) !important; border-radius:14px !important; }
html[data-design="chispa"] :is(.form-control,.form-select,.field-input,.producto-search-input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="date"],select,textarea){ background:var(--bg-input) !important; border:1px solid var(--border) !important; border-radius:14px !important; color:var(--text-primary) !important; box-shadow:none !important; }
html[data-design="chispa"] :is(.form-control,.form-select,.field-input,.producto-search-input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="date"],select,textarea):focus{ border-color:var(--dz-focus) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--dz-focus) 22%, transparent) !important; }
html[data-design="chispa"] :is(.table,.table-dark) > thead > tr > th{ background:var(--bg-input) !important; }
html[data-design="chispa"] .badge{ border-radius:999px !important; font-weight:800 !important; }
html[data-design="chispa"] .badge.bg-success{ background:var(--verde-glow) !important; color:var(--verde) !important; }
html[data-design="chispa"] .badge.bg-warning{ background:var(--amarillo-glow) !important; color:var(--amarillo) !important; }
html[data-design="chispa"] .badge.bg-danger{ background:var(--rojo-glow) !important; color:var(--rojo) !important; }
html[data-design="chispa"] :is(.badge.bg-info,.badge.bg-primary){ background:var(--purpura-glow) !important; color:var(--purpura) !important; }
html[data-design="chispa"] .modal-content{ border:1px solid var(--border) !important; }
html[data-design="chispa"] .stk-plan-pill{ background:var(--amarillo-glow) !important; color:var(--amarillo) !important; }
html[data-design="chispa"] .stk-plan-pill i{ color:var(--amarillo) !important; }
html[data-design="chispa"] .stk-avatar{ background:var(--dz-o3); color:#FFFFFF; }
html[data-design="chispa"] .stk-cuenta-btn{ box-shadow:none !important; }
html[data-design="chispa"] .app-bottomnav{ background:var(--bg-card) !important; border-top:1px solid var(--border) !important; }
html[data-design="chispa"] .app-bottomnav .nav-center{ box-shadow:0 10px 24px rgba(var(--dz-p-rgb),.35) !important; }
html[data-design="chispa"] body .sidebar{ border-right:1px solid var(--border) !important; border-radius:0 !important; box-shadow:none !important; }
html[data-design="chispa"] body .sidebar.stk-open{ box-shadow:var(--shadow-lg) !important; }
html[data-design="chispa"] body .sidebar .logo{ border-bottom:1px solid var(--border) !important; padding-bottom:16px !important; margin-bottom:10px !important; }
html[data-design="chispa"] body .sidebar .logo-icon.logo-img{ width:38px !important; height:38px !important; border-radius:0 !important; background:transparent !important; padding:0 !important; box-shadow:none !important; }
html[data-design="chispa"] body .sidebar .logo h2{ font-size:1.4rem !important; font-weight:800 !important; letter-spacing:-.03em; }
html[data-design="chispa"] body .sidebar .stk-close{ width:40px !important; height:40px !important; border-radius:12px !important; background:var(--bg-card) !important; border:1px solid var(--border) !important; }
html[data-design="chispa"] body .sidebar nav .nav-label{ font-size:.78rem !important; font-weight:700 !important; color:var(--text-muted) !important; padding:12px 12px 4px !important; }
html[data-design="chispa"] body .sidebar nav .nav-item{ padding:8px 12px !important; gap:12px !important; border-radius:12px !important; font-weight:600 !important; font-size:.93rem !important;
    color:var(--text-secondary) !important; border:0 !important; }
html[data-design="chispa"] body .sidebar nav .nav-item i{ width:20px !important; height:auto !important; background:transparent !important; color:inherit !important; font-size:.95rem !important; }
html[data-design="chispa"] body .sidebar nav .nav-item:hover{ background:var(--bg-soft) !important; color:var(--text-primary) !important; }
html[data-design="chispa"] body .sidebar nav .nav-item.active{ background:var(--dz-act) !important; color:var(--dz-act-fg) !important; font-weight:800 !important; box-shadow:none !important; }
html[data-design="chispa"] body .sidebar nav .nav-item.active i{ color:var(--dz-act-fg) !important; }
html[data-design="chispa"] body .sidebar .aviso-plan{ background:var(--amarillo-glow) !important; border:0 !important; border-radius:14px !important; }
html[data-design="chispa"] body .sidebar .aviso-plan :is(i,span,b){ color:var(--amarillo) !important; }
html[data-design="chispa"][data-palette="claro"] body.auth{ --lienzo:#F6F6F9; --panel:#FFFFFF; --panel-2:#FFFFFF; --linea:#E7E6EE; --linea-viva:#D6D5E0;
    --teal:#0A7A45; --purpura:#7B2FD1; --verde:#0A7A45; --txt:#101018; --txt-dim:#3A3A4E; --txt-mut:#5B5B72; --txt-3:#5B5B72; --rojo:#C2123A; }
html[data-design="chispa"][data-palette="noche"] body.auth{ --lienzo:#0B0B12; --panel:#15151F; --panel-2:#15151F; --linea:rgba(255,255,255,.08); --linea-viva:rgba(255,255,255,.15);
    --teal:#00E676; --purpura:#C98BFF; --verde:#00E676; --txt:#FFFFFF; --txt-dim:#D0D0DE; --txt-mut:#9A9AB2; --txt-3:#9A9AB2; --rojo:#FF6B85; }
html[data-design="chispa"] body.auth .auth-left{ background:radial-gradient(700px circle at 0% 0%, rgba(var(--dz-p-rgb),.12), transparent 65%), var(--lienzo) !important; }
html[data-design="chispa"] body.auth .auth-left::before,html[data-design="chispa"] body.auth .tarjeta::before,html[data-design="chispa"] body.auth .auth-right::before{ display:none !important; }
html[data-design="chispa"] body.auth .tarjeta{ background:var(--panel) !important; border:1px solid var(--linea) !important; border-radius:24px !important; box-shadow:0 24px 60px rgba(16,16,24,.10) !important; }
html[data-design="chispa"] body.auth .entrada input{ background:#F3F3F7 !important; border:1px solid var(--linea) !important; border-radius:14px !important; }
html[data-design="chispa"][data-palette="noche"] body.auth .entrada input{ background:#1C1C28 !important; }
html[data-design="chispa"] body.auth .btn-primario{ background:var(--dz-g-primario) !important; color:var(--dz-on-cta) !important; border-radius:14px !important; box-shadow:none !important; font-weight:800 !important; }
html[data-design="chispa"] body.auth .feature-ic{ background:var(--panel) !important; border:1px solid var(--linea) !important; border-radius:12px !important; }
.stk-thumb-chispa{ background:#F6F6F9; }
.stk-thumb-chispa .tb-side{ width:22%; flex-shrink:0; border-radius:8px; background:#FFFFFF; border:1px solid #E7E6EE; }
.stk-thumb-chispa .tb-main{ flex:1; display:flex; flex-direction:column; gap:7px; }
.stk-thumb-chispa .tb-row{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.stk-thumb-chispa .tb-row span{ border-radius:8px; background:#FFFFFF; border:1px solid #E7E6EE; position:relative; }
.stk-thumb-chispa .tb-row span::before{ content:""; position:absolute; left:5px; top:5px; width:9px; height:9px; border-radius:3px; background:#8B3DF0; }
.stk-thumb-chispa .tb-row span:nth-child(2)::before{ background:#00C766; }
.stk-thumb-chispa .tb-row span:nth-child(3)::before{ background:#9C3DF0; }
.stk-thumb-chispa .tb-row span:nth-child(4)::before{ background:#FFD600; }
.stk-thumb-chispa .tb-chart{ flex:1.3; border-radius:8px; background:#FFFFFF; border:1px solid #E7E6EE;
    background-image:linear-gradient(170deg, transparent 55%, rgba(var(--dz-p-rgb),.35) 56%, transparent 62%); }

html[data-design="chispa"] .stk-ap-nombre em,html[data-design="cristal"] .stk-ap-nombre em{ background:var(--verde-glow) !important; color:var(--verde) !important; }

/* ---------- 17. CHISPA: ajustes finos ---------- */
/* La "y" de la marca en verde, como el rayo del logo */
html[data-design="chispa"] .stk-appbar-brand span,html[data-design="chispa"] body .sidebar .logo h2 span,html[data-design="chispa"] body.auth :is(.brand-name,.cab h3) span{ color:#00B060 !important; -webkit-text-fill-color:#00B060 !important; background:none !important; }
/* Inicio de sesión: "Continuar con Google" visible en modo claro */
html[data-design="chispa"][data-palette="claro"] body.auth .btn-google{ background:#FFFFFF !important; color:#101018 !important; border:1.5px solid #D6D5E0 !important; border-radius:14px !important; font-weight:700 !important; }
html[data-design="chispa"][data-palette="claro"] body.auth .btn-google:hover{ background:#F3F3F7 !important; border-color:#C9C8D4 !important; }
html[data-design="chispa"][data-palette="noche"] body.auth .btn-google{ border-radius:14px !important; font-weight:700 !important; }
html[data-design="chispa"] body.auth .entrada > i:not(.ver-clave){ color:var(--txt-mut) !important; }
/* Inicio: los detalles de cada cifra se ocultan y se muestran con un botón pequeño */
html[data-design] .kpi-detalles-bar{ display:flex; justify-content:flex-end; margin:-6px 0 10px; }
html[data-design] .kpi-toggle{ display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 13px; border-radius:999px; cursor:pointer;
    background:var(--bg-card); color:var(--text-secondary); border:1px solid var(--border); font-size:.8rem; font-weight:700; }
html[data-design] .kpi-toggle:hover{ color:var(--text-primary); border-color:var(--border-hover); }
html[data-design] .kpi-toggle[aria-pressed="true"]{ background:var(--dz-act); color:var(--dz-act-fg); border-color:transparent; }
html[data-design] .kpi-financial-grid:not(.kpi-detalles) .kpi-footer{ display:none !important; }
html[data-design="chispa"] .kpi-financial-grid .kpi-value{ margin-bottom:0 !important; }

/* ---------- 18. CHISPA: estilo "Descargar catálogo" en todo el color ----------
   Píldora con degradado, ícono dentro de un círculo translúcido, brillo del
   mismo color debajo y un pequeño levantón al pasar el mouse. Texto oscuro
   sobre naranja, amarillo, verde y cian; blanco sobre morado y rojo (contraste). */
html[data-design="chispa"] :is(.btn-primary,.btn-stocky,.btn-primario,.btn-guardar,.btn-save,.btn-agregar,.btn-nueva-venta){ background:var(--dz-g-primario) !important; color:var(--dz-on-cta) !important; border:0 !important; border-radius:999px !important;
    box-shadow:0 6px 18px var(--dz-gl-primario) !important; transition:transform .2s ease, box-shadow .2s ease !important; }
html[data-design="chispa"] :is(.btn-primary,.btn-stocky,.btn-primario,.btn-guardar,.btn-save,.btn-agregar,.btn-nueva-venta):hover{ background:var(--dz-g-primario) !important; transform:translateY(-2px) !important; box-shadow:0 12px 28px var(--dz-gl-primario) !important; }
html[data-design="chispa"] .btn-success{ background:var(--dz-g-verde) !important; color:#062312 !important; border:0 !important; border-radius:999px !important; box-shadow:0 6px 18px var(--dz-gl-verde) !important; }
html[data-design="chispa"] .btn-danger{ background:var(--dz-g-rojo) !important; color:#FFFFFF !important; border:0 !important; border-radius:999px !important; box-shadow:0 6px 18px var(--dz-gl-rojo) !important; }
html[data-design="chispa"] .btn-warning{ background:var(--dz-g-amarillo) !important; color:#1F1600 !important; border:0 !important; border-radius:999px !important; box-shadow:0 6px 18px var(--dz-gl-amarillo) !important; }
html[data-design="chispa"] .btn-info{ background:var(--dz-g-cyan) !important; color:#03191C !important; border:0 !important; border-radius:999px !important; box-shadow:0 6px 18px var(--dz-gl-cyan) !important; }
html[data-design="chispa"] :is(.btn-success,.btn-danger,.btn-warning,.btn-info):hover{ transform:translateY(-2px); filter:saturate(1.1); }
html[data-design="chispa"] :is(.btn-secondary,.btn-cancel,.btn-outline-secondary,.btn-light){ border-radius:999px !important; }
html[data-design="chispa"] .btn-catalog{ background:var(--dz-g-morado) !important; box-shadow:0 6px 18px var(--dz-gl-morado) !important; color:#FFFFFF !important; }
/* Ícono dentro del botón: círculo translúcido (la clase la pone stocky-tema.js) */
html[data-design="chispa"] i.dz-ic{ width:26px; height:26px; border-radius:50%; display:inline-flex !important; align-items:center; justify-content:center;
    background:rgba(255,255,255,.32); font-size:.78rem; flex-shrink:0; margin:-2px 2px -2px -6px; }
html[data-design="chispa"] :is(.btn-danger,.btn-catalog) i.dz-ic{ background:rgba(255,255,255,.2); }
html[data-design="chispa"] :is(.btn-secondary,.btn-cancel,.btn-outline-secondary,.btn-light) i.dz-ic{ background:var(--bg-input); }

/* Íconos: IGUALES a los de "Mi negocio" (views/negocio.php), que se dejan tal cual.
   Cuadro de 16 px de radio, fondo del color al 8 %, borde al 15 % y el ícono en
   el color del tema. Los de los títulos copian el de Mi negocio (amarillo, 56 px);
   los de las cifras y tarjetas copian los de sus secciones, cada uno en su color. */
html[data-design="chispa"] :is(.kpi-card .kpi-icon,.card-icon-circle,.topbar :is(h1,h2,h3) > i:first-child){
    border-radius:var(--radius) !important; box-shadow:none !important; background-image:none !important; }
html[data-design="chispa"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child, html[data-design="chispa"] .page-head-icon{
    width:56px; height:56px; display:inline-flex !important; align-items:center; justify-content:center; flex-shrink:0;
    background:rgba(var(--ti-rgb),.08) !important; border:1px solid rgba(var(--ti-rgb),.16) !important; color:var(--ti-fg) !important;
    font-size:1.5rem !important; vertical-align:middle; border-radius:var(--radius) !important; }
html[data-design="chispa"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child{ --ti-rgb:139,61,240; --ti-fg:var(--ic-naranja); margin-right:14px !important; }
html[data-design="chispa"] .page-head-icon{ --ti-rgb:236,64,122; --ti-fg:var(--ic-rosa); }
/* Cada pantalla con su color (se reconoce por el ícono del título). Sin naranja. */
html[data-design="chispa"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child:is(.fa-house,.fa-truck){ --ti-rgb:139,61,240; --ti-fg:var(--ic-morado); }
html[data-design="chispa"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child:is(.fa-box,.fa-history,.fa-box-open){ --ti-rgb:20,184,166; --ti-fg:var(--ic-teal); }
html[data-design="chispa"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child:is(.fa-cash-register,.fa-sack-dollar,.fa-plus-circle){ --ti-rgb:0,200,110; --ti-fg:var(--ic-verde); }
html[data-design="chispa"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child:is(.fa-user-friends,.fa-users-gear,.fa-user-edit){ --ti-rgb:0,184,212; --ti-fg:var(--ic-cyan); }
html[data-design="chispa"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child:is(.fa-hand-holding-dollar,.fa-trophy){ --ti-rgb:236,64,122; --ti-fg:var(--ic-rosa); }
html[data-design="chispa"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child:is(.fa-hand-holding-usd,.fa-wallet,.fa-pen-to-square){ --ti-rgb:108,92,231; --ti-fg:var(--ic-indigo); }
html[data-design="chispa"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child:is(.fa-arrow-trend-down){ --ti-rgb:239,68,68; --ti-fg:var(--ic-rojo); }
html[data-design="chispa"] .page-head-icon{ --ti-rgb:139,61,240; --ti-fg:var(--ic-morado); }
html[data-design="chispa"] .kpi-card .kpi-icon{ width:44px !important; height:44px !important; font-size:1.2rem !important; }
html[data-design="chispa"] .kpi-card.kpi-ventas .kpi-icon{ background:rgba(var(--dz-p-rgb),.08) !important; border:1px solid rgba(var(--dz-p-rgb),.16) !important; color:var(--ic-naranja) !important; }
html[data-design="chispa"] .kpi-card.kpi-ganancias .kpi-icon{ background:rgba(0,200,110,.08) !important; border:1px solid rgba(0,200,110,.16) !important; color:var(--ic-verde) !important; }
html[data-design="chispa"] .kpi-card.kpi-caja .kpi-icon{ background:rgba(108,92,231,.08) !important; border:1px solid rgba(108,92,231,.16) !important; color:var(--ic-indigo) !important; }
html[data-design="chispa"] .kpi-card.kpi-margen .kpi-icon{ background:rgba(0,184,212,.08) !important; border:1px solid rgba(0,184,212,.16) !important; color:var(--ic-cyan) !important; }
html[data-design="chispa"] .kpi-card.kpi-deuda .kpi-icon{ background:rgba(236,64,122,.08) !important; border:1px solid rgba(236,64,122,.16) !important; color:var(--ic-rosa) !important; }
html[data-design="chispa"] .card-icon-circle{ width:44px !important; height:44px !important; font-size:1.2rem !important;
    background:rgba(var(--dz-p-rgb),.08) !important; border:1px solid rgba(var(--dz-p-rgb),.15) !important; color:var(--naranja) !important; }
html[data-design="chispa"] .card-icon-circle:is(.purple,.historial){ background:rgba(213,0,249,.08) !important; border-color:rgba(213,0,249,.15) !important; color:var(--purpura) !important; }
html[data-design="chispa"] .card-icon-circle:is(.cyan,.calculator){ background:rgba(0,229,255,.08) !important; border-color:rgba(0,229,255,.15) !important; color:var(--cyan) !important; }
html[data-design="chispa"] .card-icon-circle:is(.green,.verde,.editar){ background:rgba(0,230,118,.08) !important; border-color:rgba(0,230,118,.15) !important; color:var(--verde) !important; }
html[data-design="chispa"] .card-icon-circle:is(.yellow,.amarillo){ background:rgba(236,64,122,.08) !important; border-color:rgba(236,64,122,.16) !important; color:var(--ic-rosa) !important; }
/* Pestaña activa (Mi negocio) y botones amarillos: amarillo vivo con letra oscura */
html[data-design="chispa"] .tab-btn.active{ background:var(--dz-g-primario) !important; color:var(--dz-on-cta) !important; box-shadow:0 6px 16px var(--dz-gl-primario) !important; }
html[data-design="chispa"] .upsell-btn{ background:var(--dz-g-amarillo) !important; color:#1F1600 !important; }

/* Menú lateral: la opción activa como píldora con degradado */
html[data-design="chispa"] body .sidebar nav .nav-item.active{ background:var(--dz-g-primario) !important; color:var(--dz-on-cta) !important; border-radius:999px !important; box-shadow:0 6px 18px var(--dz-gl-primario) !important; }
html[data-design="chispa"] body .sidebar nav .nav-item.active i{ width:26px !important; height:26px !important; border-radius:50% !important; background:rgba(255,255,255,.32) !important;
    display:inline-flex !important; align-items:center; justify-content:center; color:#FFFFFF !important; font-size:.8rem !important; margin-left:-4px !important; }
html[data-design="chispa"] body .sidebar nav .nav-item{ border-radius:999px !important; }

/* Plan, botón central de la app y "Ver detalles" */
html[data-design="chispa"] .stk-plan-pill{ background:var(--dz-g-amarillo) !important; color:#1F1600 !important; box-shadow:0 6px 16px var(--dz-gl-amarillo) !important; }
html[data-design="chispa"] .stk-plan-pill i{ color:#1F1600 !important; }
html[data-design="chispa"] .app-bottomnav .nav-center{ background:var(--dz-g-primario) !important; color:var(--dz-on-cta) !important; box-shadow:0 10px 24px var(--dz-gl-primario) !important; }
html[data-design="chispa"] .kpi-toggle[aria-pressed="true"]{ background:var(--dz-g-primario); color:var(--dz-on-cta); box-shadow:0 6px 16px var(--dz-gl-primario); border-color:transparent; }
html[data-design="chispa"] body.auth .btn-primario{ background:var(--dz-g-primario) !important; color:var(--dz-on-cta) !important; border-radius:999px !important;
    box-shadow:0 8px 22px rgba(var(--dz-p-rgb),.35) !important; }
@media (prefers-reduced-motion: reduce){ html[data-design="chispa"] :is(.btn-primary,.btn-stocky,.btn-primario,.btn-guardar,.btn-save,.btn-agregar,.btn-nueva-venta,.btn-success,.btn-danger,.btn-warning,.btn-info):hover{ transform:none !important; } }

/* ---------- 19. CHISPA sin naranja: tintes fijos de las vistas ----------
   Algunas vistas traen fondos naranja fijos (rgba(255,107,53,...)) detrás de
   textos que usan var(--naranja). En Chispa --naranja es morado, así que el
   fondo también se pasa al morado suave para que no queden mezclados. */
html[data-design="chispa"] :is(.stat-c1 .stat-mini-icon,.id-badge,.kpi-card.naranja .icon,.margen-bajo,.chip,.avatar.fiado,.meta-prov,.badge-naranja,.section-head .sh-icon.identidad){
    background:var(--naranja-glow) !important; border-color:rgba(var(--dz-p-rgb),.16) !important; }
html[data-design="chispa"] .table tfoot td{ background:rgba(var(--dz-p-rgb),.05) !important; border-top-color:rgba(var(--dz-p-rgb),.2) !important; }
html[data-design="chispa"] :is(.form-control,.form-select,input,select,textarea):hover{ border-color:rgba(var(--dz-p-rgb),.3) !important; }
html[data-design="chispa"] body.auth .entrada input:focus{ border-color:var(--dz-cta) !important; box-shadow:0 0 0 3px rgba(var(--dz-p-rgb),.16) !important; }
html[data-design="chispa"] body.auth .entrada input:focus ~ i{ color:var(--dz-cta) !important; }
html[data-design="chispa"] body.auth .left-hero .accent{ color:var(--naranja) !important; background:none !important; -webkit-text-fill-color:currentColor !important; }
html[data-design="chispa"] body.auth :is(.feature-ic.t2,.modal-icono){ background:var(--naranja-glow) !important; border-color:rgba(var(--dz-p-rgb),.2) !important; color:var(--naranja) !important; }

/* ---------- 20. CHISPA: encabezados, botón "Nuevo producto" y Fiados ---------- */
/* Encabezado de cada pantalla: ícono a la izquierda, título y subtítulo a su
   derecha y centrados con él (antes el subtítulo quedaba debajo del ícono). */
html[data-design="chispa"] :is(.topbar-left,.topbar,.page-header,.enc .tit):has(> :is(h1,h2,h3) > i:first-child):not(:has(> .back-btn)){ position:relative !important; display:flex !important; flex-direction:column !important;
    align-items:flex-start !important; justify-content:center !important; gap:0 !important; padding-left:70px !important; min-height:56px !important; }
html[data-design="chispa"] :is(.topbar-left,.topbar,.page-header,.enc .tit):not(:has(> .back-btn)) > :is(h1,h2,h3) > i:first-child{ position:absolute !important; left:0 !important; top:50% !important;
    transform:translateY(-50%) !important; margin:0 !important; }
html[data-design="chispa"] :is(.topbar-left,.topbar,.page-header,.enc .tit) > :is(h1,h2,h3){ margin:0 !important; line-height:1.15 !important; }
html[data-design="chispa"] :is(.topbar-left,.topbar,.page-header,.enc .tit):has(> :is(h1,h2,h3) > i:first-child) > :is(p,.sub){ display:block !important; margin:3px 0 0 !important; }

/* Botón flotante "+" de Productos: el círculo morado de antes, más grande */
html[data-design="chispa"] a.fab{ width:62px !important; height:62px !important; padding:0 !important; border-radius:50% !important;
    right:28px !important; bottom:28px !important; font-size:1.45rem !important;
    background:var(--dz-g-primario) !important; color:var(--dz-on-cta) !important; box-shadow:0 10px 26px var(--dz-gl-primario) !important; }
html[data-design="chispa"] a.fab:hover{ transform:scale(1.06) !important; }
html[data-design="chispa"] a.fab .fab-txt{ display:none !important; }
@media (max-width: 640px){
    html[data-design="chispa"] a.fab{ width:58px !important; height:58px !important; right:16px !important; bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Fiados: "Nuevo fiado" con el mismo morado de los botones principales; al lado,
   "Historial" en píldora blanca con borde morado. Todo en la misma gama. */
html[data-design="chispa"] .btn-nuevo-fiado{ min-height:48px; padding:0 22px 0 10px !important; gap:10px !important; border-radius:999px !important; border:0 !important;
    background:var(--dz-g-primario) !important; color:var(--dz-on-cta) !important; font-weight:800 !important;
    box-shadow:0 8px 22px var(--dz-gl-primario) !important; }
html[data-design="chispa"] .btn-nuevo-fiado:hover{ transform:translateY(-2px); }
html[data-design="chispa"] .btn-nuevo-fiado > i:first-child{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.22); font-size:.85rem; }
html[data-design="chispa"] .btn-historial{ min-height:48px; padding:0 20px 0 10px !important; gap:10px !important; border-radius:999px !important;
    background:var(--bg-card) !important; color:var(--naranja) !important; border:1.5px solid rgba(var(--dz-p-rgb),.35) !important; font-weight:800 !important; }
html[data-design="chispa"] .btn-historial:hover{ background:var(--naranja-glow) !important; }
html[data-design="chispa"] .btn-historial > i:first-child{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:var(--naranja-glow); font-size:.85rem; }
[data-palette="noche"][data-design="chispa"] .btn-historial{ border-color:rgba(var(--dz-p-rgb),.45) !important; }

/* Fiados: íconos de las tarjetas de resumen como los de Mi negocio, cada uno en su color */
html[data-design="chispa"] .stat-ico{ width:46px !important; height:46px !important; border-radius:var(--radius) !important; font-size:1.15rem !important; border:1px solid transparent; }
html[data-design="chispa"] .stat-ico.cobrar{ background:rgba(236,64,122,.08) !important; border-color:rgba(236,64,122,.16) !important; color:var(--ic-rosa) !important; }
html[data-design="chispa"] .stat-ico.total{ background:rgba(108,92,231,.08) !important; border-color:rgba(108,92,231,.16) !important; color:var(--ic-indigo) !important; }
html[data-design="chispa"] .stat-ico.pend{ background:rgba(239,68,68,.08) !important; border-color:rgba(239,68,68,.16) !important; color:var(--ic-rojo) !important; }
html[data-design="chispa"] .stat-ico.pag{ background:rgba(0,200,110,.08) !important; border-color:rgba(0,200,110,.16) !important; color:var(--ic-verde) !important; }

/* Productos: chips de categoría. Sueltos en blanco; el elegido en morado.
   (Antes el elegido salía en verde sobre chips morados y no combinaba.) */
html[data-design="chispa"] .cat-chip{ background:var(--bg-card) !important; color:var(--text-secondary) !important; border:1px solid var(--border) !important; border-radius:999px !important; }
html[data-design="chispa"] .cat-chip .cat-count{ background:var(--bg-input) !important; color:var(--text-muted) !important; }
html[data-design="chispa"] .cat-chip:hover{ border-color:rgba(var(--dz-p-rgb),.35) !important; color:var(--text-primary) !important; }
html[data-design="chispa"] .cat-chip.active{ background:var(--dz-g-primario) !important; color:var(--dz-on-cta) !important; border-color:transparent !important; box-shadow:0 6px 16px var(--dz-gl-primario) !important; }
html[data-design="chispa"] .cat-chip.active .cat-count{ background:rgba(255,255,255,.25) !important; color:var(--dz-on-cta) !important; }
html[data-design="chispa"] .cat-chip.active i{ color:var(--dz-on-cta) !important; }
html[data-design="chispa"] .section-head-left .count strong{ color:var(--ic-morado) !important; }

/* Pantallas con botón de volver (Nuevo producto, Editar producto, Editar cliente):
   volver, ícono y título en una sola fila. */
html[data-design] .topbar-left:has(> .back-btn){ flex-direction:row !important; align-items:center !important; gap:14px !important; padding-left:0 !important; min-height:0; }
html[data-design] .topbar-left:has(> .back-btn) > :is(h1,h2,h3){ display:flex; align-items:center; }
html[data-design] .topbar-left:has(> .back-btn) > :is(h1,h2,h3) > i:first-child{ position:static !important; transform:none !important; margin-right:14px !important; }
html[data-design] .topbar-left > .back-btn{ width:44px; height:44px; flex-shrink:0; border-radius:14px !important; background:var(--bg-card) !important;
    border:1px solid var(--border) !important; color:var(--text-secondary) !important; display:inline-flex; align-items:center; justify-content:center; }
html[data-design] .topbar-left > .back-btn:hover{ color:var(--text-primary) !important; border-color:var(--border-hover) !important; }
html[data-design] .topbar:has(> .topbar-left > .back-btn){ justify-content:flex-start !important; }
html[data-design] .topbar-left:has(> .back-btn){ justify-content:flex-start !important; margin-left:0 !important; margin-right:auto !important; text-align:left !important; }
/* En el título, el "+" va solo (el ícono de círculo relleno se veía como un círculo dentro de un cuadro) */
html[data-design] .topbar :is(h1,h2,h3) > i.fa-plus-circle:first-child::before{ content:"\f067"; }
/* Botones principales en letra normal (antes algunos salían en MAYÚSCULAS) */
html[data-design="chispa"] :is(.btn-primary,.btn-stocky,.btn-primario,.btn-guardar,.btn-save,.btn-agregar,.btn-nueva-venta){ text-transform:none !important; letter-spacing:0 !important; }
@media (max-width: 640px){
    html[data-design] .topbar-left:has(> .back-btn) > :is(h1,h2,h3){ font-size:1.35rem !important; }
    html[data-design] .topbar-left:has(> .back-btn) > :is(h1,h2,h3) > i:first-child{ width:46px !important; height:46px !important; font-size:1.2rem !important; margin-right:10px !important; }
}

/* ---------- 21. ARREGLOS GENERALES (todas las apariencias) ---------- */
/* Filtros de periodo y pestañas elegidas: en modo oscuro salían en blanco
   sobre un color claro y casi no se leían. */
html[data-design] :is(.filtro-pildora,.btn-filtro,.periodo-tab,.tab-periodo,.filtro-btn).active{ background:var(--dz-cta) !important; color:var(--dz-on-cta) !important; border-color:transparent !important; }
html[data-design="chispa"] :is(.filtro-pildora,.btn-filtro,.periodo-tab,.tab-periodo,.filtro-btn).active{ background:var(--dz-g-primario) !important; color:var(--dz-on-cta) !important; }
html[data-design="carton"] :is(.filtro-pildora,.btn-filtro,.periodo-tab,.tab-periodo,.filtro-btn).active{ border:2px solid #000 !important; }

/* Inicio → "Resumen de Operaciones e Inventario" en el celular: las cifras se
   salían de la tarjeta y los textos quedaban cortados con "...". */
@media (max-width: 640px){
    html[data-design] .kpi-mini-card{ flex-direction:column !important; align-items:flex-start !important; gap:10px !important; padding:14px !important; }
    html[data-design] .kmi-info{ width:100%; }
    html[data-design] .kmi-label{ text-transform:none !important; letter-spacing:0 !important; font-size:.8rem !important; line-height:1.25; }
    html[data-design] .kmi-val{ font-size:clamp(1rem, 5.2vw, 1.25rem) !important; overflow-wrap:anywhere; }
    html[data-design] .kmi-sub{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; line-height:1.3; }
}
/* En la apariencia principal, esos íconos con el estilo de "Mi negocio" */
html[data-design="chispa"] .kmi-icon{ border-radius:var(--radius) !important; border:1px solid transparent; }
html[data-design="chispa"] .kmi-icon.icon-blue{ background:rgba(20,184,166,.08) !important; border-color:rgba(20,184,166,.16); color:var(--ic-teal) !important; }
html[data-design="chispa"] .kmi-icon.icon-green{ background:rgba(0,200,110,.08) !important; border-color:rgba(0,200,110,.16); color:var(--ic-verde) !important; }
html[data-design="chispa"] .kmi-icon.icon-purple{ background:rgba(108,92,231,.08) !important; border-color:rgba(108,92,231,.16); color:var(--ic-indigo) !important; }
html[data-design="chispa"] .kmi-icon.icon-cyan{ background:rgba(0,184,212,.08) !important; border-color:rgba(0,184,212,.16); color:var(--ic-cyan) !important; }

/* ---------- 22. CHISPA: PALETAS DE COLOR ----------
   El usuario elige el color de la app en Tema > Apariencia (solo en la
   apariencia principal). html[data-paleta] = uva (por defecto, los valores
   de arriba) | frambuesa | esmeralda | oceano | grafito.
   Cambian los botones, el menú activo, los enlaces y acentos, el foco
   de los campos y la línea principal de los gráficos. Los colores de
   cada sección (íconos de títulos y cifras) no cambian. */
html[data-design="chispa"][data-palette="claro"][data-paleta="frambuesa"]{
    --dz-g-primario:linear-gradient(135deg,#D6246E,#B8175E); --dz-gl-primario:rgba(214,36,110,.30);
    --dz-cta:#D6246E; --dz-cta-hover:#C01D62; --dz-on-cta:#FFFFFF;
    --naranja:#B8175E !important; --naranja-glow:#FDE3EE !important;
    --dz-act:#FDE3EE; --dz-act-fg:#A3134F; --dz-focus:#D6246E;
    --dz-c1:#D6246E; --dz-p-rgb:214,36,110;
}
html[data-design="chispa"][data-palette="noche"][data-paleta="frambuesa"]{
    --dz-g-primario:linear-gradient(135deg,#D6246E,#B8175E); --dz-gl-primario:rgba(214,36,110,.40);
    --dz-cta:#D6246E; --dz-cta-hover:#E0317A; --dz-on-cta:#FFFFFF;
    --naranja:#FF7AB0 !important; --naranja-glow:rgba(236,64,122,.16) !important;
    --dz-act:#D6246E; --dz-act-fg:#FFFFFF; --dz-focus:#FF7AB0;
    --dz-c1:#FF5C9A; --dz-p-rgb:255,122,176;
}
html[data-design="chispa"][data-palette="claro"][data-paleta="esmeralda"]{
    --dz-g-primario:linear-gradient(135deg,#0A845E,#06694A); --dz-gl-primario:rgba(10,132,94,.28);
    --dz-cta:#0A845E; --dz-cta-hover:#087453; --dz-on-cta:#FFFFFF;
    --naranja:#067A55 !important; --naranja-glow:#DDF7EC !important;
    --dz-act:#DDF7EC; --dz-act-fg:#05603F; --dz-focus:#0A845E;
    --dz-c1:#0E9F6E; --dz-c2:#8B3DF0; --dz-p-rgb:10,132,94;
}
html[data-design="chispa"][data-palette="noche"][data-paleta="esmeralda"]{
    --dz-g-primario:linear-gradient(135deg,#0A845E,#06694A); --dz-gl-primario:rgba(16,185,129,.32);
    --dz-cta:#0A845E; --dz-cta-hover:#0B9468; --dz-on-cta:#FFFFFF;
    --naranja:#34D399 !important; --naranja-glow:rgba(16,185,129,.14) !important;
    --dz-act:#0A845E; --dz-act-fg:#FFFFFF; --dz-focus:#34D399;
    --dz-c1:#34D399; --dz-c2:#B14DFF; --dz-p-rgb:52,211,153;
}
html[data-design="chispa"][data-palette="claro"][data-paleta="oceano"]{
    --dz-g-primario:linear-gradient(135deg,#0A7EA0,#0B5F7C); --dz-gl-primario:rgba(10,126,160,.28);
    --dz-cta:#0A7EA0; --dz-cta-hover:#096F8D; --dz-on-cta:#FFFFFF;
    --naranja:#0B6C8A !important; --naranja-glow:#DDF3F8 !important;
    --dz-act:#DDF3F8; --dz-act-fg:#0A5A73; --dz-focus:#0A7EA0;
    --dz-c1:#0A8FB5; --dz-p-rgb:10,126,160;
}
html[data-design="chispa"][data-palette="noche"][data-paleta="oceano"]{
    --dz-g-primario:linear-gradient(135deg,#0A7EA0,#0B5F7C); --dz-gl-primario:rgba(34,178,214,.32);
    --dz-cta:#0A7EA0; --dz-cta-hover:#0B8EB4; --dz-on-cta:#FFFFFF;
    --naranja:#3DD6F0 !important; --naranja-glow:rgba(61,214,240,.13) !important;
    --dz-act:#0A7EA0; --dz-act-fg:#FFFFFF; --dz-focus:#3DD6F0;
    --dz-c1:#3DD6F0; --dz-p-rgb:61,214,240;
}
html[data-design="chispa"][data-palette="claro"][data-paleta="grafito"]{
    --dz-g-primario:linear-gradient(135deg,#2E2E3A,#16161E); --dz-gl-primario:rgba(22,22,30,.25);
    --dz-cta:#23232E; --dz-cta-hover:#34343F; --dz-on-cta:#FFFFFF;
    --naranja:#2E2E3A !important; --naranja-glow:#EDEDF2 !important;
    --dz-act:#EDEDF2; --dz-act-fg:#16161E; --dz-focus:#2E2E3A;
    --dz-c1:#2E2E3A; --dz-p-rgb:46,46,58;
}
html[data-design="chispa"][data-palette="noche"][data-paleta="grafito"]{
    --dz-g-primario:linear-gradient(135deg,#F4F4F8,#D9D9E3); --dz-gl-primario:rgba(255,255,255,.18);
    --dz-cta:#EDEDF3; --dz-cta-hover:#FFFFFF; --dz-on-cta:#111118;
    --naranja:#E4E4EC !important; --naranja-glow:rgba(255,255,255,.10) !important;
    --dz-act:#EDEDF3; --dz-act-fg:#111118; --dz-focus:#E4E4EC;
    --dz-c1:#E4E4EC; --dz-p-rgb:228,228,236;
}
/* Muestras de color del panel Apariencia (solo con la apariencia principal) */
.stk-ap-colores-sec{ display:block; }
.stk-ap-colores{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin-bottom:18px; }
.stk-ap-color{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border:1px solid var(--border); border-radius:16px;
    background:var(--bg-card); color:var(--text-secondary); font:700 .74rem/1.2 var(--dz-font); cursor:pointer; }
.stk-ap-color .muestra{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#FFFFFF; font-size:.8rem; }
.stk-ap-color .muestra i{ opacity:0; }
.stk-ap-color.activo{ border-color:var(--dz-focus); box-shadow:0 0 0 2px var(--dz-focus); color:var(--text-primary); }
.stk-ap-color.activo .muestra i{ opacity:1; }
.stk-ap-color[data-paleta="uva"] .muestra{ background:linear-gradient(135deg,#8B3DF0,#6C4DFF); }
.stk-ap-color[data-paleta="frambuesa"] .muestra{ background:linear-gradient(135deg,#D6246E,#B8175E); }
.stk-ap-color[data-paleta="esmeralda"] .muestra{ background:linear-gradient(135deg,#0A845E,#06694A); }
.stk-ap-color[data-paleta="oceano"] .muestra{ background:linear-gradient(135deg,#0A7EA0,#0B5F7C); }
.stk-ap-color[data-paleta="grafito"] .muestra{ background:linear-gradient(135deg,#2E2E3A,#16161E); }
@media (max-width: 380px){ .stk-ap-colores{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* ---------- 23. ENCABEZADOS EN LAS DEMÁS APARIENCIAS ----------
   Mismo orden que la principal (ícono en un cuadro a la izquierda, título y
   subtítulo a su derecha), con el estilo y el color de cada apariencia. */
html[data-design]:not([data-design="chispa"]) :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child, html[data-design]:not([data-design="chispa"]) .page-head-icon{ width:52px !important; height:52px !important; display:inline-flex !important; align-items:center; justify-content:center; flex-shrink:0;
    background:var(--naranja-glow) !important; color:var(--naranja) !important; font-size:1.3rem !important; border-radius:var(--radius) !important; vertical-align:middle; }
html[data-design="algodon"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child, html[data-design="algodon"] .page-head-icon{ border-radius:50% !important; }
html[data-design="carton"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child, html[data-design="carton"] .page-head-icon{ border:var(--dz-bw) solid var(--border) !important; box-shadow:3px 3px 0 var(--dz-sh) !important; }
html[data-design="cristal"] :is(.topbar :is(h1,h2,h3), .page-header :is(h1,h2), .enc .tit h1) > i:first-child, html[data-design="cristal"] .page-head-icon{ background:var(--dz-glass) !important; border:1px solid var(--dz-glass-bd) !important;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
html[data-design]:not([data-design="chispa"]) :is(.topbar-left,.topbar,.page-header,.enc .tit):has(> :is(h1,h2,h3) > i:first-child):not(:has(> .back-btn)){ position:relative !important; display:flex !important; flex-direction:column !important;
    align-items:flex-start !important; justify-content:center !important; gap:0 !important; padding-left:66px !important; min-height:52px !important; }
html[data-design]:not([data-design="chispa"]) :is(.topbar-left,.topbar,.page-header,.enc .tit):not(:has(> .back-btn)) > :is(h1,h2,h3) > i:first-child{ position:absolute !important; left:0 !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important; }
html[data-design]:not([data-design="chispa"]) :is(.topbar-left,.topbar,.page-header,.enc .tit) > :is(h1,h2,h3){ margin:0 !important; line-height:1.15 !important; }
html[data-design]:not([data-design="chispa"]) :is(.topbar-left,.topbar,.page-header,.enc .tit):has(> :is(h1,h2,h3) > i:first-child) > :is(p,.sub){ display:block !important; margin:3px 0 0 !important; }
html[data-design]:not([data-design="chispa"]) .topbar-left:has(> .back-btn) > :is(h1,h2,h3) > i:first-child{ position:static !important; transform:none !important; margin-right:12px !important; }

/* Buscador de listas (Fiados, Abonos): el campo iba dentro de otra caja */
html[data-design] .busqueda-rapida{ display:flex !important; align-items:center; gap:10px; min-height:46px; padding:0 14px !important;
    background:var(--bg-input) !important; border:1px solid var(--border) !important; border-radius:var(--radius-sm) !important; }
html[data-design] .busqueda-rapida:focus-within{ border-color:var(--dz-focus) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--dz-focus) 22%, transparent) !important; }
html[data-design] .busqueda-rapida input{ flex:1; width:100% !important; min-width:0; height:44px; padding:0 !important; background:transparent !important;
    border:0 !important; box-shadow:none !important; border-radius:0 !important; outline:none !important; font-size:.95rem !important; color:var(--text-primary) !important; }
html[data-design] .busqueda-rapida i{ color:var(--text-muted) !important; }
html[data-design="carton"] .busqueda-rapida{ border:var(--dz-bw) solid var(--border) !important; }
html[data-design="cristal"] .busqueda-rapida{ background:var(--dz-glass) !important; border-color:var(--dz-glass-bd) !important; }
@media (max-width: 640px){ html[data-design] .header-lista:has(.busqueda-rapida){ flex-direction:column; align-items:stretch !important; gap:12px; } }

/* ---------- 24. PALETAS EN LAS DEMÁS APARIENCIAS ----------
   "Original" = los colores propios de cada apariencia (por defecto).
   Uva, Frambuesa, Esmeralda, Océano y Grafito cambian botones, acentos,
   foco y la opción activa del menú, cada una con el estilo de su diseño. */
html[data-design="algodon"][data-palette="claro"][data-paleta="uva"]{ --dz-cta:#8B3DF0; --dz-cta-hover:#7A2FE0; --dz-on-cta:#FFFFFF;
    --naranja:#6A24C2 !important; --naranja-glow:#E9DDFF !important; --dz-focus:#8B3DF0; --dz-act:#E9DDFF; --dz-act-fg:#4B1FA0; }
html[data-design="algodon"][data-palette="noche"][data-paleta="uva"]{ --dz-cta:#C98BFF; --dz-cta-hover:#C98BFF; --dz-on-cta:#16151F;
    --naranja:#C98BFF !important; --naranja-glow:#3C3180 !important; --dz-focus:#C98BFF; --dz-act:#3C3180; --dz-act-fg:#D3C9FF; }
html[data-design="carton"][data-palette="claro"][data-paleta="uva"]{ --dz-cta:#B9A6FF; --dz-cta-hover:#B9A6FF; --dz-on-cta:#000000;
    --naranja:#6A24C2 !important; --naranja-glow:#B9A6FF !important; --dz-focus:#B9A6FF; }
html[data-design="carton"][data-palette="noche"][data-paleta="uva"]{ --dz-cta:#B9A6FF; --dz-cta-hover:#B9A6FF; --dz-on-cta:#000000;
    --naranja:#C98BFF !important; --naranja-glow:#B9A6FF !important; --dz-focus:#C98BFF; --dz-sh:#B9A6FF; }
html[data-design="cristal"][data-palette="claro"][data-paleta="uva"]{ --dz-cta:#8B3DF0; --dz-cta-hover:#7A2FE0; --dz-on-cta:#FFFFFF;
    --naranja:#6A24C2 !important; --naranja-glow:rgba(139,61,240,0.14) !important; --dz-focus:#8B3DF0; --dz-act:#8B3DF0; --dz-act-fg:#FFFFFF; }
html[data-design="cristal"][data-palette="noche"][data-paleta="uva"]{ --dz-cta:#C98BFF; --dz-cta-hover:#C98BFF; --dz-on-cta:#0A0D1A;
    --naranja:#C98BFF !important; --naranja-glow:rgba(201,139,255,0.14) !important; --dz-focus:#C98BFF; --dz-act:#C98BFF; --dz-act-fg:#0A0D1A; }
html[data-design="algodon"][data-palette="claro"][data-paleta="frambuesa"]{ --dz-cta:#D6246E; --dz-cta-hover:#C01D62; --dz-on-cta:#FFFFFF;
    --naranja:#B8175E !important; --naranja-glow:#FFD6E6 !important; --dz-focus:#D6246E; --dz-act:#FFD6E6; --dz-act-fg:#8A1045; }
html[data-design="algodon"][data-palette="noche"][data-paleta="frambuesa"]{ --dz-cta:#FF7AB0; --dz-cta-hover:#FF7AB0; --dz-on-cta:#16151F;
    --naranja:#FF7AB0 !important; --naranja-glow:#5A1834 !important; --dz-focus:#FF7AB0; --dz-act:#5A1834; --dz-act-fg:#FFB3D1; }
html[data-design="carton"][data-palette="claro"][data-paleta="frambuesa"]{ --dz-cta:#FF7EB6; --dz-cta-hover:#FF7EB6; --dz-on-cta:#000000;
    --naranja:#B8175E !important; --naranja-glow:#FF7EB6 !important; --dz-focus:#FF7EB6; }
html[data-design="carton"][data-palette="noche"][data-paleta="frambuesa"]{ --dz-cta:#FF7EB6; --dz-cta-hover:#FF7EB6; --dz-on-cta:#000000;
    --naranja:#FF7AB0 !important; --naranja-glow:#FF7EB6 !important; --dz-focus:#FF7AB0; --dz-sh:#FF7EB6; }
html[data-design="cristal"][data-palette="claro"][data-paleta="frambuesa"]{ --dz-cta:#D6246E; --dz-cta-hover:#C01D62; --dz-on-cta:#FFFFFF;
    --naranja:#B8175E !important; --naranja-glow:rgba(214,36,110,0.14) !important; --dz-focus:#D6246E; --dz-act:#D6246E; --dz-act-fg:#FFFFFF; }
html[data-design="cristal"][data-palette="noche"][data-paleta="frambuesa"]{ --dz-cta:#FF7AB0; --dz-cta-hover:#FF7AB0; --dz-on-cta:#0A0D1A;
    --naranja:#FF7AB0 !important; --naranja-glow:rgba(255,122,176,0.14) !important; --dz-focus:#FF7AB0; --dz-act:#FF7AB0; --dz-act-fg:#0A0D1A; }
html[data-design="algodon"][data-palette="claro"][data-paleta="esmeralda"]{ --dz-cta:#0A845E; --dz-cta-hover:#087453; --dz-on-cta:#FFFFFF;
    --naranja:#067A55 !important; --naranja-glow:#C9F2DF !important; --dz-focus:#0A845E; --dz-act:#C9F2DF; --dz-act-fg:#05603F; }
html[data-design="algodon"][data-palette="noche"][data-paleta="esmeralda"]{ --dz-cta:#34D399; --dz-cta-hover:#34D399; --dz-on-cta:#16151F;
    --naranja:#34D399 !important; --naranja-glow:#0F4A35 !important; --dz-focus:#34D399; --dz-act:#0F4A35; --dz-act-fg:#86E5B3; }
html[data-design="carton"][data-palette="claro"][data-paleta="esmeralda"]{ --dz-cta:#3BD16F; --dz-cta-hover:#3BD16F; --dz-on-cta:#000000;
    --naranja:#067A55 !important; --naranja-glow:#3BD16F !important; --dz-focus:#3BD16F; }
html[data-design="carton"][data-palette="noche"][data-paleta="esmeralda"]{ --dz-cta:#3BD16F; --dz-cta-hover:#3BD16F; --dz-on-cta:#000000;
    --naranja:#34D399 !important; --naranja-glow:#3BD16F !important; --dz-focus:#34D399; --dz-sh:#3BD16F; }
html[data-design="cristal"][data-palette="claro"][data-paleta="esmeralda"]{ --dz-cta:#0A845E; --dz-cta-hover:#087453; --dz-on-cta:#FFFFFF;
    --naranja:#067A55 !important; --naranja-glow:rgba(10,132,94,0.14) !important; --dz-focus:#0A845E; --dz-act:#0A845E; --dz-act-fg:#FFFFFF; }
html[data-design="cristal"][data-palette="noche"][data-paleta="esmeralda"]{ --dz-cta:#34D399; --dz-cta-hover:#34D399; --dz-on-cta:#0A0D1A;
    --naranja:#34D399 !important; --naranja-glow:rgba(52,211,153,0.14) !important; --dz-focus:#34D399; --dz-act:#34D399; --dz-act-fg:#0A0D1A; }
html[data-design="algodon"][data-palette="claro"][data-paleta="oceano"]{ --dz-cta:#0A7EA0; --dz-cta-hover:#096F8D; --dz-on-cta:#FFFFFF;
    --naranja:#0B6C8A !important; --naranja-glow:#CDEFF7 !important; --dz-focus:#0A7EA0; --dz-act:#CDEFF7; --dz-act-fg:#0A5A73; }
html[data-design="algodon"][data-palette="noche"][data-paleta="oceano"]{ --dz-cta:#3DD6F0; --dz-cta-hover:#3DD6F0; --dz-on-cta:#16151F;
    --naranja:#3DD6F0 !important; --naranja-glow:#0E3F52 !important; --dz-focus:#3DD6F0; --dz-act:#0E3F52; --dz-act-fg:#9BE7F5; }
html[data-design="carton"][data-palette="claro"][data-paleta="oceano"]{ --dz-cta:#4FD1E8; --dz-cta-hover:#4FD1E8; --dz-on-cta:#000000;
    --naranja:#0B6C8A !important; --naranja-glow:#4FD1E8 !important; --dz-focus:#4FD1E8; }
html[data-design="carton"][data-palette="noche"][data-paleta="oceano"]{ --dz-cta:#4FD1E8; --dz-cta-hover:#4FD1E8; --dz-on-cta:#000000;
    --naranja:#3DD6F0 !important; --naranja-glow:#4FD1E8 !important; --dz-focus:#3DD6F0; --dz-sh:#4FD1E8; }
html[data-design="cristal"][data-palette="claro"][data-paleta="oceano"]{ --dz-cta:#0A7EA0; --dz-cta-hover:#096F8D; --dz-on-cta:#FFFFFF;
    --naranja:#0B6C8A !important; --naranja-glow:rgba(10,126,160,0.14) !important; --dz-focus:#0A7EA0; --dz-act:#0A7EA0; --dz-act-fg:#FFFFFF; }
html[data-design="cristal"][data-palette="noche"][data-paleta="oceano"]{ --dz-cta:#3DD6F0; --dz-cta-hover:#3DD6F0; --dz-on-cta:#0A0D1A;
    --naranja:#3DD6F0 !important; --naranja-glow:rgba(61,214,240,0.14) !important; --dz-focus:#3DD6F0; --dz-act:#3DD6F0; --dz-act-fg:#0A0D1A; }
html[data-design="algodon"][data-palette="claro"][data-paleta="grafito"]{ --dz-cta:#23232E; --dz-cta-hover:#34343F; --dz-on-cta:#FFFFFF;
    --naranja:#2E2E3A !important; --naranja-glow:#E4E4EA !important; --dz-focus:#23232E; --dz-act:#E4E4EA; --dz-act-fg:#16161E; }
html[data-design="algodon"][data-palette="noche"][data-paleta="grafito"]{ --dz-cta:#E4E4EC; --dz-cta-hover:#E4E4EC; --dz-on-cta:#16151F;
    --naranja:#E4E4EC !important; --naranja-glow:#3A3A48 !important; --dz-focus:#E4E4EC; --dz-act:#3A3A48; --dz-act-fg:#E4E4EC; }
html[data-design="carton"][data-palette="claro"][data-paleta="grafito"]{ --dz-cta:#2E2A3D; --dz-cta-hover:#2E2A3D; --dz-on-cta:#FFFFFF;
    --naranja:#2E2E3A !important; --naranja-glow:#2E2A3D !important; --dz-focus:#2E2A3D; }
html[data-design="carton"][data-palette="noche"][data-paleta="grafito"]{ --dz-cta:#F6F3FF; --dz-cta-hover:#FFFFFF; --dz-on-cta:#111018;
    --naranja:#E4E4EC !important; --naranja-glow:#F6F3FF !important; --dz-focus:#E4E4EC; --dz-sh:#F6F3FF; }
html[data-design="cristal"][data-palette="claro"][data-paleta="grafito"]{ --dz-cta:#23232E; --dz-cta-hover:#34343F; --dz-on-cta:#FFFFFF;
    --naranja:#2E2E3A !important; --naranja-glow:rgba(35,35,46,0.14) !important; --dz-focus:#23232E; --dz-act:#23232E; --dz-act-fg:#FFFFFF; }
html[data-design="cristal"][data-palette="noche"][data-paleta="grafito"]{ --dz-cta:#E4E4EC; --dz-cta-hover:#E4E4EC; --dz-on-cta:#0A0D1A;
    --naranja:#E4E4EC !important; --naranja-glow:rgba(228,228,236,0.14) !important; --dz-focus:#E4E4EC; --dz-act:#E4E4EC; --dz-act-fg:#0A0D1A; }
/* Muestra "Original" de cada apariencia (en la principal no aparece) */
html[data-design="chispa"] .stk-ap-color[data-paleta="original"]{ display:none; }
html[data-design]:not([data-design="chispa"]) .stk-ap-colores{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
@media (max-width: 480px){ html[data-design]:not([data-design="chispa"]) .stk-ap-colores{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
html[data-design="algodon"] .stk-ap-color[data-paleta="original"] .muestra{ background:linear-gradient(135deg,#D63D20,#FFC4A0); }
html[data-design="carton"] .stk-ap-color[data-paleta="original"] .muestra{ background:#FF7A1A; border:2px solid #111018; }
html[data-design="cristal"] .stk-ap-color[data-paleta="original"] .muestra{ background:linear-gradient(135deg,#15172A,#4B5170); }

/* Fiados en las demás apariencias: botones con el color del tema */
html[data-design]:not([data-design="chispa"]) .btn-nuevo-fiado{ background:var(--dz-cta) !important; color:var(--dz-on-cta) !important; border-color:transparent !important; box-shadow:none !important; }
html[data-design]:not([data-design="chispa"]) .btn-historial{ color:var(--naranja) !important; border-color:var(--naranja) !important; background:var(--bg-card) !important; }
html[data-design="carton"] .btn-nuevo-fiado{ border:var(--dz-bw) solid #000 !important; box-shadow:3px 3px 0 var(--dz-sh) !important; }