/* ════════════════════════════════════════════════════════════════════
   🎨 PILAS! — temas.css  (f96 · Apariencia de la app, fase 1)
   Temas COMPLETOS: cada tema define su personalidad entera con tokens:
     paleta · tipografía · forma (radios) · sombras · grosor de íconos ·
     barra inferior · fondo de la app.
   · Clásico, Black y Orquídea siguen igual (no se tocan).
   · Andes y Papel (nuevos) usan la clase body.tema-v2 + la de su tema.
   · La parte final («Puente») la genera una herramienta: cambia cada color
     FIJO de styles.css por su token, solo dentro de body.tema-v2.
   · El catálogo del cliente (cara A) NO cambia con el tema de la app:
     su diseño lo decide «Apariencia del catálogo».
   Archivo independiente: no necesita npm run build.
   ════════════════════════════════════════════════════════════════════ */

/* ═════════════ 1 · ANDES — cálido y artesanal ═════════════
   Crema y terracota, títulos con serifa (Fraunces), letra redonda (Nunito),
   bordes suaves, sombras cálidas y barra inferior flotante. */
body.tema-andes {
    --pp-fuente: 'Nunito', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-fuente-marca: 'Fraunces', Georgia, 'Times New Roman', serif;
    --pp-fuente-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
    --pp-fuente-mono: 'Nunito', ui-monospace, monospace;
    --pp-fw-medio: 600;
    --pp-fw-fuerte: 700;
    --pp-radio-s: 8px;
    --pp-radio-m: 14px;
    --pp-radio-l: 20px;

    --pp-fondo: #F6F0E7;
    --pp-superficie: #FFFCF6;
    --pp-sutil: #F1E8DB;
    --pp-borde: #E6D9C6;
    --pp-borde-fuerte: #CFBCA2;
    --pp-texto: #2B1E15;
    --pp-texto-2: #5E4B3B;
    --pp-texto-3: #7F6B59;
    --pp-texto-off: #B3A08A;

    --pp-acento: #B4532A;
    --pp-acento-hover: #93411F;
    --pp-sobre-acento: #FFF8F1;
    --pp-acento-suave: #F7E3D5;
    --pp-acento-texto: #9C4522;
    --pp-positivo: #3E7B4F;
    --pp-negativo: #B3261E;
    --pp-negativo-suave: #FBE7E3;
    --pp-aviso: #A15F00;
    --pp-aviso-suave: #FBEFD9;
    --pp-marca-1: #B4532A;
    --pp-marca-2: #3E7B4F;
    --pp-dato-1: #B4532A;
    --pp-dato-2: #3E7B4F;
    --pp-dato-3: #C38A2C;
    --pp-dato-4: #6E5A8E;
    --pp-dato-5: #7F6B59;
    --pp-velo: rgba(43, 30, 21, .42);
    --pp-foco: 0 0 0 3px rgba(180, 83, 42, .28);
    --pp-sombra-flotante: 0 14px 34px rgba(74, 44, 20, .16), 0 2px 6px rgba(74, 44, 20, .08);

    /* Personalidad */
    --pp-trazo: 1.8;
    --pp-sombra-tarjeta: 0 1px 2px rgba(74, 44, 20, .05), 0 6px 18px rgba(74, 44, 20, .06);
    --pp-fondo-img: radial-gradient(120% 60% at 50% 0%, #FBF6EE 0%, rgba(251, 246, 238, 0) 70%);

    /* Variables de las pantallas antiguas (para que también cambien) */
    --turquesa: #B4532A;
    --turquesa-dark: #93411F;
    --turquesa-light: #F7E3D5;
    --coral: #B3261E;
    --bg-app: #F6F0E7;
    --bg-card: #FFFCF6;
    --bg-subtle: #F1E8DB;
    --bg-hover: #F7E3D5;
    --texto-oscuro: #2B1E15;
    --texto-medio: #5E4B3B;
    --texto-suave: #7F6B59;
    --borde: #E6D9C6;
    --borde-focus: #B4532A;
    --success: #3E7B4F;
    --warning: #A15F00;
    --danger: #B3261E;
    --accent: #B4532A;
    --dark-blue: #2B1E15;
    --bg: #F6F0E7;
}

/* ═════════════ 2 · PAPEL — minimal y editorial ═════════════
   Blanco papel y tinta negra, letra técnica (IBM Plex), números en
   monoespaciada, esquinas rectas, sin sombras y barra inferior mínima. */
body.tema-papel {
    --pp-fuente: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pp-fuente-marca: 'IBM Plex Mono', ui-monospace, monospace;
    --pp-fuente-titulo: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
    --pp-fuente-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --pp-fw-medio: 500;
    --pp-fw-fuerte: 600;
    --pp-radio-s: 2px;
    --pp-radio-m: 3px;
    --pp-radio-l: 4px;

    --pp-fondo: #F4F3EE;
    --pp-superficie: #FFFFFF;
    --pp-sutil: #EEEDE7;
    --pp-borde: #DAD8CF;
    --pp-borde-fuerte: #A9A69A;
    --pp-texto: #111111;
    --pp-texto-2: #3B3A36;
    --pp-texto-3: #6A6862;
    --pp-texto-off: #A3A199;

    --pp-acento: #111111;
    --pp-acento-hover: #333333;
    --pp-sobre-acento: #FFFFFF;
    --pp-acento-suave: #E9E8E1;
    --pp-acento-texto: #111111;
    --pp-positivo: #1D6B3A;
    --pp-negativo: #B42318;
    --pp-negativo-suave: #FBEAE8;
    --pp-aviso: #8A5A00;
    --pp-aviso-suave: #F6EEDC;
    --pp-marca-1: #111111;
    --pp-marca-2: #B42318;
    --pp-dato-1: #111111;
    --pp-dato-2: #6A6862;
    --pp-dato-3: #A3A199;
    --pp-dato-4: #1D6B3A;
    --pp-dato-5: #B42318;
    --pp-velo: rgba(17, 17, 17, .40);
    --pp-foco: 0 0 0 2px #111111;
    --pp-sombra-flotante: 0 0 0 1px #111111;

    /* Personalidad */
    --pp-trazo: 1.25;
    --pp-sombra-tarjeta: none;
    --pp-fondo-img: radial-gradient(circle, rgba(17, 17, 17, .07) 1px, transparent 1.2px) 0 0 / 18px 18px;

    --turquesa: #111111;
    --turquesa-dark: #333333;
    --turquesa-light: #E9E8E1;
    --coral: #B42318;
    --bg-app: #F4F3EE;
    --bg-card: #FFFFFF;
    --bg-subtle: #EEEDE7;
    --bg-hover: #EEEDE7;
    --texto-oscuro: #111111;
    --texto-medio: #3B3A36;
    --texto-suave: #6A6862;
    --borde: #DAD8CF;
    --borde-focus: #111111;
    --success: #1D6B3A;
    --warning: #8A5A00;
    --danger: #B42318;
    --accent: #111111;
    --dark-blue: #111111;
    --bg: #F4F3EE;
}

/* ═════════════ 3 · BASE COMÚN DE LOS TEMAS COMPLETOS (tema-v2) ═════════════ */
body.tema-v2 {
    background: var(--pp-fondo-img), var(--bg-app) !important;
    background-attachment: fixed !important;
    color: var(--pp-texto);
    font-family: var(--pp-fuente) !important;
}

body.tema-v2 button,
body.tema-v2 input,
body.tema-v2 select,
body.tema-v2 textarea {
    font-family: inherit;
}

/* Títulos con la letra del tema */
body.tema-v2 .hdr-titulo-modulo,
body.tema-v2 .pp-modal-titulo,
body.tema-v2 .pp-neg-id-txt b,
body.tema-v2 .pp-cfg-tit,
body.tema-v2 #menu-lateral .pp-menu-negocio,
body.tema-v2 #vista-erp h1,
body.tema-v2 #vista-erp h2,
body.tema-v2 #vista-erp h3 {
    font-family: var(--pp-fuente-titulo) !important;
}

