/* ════════════════════════════════════════════════════════════════════
   🎨 PILAS! — temas-pro.css  (f134 · f135 · Temas con personalidad)
   Cada tema define 8 rasgos: paleta · letras · forma · profundidad ·
   densidad · navegación · encabezado · detalles.
   · Usa la base de temas.css (body.tema-v2 + el puente de colores).
   · Rasgos de estructura reutilizables (los pone app.js según el tema):
       body.pp-dens-compacta · body.pp-dens-amplia · body.pp-nav-riel
   · Temas oscuros completos (Black, Orquídea, IA): llevan también tema-black (arregla los
     estilos escritos dentro de las pantallas) + tema-oscuro.
   · El catálogo del cliente (cara A) NO cambia con el tema de la app.
   Archivo independiente: no necesita npm run build.
   ════════════════════════════════════════════════════════════════════ */

/* ═════════════ 0 · RASGOS COMUNES ═════════════ */
/* Barra inferior: cada botón es la referencia de su marca de «activo» */
body.tema-v2 #vista-erp .bottom-nav button {
    position: relative;
}

/* Cifras con la letra del tema */
/* 🎨 [f221] Antes: body.tema-v2 :is(.pp-num-kpi-monto, .pp-pulso-valor, .pp-num-mini-valor, .pp-num) · separado para que el navegador lo encuentre rápido */
body.tema-v2 .pp-num-kpi-monto,
body.tema-v2 .pp-pulso-valor,
body.tema-v2 .pp-num-mini-valor,
body.tema-v2 .pp-num {
    font-family: var(--pp-fuente-cifras, inherit);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Títulos de tarjetas con la letra de títulos */
body.tema-v2 :is(.pp-pulso-titulo, .ctc-tit h3, .pp-neg-online b, .pp-decision-quien) {
    font-family: var(--pp-fuente-titulo);
}

/* ── Densidad compacta: más datos por pantalla ── */
body.pp-dens-compacta {
    --pp-esp-3: 10px;
    --pp-esp-4: 12px;
    --pp-esp-5: 16px;
    --pp-esp-6: 20px;
    --pp-alto-control: 40px;
    --pp-alto-control-l: 46px;
    --pp-fs-15: 14px;
    --pp-fs-17: 16px;
    --pp-fs-20: 19px;
    --pp-fs-28: 25px;
}

body.pp-dens-compacta .pp-tarjeta {
    padding: 12px;
}

body.pp-dens-compacta .pp-neg-it {
    min-height: 48px;
    padding: 8px 12px;
}

body.pp-dens-compacta .pp-neg-rapido {
    padding: 10px 4px;
}

body.pp-dens-compacta .pp-num-kpi-monto {
    font-size: 23px;
}

body.pp-dens-compacta .ctc-i {
    min-height: 42px;
}

body.pp-dens-compacta #mod-inicio {
    gap: 6px !important;
}

/* ── Densidad amplia (Fácil): letra y botones grandes ── */
body.pp-dens-amplia {
    --pp-fs-11: 13px;
    --pp-fs-12: 15px;
    --pp-fs-13: 16px;
    --pp-fs-15: 18px;
    --pp-fs-17: 20px;
    --pp-fs-20: 23px;
    --pp-fs-28: 31px;
    --pp-fs-34: 36px;
    --pp-alto-control: 56px;
    --pp-alto-control-l: 60px;
    --pp-esp-4: 18px;
}

body.pp-dens-amplia .contenido-dinamico-erp>#pantalla-activa {
    zoom: 1.04;
}

/* Cifras grandes: las tarjetas en pareja pasan a una columna */
body.pp-dens-amplia .pp-num-par {
    grid-template-columns: minmax(0, 1fr);
}

body.pp-dens-amplia .pp-pulso-grilla {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

body.pp-dens-amplia .pp-tarjeta {
    padding: 18px;
}

body.pp-dens-amplia .pp-neg-it {
    min-height: 68px;
}

body.pp-dens-amplia .pp-num-kpi-monto {
    font-size: 30px;
}

body.pp-dens-amplia .pp-pulso-valor {
    font-size: 21px;
}

body.pp-dens-amplia .ctc-i b {
    font-size: 17px;
}

body.pp-dens-amplia .ctc-i small {
    font-size: 15px;
}

/* ── Navegación en riel lateral (solo PC, desde 1024 px) ── */
@media (min-width: 1024px) {
    body.pp-nav-riel #vista-erp .bottom-nav {
        top: calc(60px + var(--pp-sat, 0px));
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 92px !important;
        height: auto !important;
        box-sizing: border-box;
        transform: none !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 4px;
        padding: 92px 10px 16px !important;
        border-radius: 0 !important;
        border: 0 !important;
        border-right: 1px solid var(--pp-borde) !important;
        box-shadow: none !important;
    }

    body.pp-nav-riel #vista-erp .bottom-nav>div {
        display: none;
    }

    body.pp-nav-riel #vista-erp .bottom-nav button {
        flex: 0 0 auto;
        width: 100%;
        height: 64px;
        border-radius: var(--pp-radio-m);
        position: relative;
    }

    body.pp-nav-riel #vista-erp .bottom-nav button:hover {
        background: var(--pp-sutil);
    }

    body.pp-nav-riel #vista-erp .bottom-nav button.activo::before {
        content: '' !important;
        display: block !important;
        position: absolute;
        left: -10px !important;
        right: auto !important;
        top: 16px !important;
        bottom: 16px;
        width: 3px !important;
        height: auto !important;
        border-radius: 0 3px 3px 0 !important;
        background: var(--pp-acento) !important;
        transform: none !important;
    }

    body.pp-nav-riel #btn-inicio-flotante {
        top: calc(76px + var(--pp-sat, 0px)) !important;
        bottom: auto !important;
        left: 18px !important;
        transform: none !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 18px !important;
    }

    body.pp-nav-riel #btn-inicio-flotante:active {
        transform: scale(.94) !important;
    }

    body.pp-nav-riel #btn-inicio-flotante::after {
        display: none;
    }

    body.pp-nav-riel .contenido-dinamico-erp {
        left: 92px;
        width: calc(100% - 92px);
        padding-bottom: 40px;
    }

    body.pp-nav-riel .contenido-dinamico-erp>#pantalla-activa {
        max-width: 1080px;
        margin: 0 auto;
    }

    body.pp-nav-riel:has(#vista-erp.view-active) #btn-pili-flotante {
        left: 112px !important;
        bottom: 24px !important;
    }

    /* El contador no tiene barra: el contenido usa todo el ancho */
    body.pp-nav-riel.rol-contador .contenido-dinamico-erp {
        left: 0;
        width: 100%;
    }
}

/* Oscuros completos: el buscador del catálogo va como un campo más, no como un bloque de color */
body.tema-oscuro #filtro-texto,
body.tema-oscuro #filtro-categoria,
body.tema-oscuro #filtro-talla {
    background: var(--pp-sutil) !important;
    color: var(--pp-texto) !important;
    border-color: var(--pp-borde) !important;
}

body.tema-oscuro #filtro-texto::placeholder {
    color: var(--pp-texto-3) !important;
}

/* ═════════════ 1 · BLACK — oscuro técnico ═════════════
   Grafito y esmeralda, letra técnica (Geist), cifras en monoespaciada,
   esquinas justas, bordes finos sin sombras, vista compacta y riel en PC. */
body.tema-v2.tema-negro {
    --pp-fuente: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-fuente-marca: 'Geist', 'Inter', system-ui, sans-serif;
    --pp-fuente-titulo: 'Geist', 'Inter', system-ui, sans-serif;
    --pp-fuente-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --pp-fuente-cifras: 'Geist Mono', ui-monospace, monospace;
    --pp-fw-medio: 500;
    --pp-fw-fuerte: 600;
    --pp-radio-s: 4px;
    --pp-radio-m: 7px;
    --pp-radio-l: 10px;

    --pp-fondo: #0A0A0C;
    --pp-superficie: #131316;
    --pp-sutil: #1B1B1F;
    --pp-borde: #26262B;
    --pp-borde-fuerte: #3A3A41;
    --pp-texto: #F4F4F5;
    --pp-texto-2: #A1A1AA;
    --pp-texto-3: #8A8A94;
    --pp-texto-off: #52525B;
    --pp-acento: #34D399;
    --pp-acento-hover: #6EE7B7;
    --pp-sobre-acento: #04261A;
    --pp-acento-suave: rgba(52, 211, 153, .12);
    --pp-acento-texto: #6EE7B7;
    --pp-positivo: #34D399;
    --pp-negativo: #F87171;
    --pp-negativo-suave: rgba(248, 113, 113, .13);
    --pp-aviso: #FBBF24;
    --pp-aviso-suave: rgba(251, 191, 36, .13);
    --pp-marca-1: #34D399;
    --pp-marca-2: #34D399;
    --pp-velo: rgba(0, 0, 0, .66);
    --pp-foco: 0 0 0 2px #34D399;
    --pp-sombra-flotante: 0 0 0 1px #2E2E34, 0 18px 40px rgba(0, 0, 0, .6);

    --pp-trazo: 1.5;
    --pp-sombra-tarjeta: inset 0 1px 0 rgba(255, 255, 255, .035);
    --pp-fondo-img: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 100% 28px;

    --turquesa: #34D399;
    --turquesa-dark: #10B981;
    --turquesa-light: rgba(52, 211, 153, .12);
    --coral: #F87171;
    --bg-app: #0A0A0C;
    --bg-card: #131316;
    --bg-subtle: #1B1B1F;
    --bg-hover: #1B1B1F;
    --texto-oscuro: #F4F4F5;
    --texto-medio: #A1A1AA;
    --texto-suave: #8A8A94;
    --borde: #26262B;
    --borde-focus: #34D399;
    --success: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;
    --accent: #34D399;
    --dark-blue: #F4F4F5;
    --bg: #0A0A0C;
}