/* Íconos de línea: el grosor lo pone el tema */
body.tema-v2 .pp-icono,
body.tema-v2 :is(#vista-erp, #menu-lateral, .pp-modal, .cat-sheet) svg[stroke="currentColor"],
body.tema-v2 #vista-erp .bottom-nav button svg,
body.tema-v2 #vista-erp .header-erp>button svg {
    stroke-width: var(--pp-trazo) !important;
}

/* Tarjetas */
body.tema-v2 .pp-tarjeta,
body.tema-v2 .pp-neg-lista,
body.tema-v2 .pp-neg-rapido {
    box-shadow: var(--pp-sombra-tarjeta);
}

/* Encabezado */
/* 🔔 [f105] El desenfoque va en una capa DETRÁS del encabezado, no en el encabezado mismo:
   un elemento con backdrop-filter se vuelve la «pantalla» de todo lo fijo que lleva adentro,
   y por eso la hoja de la campana (y el menú ⋯) se dibujaban arriba, fuera de la pantalla. */
body.tema-v2 #vista-erp .header-erp {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.tema-v2 #vista-erp .header-erp::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: color-mix(in srgb, var(--pp-superficie) 88%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}

/* Estilos escritos dentro de las pantallas (style="…") con el turquesa de antes */
body.tema-v2 [style*="color:#00D1B2" i],
body.tema-v2 [style*="color: #00D1B2" i],
body.tema-v2 [style*="color:#00C8B6" i],
body.tema-v2 [style*="color: #00C8B6" i],
body.tema-v2 [style*="color: rgb(0, 209, 178)"],
body.tema-v2 [style*="color: rgb(0, 200, 182)"] {
    color: var(--pp-acento-texto) !important;
}

body.tema-v2 [style*="background:#00D1B2" i],
body.tema-v2 [style*="background: #00D1B2" i],
body.tema-v2 [style*="background:#00C8B6" i],
body.tema-v2 [style*="background: #00C8B6" i],
body.tema-v2 [style*="background-color:#00D1B2" i],
body.tema-v2 [style*="background-color: #00D1B2" i],
body.tema-v2 [style*="background: rgb(0, 209, 178)"],
body.tema-v2 [style*="background-color: rgb(0, 209, 178)"],
body.tema-v2 [style*="background: rgb(0, 200, 182)"] {
    background: var(--pp-acento) !important;
    color: var(--pp-sobre-acento) !important;
}

body.tema-v2 [style*="color:#05111F" i],
body.tema-v2 [style*="color: rgb(5, 17, 31)"] {
    color: var(--pp-sobre-acento) !important;
}

/* Avisos (toasts) con los colores del tema */
body.tema-v2 #toast-container-ko>div {
    border-radius: var(--pp-radio-m) !important;
    font-family: var(--pp-fuente) !important;
    box-shadow: var(--pp-sombra-flotante) !important;
}

body.tema-v2 #toast-container-ko>div[style*="rgb(0, 209, 178)"] {
    background: var(--pp-acento) !important;
    color: var(--pp-sobre-acento) !important;
}

body.tema-v2 #toast-container-ko>div[style*="rgb(26, 26, 46)"] {
    background: var(--pp-texto) !important;
    color: var(--pp-superficie) !important;
}

body.tema-v2 #toast-container-ko>div[style*="rgb(255, 107, 107)"] {
    background: var(--pp-negativo) !important;
    color: #FFFFFF !important;
}

body.tema-papel #toast-container-ko>div {
    box-shadow: 3px 3px 0 var(--pp-borde-fuerte) !important;
}

/* El catálogo del cliente (cara A) conserva su propio diseño */
body.tema-v2 #vista-cliente {
    font-family: initial;
}

/* ═════════════ 4 · PERSONALIDAD DE ANDES ═════════════ */
/* Barra inferior flotante (píldora) */
body.tema-andes #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: 26px;
    background: color-mix(in srgb, var(--pp-superficie) 92%, transparent);
    box-shadow: 0 10px 30px rgba(74, 44, 20, .14), 0 2px 6px rgba(74, 44, 20, .06);
}

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