body.tema-negro #vista-erp .header-erp::before {
    background: rgba(10, 10, 12, .86);
}

body.tema-negro #vista-erp .header-erp {
    border-bottom: 1px solid var(--pp-borde);
}

body.tema-negro #vista-erp .header-erp .hdr-logo-txt {
    letter-spacing: -.04em;
}

body.tema-negro #vista-erp .bottom-nav {
    background: rgba(13, 13, 15, .94) !important;
    border-top: 1px solid var(--pp-borde);
    height: 62px;
}

body.tema-negro #vista-erp .bottom-nav button span {
    font-family: var(--pp-fuente-mono);
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.tema-negro #vista-erp .bottom-nav button.activo::before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: 30%;
    right: 30%;
    width: auto;
    height: 2px;
    border: 0;
    border-radius: 0;
    transform: none;
    animation: none;
    background: var(--pp-acento);
    box-shadow: 0 0 12px var(--pp-acento);
}

body.tema-negro #btn-inicio-flotante {
    width: 56px;
    height: 56px;
    bottom: 22px;
    border-radius: 16px !important;
    background: var(--pp-acento) !important;
    border: 0 !important;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, .4), 0 10px 28px rgba(52, 211, 153, .28) !important;
}

body.tema-negro #btn-inicio-flotante svg {
    stroke: var(--pp-sobre-acento) !important;
}

body.tema-negro #btn-inicio-flotante::after {
    display: none;
}

/* 🎨 [f221] Antes: body.tema-negro :is(.pp-tarjeta, .pp-neg-lista, .pp-neg-rapido, .pp-neg-online) · separado para que el navegador lo encuentre rápido */
body.tema-negro .pp-tarjeta,
body.tema-negro .pp-neg-lista,
body.tema-negro .pp-neg-rapido,
body.tema-negro .pp-neg-online {
    border-color: var(--pp-borde);
}

/* 🎨 [f221] Antes: body.tema-negro :is(.pp-neg-sec-tit, .pp-etiqueta-seccion, .pp-num-mini-rotulo, .pp-rotulo, .pp-chip) · separado para que el navegador lo encuentre rápido */
body.tema-negro .pp-neg-sec-tit,
body.tema-negro .pp-etiqueta-seccion,
body.tema-negro .pp-num-mini-rotulo,
body.tema-negro .pp-rotulo,
body.tema-negro .pp-chip {
    font-family: var(--pp-fuente-mono);
    letter-spacing: .05em;
    text-transform: uppercase;
}

body.tema-negro .pp-chip {
    font-size: 10px;
}

body.tema-negro .pp-pulso-dato {
    background: var(--pp-fondo);
    border: 1px solid var(--pp-borde);
}

body.tema-negro .pp-num-kpi-monto {
    letter-spacing: -.03em;
}

/* ═════════════ 2 · ORQUÍDEA — oscuro elegante ═════════════
   Ciruela, lila y oro rosa, títulos con serifa (Cormorant), texto en Jost,
   formas suaves, brillo lila y barra flotante. */
body.tema-v2.tema-orquidea {
    --pp-fuente: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-fuente-marca: 'Cormorant Garamond', Georgia, serif;
    --pp-fuente-titulo: 'Cormorant Garamond', Georgia, serif;
    --pp-fuente-mono: 'Jost', ui-monospace, monospace;
    --pp-fuente-cifras: 'Jost', system-ui, sans-serif;
    --pp-fw-medio: 500;
    --pp-fw-fuerte: 600;
    --pp-radio-s: 10px;
    --pp-radio-m: 16px;
    --pp-radio-l: 22px;

    --pp-fondo: #130D19;
    --pp-superficie: #1C1424;
    --pp-sutil: #261B30;
    --pp-borde: #352841;
    --pp-borde-fuerte: #4D3B5F;
    --pp-texto: #F7F1FB;
    --pp-texto-2: #C3B1D4;
    --pp-texto-3: #A08DB5;
    --pp-texto-off: #5F4F72;
    --pp-acento: #C9A0F4;
    --pp-acento-hover: #DDC4F9;
    --pp-sobre-acento: #22102F;
    --pp-acento-suave: rgba(201, 160, 244, .15);
    --pp-acento-texto: #DDC4F9;
    --pp-positivo: #6EE7B7;
    --pp-negativo: #FB8B8B;
    --pp-negativo-suave: rgba(251, 139, 139, .14);
    --pp-aviso: #F5C77E;
    --pp-aviso-suave: rgba(245, 199, 126, .14);
    --pp-marca-1: #C9A0F4;
    --pp-marca-2: #E8B4A8;
    --pp-velo: rgba(8, 4, 12, .62);
    --pp-foco: 0 0 0 3px rgba(201, 160, 244, .4);
    --pp-sombra-flotante: 0 20px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 160, 244, .12);

    --pp-trazo: 1.5;
    --pp-sombra-tarjeta: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(0, 0, 0, .28);
    --pp-fondo-img: radial-gradient(90% 50% at 85% -5%, rgba(201, 160, 244, .16), transparent 70%), radial-gradient(70% 40% at 0% 0%, rgba(232, 180, 168, .10), transparent 70%);

    --turquesa: #C9A0F4;
    --turquesa-dark: #A97BDB;
    --turquesa-light: rgba(201, 160, 244, .15);
    --coral: #FB8B8B;
    --bg-app: #130D19;
    --bg-card: #1C1424;
    --bg-subtle: #261B30;
    --bg-hover: #261B30;
    --texto-oscuro: #F7F1FB;
    --texto-medio: #C3B1D4;
    --texto-suave: #A08DB5;
    --borde: #352841;
    --borde-focus: #C9A0F4;
    --success: #6EE7B7;
    --warning: #F5C77E;
    --danger: #FB8B8B;
    --accent: #C9A0F4;
    --dark-blue: #F7F1FB;
    --bg: #130D19;
}

body.tema-v2.tema-orquidea #vista-erp .header-erp::before {
    background: rgba(19, 13, 25, .82);
}

body.tema-v2.tema-orquidea #vista-erp .header-erp .hdr-logo-txt,
body.tema-v2.tema-orquidea #vista-erp .header-erp .hdr-titulo-modulo {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: 0;
}

body.tema-v2.tema-orquidea .ctc-tit h3,
body.tema-v2.tema-orquidea .pp-pulso-titulo {
    font-size: 20px;
    font-weight: 600;
}

body.tema-v2.tema-orquidea #vista-erp .bottom-nav {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 64px;
    padding-bottom: 0;
    border: 1px solid var(--pp-borde);
    border-radius: 24px;
    background: rgba(28, 20, 36, .9) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .5);
}

body.tema-v2.tema-orquidea #vista-erp .bottom-nav button.activo::before {
    content: '';
    display: block;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 30px;
    border-radius: 999px;
    background: var(--pp-acento-suave);
    animation: none;
}

body.tema-v2.tema-orquidea #btn-inicio-flotante {
    bottom: calc(34px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(140deg, #DDC4F9, #C9A0F4 55%, #E8B4A8) !important;
    border: 3px solid var(--pp-fondo) !important;
    box-shadow: 0 12px 30px rgba(201, 160, 244, .35) !important;
}

body.tema-v2.tema-orquidea #btn-inicio-flotante svg {
    stroke: var(--pp-sobre-acento) !important;
}

body.tema-v2.tema-orquidea #btn-inicio-flotante::after {
    display: none;
}

/* 🎨 [f221] Antes: body.tema-v2.tema-orquidea :is(.pp-btn, .pp-chip) · separado para que el navegador lo encuentre rápido */
body.tema-v2.tema-orquidea .pp-btn,
body.tema-v2.tema-orquidea .pp-chip {
    border-radius: 999px;
}

body.tema-v2.tema-orquidea .pp-btn--primario {
    background: linear-gradient(140deg, #DDC4F9, #C9A0F4);
}

body.tema-v2.tema-orquidea .pp-modal-panel,
body.tema-v2.tema-orquidea #modal-accion-central .pp-hoja {
    border-radius: 28px 28px 0 0;
}

@media (min-width: 768px) {
    body.tema-v2.tema-orquidea #vista-erp .bottom-nav {
        left: 50%;
        right: auto;
        width: min(560px, calc(100% - 24px));
        transform: translateX(-50%);
    }
}

/* ═════════════ 3 · EJECUTIVO — finanzas y servicios ═════════════
   Azul marino y oro, títulos con serifa (Source Serif), texto Source Sans,
   cifras tabulares, esquinas justas, encabezado marino, compacto y riel en PC. */
body.tema-ejecutivo {
    --pp-fuente: 'Source Sans 3', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-fuente-marca: 'Source Serif 4', Georgia, serif;
    --pp-fuente-titulo: 'Source Serif 4', Georgia, serif;
    --pp-fuente-mono: 'Source Sans 3', ui-monospace, monospace;
    --pp-fuente-cifras: 'Source Serif 4', Georgia, serif;
    --pp-fw-medio: 600;
    --pp-fw-fuerte: 700;
    --pp-radio-s: 3px;
    --pp-radio-m: 5px;
    --pp-radio-l: 7px;

    --pp-fondo: #F3F4F7;
    --pp-superficie: #FFFFFF;
    --pp-sutil: #EEF0F4;
    --pp-borde: #DDE1E8;
    --pp-borde-fuerte: #B8C0CD;
    --pp-texto: #0F1B2D;
    --pp-texto-2: #3D4A5E;
    --pp-texto-3: #5E6A7D;
    --pp-texto-off: #A0A8B6;
    --pp-acento: #12325B;
    --pp-acento-hover: #0B2443;
    --pp-sobre-acento: #FFFFFF;
    --pp-acento-suave: #E6ECF5;
    --pp-acento-texto: #12325B;
    --pp-oro: #A8823F;
    --pp-positivo: #1F6E4A;
    --pp-negativo: #B42318;
    --pp-negativo-suave: #FBEAE8;
    --pp-aviso: #8A5A00;
    --pp-aviso-suave: #F7EFDC;
    --pp-marca-1: #12325B;
    --pp-marca-2: #A8823F;
    --pp-dato-1: #12325B;
    --pp-dato-2: #A8823F;
    --pp-dato-3: #5E7FA8;
    --pp-dato-4: #1F6E4A;
    --pp-dato-5: #8A93A3;
    --pp-velo: rgba(15, 27, 45, .45);
    --pp-foco: 0 0 0 3px rgba(18, 50, 91, .25);
    --pp-sombra-flotante: 0 16px 36px rgba(15, 27, 45, .18), 0 2px 6px rgba(15, 27, 45, .08);

    --pp-trazo: 1.6;
    --pp-sombra-tarjeta: 0 1px 2px rgba(15, 27, 45, .06);
    --pp-fondo-img: linear-gradient(#F3F4F7, #F3F4F7);

    --turquesa: #12325B;
    --turquesa-dark: #0B2443;
    --turquesa-light: #E6ECF5;
    --coral: #B42318;
    --bg-app: #F3F4F7;
    --bg-card: #FFFFFF;
    --bg-subtle: #EEF0F4;
    --bg-hover: #E6ECF5;
    --texto-oscuro: #0F1B2D;
    --texto-medio: #3D4A5E;
    --texto-suave: #5E6A7D;
    --borde: #DDE1E8;
    --borde-focus: #12325B;
    --success: #1F6E4A;
    --warning: #8A5A00;
    --danger: #B42318;
    --accent: #12325B;
    --dark-blue: #0F1B2D;
    --bg: #F3F4F7;
}

/* Encabezado marino con filete dorado */
body.tema-ejecutivo #vista-erp .header-erp {
    color: #FFFFFF;
    border-bottom: 2px solid var(--pp-oro);
}

body.tema-ejecutivo #vista-erp .header-erp::before {
    background: #12325B;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 🎨 [f221] Antes: body.tema-ejecutivo #vista-erp .header-erp :is(.hdr-logo-txt, .hdr-titulo-modulo) · separado para que el navegador lo encuentre rápido */
body.tema-ejecutivo #vista-erp .header-erp .hdr-logo-txt,
body.tema-ejecutivo #vista-erp .header-erp .hdr-titulo-modulo {
    color: #FFFFFF;
    letter-spacing: 0;
}

body.tema-ejecutivo #vista-erp .header-erp .hdr-logo-acc {
    color: #D9B66F;
}

body.tema-ejecutivo #vista-erp .header-erp>button,
body.tema-ejecutivo #vista-erp .header-erp .hdr-icon-btn {
    color: #E6ECF5;
}

body.tema-ejecutivo #vista-erp .header-erp>button:hover,
body.tema-ejecutivo #vista-erp .header-erp .hdr-icon-btn:hover {
    background: rgba(255, 255, 255, .1);
}

body.tema-ejecutivo #vista-erp .header-erp svg {
    stroke: currentColor;
}

/* Barra inferior: blanca con filete dorado en la activa */
body.tema-ejecutivo #vista-erp .bottom-nav {
    background: #FFFFFF !important;
    border-top: 1px solid var(--pp-borde);
}

body.tema-ejecutivo #vista-erp .bottom-nav button.activo {
    color: var(--pp-acento);
}

body.tema-ejecutivo #vista-erp .bottom-nav button.activo::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 26%;
    right: 26%;
    width: auto;
    height: 3px;
    border: 0;
    border-radius: 0;
    transform: none;
    animation: none;
    background: var(--pp-oro);
}

body.tema-ejecutivo #btn-inicio-flotante {
    border-radius: 14px !important;
    width: 58px;
    height: 58px;
    bottom: 24px;
    background: #12325B !important;
    border: 2px solid var(--pp-oro) !important;
    box-shadow: 0 10px 24px rgba(15, 27, 45, .28) !important;
}

body.tema-ejecutivo #btn-inicio-flotante svg {
    stroke: #FFFFFF !important;
}

body.tema-ejecutivo #btn-inicio-flotante::after {
    display: none;
}

@media (min-width: 1024px) {
    body.tema-ejecutivo #vista-erp .bottom-nav {
        background: #0F2A4D !important;
        border-right: 0 !important;
    }

    body.tema-ejecutivo #vista-erp .bottom-nav button {
        color: #AFC0D8;
    }

    body.tema-ejecutivo #vista-erp .bottom-nav button:hover {
        background: rgba(255, 255, 255, .07);
    }

    body.tema-ejecutivo #vista-erp .bottom-nav button.activo {
        color: #FFFFFF;
        background: rgba(255, 255, 255, .09);
    }

    body.tema-ejecutivo #vista-erp .bottom-nav button.activo::before {
        background: var(--pp-oro) !important;
    }

    body.tema-ejecutivo #btn-inicio-flotante {
        background: var(--pp-oro) !important;
        border-color: #D9B66F !important;
    }
}

/* Tarjetas: filete superior y rótulos en versalitas */
/* 🎨 [f221] Antes: body.tema-ejecutivo :is(.pp-num-kpi, .pp-pulso) · separado para que el navegador lo encuentre rápido */
body.tema-ejecutivo .pp-num-kpi,
body.tema-ejecutivo .pp-pulso {
    border-top: 3px solid #12325B;
}

/* 🎨 [f221] Antes: body.tema-ejecutivo :is(.pp-neg-sec-tit, .pp-etiqueta-seccion, .pp-num-mini-rotulo, .pp-rotulo) · separado para que el navegador lo encuentre rápido */
body.tema-ejecutivo .pp-neg-sec-tit,
body.tema-ejecutivo .pp-etiqueta-seccion,
body.tema-ejecutivo .pp-num-mini-rotulo,
body.tema-ejecutivo .pp-rotulo {
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--pp-texto-3);
}

body.tema-ejecutivo .pp-pulso-dato {
    background: #FFFFFF;
    border: 1px solid var(--pp-borde);
}

body.tema-ejecutivo .pp-num-kpi-monto,
body.tema-ejecutivo .pp-pulso-valor {
    font-weight: 600;
    letter-spacing: -.01em;
}

body.tema-ejecutivo .pp-chip {
    border-radius: 2px;
}

body.tema-ejecutivo .ctc-tit h3,
body.tema-ejecutivo .pp-pulso-titulo {
    font-size: 17px;
    font-weight: 600;
}

/* ═════════════ 4 · FÁCIL — se lee sin esfuerzo ═════════════
   Letra para baja visión (Atkinson Hyperlegible) de 18 px, contraste AAA,
   botones de 56 px, bordes visibles, íconos gruesos y sin animaciones. */