body.tema-andes #btn-inicio-flotante {
    bottom: calc(34px + env(safe-area-inset-bottom, 0px));
    background: var(--pp-acento) !important;
    color: var(--pp-sobre-acento) !important;
    border: 3px solid var(--pp-superficie);
    box-shadow: 0 10px 24px rgba(180, 83, 42, .35) !important;
}

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

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

@media (min-width: 768px) {

    /* En tablet y PC la píldora queda centrada */
    body.tema-andes #vista-erp .bottom-nav {
        left: 50%;
        right: auto;
        width: min(560px, calc(100% - 24px));
        transform: translateX(-50%);
    }
}

/* Botones redondeados y cálidos */
body.tema-andes .pp-btn {
    border-radius: 999px;
}

body.tema-andes .pp-btn--primario {
    box-shadow: 0 6px 16px rgba(180, 83, 42, .25);
}

body.tema-andes .pp-chip {
    border-radius: 999px;
}

body.tema-andes .pp-campo {
    border-radius: var(--pp-radio-m);
}

body.tema-andes .pp-modal-panel {
    border-radius: 26px 26px 0 0;
}

@media (min-width: 640px) {
    body.tema-andes .pp-modal-panel {
        border-radius: 26px;
    }
}

body.tema-andes .pp-neg-sec-tit,
body.tema-andes .pp-etiqueta-seccion {
    letter-spacing: .08em;
}

/* ═════════════ 5 · PERSONALIDAD DE PAPEL ═════════════ */
/* Tarjetas: borde de tinta fino, sin sombra */
body.tema-papel .pp-tarjeta,
body.tema-papel .pp-neg-lista,
body.tema-papel .pp-neg-rapido {
    border-color: var(--pp-borde-fuerte);
    box-shadow: none;
}

/* Barra inferior mínima: etiquetas en monoespaciada y línea de tinta en la activa */
body.tema-papel #vista-erp .bottom-nav {
    background: var(--pp-superficie);
    border-top: 1.5px solid var(--pp-texto);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

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

body.tema-papel #vista-erp .bottom-nav button {
    color: var(--pp-texto-3);
}

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

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

/* Botón + : cuadrado de tinta */
body.tema-papel #btn-inicio-flotante {
    border-radius: 6px !important;
    background: var(--pp-texto) !important;
    color: var(--pp-superficie) !important;
    border: 0;
    box-shadow: 4px 4px 0 var(--pp-borde-fuerte) !important;
}

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

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

/* Encabezado: línea de tinta */
body.tema-papel #vista-erp .header-erp {
    background: var(--pp-superficie);
    border-bottom: 1.5px solid var(--pp-texto);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.tema-papel #vista-erp .header-erp::before {
    display: none;
}

/* 🔔 [f105] */
body.tema-papel .hdr-titulo-modulo {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 15px;
}

/* Rótulos y cifras en monoespaciada */
body.tema-papel .pp-neg-sec-tit,
body.tema-papel .pp-etiqueta-seccion,
body.tema-papel .pp-chip {
    font-family: var(--pp-fuente-mono);
}

body.tema-papel .pp-chip {
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body.tema-papel .pp-btn--primario {
    box-shadow: 3px 3px 0 var(--pp-borde-fuerte);
}

body.tema-papel .pp-btn--secundario {
    border-color: var(--pp-texto);
}

body.tema-papel .pp-campo:focus {
    box-shadow: none;
    border-color: var(--pp-texto);
}

body.tema-papel .pp-modal-panel {
    border-radius: 4px 4px 0 0;
    border-color: var(--pp-texto);
}

@media (min-width: 640px) {
    body.tema-papel .pp-modal-panel {
        border-radius: 4px;
    }
}

body.tema-papel .pp-neg-tile-ico,
body.tema-papel .pp-neg-card-ico {
    border-radius: 4px;
}

/* ═════════════ 6 · SELECTOR DE TEMA con vista previa (Ajustes › Apariencia) ═════════════ */
#selector-tema.pp-cfg-temas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
}

#selector-tema .tema-opt {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 8px 10px;
    border-radius: 14px;
    text-align: left;
    font-size: 13px;
}

#selector-tema .tema-opt .tema-opt-swatch {
    width: 100%;
    height: 64px;
    border-radius: 9px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

#selector-tema .tema-opt .tema-opt-swatch::before,
#selector-tema .tema-opt .tema-opt-swatch::after {
    content: '';
    position: absolute;
}

/* Barra de arriba + tarjeta + botón de acento, con los colores de cada tema */
#selector-tema .tema-opt-swatch::before {
    left: 8px;
    right: 8px;
    top: 8px;
    height: 8px;
    border-radius: 3px;
}

#selector-tema .tema-opt-swatch::after {
    left: 8px;
    bottom: 8px;
    width: 42%;
    height: 18px;
    border-radius: 6px;
}

#selector-tema .pp-cfg-swatch--clasico {
    background: #FAFAFA;
}

#selector-tema .pp-cfg-swatch--clasico::before {
    background: #E4E4E7;
}

#selector-tema .pp-cfg-swatch--clasico::after {
    background: #047857;
}

#selector-tema .pp-cfg-swatch--black {
    background: #09090B;
}

#selector-tema .pp-cfg-swatch--black::before {
    background: #26262B;
}

#selector-tema .pp-cfg-swatch--black::after {
    background: #34D399;
}

#selector-tema .pp-cfg-swatch--orquidea {
    background: #140F1A;
}

#selector-tema .pp-cfg-swatch--orquidea::before {
    background: #33273F;
}

#selector-tema .pp-cfg-swatch--orquidea::after {
    background: #C69CF2;
}

#selector-tema .pp-cfg-swatch--andes {
    background: radial-gradient(120% 80% at 50% 0%, #FBF6EE, #F1E8DB);
}

#selector-tema .pp-cfg-swatch--andes::before {
    background: #E6D9C6;
    border-radius: 99px;
}

#selector-tema .pp-cfg-swatch--andes::after {
    background: #B4532A;
    border-radius: 99px;
}