body.tema-facil {
    --pp-fuente: 'Atkinson Hyperlegible', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-fuente-marca: 'Atkinson Hyperlegible', system-ui, sans-serif;
    --pp-fuente-titulo: 'Atkinson Hyperlegible', system-ui, sans-serif;
    --pp-fuente-mono: 'Atkinson Hyperlegible', ui-monospace, monospace;
    --pp-fuente-cifras: 'Atkinson Hyperlegible', system-ui, sans-serif;
    --pp-fw-medio: 700;
    --pp-fw-fuerte: 700;
    --pp-radio-s: 8px;
    --pp-radio-m: 12px;
    --pp-radio-l: 14px;

    --pp-fondo: #F2F4F7;
    --pp-superficie: #FFFFFF;
    --pp-sutil: #E9EDF2;
    --pp-borde: #6B7280;
    --pp-borde-fuerte: #374151;
    --pp-texto: #000000;
    --pp-texto-2: #1F2937;
    --pp-texto-3: #374151;
    --pp-texto-off: #6B7280;
    --pp-acento: #0B3D91;
    --pp-acento-hover: #082C69;
    --pp-sobre-acento: #FFFFFF;
    --pp-acento-suave: #DCE7FA;
    --pp-acento-texto: #0B3D91;
    --pp-positivo: #0A5C2F;
    --pp-negativo: #A1120A;
    --pp-negativo-suave: #FDE2DF;
    --pp-aviso: #6B3D00;
    --pp-aviso-suave: #FDEFD3;
    --pp-marca-1: #0B3D91;
    --pp-marca-2: #A1120A;
    --pp-velo: rgba(0, 0, 0, .55);
    --pp-foco: 0 0 0 4px #F59E0B;
    --pp-sombra-flotante: 0 0 0 2px #000000, 0 14px 30px rgba(0, 0, 0, .2);

    --pp-trazo: 2.4;
    --pp-sombra-tarjeta: none;
    --pp-fondo-img: linear-gradient(#F2F4F7, #F2F4F7);

    --turquesa: #0B3D91;
    --turquesa-dark: #082C69;
    --turquesa-light: #DCE7FA;
    --coral: #A1120A;
    --bg-app: #F2F4F7;
    --bg-card: #FFFFFF;
    --bg-subtle: #E9EDF2;
    --bg-hover: #DCE7FA;
    --texto-oscuro: #000000;
    --texto-medio: #1F2937;
    --texto-suave: #374151;
    --borde: #6B7280;
    --borde-focus: #0B3D91;
    --success: #0A5C2F;
    --warning: #6B3D00;
    --danger: #A1120A;
    --accent: #0B3D91;
    --dark-blue: #000000;
    --bg: #F2F4F7;
}

body.tema-facil *,
body.tema-facil *::before,
body.tema-facil *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
}

/* 🎨 [f221] Antes: body.tema-facil :is(.pp-tarjeta, .pp-neg-lista, .pp-neg-rapido, .pp-neg-online, .ctc) · separado para que el navegador lo encuentre rápido */
body.tema-facil .pp-tarjeta,
body.tema-facil .pp-neg-lista,
body.tema-facil .pp-neg-rapido,
body.tema-facil .pp-neg-online,
body.tema-facil .ctc {
    border: 1.5px solid #6B7280 !important;
}

body.tema-facil :focus-visible {
    outline: 4px solid #F59E0B !important;
    outline-offset: 2px !important;
}

body.tema-facil #vista-erp .header-erp {
    border-bottom: 2px solid #000000;
}

body.tema-facil #vista-erp .header-erp::before {
    background: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 🎨 [f221] Antes: body.tema-facil #vista-erp .header-erp :is(.hdr-logo-txt, .hdr-titulo-modulo) · separado para que el navegador lo encuentre rápido */
body.tema-facil #vista-erp .header-erp .hdr-logo-txt,
body.tema-facil #vista-erp .header-erp .hdr-titulo-modulo {
    font-size: 20px;
}

body.tema-facil #vista-erp .header-erp .hdr-logo-centro {
    max-width: calc(100% - 252px);
}

body.tema-facil #vista-erp .header-erp svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2.4 !important;
}

body.tema-facil #vista-erp .bottom-nav {
    height: 82px;
    background: #FFFFFF !important;
    border-top: 2px solid #000000;
}

body.tema-facil #vista-erp .bottom-nav button {
    color: #1F2937;
}

body.tema-facil #vista-erp .bottom-nav button svg {
    width: 28px;
    height: 28px;
}

body.tema-facil #vista-erp .bottom-nav button span {
    font-size: 14px;
    font-weight: 700;
}

body.tema-facil #vista-erp .bottom-nav button.activo {
    color: #FFFFFF;
}

body.tema-facil #vista-erp .bottom-nav button.activo::before {
    content: '';
    display: block;
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 3px;
    right: 3px;
    width: auto;
    height: auto;
    transform: none;
    border: 0;
    border-radius: 14px;
    background: #0B3D91;
    z-index: -1;
    animation: none;
}

body.tema-facil #vista-erp .bottom-nav button {
    position: relative;
    z-index: 0;
}

body.tema-facil #btn-inicio-flotante {
    width: 70px;
    height: 70px;
    bottom: 30px;
    background: #0B3D91 !important;
    border: 4px solid #FFFFFF !important;
    box-shadow: 0 0 0 2px #000000, 0 10px 24px rgba(0, 0, 0, .25) !important;
}

body.tema-facil #btn-inicio-flotante svg {
    stroke: #FFFFFF !important;
    stroke-width: 3 !important;
    width: 34px !important;
    height: 34px !important;
}

body.tema-facil #btn-inicio-flotante::after {
    display: none;
}

body.tema-facil .contenido-dinamico-erp {
    padding-bottom: 140px !important;
}

body.tema-facil .pp-btn {
    border-width: 2px;
}

body.tema-facil .pp-btn--secundario {
    border-color: #000000;
}

body.tema-facil a,
body.tema-facil .pp-neg-vincular {
    text-decoration-thickness: 2px;
}

/* 🎨 [f221] Antes: body.tema-facil :is(.pp-neg-sec-tit, .pp-etiqueta-seccion, .pp-num-mini-rotulo, .pp-rotulo) · separado para que el navegador lo encuentre rápido */
body.tema-facil .pp-neg-sec-tit,
body.tema-facil .pp-etiqueta-seccion,
body.tema-facil .pp-num-mini-rotulo,
body.tema-facil .pp-rotulo {
    color: #1F2937;
    letter-spacing: .03em;
}

body.tema-facil .pp-neg-it>.pp-icono:last-child,
body.tema-facil .ctc-chev {
    color: #000000;
}

body.tema-facil .pp-pulso-dato {
    border: 1.5px solid #6B7280;
    background: #FFFFFF;
}

/* ═════════════ 5 · MERCADO — pop y con fuerza ═════════════
   Amarillo maíz, negro y tomate, letra gruesa (Archivo Black), bordes de 2 px,
   sombras duras desplazadas y botones grandes. */
body.tema-mercado {
    --pp-fuente: 'Archivo', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-fuente-marca: 'Archivo Black', 'Archivo', sans-serif;
    --pp-fuente-titulo: 'Archivo Black', 'Archivo', sans-serif;
    --pp-fuente-mono: 'Archivo', ui-monospace, monospace;
    --pp-fuente-cifras: 'Archivo Black', 'Archivo', sans-serif;
    --pp-fw-medio: 600;
    --pp-fw-fuerte: 800;
    --pp-radio-s: 6px;
    --pp-radio-m: 10px;
    --pp-radio-l: 14px;

    --pp-fondo: #FFF5D6;
    --pp-superficie: #FFFFFF;
    --pp-sutil: #FFF0BF;
    --pp-borde: #111111;
    --pp-borde-fuerte: #111111;
    --pp-texto: #111111;
    --pp-texto-2: #2E2E2E;
    --pp-texto-3: #555049;
    --pp-texto-off: #9A9384;
    --pp-acento: #FFC629;
    --pp-acento-hover: #FFB800;
    --pp-sobre-acento: #111111;
    --pp-acento-suave: #FFE99A;
    --pp-acento-texto: #111111;
    --pp-tomate: #E8452C;
    --pp-positivo: #0E7C5A;
    --pp-negativo: #D7301A;
    --pp-negativo-suave: #FFDCD3;
    --pp-aviso: #8A5A00;
    --pp-aviso-suave: #FFE99A;
    --pp-marca-1: #111111;
    --pp-marca-2: #E8452C;
    --pp-dato-1: #111111;
    --pp-dato-2: #E8452C;
    --pp-dato-3: #FFC629;
    --pp-dato-4: #0E7C5A;
    --pp-dato-5: #3E6FD8;
    --pp-velo: rgba(17, 17, 17, .5);
    --pp-foco: 0 0 0 3px #111111;
    --pp-sombra-flotante: 5px 5px 0 #111111;

    --pp-trazo: 2.2;
    --pp-sombra-tarjeta: 4px 4px 0 #111111;
    --pp-fondo-img: radial-gradient(circle, rgba(17, 17, 17, .09) 1.2px, transparent 1.4px) 0 0 / 16px 16px;

    --turquesa: #FFC629;
    --turquesa-dark: #FFB800;
    --turquesa-light: #FFE99A;
    --coral: #E8452C;
    --bg-app: #FFF5D6;
    --bg-card: #FFFFFF;
    --bg-subtle: #FFF0BF;
    --bg-hover: #FFE99A;
    --texto-oscuro: #111111;
    --texto-medio: #2E2E2E;
    --texto-suave: #555049;
    --borde: #111111;
    --borde-focus: #111111;
    --success: #0E7C5A;
    --warning: #8A5A00;
    --danger: #D7301A;
    --accent: #FFC629;
    --dark-blue: #111111;
    --bg: #FFF5D6;
}

/* 🎨 [f221] Antes: body.tema-mercado :is(.pp-tarjeta, .pp-neg-lista, .pp-neg-rapido, .pp-neg-online, .pp-neg-ib, .ctc) · separado para que el navegador lo encuentre rápido */
body.tema-mercado .pp-tarjeta,
body.tema-mercado .pp-neg-lista,
body.tema-mercado .pp-neg-rapido,
body.tema-mercado .pp-neg-online,
body.tema-mercado .pp-neg-ib,
body.tema-mercado .ctc {
    border: 2px solid #111111 !important;
    box-shadow: 4px 4px 0 #111111 !important;
}

body.tema-mercado .pp-neg-it {
    border-top: 2px solid #111111;
}

body.tema-mercado .pp-neg-it:first-child {
    border-top: 0;
}

body.tema-mercado .ctc-i {
    border-top: 2px dashed rgba(17, 17, 17, .25);
}

body.tema-mercado #vista-erp .header-erp {
    border-bottom: 2px solid #111111;
}

body.tema-mercado #vista-erp .header-erp::before {
    background: #FFC629;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.tema-mercado #vista-erp .header-erp .hdr-logo-txt {
    font-size: 22px;
    letter-spacing: -.01em;
}

body.tema-mercado #vista-erp .header-erp .hdr-logo-acc {
    color: #E8452C;
}

body.tema-mercado #vista-erp .header-erp .hdr-titulo-modulo {
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: .01em;
}

body.tema-mercado #vista-erp .bottom-nav {
    background: #FFFFFF !important;
    border-top: 2px solid #111111;
    height: 70px;
}

body.tema-mercado #vista-erp .bottom-nav button {
    color: #111111;
}

body.tema-mercado #vista-erp .bottom-nav button span {
    font-weight: 700;
    font-size: 11px;
}

body.tema-mercado #vista-erp .bottom-nav button.activo::before {
    content: '';
    display: block;
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 4px;
    right: 4px;
    width: auto;
    height: auto;
    transform: none;
    animation: none;
    border: 2px solid #111111;
    border-radius: 10px;
    background: #FFC629;
    z-index: -1;
}

body.tema-mercado #vista-erp .bottom-nav button {
    position: relative;
    z-index: 0;
}

body.tema-mercado #btn-inicio-flotante {
    width: 62px;
    height: 62px;
    bottom: 26px;
    border-radius: 16px !important;
    background: #E8452C !important;
    border: 2px solid #111111 !important;
    box-shadow: 4px 4px 0 #111111 !important;
}

body.tema-mercado #btn-inicio-flotante svg {
    stroke: #FFFFFF !important;
    stroke-width: 3 !important;
}

body.tema-mercado #btn-inicio-flotante::after {
    display: none;
}

body.tema-mercado #btn-inicio-flotante:active {
    box-shadow: 1px 1px 0 #111111 !important;
}

body.tema-mercado .pp-btn {
    border: 2px solid #111111;
    box-shadow: 3px 3px 0 #111111;
    border-radius: 10px;
}

body.tema-mercado .pp-btn:active {
    box-shadow: 1px 1px 0 #111111;
    transform: translate(2px, 2px);
}

body.tema-mercado .pp-btn--fantasma {
    border-color: transparent;
    box-shadow: none;
}

body.tema-mercado .pp-chip {
    border: 1.5px solid #111111;
    border-radius: 999px;
    font-weight: 800;
}

body.tema-mercado .pp-chip--acento {
    background: #FFC629;
    color: #111111;
}

body.tema-mercado .pp-pulso-dato {
    background: #FFF5D6;
    border: 2px solid #111111;
}

body.tema-mercado .pp-neg-rapido .pp-icono,
body.tema-mercado .pp-neg-it>.pp-icono:first-child {
    color: #111111;
}

body.tema-mercado .pp-neg-online>.pp-icono:first-child {
    background: #E8452C;
    color: #FFFFFF;
    border: 2px solid #111111;
}

body.tema-mercado .pp-neg-av {
    background: #FFC629;
    color: #111111;
    border: 2px solid #111111;
}

/* 🎨 [f221] Antes: body.tema-mercado :is(.pp-neg-sec-tit, .pp-etiqueta-seccion, .pp-num-mini-rotulo, .pp-rotulo) · separado para que el navegador lo encuentre rápido */
body.tema-mercado .pp-neg-sec-tit,
body.tema-mercado .pp-etiqueta-seccion,
body.tema-mercado .pp-num-mini-rotulo,
body.tema-mercado .pp-rotulo {
    color: #111111;
    font-weight: 800;
}

body.tema-mercado .pp-modal-panel,
body.tema-mercado #modal-accion-central .pp-hoja {
    border: 2px solid #111111 !important;
    border-bottom: 0 !important;
    border-radius: 20px 20px 0 0;
}

/* 🎨 [f221] Antes: body.tema-mercado #modal-accion-central .pp-hoja :is(button, a)[class] · separado para que el navegador lo encuentre rápido */
body.tema-mercado #modal-accion-central .pp-hoja button[class],
body.tema-mercado #modal-accion-central .pp-hoja a[class] {
    border-width: 2px;
}

/* ═════════════ 6 · CRISTAL — vidrio luminoso ═════════════
   Fondo con degradado aurora, tarjetas de vidrio esmerilado, letra
   Plus Jakarta Sans, esquinas muy suaves y barra de vidrio flotante.
   En celulares sencillos (o con «reducir transparencia») se apaga el desenfoque. */
body.tema-cristal {
    --pp-fuente: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-fuente-marca: 'Plus Jakarta Sans', system-ui, sans-serif;
    --pp-fuente-titulo: 'Plus Jakarta Sans', system-ui, sans-serif;
    --pp-fuente-mono: 'Plus Jakarta Sans', ui-monospace, monospace;
    --pp-fuente-cifras: 'Plus Jakarta Sans', system-ui, sans-serif;
    --pp-fw-medio: 600;
    --pp-fw-fuerte: 700;
    --pp-radio-s: 12px;
    --pp-radio-m: 18px;
    --pp-radio-l: 24px;

    --pp-fondo: #EEF0FB;
    --pp-superficie: rgba(255, 255, 255, .62);
    --pp-sutil: rgba(255, 255, 255, .55);
    --pp-borde: rgba(255, 255, 255, .85);
    --pp-borde-fuerte: rgba(91, 91, 214, .3);
    --pp-texto: #1B1B3A;
    --pp-texto-2: #3F3F66;
    --pp-texto-3: #5C5C84;
    --pp-texto-off: #9C9CC0;
    --pp-acento: #5B4FE0;
    --pp-acento-hover: #4A3FCB;
    --pp-sobre-acento: #FFFFFF;
    --pp-acento-suave: rgba(91, 79, 224, .12);
    --pp-acento-texto: #4A3FCB;
    --pp-positivo: #0F7B5F;
    --pp-negativo: #C2264B;
    --pp-negativo-suave: rgba(194, 38, 75, .1);
    --pp-aviso: #8A5A00;
    --pp-aviso-suave: rgba(245, 158, 11, .14);
    --pp-marca-1: #5B4FE0;
    --pp-marca-2: #E0559B;
    --pp-velo: rgba(27, 27, 58, .32);
    --pp-foco: 0 0 0 3px rgba(91, 79, 224, .3);
    --pp-sombra-flotante: 0 20px 50px rgba(60, 50, 160, .18), 0 0 0 1px rgba(255, 255, 255, .8) inset;

    --pp-trazo: 1.7;
    --pp-sombra-tarjeta: 0 8px 32px rgba(60, 50, 160, .10), 0 1px 0 rgba(255, 255, 255, .9) inset;
    --pp-fondo-img: radial-gradient(60% 45% at 10% 5%, #C8D4FF 0%, transparent 70%), radial-gradient(55% 45% at 95% 15%, #F6CFF0 0%, transparent 70%), radial-gradient(60% 50% at 70% 95%, #CFF3EC 0%, transparent 70%), radial-gradient(50% 40% at 0% 90%, #FFE2CC 0%, transparent 70%);
    --pp-vidrio: blur(18px) saturate(1.5);

    --turquesa: #5B4FE0;
    --turquesa-dark: #4A3FCB;
    --turquesa-light: rgba(91, 79, 224, .12);
    --coral: #C2264B;
    --bg-app: #EEF0FB;
    --bg-card: rgba(255, 255, 255, .62);
    --bg-subtle: rgba(255, 255, 255, .55);
    --bg-hover: rgba(255, 255, 255, .8);
    --texto-oscuro: #1B1B3A;
    --texto-medio: #3F3F66;
    --texto-suave: #5C5C84;
    --borde: rgba(255, 255, 255, .85);
    --borde-focus: #5B4FE0;
    --success: #0F7B5F;
    --warning: #8A5A00;
    --danger: #C2264B;
    --accent: #5B4FE0;
    --dark-blue: #1B1B3A;
    --bg: #EEF0FB;
}

/* 🎨 [f221] Antes: body.tema-cristal :is(.pp-tarjeta, .pp-neg-lista, .pp-neg-rapido, .pp-neg-online, .pp-neg-ib, .ctc) · separado para que el navegador lo encuentre rápido */
body.tema-cristal .pp-tarjeta,
body.tema-cristal .pp-neg-lista,
body.tema-cristal .pp-neg-rapido,
body.tema-cristal .pp-neg-online,
body.tema-cristal .pp-neg-ib,
body.tema-cristal .ctc {
    -webkit-backdrop-filter: var(--pp-vidrio);
    backdrop-filter: var(--pp-vidrio);
    border: 1px solid rgba(255, 255, 255, .85) !important;
}

body.tema-cristal .pp-pulso-dato {
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .9);
}