#selector-tema .pp-cfg-swatch--papel {
    background: #F4F3EE radial-gradient(circle, rgba(17, 17, 17, .12) 1px, transparent 1.2px) 0 0 / 8px 8px;
    border-radius: 3px;
}

#selector-tema .pp-cfg-swatch--papel::before {
    background: #111111;
    height: 2px;
    border-radius: 0;
}

#selector-tema .pp-cfg-swatch--papel::after {
    background: #111111;
    border-radius: 2px;
    box-shadow: 2px 2px 0 #A9A69A;
}

#selector-tema .tema-opt-nombre {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-weight: 700;
}

#selector-tema .tema-opt-desc {
    font-size: 11px;
    font-weight: 500;
    opacity: .75;
    line-height: 1.3;
}

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

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

#selector-tema .tema-opt.activo {
    border-color: var(--pp-acento, #047857);
    box-shadow: 0 0 0 3px var(--pp-acento-suave, #ECFDF5);
    background: var(--pp-superficie, #fff);
    color: var(--pp-texto, #18181B);
}

/* ═════════════ 7 · PUENTE (generado): colores fijos de styles.css → tokens del tema ═════════════
   Solo aplica a Andes y Papel (body.tema-v2). Si cambias styles.css, se vuelve a generar. */
body.tema-v2 .hdr-icon-badge {
    background: var(--pp-negativo)
}

body.tema-v2 .hdr-wifi-online {
    color: var(--pp-positivo)
}

body.tema-v2 .hdr-wifi-offline {
    color: var(--coral, var(--pp-negativo))
}

body.tema-v2 .bottom-nav button.activo svg {
    filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--pp-acento) 35%, transparent))
}

body.tema-v2 .btn-cerrar-menu {
    color: var(--pp-texto-3)
}

body.tema-v2 .btn-oferta-especial.activo {
    background: var(--pp-superficie)
}

body.tema-v2 #panel-admin {
    background: var(--pp-superficie);
    border: 1px solid var(--pp-borde)
}

body.tema-v2 .seccion-admin {
    border-bottom: 1px dashed var(--pp-borde)
}

body.tema-v2 .input-admin:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-acento) 12%, transparent)
}

body.tema-v2 .btn-admin-acc {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pp-acento) 25%, transparent)
}

body.tema-v2 .btn-admin-acc:hover {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pp-acento) 35%, transparent)
}

body.tema-v2 .btn-admin-acc:active {
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pp-acento) 20%, transparent)
}

body.tema-v2 .fila-descuento {
    background: var(--pp-sutil);
    border: 1px solid var(--pp-borde)
}

body.tema-v2 .fila-descuento span {
    color: var(--pp-texto-2)
}

body.tema-v2 .select-mini {
    border: 1px solid var(--pp-borde)
}

body.tema-v2 .badge-promo-mini {
    background: var(--pp-acento);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--pp-acento) 30%, transparent)
}

body.tema-v2 .badge-stock-zero {
    background: var(--pp-negativo)
}

body.tema-v2 .btn-agotado {
    color: var(--pp-texto-2)
}

body.tema-v2 .tabla-variantes-container {
    border: 1px solid var(--pp-borde)
}

body.tema-v2 .tabla-stock th {
    background: var(--pp-sutil);
    color: var(--pp-texto-3);
    border-bottom: 1px solid var(--pp-borde)
}

body.tema-v2 .tabla-stock td {
    border-bottom: 1px solid var(--pp-borde)
}

body.tema-v2 .input-tabla {
    border: 1px solid var(--pp-borde);
    background-color: var(--pp-superficie)
}

body.tema-v2 .nav-app-container {
    border-bottom: 2px solid var(--pp-borde)
}

body.tema-v2 .btn-nav-app {
    background: var(--pp-sutil);
    border: 1px solid var(--pp-borde);
    color: var(--pp-texto-3)
}

body.tema-v2 .btn-nav-info {
    color: var(--pp-texto-2)
}

body.tema-v2 #modalPago .modal-content,
body.tema-v2 #modalFactura .modal-content {
    background: var(--pp-superficie);
    border: 1px solid var(--pp-borde)
}

body.tema-v2 .btn-wsp-checkout {
    box-shadow: 0 6px 15px color-mix(in srgb, var(--pp-acento) 30%, transparent)
}

body.tema-v2 #widget-caminador {
    background: var(--pp-superficie);
    border: 1px solid var(--pp-borde)
}

body.tema-v2 .radar-burbuja {
    background: var(--pp-superficie);
    border: 1px solid var(--pp-borde)
}

body.tema-v2 .tienda-gran-label {
    color: var(--pp-texto-3)
}

body.tema-v2 .pilas-logo {
    filter: drop-shadow(0 10px 15px color-mix(in srgb, var(--pp-acento) 20%, transparent))
}

body.tema-v2 .pilas-tagline {
    border-top: 1px solid var(--pp-borde)
}

body.tema-v2 .pilas-btn-equipo {
    background: var(--pp-superficie);
    border: 2px solid var(--pp-borde)
}

body.tema-v2 .zona-filtros-sticky {
    background: var(--pp-sutil)
}

body.tema-v2 .input-search-pro {
    background: var(--pp-superficie);
    border: 1px solid var(--pp-borde)
}

body.tema-v2 .input-search-pro:focus {
    background: var(--pp-superficie)
}

body.tema-v2 .menu-lateral-cli {
    background: var(--pp-superficie)
}

body.tema-v2 .menu-cli-item {
    border-bottom: 1px solid var(--pp-borde)
}

body.tema-v2 .btn-volver-slide {
    color: var(--pp-texto)
}

body.tema-v2 .titulo-header-slide {
    color: var(--pp-texto)
}

body.tema-v2 .btn-fila-add {
    background: var(--turquesa, var(--pp-acento))
}

body.tema-v2 .spec-title {
    color: var(--pp-texto-3)
}

body.tema-v2 .spec-data {
    color: var(--pp-texto)
}

body.tema-v2 .pct-verde {
    color: var(--pp-positivo)
}