body.tema-cristal #vista-erp .header-erp {
    border-bottom: 1px solid rgba(255, 255, 255, .7);
}

body.tema-cristal #vista-erp .header-erp::before {
    background: rgba(255, 255, 255, .45);
}

body.tema-cristal #vista-erp .bottom-nav {
    left: 14px;
    right: 14px;
    width: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    height: 66px;
    padding-bottom: 0;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .55) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
    backdrop-filter: blur(22px) saturate(1.6) !important;
    box-shadow: 0 16px 40px rgba(60, 50, 160, .18);
}

body.tema-cristal #vista-erp .bottom-nav button.activo::before {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 4px 12px rgba(60, 50, 160, .15);
}

body.tema-cristal #btn-inicio-flotante {
    bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(135deg, #7A6CF0, #5B4FE0 50%, #E0559B) !important;
    border: 3px solid rgba(255, 255, 255, .9) !important;
    box-shadow: 0 14px 30px rgba(91, 79, 224, .4) !important;
}

body.tema-cristal #btn-inicio-flotante svg {
    stroke: #FFFFFF !important;
}

body.tema-cristal #btn-inicio-flotante::after {
    display: none;
}

/* 🎨 [f221] Antes: body.tema-cristal :is(.pp-btn, .pp-chip) · separado para que el navegador lo encuentre rápido */
body.tema-cristal .pp-btn,
body.tema-cristal .pp-chip {
    border-radius: 999px;
}

body.tema-cristal .pp-btn--primario {
    background: linear-gradient(135deg, #7A6CF0, #5B4FE0);
    box-shadow: 0 8px 20px rgba(91, 79, 224, .3);
}

body.tema-cristal .pp-modal-panel,
body.tema-cristal #modal-accion-central .pp-hoja {
    background: rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
    backdrop-filter: blur(26px) saturate(1.6);
    border-radius: 30px 30px 0 0;
}

@media (min-width: 768px) {
    body.tema-cristal #vista-erp .bottom-nav {
        left: 50%;
        right: auto;
        width: min(560px, calc(100% - 24px));
        transform: translateX(-50%);
    }
}

/* Modo liviano: sin desenfoque (celulares sencillos o «reducir transparencia») */
body.tema-cristal.pp-liviano {
    --pp-superficie: rgba(255, 255, 255, .9);
    --pp-sutil: rgba(255, 255, 255, .8);
    --bg-card: rgba(255, 255, 255, .9);
    --pp-vidrio: none;
}

body.tema-cristal.pp-liviano #vista-erp .bottom-nav {
    background: rgba(255, 255, 255, .95) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.tema-cristal.pp-liviano #vista-erp .header-erp::before {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.tema-cristal.pp-liviano :is(.pp-modal-panel, #modal-accion-central .pp-hoja) {
    background: rgba(255, 255, 255, .97) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

@media (prefers-reduced-transparency: reduce) {
    body.tema-cristal {
        --pp-superficie: rgba(255, 255, 255, .92);
        --pp-vidrio: none;
    }
}

/* ═════════════ 7 · IA — futurista ═════════════
   Noche profunda con auras violeta y cian, letra Sora, cifras en
   JetBrains Mono, bordes con degradado, botón principal luminoso y riel en PC. */
body.tema-v2.tema-ia {
    --pp-fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-fuente-marca: 'Sora', 'Inter', system-ui, sans-serif;
    --pp-fuente-titulo: 'Sora', 'Inter', system-ui, sans-serif;
    --pp-fuente-mono: 'JetBrains Mono', ui-monospace, monospace;
    --pp-fuente-cifras: 'JetBrains Mono', ui-monospace, monospace;
    --pp-fw-medio: 500;
    --pp-fw-fuerte: 600;
    --pp-radio-s: 8px;
    --pp-radio-m: 12px;
    --pp-radio-l: 16px;

    --pp-fondo: #07070D;
    --pp-superficie: #0F0F18;
    --pp-sutil: #171724;
    --pp-borde: rgba(255, 255, 255, .09);
    --pp-borde-fuerte: rgba(255, 255, 255, .18);
    --pp-texto: #EEEEF8;
    --pp-texto-2: #A9A9C6;
    --pp-texto-3: #8888A8;
    --pp-texto-off: #4E4E68;
    --pp-acento: #8B7CFF;
    --pp-acento-hover: #A79CFF;
    --pp-sobre-acento: #FFFFFF;
    --pp-acento-suave: rgba(139, 124, 255, .14);
    --pp-acento-texto: #B3A9FF;
    --pp-cian: #38E1F5;
    --pp-degradado: linear-gradient(120deg, #8B7CFF, #5AA8FF 55%, #38E1F5);
    --pp-positivo: #4AE3B5;
    --pp-negativo: #FF7A93;
    --pp-negativo-suave: rgba(255, 122, 147, .13);
    --pp-aviso: #FFC66B;
    --pp-aviso-suave: rgba(255, 198, 107, .13);
    --pp-marca-1: #8B7CFF;
    --pp-marca-2: #38E1F5;
    --pp-dato-1: #8B7CFF;
    --pp-dato-2: #38E1F5;
    --pp-dato-3: #4AE3B5;
    --pp-dato-4: #FF7A93;
    --pp-dato-5: #8888A8;
    --pp-velo: rgba(3, 3, 8, .7);
    --pp-foco: 0 0 0 2px #8B7CFF, 0 0 18px rgba(139, 124, 255, .55);
    --pp-sombra-flotante: 0 0 0 1px rgba(139, 124, 255, .25), 0 24px 60px rgba(0, 0, 0, .7);

    --pp-trazo: 1.6;
    --pp-sombra-tarjeta: 0 1px 0 rgba(255, 255, 255, .05) inset;
    --pp-fondo-img: radial-gradient(55% 35% at 100% 0%, rgba(139, 124, 255, .22), transparent 70%), radial-gradient(45% 30% at 0% 12%, rgba(56, 225, 245, .12), transparent 70%), radial-gradient(60% 40% at 50% 110%, rgba(90, 168, 255, .12), transparent 70%);

    --turquesa: #8B7CFF;
    --turquesa-dark: #6E5EF0;
    --turquesa-light: rgba(139, 124, 255, .14);
    --coral: #FF7A93;
    --bg-app: #07070D;
    --bg-card: #0F0F18;
    --bg-subtle: #171724;
    --bg-hover: #171724;
    --texto-oscuro: #EEEEF8;
    --texto-medio: #A9A9C6;
    --texto-suave: #8888A8;
    --borde: rgba(255, 255, 255, .09);
    --borde-focus: #8B7CFF;
    --success: #4AE3B5;
    --warning: #FFC66B;
    --danger: #FF7A93;
    --accent: #8B7CFF;
    --dark-blue: #EEEEF8;
    --bg: #07070D;
}

/* Tarjetas con borde de degradado sutil */
/* 🎨 [f221] Antes: body.tema-ia :is(.pp-tarjeta, .pp-neg-lista, .pp-neg-online, .ctc) · separado para que el navegador lo encuentre rápido */
body.tema-ia .pp-tarjeta,
body.tema-ia .pp-neg-lista,
body.tema-ia .pp-neg-online,
body.tema-ia .ctc {
    border: 1px solid transparent !important;
    background:
        linear-gradient(var(--pp-superficie), var(--pp-superficie)) padding-box,
        linear-gradient(135deg, rgba(139, 124, 255, .45), rgba(255, 255, 255, .06) 40%, rgba(56, 225, 245, .3)) border-box !important;
}

body.tema-ia #bloque-briefing .pp-decision {
    box-shadow: 0 0 0 1px rgba(139, 124, 255, .25), 0 0 40px rgba(139, 124, 255, .18) !important;
}

body.tema-ia .pp-decision-av {
    background: var(--pp-degradado) !important;
    color: #FFFFFF !important;
}

body.tema-ia .pp-btn--primario {
    background: var(--pp-degradado);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(139, 124, 255, .35);
}

body.tema-ia .pp-btn--primario:hover {
    filter: brightness(1.1);
}

body.tema-ia .pp-chip--acento {
    background: rgba(139, 124, 255, .16);
    color: #C8C0FF;
}