body.tema-v2 .pct-rojo {
    color: var(--pp-negativo)
}

body.tema-v2 .bal-kpi {
    background: var(--bg-card, var(--pp-superficie))
}

body.tema-v2 .kpi-verde {
    color: var(--pp-positivo)
}

body.tema-v2 .kpi-rojo {
    color: var(--pp-negativo)
}

body.tema-v2 .status-verde {
    color: var(--pp-positivo)
}

body.tema-v2 .status-rojo {
    color: var(--pp-negativo)
}

body.tema-v2 .bal-barra {
    background: linear-gradient(to top, var(--pp-acento), var(--pp-acento))
}

body.tema-v2 .bal-barra.negativa {
    background: linear-gradient(to top, var(--pp-negativo), var(--pp-negativo))
}

body.tema-v2 .bal-ecuacion {
    background: var(--bg-card, var(--pp-superficie))
}

body.tema-v2 .btn-entra {
    background: linear-gradient(135deg, var(--pp-acento) 0%, #007A73 100%);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--pp-acento) 35%, transparent)
}

body.tema-v2 .btn-sale {
    background: linear-gradient(135deg, var(--pp-negativo) 0%, var(--pp-negativo) 100%)
}

body.tema-v2 .modal-datos-dia {
    background: var(--pp-sutil);
    border-left: 3px solid var(--pp-positivo)
}

body.tema-v2 .opcion-card {
    background: var(--pp-sutil)
}

body.tema-v2 .opcion-card.verde:hover {
    border-color: var(--pp-acento)
}

body.tema-v2 .opcion-card.roja:hover {
    border-color: var(--pp-negativo)
}

body.tema-v2 .opcion-card.sugerida {
    background: color-mix(in srgb, var(--pp-acento) 6%, transparent) !important
}

body.tema-v2 .opcion-card.sugerida .opcion-card-icono {
    background: color-mix(in srgb, var(--pp-acento) 15%, transparent) !important
}

body.tema-v2 .otros-ing-form {
    background: var(--pp-sutil);
    border: 1.5px solid var(--pp-borde)
}

body.tema-v2 .otros-ing-form label {
    color: var(--pp-texto-2)
}

body.tema-v2 .otros-ing-form input,
body.tema-v2 .otros-ing-form select {
    border: 1.5px solid var(--pp-borde);
    color: var(--pp-texto);
    background: var(--pp-superficie)
}

body.tema-v2 .otros-ing-btn-confirmar {
    background: linear-gradient(135deg, var(--pp-acento), #009FA8)
}

body.tema-v2 .diploma-container {
    background: linear-gradient(135deg, #1A2930, var(--pp-acento));
    box-shadow: 0 15px 30px color-mix(in srgb, var(--pp-acento) 40%, transparent)
}

body.tema-v2 .menu-item-lateral.activo {
    background: color-mix(in srgb, var(--pp-acento) 8%, transparent)
}

body.tema-v2 .menu-seccion-label.verde {
    color: var(--pp-positivo)
}

body.tema-v2 .menu-seccion-label.gris {
    color: var(--pp-texto-2)
}

body.tema-v2 .brain-card {
    border: 1px solid color-mix(in srgb, var(--pp-acento) 18%, transparent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 color-mix(in srgb, var(--pp-acento) 8%, transparent)
}

body.tema-v2 .brain-card.brief-celebra {
    border-color: color-mix(in srgb, var(--pp-acento) 55%, transparent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 color-mix(in srgb, var(--pp-acento) 15%, transparent), 0 0 24px color-mix(in srgb, var(--pp-acento) 22%, transparent)
}

body.tema-v2 .brain-avatar {
    background: linear-gradient(135deg, var(--pp-acento), var(--pp-negativo))
}

body.tema-v2 .brain-avatar::before {
    border: 2px solid color-mix(in srgb, var(--pp-acento) 45%, transparent)
}

body.tema-v2 .brain-avatar.pensando::after {
    border-top-color: var(--pp-acento);
    border-right-color: color-mix(in srgb, var(--pp-acento) 30%, transparent)
}

body.tema-v2 .brain-label {
    color: var(--pp-acento-texto)
}

body.tema-v2 .brain-btn-reload:hover {
    background: color-mix(in srgb, var(--pp-acento) 10%, transparent);
    border-color: color-mix(in srgb, var(--pp-acento) 30%, transparent);
    color: var(--pp-acento-texto)
}

body.tema-v2 #briefing-cursor {
    background: var(--pp-acento) !important
}

body.tema-v2 .brain-contexto-badge {
    background: color-mix(in srgb, var(--pp-acento) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--pp-acento) 15%, transparent)
}

body.tema-v2 .brain-chat-titulo {
    color: color-mix(in srgb, var(--pp-acento) 70%, transparent)
}

body.tema-v2 .brain-chip {
    background: color-mix(in srgb, var(--pp-acento) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--pp-acento) 18%, transparent);
    color: var(--pp-acento-texto)
}

body.tema-v2 .brain-chip:hover {
    background: color-mix(in srgb, var(--pp-acento) 15%, transparent);
    border-color: color-mix(in srgb, var(--pp-acento) 40%, transparent)
}

body.tema-v2 .brain-input-wrap:focus-within {
    border-color: color-mix(in srgb, var(--pp-acento) 40%, transparent);
    background: color-mix(in srgb, var(--pp-acento) 4%, transparent)
}

body.tema-v2 .brain-btn-enviar {
    background: linear-gradient(135deg, var(--pp-acento), var(--pp-acento))
}

body.tema-v2 .brain-progress-bar {
    background: color-mix(in srgb, var(--pp-acento) 8%, transparent)
}

body.tema-v2 .brain-progress-bar::after {
    background: linear-gradient(90deg, transparent, var(--pp-acento), transparent)
}

body.tema-v2 .carrusel-ring {
    background: linear-gradient(135deg, var(--pp-acento), var(--pp-negativo))
}

body.tema-v2 .perfil-b2b-cabecera {
    background: linear-gradient(135deg, color-mix(in srgb, var(--pp-acento) 7%, transparent), rgba(255, 107, 107, .05))
}

body.tema-v2 .perfil-b2b-btn-postular {
    background: linear-gradient(135deg, var(--pp-acento), var(--pp-acento));
    color: var(--pp-sobre-acento)
}

body.tema-v2 #pwa-install-banner {
    border-top: 1px solid color-mix(in srgb, var(--pp-acento) 25%, transparent)
}

body.tema-v2 .pwa-btn-install {
    background: linear-gradient(135deg, var(--pp-acento), var(--pp-acento));
    color: var(--pp-sobre-acento)
}

body.tema-v2 .dock-btn.activo {
    background: color-mix(in srgb, var(--pp-acento) 14%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--pp-acento) 25%, transparent)
}

body.tema-v2 .dock-btn.dock-chat {
    border-color: color-mix(in srgb, var(--pp-acento) 45%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--pp-acento) 18%, transparent)
}

body.tema-v2 .panel-chat .brain-input-wrap {
    border: 1.5px solid color-mix(in srgb, var(--pp-acento) 35%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-acento) 7%, transparent), inset 0 1px 0 rgba(255, 255, 255, .05)
}

body.tema-v2 #rp-header-slot.hdr-dropdown {
    background: var(--bg-card, var(--pp-superficie))
}

body.tema-v2 .hdr-dropdown-lbl {
    color: var(--texto, var(--pp-texto))
}

body.tema-v2 #rp-header-slot.hdr-dropdown .hdr-icon-badge {
    color: var(--coral, var(--pp-negativo))
}

body.tema-v2 #pili-mini {
    border: 1.5px solid color-mix(in srgb, var(--pp-acento) 55%, transparent)
}

body.tema-v2 #pili-mini-burbuja {
    border: 1px solid color-mix(in srgb, var(--pp-acento) 35%, transparent)
}

body.tema-v2 #pv-btn {
    background: var(--pp-superficie);
    border: 2px solid var(--turquesa, var(--pp-acento))
}

body.tema-v2 #pv-btn::after {
    border: 2px solid color-mix(in srgb, var(--pp-acento) 45%, transparent)
}

body.tema-v2 #pv-chat {
    background: var(--pp-superficie)
}

body.tema-v2 #pv-cerrar {
    background: var(--pp-sutil)
}

body.tema-v2 #pv-input:focus {
    border-color: var(--turquesa, var(--pp-acento))
}

body.tema-v2 #pv-send {
    color: var(--turquesa, var(--pp-acento-texto))
}

body.tema-v2 #pv-mic.escuchando {
    color: var(--coral, var(--pp-negativo))
}

body.tema-v2 #pv-reset {
    background: var(--pp-sutil)
}

body.tema-v2 #btn-pili-flotante {
    background: linear-gradient(145deg, #00E0C0 0%, var(--turquesa, var(--pp-acento)) 55%, #00A88F 100%);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--pp-acento) 42%, transparent), 0 4px 10px rgba(31, 45, 61, .18)
}

body.tema-v2 #btn-pili-flotante::after {
    border: 2px solid color-mix(in srgb, var(--pp-acento) 50%, transparent)
}

body.tema-v2 #lista-etiquetas-confianza span {
    border: 1px solid color-mix(in srgb, var(--pp-acento) 28%, transparent);
    border-left: 3px solid var(--turquesa, var(--pp-acento))
}

body.tema-v2 .nc-item-fondo {
    background: linear-gradient(90deg, var(--pp-negativo), #ff8787)
}

body.tema-v2 .nc-item {
    border-left: 3px solid var(--turquesa, var(--pp-acento))
}

body.tema-v2 .nc-item:has(.nc-compra) {
    border-left-color: var(--coral, var(--pp-negativo))
}

body.tema-v2 #pv-nudge {
    background: linear-gradient(135deg, #00E0C0, var(--turquesa, var(--pp-acento)));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--pp-acento) 40%, transparent)
}

body.tema-v2 #bc-scan-btn.bc-scan-flotante {
    background: var(--bg-card, var(--pp-superficie));
    border: 1.5px solid var(--turquesa, var(--pp-acento))
}

body.tema-v2 .bc-modal-card,
body.tema-v2 .bc-scan-card {
    background: var(--pp-superficie)
}

body.tema-v2 .bc-modal-head {
    background: var(--pp-superficie)
}

body.tema-v2 .bc-modal-x {
    color: var(--pp-texto-2)
}

body.tema-v2 .bc-label {
    color: var(--pp-texto-2)
}

body.tema-v2 .bc-select {
    color: var(--pp-texto);
    background: var(--pp-superficie)
}

body.tema-v2 .bc-btn-primary {
    background: linear-gradient(135deg, #00E0C0, var(--pp-acento))
}

body.tema-v2 .bc-card-svg {
    background: var(--pp-superficie)
}

body.tema-v2 .bc-btn-mini {
    color: var(--pp-acento-texto)
}

body.tema-v2 .bc-scan-laser {
    background: var(--pp-negativo)
}

body.tema-v2 .inv-tool {
    background: var(--bg-card, var(--pp-superficie))
}

body.tema-v2 .inv-tool:hover {
    border-color: var(--turquesa, var(--pp-acento));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pp-acento) 15%, transparent)
}

body.tema-v2 .inv-panel-head {
    background: var(--bg-card, var(--pp-superficie))
}

body.tema-v2 .inv-panel-x {
    color: var(--pp-texto-2)
}

body.tema-v2 .sri-header {
    background: var(--bg-card, var(--pp-superficie))
}

body.tema-v2 .sri-regimen {
    color: var(--turquesa, var(--pp-acento-texto))
}

body.tema-v2 .sri-seccion-tit {
    color: var(--texto-medio, var(--pp-texto-2))
}

body.tema-v2 .sri-card {
    background: var(--bg-card, var(--pp-superficie))
}

body.tema-v2 .sri-card-lbl {
    color: var(--texto-medio, var(--pp-texto-2))
}

body.tema-v2 .sri-pos {
    color: var(--pp-positivo)
}