/* 🎨 [f221] Antes: body.tema-ia :is(.pp-neg-sec-tit, .pp-etiqueta-seccion, .pp-num-mini-rotulo, .pp-rotulo) · separado para que el navegador lo encuentre rápido */
body.tema-ia .pp-neg-sec-tit,
body.tema-ia .pp-etiqueta-seccion,
body.tema-ia .pp-num-mini-rotulo,
body.tema-ia .pp-rotulo {
    font-family: var(--pp-fuente-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-texto-3);
}

body.tema-ia .pp-pulso-dato {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--pp-borde);
}

body.tema-ia .pp-num-kpi-monto {
    background: linear-gradient(90deg, #FFFFFF, #C9C2FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.tema-ia #vista-erp .header-erp {
    border-bottom: 1px solid var(--pp-borde);
}

body.tema-ia #vista-erp .header-erp::before {
    background: rgba(7, 7, 13, .72);
}

body.tema-ia #vista-erp .header-erp .hdr-logo-txt {
    background: var(--pp-degradado);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.tema-ia #vista-erp .header-erp .hdr-logo-acc {
    -webkit-text-fill-color: #38E1F5;
}

body.tema-ia #vista-erp .bottom-nav {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 64px;
    padding-bottom: 0;
    border-radius: 22px;
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(15, 15, 24, .94), rgba(15, 15, 24, .94)) padding-box,
        linear-gradient(120deg, rgba(139, 124, 255, .6), rgba(255, 255, 255, .08) 45%, rgba(56, 225, 245, .5)) border-box !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}

body.tema-ia #vista-erp .bottom-nav button.activo {
    color: #FFFFFF;
}

body.tema-ia #vista-erp .bottom-nav button.activo svg {
    filter: drop-shadow(0 0 6px rgba(139, 124, 255, .9)) !important;
    stroke: #C8C0FF;
}

body.tema-ia #btn-inicio-flotante {
    bottom: calc(34px + env(safe-area-inset-bottom, 0px));
    background: var(--pp-degradado) !important;
    border: 0 !important;
    box-shadow: 0 0 0 4px rgba(7, 7, 13, 1), 0 0 30px rgba(139, 124, 255, .6) !important;
}

body.tema-ia #btn-inicio-flotante svg {
    stroke: #FFFFFF !important;
}

body.tema-ia #btn-inicio-flotante::after {
    display: none;
}

body.tema-ia .pp-modal-panel,
body.tema-ia #modal-accion-central .pp-hoja {
    border-color: rgba(139, 124, 255, .3) !important;
}

@media (min-width: 1024px) {
    body.tema-ia #vista-erp .bottom-nav {
        background: rgba(10, 10, 17, .9) !important;
        border-right: 1px solid var(--pp-borde) !important;
    }

    body.tema-ia #btn-inicio-flotante {
        box-shadow: 0 0 26px rgba(139, 124, 255, .55) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.tema-ia #vista-erp .bottom-nav {
        left: 50%;
        right: auto;
        width: min(560px, calc(100% - 24px));
        transform: translateX(-50%);
    }
}

/* ═════════════ 8 · BELLEZA — palo de rosa ═════════════
   Rosa empolvado y oro rosa, títulos con serifa (Playfair Display),
   texto redondeado (Quicksand), formas muy suaves y barra flotante. */
body.tema-belleza {
    --pp-fuente: 'Quicksand', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-fuente-marca: 'Playfair Display', Georgia, serif;
    --pp-fuente-titulo: 'Playfair Display', Georgia, serif;
    --pp-fuente-mono: 'Quicksand', ui-monospace, monospace;
    --pp-fuente-cifras: 'Playfair Display', Georgia, serif;
    --pp-fw-medio: 600;
    --pp-fw-fuerte: 700;
    --pp-radio-s: 12px;
    --pp-radio-m: 18px;
    --pp-radio-l: 26px;

    --pp-fondo: #FBF2F1;
    --pp-superficie: #FFFFFF;
    --pp-sutil: #F8E8E7;
    --pp-borde: #F0DAD8;
    --pp-borde-fuerte: #E1BDBA;
    --pp-texto: #3A2226;
    --pp-texto-2: #6B4B50;
    --pp-texto-3: #87666B;
    --pp-texto-off: #C4A6A9;
    --pp-acento: #A8566A;
    --pp-acento-hover: #8F4558;
    --pp-sobre-acento: #FFFFFF;
    --pp-acento-suave: #F8E1E5;
    --pp-acento-texto: #96475B;
    --pp-oro-rosa: #C99A86;
    --pp-positivo: #3F7F65;
    --pp-negativo: #B8323F;
    --pp-negativo-suave: #FBE3E5;
    --pp-aviso: #8F5A12;
    --pp-aviso-suave: #FBEEDC;
    --pp-marca-1: #A8566A;
    --pp-marca-2: #C99A86;
    --pp-dato-1: #A8566A;
    --pp-dato-2: #C99A86;
    --pp-dato-3: #D8A7B1;
    --pp-dato-4: #3F7F65;
    --pp-dato-5: #87666B;
    --pp-velo: rgba(58, 34, 38, .38);
    --pp-foco: 0 0 0 3px rgba(168, 86, 106, .28);
    --pp-sombra-flotante: 0 18px 40px rgba(168, 86, 106, .18), 0 2px 6px rgba(168, 86, 106, .08);

    --pp-trazo: 1.6;
    --pp-sombra-tarjeta: 0 2px 4px rgba(168, 86, 106, .04), 0 10px 26px rgba(168, 86, 106, .07);
    --pp-fondo-img: radial-gradient(80% 45% at 100% 0%, #F8DEDD 0%, transparent 70%), radial-gradient(60% 40% at 0% 100%, #F6E4DA 0%, transparent 70%);

    --turquesa: #A8566A;
    --turquesa-dark: #8F4558;
    --turquesa-light: #F8E1E5;
    --coral: #B8323F;
    --bg-app: #FBF2F1;
    --bg-card: #FFFFFF;
    --bg-subtle: #F8E8E7;
    --bg-hover: #F8E1E5;
    --texto-oscuro: #3A2226;
    --texto-medio: #6B4B50;
    --texto-suave: #87666B;
    --borde: #F0DAD8;
    --borde-focus: #A8566A;
    --success: #3F7F65;
    --warning: #8F5A12;
    --danger: #B8323F;
    --accent: #A8566A;
    --dark-blue: #3A2226;
    --bg: #FBF2F1;
}

body.tema-belleza #vista-erp .header-erp {
    border-bottom: 1px solid var(--pp-borde);
}

body.tema-belleza #vista-erp .header-erp::before {
    background: rgba(255, 250, 249, .88);
}

/* 🎨 [f221] Antes: body.tema-belleza #vista-erp .header-erp :is(.hdr-logo-txt, .hdr-titulo-modulo) · separado para que el navegador lo encuentre rápido */
body.tema-belleza #vista-erp .header-erp .hdr-logo-txt,
body.tema-belleza #vista-erp .header-erp .hdr-titulo-modulo {
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
    font-size: 21px;
}

body.tema-belleza #vista-erp .header-erp .hdr-logo-acc {
    color: var(--pp-oro-rosa);
}

body.tema-belleza .ctc-tit h3,
body.tema-belleza .pp-pulso-titulo {
    font-style: italic;
    font-weight: 600;
    font-size: 18px;
}

body.tema-belleza #vista-erp .bottom-nav {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 66px;
    padding-bottom: 0;
    border-radius: 999px;
    border: 1px solid var(--pp-borde);
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 14px 34px rgba(168, 86, 106, .16);
}

body.tema-belleza #vista-erp .bottom-nav button.activo::before {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 30px;
    border-radius: 999px;
    background: var(--pp-acento-suave);
}

body.tema-belleza #btn-inicio-flotante {
    bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(140deg, #C47286, #A8566A) !important;
    border: 3px solid #FFFFFF !important;
    box-shadow: 0 0 0 2px var(--pp-oro-rosa), 0 12px 28px rgba(168, 86, 106, .35) !important;
}

body.tema-belleza #btn-inicio-flotante svg {
    stroke: #FFFFFF !important;
}

body.tema-belleza #btn-inicio-flotante::after {
    display: none;
}

/* 🎨 [f221] Antes: body.tema-belleza :is(.pp-btn, .pp-chip) · separado para que el navegador lo encuentre rápido */
body.tema-belleza .pp-btn,
body.tema-belleza .pp-chip {
    border-radius: 999px;
}

body.tema-belleza .pp-btn--primario {
    box-shadow: 0 8px 18px rgba(168, 86, 106, .25);
}

body.tema-belleza .pp-pulso-dato {
    background: #FDF6F5;
    border: 1px solid var(--pp-borde);
}

/* 🎨 [f221] Antes: body.tema-belleza :is(.pp-neg-sec-tit, .pp-etiqueta-seccion) · separado para que el navegador lo encuentre rápido */
body.tema-belleza .pp-neg-sec-tit,
body.tema-belleza .pp-etiqueta-seccion {
    color: var(--pp-acento-texto);
    letter-spacing: .12em;
}