body.tema-v2 .sri-neg {
    color: var(--coral, var(--pp-negativo))
}

body.tema-v2 .sri-total-linea {
    color: var(--texto-medio, var(--pp-texto-2))
}

body.tema-v2 .sri-resultado-lbl {
    color: var(--texto-medio, var(--pp-texto-2))
}

body.tema-v2 .sri-card-info {
    background: var(--bg-card, var(--pp-superficie))
}

body.tema-v2 .sri-card-txt {
    color: var(--texto-medio, var(--pp-texto-2))
}

body.tema-v2 .sri-disclaimer {
    color: var(--texto-medio, var(--pp-texto-2))
}

body.tema-v2 .sri-btn-compartir {
    background: linear-gradient(135deg, #00E0C0, var(--pp-acento))
}

body.tema-v2 .sri-cargando,
body.tema-v2 .sri-error {
    color: var(--texto-medio, var(--pp-texto-2))
}

body.tema-v2 .sri-spinner {
    border-top-color: var(--turquesa, var(--pp-acento))
}

body.tema-v2 .zona-peligro-txt {
    color: var(--texto-medio, var(--pp-texto-2))
}

body.tema-v2 .hdr-logo-txt {
    color: var(--turquesa, var(--pp-acento-texto));
    filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--pp-acento) 18%, transparent))
}

body.tema-v2 .hdr-logo-acc {
    color: var(--coral, var(--pp-negativo))
}

body.tema-v2 .cat-btn-filtros {
    border: 1px solid var(--pp-borde);
    background: var(--pp-superficie);
    color: var(--pp-texto)
}

body.tema-v2 .cat-btn-filtros.activo {
    border-color: var(--turquesa, var(--pp-acento));
    background: color-mix(in srgb, var(--pp-acento) 8%, transparent)
}

body.tema-v2 .cat-chip {
    background: color-mix(in srgb, var(--pp-acento) 12%, transparent)
}

body.tema-v2 .cat-chip-orden {
    background: var(--pp-sutil);
    color: var(--pp-texto-2)
}

body.tema-v2 .cat-sheet-caja {
    background: var(--pp-superficie)
}

body.tema-v2 .cat-sheet-cab {
    color: var(--pp-texto)
}

body.tema-v2 .cat-sheet-x {
    color: var(--pp-texto-2)
}

body.tema-v2 .cat-lbl {
    color: var(--pp-texto-2)
}

body.tema-v2 .cat-swatch {
    border: 1px solid var(--pp-borde);
    background: var(--pp-superficie);
    color: var(--pp-texto)
}

body.tema-v2 .cat-swatch.activo {
    border-color: var(--turquesa, var(--pp-acento));
    background: color-mix(in srgb, var(--pp-acento) 10%, transparent)
}

body.tema-v2 .cat-precio span {
    color: var(--pp-texto-3)
}

body.tema-v2 .cat-sheet-pie {
    border-top: 1px solid var(--pp-borde)
}

body.tema-v2 .cat-btn-limpiar {
    border: 1px solid var(--pp-borde);
    background: var(--pp-superficie);
    color: var(--pp-texto-2)
}

body.tema-v2 .cat-btn-ver {
    background: var(--turquesa, var(--pp-acento))
}

body.tema-v2 .cat-vacio {
    color: var(--pp-texto-3)
}

body.tema-v2 .cat-pill {
    background: var(--pp-sutil);
    color: var(--pp-texto)
}

body.tema-v2 .cat-sec-tit {
    color: var(--pp-texto)
}

body.tema-v2 .cat-otro {
    background: var(--pp-superficie);
    border: 2px solid var(--pp-borde)
}

body.tema-v2 .cat-otro.actual {
    border-color: var(--turquesa, var(--pp-acento))
}

body.tema-v2 .cat-otro img {
    background: var(--pp-sutil)
}

body.tema-v2 .cat-otro-nom {
    color: var(--pp-texto)
}

body.tema-v2 .pp-pos-canal select option {
    color: var(--pp-texto)
}

body.tema-v2 .pp-pro-movil {
    background: var(--pp-superficie);
    color: var(--pp-texto)
}

body.tema-v2 .pp-pro-movil-img {
    background: var(--pp-sutil);
    color: var(--pp-texto-3)
}

body.tema-v2 .pp-pro-movil-cuerpo h4 {
    color: var(--pp-texto)
}

body.tema-v2 .pp-pro-movil-cuerpo p {
    color: var(--pp-texto-2)
}

body.tema-v2 .pp-cfg-swatch--clasico {
    background: linear-gradient(135deg, var(--pp-sutil) 55%, #047857 55%)
}

body.tema-v2 #mod-configuracion .pp-cfg-switch::after {
    background: var(--pp-superficie)
}

body.tema-v2 .pp-tut-diploma-btn {
    background: var(--pp-superficie)
}

body.tema-v2 .badge-promo-mini.badge-ultimas {
    background: var(--pp-aviso)
}

body.tema-v2 .nc-item.nc-pedido,
body.tema-v2 #mod-inicio .nc-item.nc-pedido {
    border-left: 3px solid var(--pp-acento, var(--pp-acento));
    background: var(--pp-acento-suave, color-mix(in srgb, var(--pp-acento) 8%, transparent))
}

body.tema-v2 .nc-pedido-num {
    color: var(--pp-texto, var(--pp-texto))
}

body.tema-v2 .nc-pedido-origen {
    background: var(--pp-superficie, var(--pp-superficie));
    color: var(--pp-texto-2, var(--pp-texto-2))
}

body.tema-v2 .nc-pedido-total {
    color: var(--pp-texto, var(--pp-texto))
}

body.tema-v2 .nc-pedido-items li {
    color: var(--pp-texto, var(--pp-texto))
}

body.tema-v2 .nc-pedido-cod {
    color: var(--pp-texto-3, var(--pp-texto-3))
}

body.tema-v2 .nc-pedido-factura {
    color: var(--pp-texto-2, var(--pp-texto-2))
}

body.tema-v2 .cat-btn-esp.activo {
    border-color: var(--pp-negativo);
    color: var(--pp-negativo)
}

body.tema-v2 .cat-vacio-especial {
    color: var(--pp-texto-2)
}

body.tema-v2 .cat-vacio-especial button {
    background: var(--pp-acento)
}

body.tema-v2 .btn-fila-avisame {
    border: 1.5px solid var(--pp-negativo);
    background: var(--pp-superficie);
    color: var(--pp-negativo)
}

body.tema-v2 .btn-fila-avisame.hecho {
    color: var(--pp-texto-2)
}

body.tema-v2 .cat-rel {
    border: 1px solid var(--pp-borde);
    background: var(--pp-superficie)
}

body.tema-v2 .cat-rel img {
    background: var(--pp-sutil)
}

body.tema-v2 .cat-rel-nom {
    color: var(--pp-texto)
}

body.tema-v2 .cat-esq {
    background: var(--pp-superficie)
}

body.tema-v2 .cat-esq i,
body.tema-v2 .cat-esq b,
body.tema-v2 .cat-esq s {
    background: linear-gradient(90deg, var(--pp-sutil) 25%, #e9ecef 50%, var(--pp-sutil) 75%)
}

body.tema-v2 .nc-btn-pedidos {
    border: 1px solid var(--pp-borde, var(--pp-borde));
    color: var(--pp-texto, var(--pp-texto))
}

body.tema-v2 .nc-btn-pedidos:hover {
    background: var(--pp-sutil, var(--pp-sutil))
}

body.tema-v2 .av-grupo-tit {
    color: var(--pp-texto, var(--pp-texto))
}

body.tema-v2 .av-fila {
    border: 1px solid var(--pp-borde, var(--pp-borde))
}

body.tema-v2 .av-fila-txt {
    color: var(--pp-texto, var(--pp-texto))
}

body.tema-v2 .hp-resumen {
    color: var(--pp-texto-2, var(--pp-texto-2))
}

body.tema-v2 .hp-fila {
    border: 1px solid var(--pp-borde, var(--pp-borde));
    background: var(--pp-superficie, var(--pp-superficie))
}

body.tema-v2 .hp-fila summary {
    color: var(--pp-texto, var(--pp-texto))
}

body.tema-v2 .hp-cli {
    color: var(--pp-texto-2, var(--pp-texto-2))
}

body.tema-v2 .dem-sub {
    color: var(--pp-texto, var(--pp-texto))
}

body.tema-v2 .pp-fila-sel td {
    background: var(--pp-acento-suave, color-mix(in srgb, var(--pp-acento) 8%, transparent))
}

body.tema-v2 .pp-masivo-acciones {
    border: 1px solid var(--pp-borde, var(--pp-borde));
    background: var(--pp-superficie, var(--pp-superficie))
}

body.tema-v2 .pp-masivo-n {
    color: var(--pp-texto, var(--pp-texto))
}

body.tema-v2 .pm-item {
    color: var(--pp-texto, var(--pp-texto))
}

body.tema-v2 .rp-interruptor::after {
    background: var(--pp-superficie)
}

body.tema-v2 .menu-cli-item.bv-menu-volver {
    border-bottom: 1px solid var(--pp-borde)
}

body.tema-v2 .cat-sep-agotados span {
    color: var(--pp-texto-2)
}

body.tema-v2 .cat-sep-agotados small {
    color: var(--pp-texto-3)
}

body.tema-v2 .prc-cupon {
    border: 1.5px dashed var(--pp-positivo)
}

body.tema-v2 .prc-it img {
    border: 1px solid var(--pp-borde)
}

body.tema-v2 .prc-it-txt small {
    color: var(--pp-texto-2)
}

body.tema-v2 .prc-it-p s {
    color: var(--pp-texto-3)
}

body.tema-v2 .prc-it-x {
    color: var(--pp-texto-3)
}

body.tema-v2 .prc-barra i {
    background: var(--pp-positivo)
}

body.tema-v2 .prc-cup-ok {
    border: 1.5px dashed var(--pp-positivo);
    color: var(--pp-texto-2)
}

body.tema-v2 .prc-cup-ok--error {
    border-color: var(--pp-aviso)
}

body.tema-v2 .prc-cup-ok button {
    color: var(--pp-texto-2)
}

body.tema-v2 .prc-tot {
    color: var(--pp-texto-2)
}

body.tema-v2 .mc-horario i {
    background: var(--pp-positivo)
}

body.tema-v2 .mc-horario--cerrado i {
    background: var(--pp-aviso)
}

body.tema-v2 .prg-sw::after {
    background: var(--pp-superficie)
}

body.tema-v2 .acc-google {
    background: var(--pp-superficie)
}

body.tema-v2 .acc-google:hover {
    background: var(--pp-sutil)
}

body.tema-v2 .ag-cat-srv {
    background: var(--pp-superficie);
    border: 1px solid var(--pp-borde);
    color: var(--pp-texto)
}

body.tema-v2 .ag-cat-ico {
    background: var(--pp-sutil)
}

body.tema-v2 .ag-cat-detalle,
body.tema-v2 .ag-cat-desc {
    color: var(--pp-texto-2)
}

body.tema-v2 .ag-cat-modos span {
    background: var(--pp-sutil);
    color: var(--pp-texto-2)
}

body.tema-v2 .etq-pagina {
    background: var(--pp-superficie)
}

body.tema-v2 .pf-visor-x:focus-visible,
body.tema-v2 .pf-visor-nav:focus-visible {
    outline: 2px solid var(--pp-borde)
}

body.tema-v2 .pf-visor-carga {
    border-top-color: var(--pp-borde)
}

body.tema-v2 .pf-visor-puntos span.activo {
    background: var(--pp-sutil)
}

body.tema-v2 .vc-franja-btn {
    background: var(--pp-superficie);
    color: var(--pp-texto)
}

body.tema-v2 .cat-rep {
    background: var(--pp-sutil, var(--pp-sutil))
}

body.tema-v2 .cat-rep-cab b {
    color: var(--pp-texto, var(--pp-texto))
}