body.tema-belleza .pp-neg-av {
    border-radius: 50%;
    background: linear-gradient(140deg, #F8E1E5, #F3D3C6);
}

body.tema-belleza .pp-modal-panel,
body.tema-belleza #modal-accion-central .pp-hoja {
    border-radius: 30px 30px 0 0;
}

@media (min-width: 768px) {
    body.tema-belleza #vista-erp .bottom-nav {
        left: 50%;
        right: auto;
        width: min(560px, calc(100% - 24px));
        transform: translateX(-50%);
    }
}

/* ═════════════ 9 · SELECTOR DE TEMA (Ajustes › Apariencia) ═════════════
   Grupos «Claros» y «Oscuros». Cada tarjeta: mini vista previa (encabezado,
   tarjeta y botón + con los colores y la forma del tema), nombre con su letra,
   Gratis/PRO (solo lo ve el plan Básico) y sus rasgos de estructura. */
#selector-tema.ts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#selector-tema .ts-grupo-tit {
    margin: 0 2px 8px;
    font: 600 11px/1 var(--pp-fuente);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-texto-3);
}

#selector-tema .ts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

#selector-tema .ts-opt {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    padding: 8px 8px 10px;
    border: 1px solid var(--pp-borde);
    border-radius: 14px;
    background: var(--pp-superficie);
    color: var(--pp-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

#selector-tema .ts-opt:hover {
    border-color: var(--pp-borde-fuerte);
}

#selector-tema .ts-opt.activo {
    border-color: var(--pp-acento);
    box-shadow: 0 0 0 3px var(--pp-acento-suave);
}

#selector-tema .ts-opt:focus-visible {
    outline: 3px solid var(--pp-acento);
    outline-offset: 2px;
}

/* Mini vista previa: --f fondo · --s tarjeta · --b borde · --a botón + · --t texto · --h encabezado · --r esquinas */
#selector-tema .ts-sw {
    --f: #FAFAFA;
    --s: #FFFFFF;
    --b: #E4E4E7;
    --a: #047857;
    --t: #18181B;
    --h: var(--s);
    --r: 8px;
    position: relative;
    display: block;
    height: 76px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: min(var(--r), 12px);
    background: var(--f);
    overflow: hidden;
}

#selector-tema .ts-sw i {
    position: absolute;
    display: block;
}

#selector-tema .ts-sw .ts-hdr {
    left: 0;
    right: 0;
    top: 0;
    height: 13px;
    background: var(--h);
}

#selector-tema .ts-sw .ts-card {
    left: 8px;
    right: 8px;
    top: 20px;
    height: 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 7px;
    box-sizing: border-box;
    background: var(--s);
    border: 1px solid var(--b);
    border-radius: var(--r);
}

#selector-tema .ts-sw .ts-card b {
    display: block;
    height: 4px;
    width: 40%;
    border-radius: 2px;
    background: var(--t);
}

#selector-tema .ts-sw .ts-card b+b {
    width: 60%;
    opacity: .35;
}

#selector-tema .ts-sw .ts-fab {
    right: 10px;
    bottom: 7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--a);
}

#selector-tema .ts-sw--clasico {
    --f: #FAFAFA;
    --s: #FFFFFF;
    --b: #E4E4E7;
    --a: #047857;
    --t: #18181B;
    --r: 8px;
}

#selector-tema .ts-sw--facil {
    --f: #F2F4F7;
    --s: #FFFFFF;
    --b: #6B7280;
    --a: #0B3D91;
    --t: #000000;
    --r: 10px;
}

#selector-tema .ts-sw--facil .ts-card {
    border-width: 1.5px;
}

#selector-tema .ts-sw--andes {
    --f: #F6F0E7;
    --s: #FFFCF6;
    --b: #E6D9C6;
    --a: #B4532A;
    --t: #2B1E15;
    --r: 14px;
}

#selector-tema .ts-sw--papel {
    --f: #F4F3EE;
    --s: #FFFFFF;
    --b: #A9A69A;
    --a: #111111;
    --t: #111111;
    --r: 2px;
}

#selector-tema .ts-sw--papel .ts-fab {
    border-radius: 3px;
}

#selector-tema .ts-sw--ejecutivo {
    --f: #F3F4F7;
    --s: #FFFFFF;
    --b: #DDE1E8;
    --a: #12325B;
    --t: #0F1B2D;
    --h: #12325B;
    --r: 4px;
}

#selector-tema .ts-sw--ejecutivo .ts-hdr {
    border-bottom: 2px solid #A8823F;
}

#selector-tema .ts-sw--ejecutivo .ts-fab {
    border-radius: 6px;
}

#selector-tema .ts-sw--black {
    --f: #0A0A0C;
    --s: #131316;
    --b: #26262B;
    --a: #34D399;
    --t: #F4F4F5;
    --h: #0D0D0F;
    --r: 6px;
    border-color: rgba(255, 255, 255, .06);
}

#selector-tema .ts-sw--black .ts-fab {
    border-radius: 6px;
}

#selector-tema .ts-sw--orquidea {
    --f: #130D19;
    --s: #1C1424;
    --b: #352841;
    --a: #C9A0F4;
    --t: #F7F1FB;
    --h: #160F1D;
    --r: 14px;
    border-color: rgba(255, 255, 255, .06);
}

#selector-tema .ts-nom {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

#selector-tema .ts-nom--facil {
    font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
}

#selector-tema .ts-nom--andes {
    font-family: 'Fraunces', Georgia, serif;
}

#selector-tema .ts-nom--papel {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .04em;
}

#selector-tema .ts-nom--ejecutivo {
    font-family: 'Source Serif 4', Georgia, serif;
}

#selector-tema .ts-nom--black {
    font-family: 'Geist', system-ui, sans-serif;
    letter-spacing: -.02em;
}

#selector-tema .ts-nom--orquidea {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 17px;
}

#selector-tema .ts-chip {
    margin-left: auto;
    flex: none;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--pp-sutil);
    color: var(--pp-texto-2);
    font: 700 9.5px/1 var(--pp-fuente);
    letter-spacing: .04em;
}

#selector-tema .ts-chip--libre {
    background: var(--pp-acento-suave);
    color: var(--pp-acento-texto);
}

#selector-tema .ts-desc {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--pp-texto-2);
}

#selector-tema .ts-rasgos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

#selector-tema .ts-rasgos em {
    padding: 3px 6px;
    border: 1px solid var(--pp-borde);
    border-radius: 6px;
    color: var(--pp-texto-3);
    font: 600 10px/1 var(--pp-fuente);
    font-style: normal;
}

#selector-tema .ts-sw--mercado {
    --f: #FFF5D6;
    --s: #FFFFFF;
    --b: #111111;
    --a: #E8452C;
    --t: #111111;
    --h: #FFC629;
    --r: 8px;
}

#selector-tema .ts-sw--mercado .ts-hdr {
    border-bottom: 2px solid #111111;
}

#selector-tema .ts-sw--mercado .ts-card {
    border-width: 2px;
    box-shadow: 3px 3px 0 #111111;
}

#selector-tema .ts-sw--mercado .ts-fab {
    border-radius: 6px;
    border: 2px solid #111111;
    box-shadow: 2px 2px 0 #111111;
}

#selector-tema .ts-sw--cristal {
    --f: #EEF0FB;
    --s: rgba(255, 255, 255, .62);
    --b: rgba(255, 255, 255, .9);
    --a: #5B4FE0;
    --t: #1B1B3A;
    --h: rgba(255, 255, 255, .45);
    --r: 14px;
    background: linear-gradient(135deg, #C8D4FF, #F6CFF0 50%, #CFF3EC);
}

#selector-tema .ts-sw--cristal .ts-fab {
    background: linear-gradient(135deg, #7A6CF0, #5B4FE0 50%, #E0559B);
}

#selector-tema .ts-sw--belleza {
    --f: #FBF2F1;
    --s: #FFFFFF;
    --b: #F0DAD8;
    --a: #A8566A;
    --t: #3A2226;
    --r: 16px;
}

#selector-tema .ts-sw--ia {
    --f: #07070D;
    --s: #0F0F18;
    --b: rgba(139, 124, 255, .45);
    --a: #8B7CFF;
    --t: #EEEEF8;
    --h: #0A0A12;
    --r: 10px;
    border-color: rgba(255, 255, 255, .06);
    background: radial-gradient(70% 60% at 100% 0%, rgba(139, 124, 255, .35), transparent 70%), #07070D;
}

#selector-tema .ts-sw--ia .ts-fab {
    background: linear-gradient(120deg, #8B7CFF, #38E1F5);
    box-shadow: 0 0 10px rgba(139, 124, 255, .7);
}

#selector-tema .ts-nom--mercado {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
}

#selector-tema .ts-nom--cristal {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

#selector-tema .ts-nom--belleza {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
}

#selector-tema .ts-nom--ia {
    font-family: 'Sora', system-ui, sans-serif;
}