/* =============================================================================
   CotizaPrint — Hoja de estilos del plugin "GGP - Módulo WordPress Cotizador"
   v3.30 — Estilo REPLICANDO el lenguaje visual de la app Angular (ggp_app): marca
   = dos azules SIEMPRE en gradiente #2459ad→#0d3677, tinta #0d3677, texto #2c3a52,
   sub #6b7c99, label #5b6a82, papel en gradiente, líneas #e6ecf6, inputs Bootstrap-sm
   (#ced4da), radios 8/12, Roboto. CERO naranja/rojo de acento. La capa de TOKENS de
   marca se define inline en ggp_css() (gana al .css); el bloque §18 re-apunta de forma
   sistemática botones/inputs/labels/tablas/totales/chips a esos tokens. Las reglas de
   chips/acentos usan AZUL LITERAL para ser inmunes al rojo del tema-IA (ggp_tema_json).
   Encolado con wp_enqueue_style + filemtime() (cache-bust). SIN cambios de lógica.

   ⚠️ IMPORTANTE: las VARIABLES --ggp-* (colores de marca de wp-admin) y el
   TEMA-IA (option ggp_tema_json) se siguen emitiendo INLINE desde el PHP en
   `.ggp-plugin-root`, DESPUÉS de este archivo, para que el tema gane. Aquí solo
   viven REGLAS de layout/estilo que CONSUMEN esas variables con var(...,fallback).

   Paleta cotizaprint.com (tokens medidos en vivo):
     texto base   #333333 · secundario #6b7280
     fondo        #ffffff (superficies suaves #f4f7fc / #f8fafc)
     titulares    #0d3677 (azul tinta, Roboto 700)
     CTA primario #f57c00 (naranja sólido, "convertir") · hover #e06f00
     azul acción  #2459ad → #0d3677 (gradiente secundario) · enlace #2459ad
     hairline     #e6ecf6 (líneas/bordes)
   Tipografía: Roboto, Arial, sans-serif (familia del sitio).
   Radios: 8px en botones, inputs, selects, tarjetas, paneles, modales.
   Sombras: suaves (el sitio no usa sombras dramáticas).
   Todo scopeado bajo .ggp-plugin-root.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

/* =============================================================================
   1. CONTENEDOR Y TIPOGRAFÍA BASE
   ============================================================================= */
.ggp-plugin-root,
.ggp-plugin-root * { box-sizing: border-box; }

.ggp-wrap {
    font-family: var(--ggp-fuente, var(--ggp-fuente-app, 'Roboto', Arial, sans-serif));
    color: var(--ggp-texto, #333333);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 60px;
    -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   2. BREADCRUMB
   ============================================================================= */
.ggp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ggp-sec, #6b7280);
    margin-bottom: 28px;
    flex-wrap: wrap;
    font-weight: 500;
}
.ggp-breadcrumb a {
    color: var(--ggp-acento, #2459ad);
    text-decoration: none;
    font-weight: 600;
}
.ggp-breadcrumb a:hover { text-decoration: underline; }
.ggp-breadcrumb .sep { color: #c3cee0; }

/* =============================================================================
   3. CABECERA EDITORIAL DE SECCIÓN (eyebrow + título tinta)
   ============================================================================= */
.ggp-section-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ggp-acento, #2459ad);
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.ggp-section-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--ggp-acento, #2459ad);
    display: inline-block;
    border-radius: 2px;
}
.ggp-section-title {
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif));
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    letter-spacing: -.6px;
    margin: 0 0 8px;
    line-height: 1.05;
    color: var(--ggp-tinta, #0d3677);
}
.ggp-section-sub {
    font-size: 15px;
    color: var(--ggp-sec, #6b7280);
    margin: 0 0 32px;
    font-weight: 500;
}

/* =============================================================================
   4. BUSCADOR
   ============================================================================= */
.ggp-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}
.ggp-search input {
    flex: 1;
    padding: 13px 18px;
    border: 1.5px solid var(--ggp-linea, #e6ecf6);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ggp-texto, #333333);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    background: var(--ggp-papel, #f4f7fc);
}
.ggp-search input:focus {
    border-color: var(--ggp-acento, #2459ad);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ggp-acento, #2459ad) 14%, transparent);
    background: #fff;
}
.ggp-count {
    font-size: 13px;
    color: var(--ggp-sec, #6b7280);
    white-space: nowrap;
    font-weight: 600;
}

/* =============================================================================
   5. CATÁLOGO — grid aireado + tarjetas editoriales
   ============================================================================= */
.ggp-grid {
    display: grid;
    grid-template-columns: repeat(var(--ggp-cols, 3), minmax(0, 1fr));
    gap: 28px;
}

.ggp-card {
    background: var(--ggp-card-bg, #fff);
    border-radius: var(--ggp-card-radio, var(--ggp-radio, 8px));
    overflow: hidden;
    box-shadow: var(--ggp-card-sombra, var(--ggp-sombra, 0 1px 2px rgba(13,54,119,.05)));
    border: 1px solid var(--ggp-card-borde, var(--ggp-linea, #e6ecf6));
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    color: var(--ggp-card-tinta, #333333);
    position: relative;
}
.ggp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px -8px rgba(13,54,119,.16);
    border-color: var(--ggp-borde-azul, #d7e4fb);
    color: var(--ggp-card-tinta, #333333);
    text-decoration: none;
}
.ggp-card.ggp-hidden { display: none; }

/* imagen — protagonista, proporción casi cuadrada */
.ggp-card-img {
    position: relative;
    width: 100%;
    padding-top: 88%;
    background: var(--ggp-papel, #f4f7fc);
    overflow: hidden;
}
.ggp-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
.ggp-card:hover .ggp-card-img img { transform: scale(1.05); }
.ggp-card-img .ggp-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #c2cdde;
    background: linear-gradient(135deg, #fbfcfe, #eef2f8);
}

/* badge tipo — chip del app */
.ggp-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    padding: 5px 11px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.ggp-badge-cat  { background: rgba(13,54,119,.62); color: #fff; }
.ggp-badge-prod { background: var(--ggp-acento, #2459ad); color: #fff; }

/* cuerpo */
.ggp-card-body {
    padding: 16px 18px 18px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.ggp-card-title {
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif));
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.1px;
    margin: 0;
    line-height: 1.3;
    color: var(--ggp-card-titulo, var(--ggp-tinta, #0d3677));
}
.ggp-card-meta {
    font-size: 13px;
    font-weight: 600;
    color: var(--ggp-card-precio, var(--ggp-sec, #6b7280));
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}
.ggp-card-meta::after {
    content: "→";
    margin-left: auto;
    color: var(--ggp-acento, #2459ad);
    font-weight: 700;
    transition: transform .2s ease;
}
.ggp-card:hover .ggp-card-meta::after { transform: translateX(3px); }
.ggp-card-arrow { display: none; }

/* =============================================================================
   6. ESTADOS: empty / loader
   ============================================================================= */
.ggp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 0;
    color: var(--ggp-sec, #6b7280);
    font-size: 15px;
    display: none;
}
.ggp-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; opacity: .6; }

.ggp-loader {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    gap: 8px;
}
.ggp-loader span {
    width: 10px; height: 10px;
    background: var(--ggp-acento, #2459ad);
    border-radius: 50%;
    display: inline-block;
    animation: ggpBounce 1.2s infinite ease-in-out;
}
.ggp-loader span:nth-child(2) { animation-delay: .15s; }
.ggp-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes ggpBounce {
    0%,80%,100% { transform: scale(0); opacity:.3; }
    40%          { transform: scale(1); opacity:1; }
}

/* =============================================================================
   7. DETALLE DE PRODUCTO ([ggp_detalle])
   ============================================================================= */
.ggp-detalle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.ggp-detalle-header {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 44px;
    align-items: start;
    margin-bottom: 44px;
}
.ggp-detalle-img {
    border-radius: 8px;
    overflow: hidden;
    background: var(--ggp-papel, #f4f7fc);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ggp-linea, #e6ecf6);
}
.ggp-detalle-img img { width: 100%; height: 100%; object-fit: cover; }
.ggp-detalle-img .ggp-placeholder { font-size: 76px; color: #c2cdde; }
.ggp-detalle-header-info { padding-top: 4px; }

/* badge chip del app */
.ggp-detalle-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--ggp-acento, #2459ad);
    background: var(--ggp-azul-claro, #eaf2ff);
    border: 1px solid var(--ggp-borde-azul, #d7e4fb);
    padding: 5px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}
.ggp-detalle-nombre {
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif));
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.8px;
    margin: 0 0 20px;
    color: var(--ggp-tinta, #0d3677);
}
.ggp-detalle-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 24px;
}
.ggp-detalle-tabla tr { border-bottom: 1px solid var(--ggp-linea, #e6ecf6); }
.ggp-detalle-tabla td { padding: 10px 0; }
.ggp-detalle-tabla td:first-child { color: var(--ggp-sec, #6b7280); width: 140px; font-weight: 500; }
.ggp-detalle-tabla td:last-child { font-weight: 600; color: var(--ggp-texto, #333333); }
.ggp-detalle-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ggp-sec, #6b7280);
    margin: 14px 0 22px;
}

/* botón Volver — firma primaria del app */
.ggp-btn-volver {
    display: inline-block;
    padding: 12px 26px;
    background: linear-gradient(135deg, var(--ggp-acento, #2459ad), var(--ggp-acento-dark, #0d3677));
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    letter-spacing: .2px;
    box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--ggp-acento-dark, #0d3677) 36%, transparent);
    transition: background .2s, box-shadow .2s, transform .12s;
}
.ggp-btn-volver:hover,
.ggp-btn-volver:focus,
.ggp-btn-volver:visited { color: #fff !important; text-decoration: none !important; }
.ggp-btn-volver:hover {
    background: linear-gradient(135deg, var(--ggp-acento-dark, #0d3677), var(--ggp-acento-darkest, #0a2a5e));
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 7px 18px -4px color-mix(in srgb, var(--ggp-acento-dark, #0d3677) 58%, transparent);
}

/* =============================================================================
   8. COTIZADOR CLÁSICO ([ggp_detalle]) — panel editorial
   ============================================================================= */
.ggp-cotizador {
    position: relative;
    background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 40%);
    border: 1px solid var(--ggp-linea, #e6ecf6);
    border-radius: 8px;
    padding: 30px 30px 26px;
    box-shadow: 0 4px 14px -6px rgba(13,54,119,.16), 0 1px 2px rgba(13,54,119,.04);
}
.ggp-cotizador::before {
    content: "";
    position: absolute;
    left: 0; top: 22px; bottom: 22px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--ggp-acento, #2459ad), var(--ggp-acento-dark, #0d3677));
}
.ggp-cotizador-title {
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif));
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 22px;
    color: var(--ggp-tinta, #0d3677);
    letter-spacing: -.2px;
}
.ggp-cotizador-config {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

/* campos compartidos (cotizador clásico) */
.ggp-cotizador .ggp-campo { display: flex; flex-direction: column; gap: 7px; }
.ggp-cotizador .ggp-campo label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ggp-sec, #6b7280);
    text-transform: uppercase;
    letter-spacing: .6px;
}
.ggp-cotizador .ggp-campo input {
    padding: 11px 14px;
    border: 1.5px solid var(--ggp-linea, #e6ecf6);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ggp-texto, #333333);
    width: 170px;
    outline: none;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.ggp-cotizador .ggp-campo input:focus {
    border-color: var(--ggp-acento, #2459ad);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ggp-acento, #2459ad) 14%, transparent);
}
.ggp-input-suffix { position: relative; }
.ggp-input-suffix span {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--ggp-sec, #6b7280);
    font-weight: 600;
}
.ggp-input-suffix input { padding-right: 30px; }

/* tira de resultados */
.ggp-cotizador-resultado {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1.5px solid var(--ggp-linea, #e6ecf6);
    border-radius: 8px;
    overflow: hidden;
    flex-wrap: wrap;
}
.ggp-cotizador-resultado .ggp-res-campo {
    flex: 1;
    min-width: 110px;
    padding: 15px 18px;
    border-right: 1px solid var(--ggp-linea, #e6ecf6);
}
.ggp-cotizador-resultado .ggp-res-campo:last-child { border-right: none; }
.ggp-cotizador-resultado .ggp-res-campo label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--ggp-sec, #6b7280);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 5px;
}
.ggp-cotizador-resultado .ggp-res-valor { font-size: 19px; font-weight: 700; color: var(--ggp-tinta, #0d3677); }
.ggp-cotizador-resultado .ggp-res-valor span { font-size: 13px; font-weight: 500; color: var(--ggp-sec, #6b7280); margin-left: 2px; }
.ggp-cotizador-resultado .ggp-res-total { background: var(--ggp-papel, #f4f7fc); }
.ggp-cotizador-resultado .ggp-res-total .ggp-res-valor { font-size: 26px; color: var(--ggp-acento, #2459ad); font-weight: 700; }

.ggp-cotizador-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-left: 1px solid var(--ggp-linea, #e6ecf6);
}
.ggp-btn-ticket, .ggp-btn-guardar {
    padding: 11px 18px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, box-shadow .18s, transform .15s;
}
.ggp-btn-ticket:hover, .ggp-btn-guardar:hover { transform: translateY(-1px); }
/* Ticket = acción secundaria → azul del sitio (antes violeta, color ajeno a cotizaprint.com) */
.ggp-btn-ticket  { background: linear-gradient(135deg, var(--ggp-acento, #2459ad), var(--ggp-acento-dark, #0d3677)); box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--ggp-acento-dark, #0d3677) 36%, transparent); }
.ggp-btn-ticket:hover { background: linear-gradient(135deg, var(--ggp-acento-dark, #0d3677), var(--ggp-acento-darkest, #0a2a5e)); }
/* Guardar = acción principal "convertir" → CTA naranja del sitio */
.ggp-btn-guardar { background: var(--ggp-cta, #f57c00); box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--ggp-cta, #f57c00) 40%, transparent); }
.ggp-btn-guardar:hover { background: var(--ggp-cta-dark, #e06f00); }
.ggp-btn-guardar:hover { background: linear-gradient(135deg, var(--ggp-acento-dark, #0d3677), var(--ggp-acento-darkest, #0a2a5e)); }

/* =============================================================================
   9. CALCULADORA / CARRITO / PRESUPUESTO — fondo "mesa de trabajo"
   ============================================================================= */
.ggp-wrap, .ggp-cart-wrap, .ggp-presu-wrap {
    background: #ffffff;  /* el sitio cotizaprint.com es predominantemente blanco */
    border-radius: 8px;
}
.ggp-wrap { padding-top: 44px; padding-bottom: 64px; }
.ggp-cart-wrap, .ggp-presu-wrap { padding-top: 44px; padding-bottom: 56px; }
@media (max-width: 600px) {
    .ggp-wrap { padding-top: 24px; padding-bottom: 40px; }
    .ggp-cart-wrap, .ggp-presu-wrap { padding-top: 24px; padding-bottom: 36px; }
}

/* números monetarios: tabular */
.ggp-res-valor, .ggp-cart-importe, .ggp-cart-qty, .ggp-lin-qty, .ggp-lin-dto,
.ggp-lin-total, .ggp-lin-precio-ud, .ggp-lin-subtotal, .ggp-lin-impuestos,
.ggp-cart-resumen .val, .ggp-tot-card .val, .ggp-presu-tabla td:last-child,
.ggp-calc--d3 .ggp-calc-d3-precio, .ggp-doc-val {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* tarjeta de la calculadora */
.ggp-calc {
    background: #fff;
    border: 1px solid var(--ggp-linea, #e6ecf6);
    border-radius: var(--ggp-cot-radio, var(--ggp-radio, 8px));
    padding: 36px 38px;
    box-shadow: 0 4px 16px -6px rgba(13,54,119,.10), 0 1px 3px rgba(13,54,119,.05);
}
.ggp-calc-title {
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif));
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 5px;
    color: var(--ggp-tinta, #0d3677);
    line-height: 1.05;
    letter-spacing: -.4px;
}
.ggp-calc-sub { font-size: 14.5px; color: var(--ggp-sec, #6b7280); margin: 0 0 26px; }
.ggp-calc-config { display: flex; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }

/* campos generales (calculadora/carrito/presupuesto) */
.ggp-campo { display: flex; flex-direction: column; gap: 7px; }
.ggp-campo label {
    font-size: 11px; font-weight: 700; color: var(--ggp-sec, #6b7280);
    text-transform: uppercase; letter-spacing: .6px;
}
.ggp-campo input, .ggp-campo select, .ggp-campo textarea {
    padding: 11px 14px;
    border: 1.5px solid var(--ggp-cot-campo-borde, var(--ggp-linea, #e6ecf6));
    border-radius: 8px;
    font-family: inherit; font-size: 15px; font-weight: 600; width: 170px;
    color: var(--ggp-texto, #333333); outline: none; background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ggp-campo textarea { width: 100%; min-height: 76px; resize: vertical; font-weight: 500; line-height: 1.5; }
.ggp-campo input:focus, .ggp-campo select:focus, .ggp-campo textarea:focus {
    border-color: var(--ggp-cot-acento, var(--ggp-acento, #2459ad));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ggp-cot-acento, var(--ggp-acento, #2459ad)) 15%, transparent);
}

/* select de cantidad (cantidad de tipo lista) — caret azul del app */
.ggp-campo select.ggp-cantidad-select {
    padding: 11px 38px 11px 14px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232459ad' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* tira de resultados (calculadora) */
.ggp-calc-resultado {
    display: flex; align-items: stretch; gap: 0; background: #fff;
    border: 1px solid var(--ggp-linea, #e6ecf6); border-radius: 8px; overflow: hidden; flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(13,54,119,.05);
}
.ggp-res-campo { flex: 1; min-width: 110px; padding: 16px 20px; border-right: 1px solid var(--ggp-linea, #e6ecf6); }
.ggp-res-campo:last-child { border-right: none; }
.ggp-res-campo label {
    display: block; font-size: 10px; font-weight: 700; color: var(--ggp-sec, #6b7280);
    text-transform: uppercase; letter-spacing: .7px; margin-bottom: 5px;
}
.ggp-res-valor { font-size: 19px; font-weight: 700; color: var(--ggp-tinta, #0d3677); }
.ggp-res-valor span { font-size: 13px; font-weight: 500; color: var(--ggp-sec, #6b7280); margin-left: 2px; }
.ggp-res-total { background: var(--ggp-papel, #f4f7fc); }
.ggp-res-total .ggp-res-valor {
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif));
    font-size: 28px; font-weight: 700; color: var(--ggp-tinta, #0d3677);
}

/* =============================================================================
   10. BOTONES (firma app-button)
   ============================================================================= */
.ggp-calc-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; align-items: center; }

/* CTA principal "convertir" (Añadir / Generar presupuesto / Aceptar) =
   NARANJA sólido del sitio (#f57c00). Un tema-IA puede sobrescribir vía
   --ggp-cot-boton-bg / --ggp-cot-boton-color. */
.ggp-btn-add, .ggp-btn-primary {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 11px 26px; border: none; border-radius: 8px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
    background: var(--ggp-cot-boton-bg, var(--ggp-cta, #f57c00));
    color: var(--ggp-cot-boton-color, #fff); letter-spacing: .2px;
    box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--ggp-cta, #f57c00) 40%, transparent);
    transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.ggp-btn-add::after, .ggp-btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 60%; left: -75%;
    pointer-events: none; z-index: 2;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.30), transparent);
    transform: skewX(-18deg); transition: left .55s ease;
}
.ggp-btn-add:not(:disabled):hover::after, .ggp-btn-primary:not(:disabled):hover::after { left: 135%; }
.ggp-btn-add:not(:disabled):hover, .ggp-btn-primary:not(:disabled):hover {
    background: var(--ggp-cot-boton-bg, var(--ggp-cta-dark, #e06f00));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--ggp-cta, #f57c00) 52%, transparent);
}
.ggp-btn-add:not(:disabled):active, .ggp-btn-primary:not(:disabled):active {
    transform: translateY(0) scale(.985);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.18);
}
.ggp-btn-add:focus-visible, .ggp-btn-primary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ggp-cta, #f57c00) 45%, transparent); outline-offset: 2px;
}
.ggp-btn-secondary:focus-visible, .ggp-btn-promo:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ggp-acento, #2459ad) 35%, transparent); outline-offset: 2px;
}
.ggp-btn-add:disabled, .ggp-btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.3); }

/* secundario / ghost = acción azul discreta (estilo "Acceder" del sitio, en versión sobria) */
.ggp-btn-secondary {
    position: relative; overflow: hidden;
    padding: 11px 26px; border: 1.5px solid var(--ggp-borde-azul, #d7e4fb); border-radius: 8px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    white-space: nowrap; background: #fff; color: var(--ggp-acento, #2459ad); letter-spacing: .2px;
    box-shadow: 0 1px 2px rgba(13,54,119,.06);
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.ggp-btn-secondary:hover { background: var(--ggp-azul-claro, #eaf2ff); color: var(--ggp-acento-dark, #0d3677); border-color: var(--ggp-acento-dark, #0d3677); transform: translateY(-1px); }
.ggp-btn-secondary:active { transform: translateY(0); }
.ggp-btn-secondary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* link-button */
.ggp-btn-link {
    background: transparent; border: none; color: var(--ggp-acento, #2459ad);
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
    padding: 7px 12px; border-radius: 8px; transition: background .15s ease, color .15s ease;
}
.ggp-btn-link:hover { background: var(--ggp-azul-claro, #eaf2ff); color: var(--ggp-acento-dark, #0d3677); text-decoration: none; }
.ggp-calc-feedback { font-size: 13px; font-weight: 700; color: var(--ggp-ok, #16a34a); }

/* =============================================================================
   11. CARRITO / PRESUPUESTO — wrappers y panel
   ============================================================================= */
.ggp-cart-wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.ggp-presu-wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

.ggp-panel {
    position: relative;
    background: var(--ggp-cart-panel-bg, #fff);
    border: 1px solid var(--ggp-linea, #e6ecf6);
    border-radius: var(--ggp-cart-radio, var(--ggp-radio, 8px));
    padding: 34px 36px 36px;
    box-shadow: 0 4px 16px -6px rgba(13,54,119,.12), 0 1px 3px rgba(13,54,119,.05);
    overflow: hidden;
}
.ggp-panel::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    /* v3.29: barra de marca azul marino (nunca roja — el rojo lee como alerta) */
    background: var(--ggp-tinta, #0d3677);
}
@media (max-width: 600px) { .ggp-panel { padding: 22px 18px 26px; } }

/* tabla del carrito */
.ggp-cart-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
.ggp-cart-table th {
    text-align: left; font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--ggp-tinta, #0d3677);
    padding: 0 12px 14px; border-bottom: 2px solid var(--ggp-linea, #e6ecf6);
}
.ggp-cart-table th:nth-child(2) { text-align: center; width: 120px; }
.ggp-cart-table th:nth-child(3) { text-align: right; width: 120px; }
.ggp-cart-table th:last-child { width: 44px; }
.ggp-cart-table td { padding: 16px 12px; border-bottom: 1px solid var(--ggp-linea, #e6ecf6); vertical-align: middle; }
.ggp-cart-table tr:last-child td { border-bottom: none; }
.ggp-cart-table tbody tr { transition: background .15s ease; }
.ggp-cart-table tbody tr:hover { background: var(--ggp-papel, #f4f7fc); }
.ggp-cart-table td:nth-child(2) { text-align: center; }
.ggp-cart-table td:nth-child(3) { text-align: right; }
.ggp-cart-table td:last-child { text-align: center; }
.ggp-cart-prod { display: flex; align-items: center; gap: 14px; }
.ggp-cart-thumb {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 8px;
    object-fit: cover; background: var(--ggp-papel, #f4f7fc); border: 1px solid var(--ggp-linea, #e6ecf6); display: block;
    box-shadow: 0 2px 8px rgba(13,54,119,.10);
}
.ggp-cart-thumb-ph {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 30px;
    color: #b9c2d0; background: linear-gradient(135deg,#fbfcfe,#eef2f8); border: 1px solid var(--ggp-linea, #e6ecf6);
    box-shadow: 0 2px 8px rgba(13,54,119,.07);
}
.ggp-cart-nombre { font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); font-size: 18px; font-weight: 700; line-height: 1.15; color: var(--ggp-tinta, #0d3677); }
.ggp-cart-config { font-size: 12px; color: var(--ggp-sec, #6b7280); margin-top: 3px; }

/* resumen al pie */
.ggp-cart-resumen {
    margin: 18px 0 4px; padding-top: 16px; border-top: 2px solid var(--ggp-linea, #e6ecf6);
    display: flex; flex-direction: column; gap: 8px;
}
.ggp-cart-resumen .ggp-cart-rline {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 14px; color: var(--ggp-sec, #6b7280);
}
.ggp-cart-resumen .ggp-cart-rline .lbl { color: var(--ggp-sec, #6b7280); font-weight: 600; }
.ggp-cart-resumen .ggp-cart-rline .val { font-weight: 700; color: var(--ggp-texto, #333333); white-space: nowrap; }
.ggp-cart-resumen .ggp-cart-rline.ggp-promo .val { color: var(--ggp-ok, #16a34a); }
.ggp-cart-resumen .ggp-cart-rline.ggp-cart-rtotal {
    margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ggp-linea, #e6ecf6);
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); align-items: baseline;
}
.ggp-cart-resumen .ggp-cart-rtotal .lbl { font-size: 15px; font-weight: 700; color: var(--ggp-tinta, #0d3677); text-transform: uppercase; letter-spacing: .6px; }
.ggp-cart-resumen .ggp-cart-rtotal .val { font-size: 32px; font-weight: 700; color: var(--ggp-cart-total-color, var(--ggp-cart-acento, var(--ggp-acento, #2459ad))); line-height: 1; }
.ggp-cart-qty {
    width: 84px; padding: 9px 10px; border: 1.5px solid var(--ggp-linea, #e6ecf6); border-radius: 8px;
    font-family: inherit; font-weight: 600; font-size: 14px; outline: none;
    text-align: center; background: #fff; color: var(--ggp-texto, #333333); transition: border-color .18s ease, box-shadow .18s ease;
}
.ggp-cart-qty:focus { border-color: var(--ggp-acento, #2459ad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ggp-acento, #2459ad) 15%, transparent); }
.ggp-cart-importe { font-weight: 700; white-space: nowrap; font-size: 15px; color: var(--ggp-texto, #333333); }
.ggp-cart-del {
    background: transparent; border: none; cursor: pointer; color: #b9c2d0; font-size: 17px;
    line-height: 1; padding: 7px 9px; border-radius: 8px; transition: background .15s ease, color .15s ease;
}
.ggp-cart-del:hover { background: #fde7e9; color: #E63946; }
.ggp-cart-total {
    display: flex; justify-content: flex-end; align-items: baseline; gap: 14px;
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); margin: 18px 0 4px;
    padding-top: 18px; border-top: 2px solid var(--ggp-linea, #e6ecf6);
}
.ggp-cart-total .lbl { font-size: 15px; font-weight: 700; color: var(--ggp-tinta, #0d3677); text-transform: uppercase; letter-spacing: .6px; }
.ggp-cart-total .val { font-size: 32px; font-weight: 700; color: var(--ggp-cart-total-color, var(--ggp-cart-acento, var(--ggp-acento, #2459ad))); line-height: 1; }
.ggp-cart-empty { text-align: center; padding: 56px 0; color: var(--ggp-sec, #6b7280); font-size: 15px; }
.ggp-cart-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; opacity: .55; }

/* código promocional (UI retirada en v3.22, estilos conservados por compat) */
.ggp-cart-promo {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 20px 0 12px; padding: 14px 16px; background: var(--ggp-papel, #f4f7fc);
    border: 1px solid var(--ggp-linea, #e6ecf6); border-radius: 8px;
}
.ggp-promo-input {
    flex: 1; min-width: 180px; width: auto; text-transform: uppercase;
    padding: 10px 12px; border: 1.5px solid var(--ggp-linea, #e6ecf6); border-radius: 8px;
    font-family: inherit; font-weight: 600; font-size: 14px; color: var(--ggp-texto, #333333);
    letter-spacing: .5px; outline: none; background: #fff; transition: border-color .18s ease, box-shadow .18s ease;
}
.ggp-promo-input:focus { border-color: var(--ggp-acento, #2459ad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ggp-acento, #2459ad) 15%, transparent); }
.ggp-btn-promo {
    padding: 10px 22px; border: none; border-radius: 8px; cursor: pointer;
    background: var(--ggp-acento, #2459ad); color: #fff; font-family: inherit;
    font-size: 14px; font-weight: 600; letter-spacing: .3px; transition: background .18s ease;
}
.ggp-btn-promo:hover { background: color-mix(in srgb, var(--ggp-acento, #2459ad) 88%, #000); }
.ggp-promo-msg { font-size: 13px; font-weight: 700; color: var(--ggp-ok, #16a34a); flex-basis: 100%; }
.ggp-promo-msg.ggp-promo-ko { color: #c0392b; }
.ggp-cart-promo-aplicada { font-size: 13px; color: var(--ggp-ok, #16a34a); font-weight: 600; margin: 0 0 12px; }

/* =============================================================================
   12. PRESUPUESTO / ACEPTACIÓN
   ============================================================================= */
.ggp-presu-resumen { margin-bottom: 8px; }
.ggp-presu-tabla { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
.ggp-presu-tabla td { padding: 13px 12px; border-bottom: 1px solid var(--ggp-linea, #e6ecf6); }
.ggp-presu-tabla tr:last-child td { border-bottom: none; }
.ggp-presu-tabla td:last-child { text-align: right; font-weight: 700; white-space: nowrap; color: var(--ggp-texto, #333333); }
.ggp-presu-total {
    display: flex; justify-content: flex-end; align-items: baseline; gap: 14px;
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); margin: 6px 0 4px;
    padding-top: 16px; border-top: 2px solid var(--ggp-linea, #e6ecf6);
}
.ggp-presu-total .lbl { font-size: 15px; font-weight: 700; color: var(--ggp-tinta, #0d3677); text-transform: uppercase; letter-spacing: .6px; }
.ggp-presu-total .val { font-size: 32px; font-weight: 700; color: var(--ggp-cart-total-color, var(--ggp-cart-acento, var(--ggp-acento, #2459ad))); line-height: 1; font-variant-numeric: tabular-nums; }

/* formulario datos */
.ggp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.ggp-form-grid .ggp-campo { width: 100%; }
.ggp-form-grid .ggp-campo.ggp-col-2 { grid-column: 1 / -1; }
.ggp-form-grid .ggp-campo input, .ggp-form-grid .ggp-campo textarea { width: 100%; }
.ggp-form-sec-title {
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); font-size: 21px; font-weight: 700;
    margin: 28px 0 16px; color: var(--ggp-tinta, #0d3677); letter-spacing: -.2px;
    padding-bottom: 10px; border-bottom: 2px solid var(--ggp-linea, #e6ecf6);
}
.ggp-form-sec-title:first-child { margin-top: 0; }
.ggp-field-error { font-size: 12px; color: #b91c1c; font-weight: 600; margin-top: 4px; display: none; }
.ggp-campo.ggp-has-error input { border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185,28,28,.14); }
.ggp-campo.ggp-has-error .ggp-field-error { display: block; }

/* feedback (generar presupuesto) */
.ggp-calc-feedback.ggp-promo-ko { color: #b91c1c; }
.ggp-calc-feedback.ggp-promo-ok { color: var(--ggp-ok, #16a34a); }
.ggp-calc-feedback {
    display: block; margin-top: 14px; font-size: 14px; line-height: 1.5;
}
.ggp-calc-feedback.ggp-promo-ko {
    padding: 12px 16px; border-radius: 8px;
    background: #fdeceae0; border: 1px solid #f3c7c2;
}
.ggp-calc-feedback.ggp-promo-ok {
    padding: 12px 16px; border-radius: 8px;
    background: color-mix(in srgb, var(--ggp-ok, #16a34a) 8%, #fff); border: 1px solid color-mix(in srgb, var(--ggp-ok, #16a34a) 28%, #fff);
}
.ggp-calc-feedback:empty { display: none; }

/* panel "Tus datos para el presupuesto" */
.ggp-gen-datos {
    margin-top: 26px; padding: 24px 24px 20px;
    background: var(--ggp-papel, #f4f7fc); border: 1px solid var(--ggp-linea, #e6ecf6);
    border-radius: 8px; border-top: 3px solid var(--ggp-acento, #2459ad);
}
.ggp-gen-datos[hidden] { display: none; }
.ggp-gen-datos .ggp-form-sec-title { font-size: 19px; margin-top: 0; }
.ggp-gen-aviso { font-size: 13px; color: var(--ggp-tinta, #0d3677); margin: 2px 0 0; opacity: .85; }
.ggp-gen-datos .ggp-form-sec-title.ggp-form-sec-title--opt {
    font-size: 15px; margin-top: 22px; color: var(--ggp-sec, #6b7280);
    border-bottom-color: var(--ggp-linea, #e6ecf6);
}
.ggp-gen-datos .ggp-form-sec-title--opt small { font-weight: 600; opacity: .8; }

/* pantalla de éxito / cortesía */
.ggp-presu-ok { text-align: center; padding: 56px 16px; }
.ggp-presu-ok-icon {
    width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 36px;
    background: color-mix(in srgb, var(--ggp-ok, #16a34a) 14%, #fff); color: var(--ggp-ok, #16a34a);
}
.ggp-presu-ok h3 { font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); font-size: 30px; font-weight: 700; margin: 0 0 8px; color: var(--ggp-tinta, #0d3677); letter-spacing: -.4px; }
.ggp-presu-ok p { font-size: 15px; color: var(--ggp-sec, #6b7280); margin: 0 auto; line-height: 1.6; max-width: 460px; }
.ggp-cart-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

@media (max-width: 600px) {
    .ggp-form-grid { grid-template-columns: 1fr; }
    .ggp-cart-table thead { display: none; }
    .ggp-cart-table, .ggp-cart-table tbody, .ggp-cart-table tr, .ggp-cart-table td { display: block; width: 100%; }
    .ggp-cart-table tbody tr { border: 1.5px solid var(--ggp-linea, #e6ecf6); border-radius: 8px; margin-bottom: 14px; padding: 8px 10px; }
    .ggp-cart-table tbody tr:hover { background: #fff; }
    .ggp-cart-table td { border-bottom: none !important; padding: 6px 4px; text-align: left !important; }
    .ggp-cart-table td:nth-child(2),
    .ggp-cart-table td:nth-child(3) { display: inline-block; width: auto; }
    .ggp-cart-table td:last-child { float: right; margin-top: -34px; }
    .ggp-cart-foot { flex-direction: column-reverse; align-items: stretch; }
    .ggp-cart-foot .ggp-btn-primary { width: 100%; text-align: center; }
}

/* =============================================================================
   13. VISTA ggpVenta — cabecera documento + tabla de líneas + totales-card
   ============================================================================= */
.ggp-doc-head {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px 24px; margin-bottom: 24px; padding: 22px 24px;
    background: var(--ggp-papel, #f4f7fc); border: 1px solid var(--ggp-linea, #e6ecf6); border-radius: 8px;
    border-top: 3px solid var(--ggp-tinta, #0d3677);
}
.ggp-doc-field { display: flex; flex-direction: column; gap: 5px; }
.ggp-doc-field > label {
    font-size: 10px; font-weight: 700; color: var(--ggp-sec, #6b7280);
    text-transform: uppercase; letter-spacing: .7px;
}
.ggp-doc-field .ggp-doc-val { font-size: 15px; font-weight: 700; color: var(--ggp-tinta, #0d3677); }
.ggp-doc-field input {
    padding: 10px 12px; border: 1.5px solid var(--ggp-linea, #e6ecf6); border-radius: 8px;
    font-family: inherit; font-weight: 600; font-size: 14px; color: var(--ggp-texto, #333333);
    outline: none; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; width: 100%;
}
.ggp-doc-field input:focus { border-color: var(--ggp-acento, #2459ad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ggp-acento, #2459ad) 15%, transparent); }
.ggp-doc-estado {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .4px;
    padding: 5px 12px; border-radius: 999px; background: #eef1f5; color: var(--ggp-sec, #6b7280);
    border: 1px solid var(--ggp-linea, #e6ecf6);
}
.ggp-doc-estado.ggp-doc-estado--ok {
    background: color-mix(in srgb, var(--ggp-ok, #16a34a) 12%, #fff); color: var(--ggp-ok, #16a34a);
    border-color: color-mix(in srgb, var(--ggp-ok, #16a34a) 30%, #fff);
}

/* tabla de líneas */
.ggp-lin-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
.ggp-lin-table th {
    text-align: right; font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: var(--ggp-tinta, #0d3677);
    padding: 0 10px 14px; border-bottom: 2px solid var(--ggp-linea, #e6ecf6); white-space: nowrap;
}
.ggp-lin-table th.ggp-col-prod { text-align: left; }
.ggp-lin-table td {
    padding: 16px 10px; border-bottom: 1px solid var(--ggp-linea, #e6ecf6); vertical-align: middle;
    text-align: right; white-space: nowrap;
}
.ggp-lin-table td.ggp-col-prod { text-align: left; white-space: normal; }
.ggp-lin-table tr:last-child td { border-bottom: none; }
.ggp-lin-table tbody tr { transition: background .15s ease; }
.ggp-lin-table tbody tr:hover { background: var(--ggp-papel, #f4f7fc); }
.ggp-lin-table th.ggp-col-del, .ggp-lin-table td.ggp-col-del { text-align: center; width: 40px; }
.ggp-lin-prod { display: flex; align-items: center; gap: 14px; }
.ggp-lin-nombre { font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); font-size: 18px; font-weight: 700; line-height: 1.15; color: var(--ggp-tinta, #0d3677); }
.ggp-lin-desc { font-size: 13px; color: var(--ggp-sec, #6b7280); margin-top: 4px; line-height: 1.4; white-space: normal; }
.ggp-lin-config { font-size: 11px; color: color-mix(in srgb, var(--ggp-sec, #6b7280) 75%, #fff); margin-top: 3px; white-space: normal; letter-spacing: .2px; }
.ggp-lin-qty, .ggp-lin-dto {
    width: 76px; padding: 9px; border: 1.5px solid var(--ggp-linea, #e6ecf6); border-radius: 8px;
    font-family: inherit; font-weight: 600; font-size: 14px; outline: none;
    text-align: right; background: #fff; color: var(--ggp-texto, #333333); transition: border-color .18s ease, box-shadow .18s ease;
}
.ggp-lin-qty { text-align: center; }
.ggp-lin-qty:focus, .ggp-lin-dto:focus { border-color: var(--ggp-acento, #2459ad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ggp-acento, #2459ad) 15%, transparent); }
.ggp-lin-imp-perc { font-size: 12px; color: var(--ggp-sec, #6b7280); display: block; }
.ggp-lin-total { font-weight: 700; color: var(--ggp-tinta, #0d3677); }

/* totales-card "ticket" (signature) */
.ggp-tot-wrap { display: flex; justify-content: flex-end; margin: 24px 0 6px; }
.ggp-tot-card {
    position: relative; width: 360px; max-width: 100%; padding: 24px 24px 22px;
    background: var(--ggp-papel, #f4f7fc); border: 1px solid var(--ggp-linea, #e6ecf6); border-radius: 8px;
    display: flex; flex-direction: column; gap: 9px;
    box-shadow: 0 6px 18px -8px rgba(13,54,119,.16);
    /* v3.29: fuerza Roboto en TODO el bloque de totales (blinda contra herencia de Times New Roman) */
    font-family: var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif);
}
.ggp-tot-card .ggp-tot-line .lbl, .ggp-tot-card .ggp-tot-line .val,
.ggp-tot-card .ggp-promo-input, .ggp-tot-card .ggp-btn-promo, .ggp-tot-card .ggp-promo-msg {
    font-family: var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif);
}
/* v3.29: fila de código promocional dentro del bloque de totales */
.ggp-tot-card .ggp-promo-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 4px 0 6px; padding: 12px 0;
    border-top: 1px dashed var(--ggp-linea, #e6ecf6);
    border-bottom: 1px dashed var(--ggp-linea, #e6ecf6);
}
.ggp-tot-card .ggp-promo-row .ggp-promo-input {
    flex: 1 1 140px; min-width: 0; width: auto; text-transform: uppercase;
    padding: 9px 11px; border: 1.5px solid var(--ggp-linea, #e6ecf6); border-radius: 8px;
    font-weight: 600; font-size: 13px; color: var(--ggp-texto, #333333);
    letter-spacing: .5px; outline: none; background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ggp-tot-card .ggp-promo-row .ggp-promo-input:focus {
    border-color: var(--ggp-acento, #2459ad);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ggp-acento, #2459ad) 15%, transparent);
}
.ggp-tot-card .ggp-promo-row .ggp-btn-promo {
    flex: 0 0 auto; padding: 9px 18px; border: none; border-radius: 8px; cursor: pointer;
    background: var(--ggp-acento, #2459ad); color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: .3px; transition: background .18s ease;
}
.ggp-tot-card .ggp-promo-row .ggp-btn-promo:hover { background: var(--ggp-acento-dark, #0d3677); }
.ggp-tot-card .ggp-promo-row .ggp-promo-msg {
    flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--ggp-ok, #16a34a); margin: 0;
}
.ggp-tot-card .ggp-promo-row .ggp-promo-msg.ggp-promo-ko { color: #c0392b; }
.ggp-tot-card::before {
    content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 5px;
    background-image: radial-gradient(circle, var(--ggp-tinta, #0d3677) 1.4px, transparent 1.5px);
    background-size: 11px 5px; background-repeat: repeat-x; background-position: center;
    opacity: .85;
}
.ggp-tot-card .ggp-tot-line {
    display: flex; justify-content: space-between; align-items: baseline; font-size: 14px;
}
.ggp-tot-card .ggp-tot-line .lbl { color: var(--ggp-sec, #6b7280); font-weight: 600; }
.ggp-tot-card .ggp-tot-line .val { font-weight: 700; color: var(--ggp-texto, #333333); white-space: nowrap; }
.ggp-tot-card .ggp-tot-line.ggp-tot-descuento .val { color: var(--ggp-ok, #16a34a); }
.ggp-tot-card .ggp-tot-line.ggp-tot-total {
    margin-top: 8px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--ggp-tinta, #0d3677) 35%, var(--ggp-linea, #e6ecf6));
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); align-items: baseline;
}
.ggp-tot-card .ggp-tot-total .lbl { font-size: 15px; font-weight: 700; color: var(--ggp-tinta, #0d3677); text-transform: uppercase; letter-spacing: .6px; }
.ggp-tot-card .ggp-tot-total .val { font-size: 38px; font-weight: 700; color: var(--ggp-cart-total-color, var(--ggp-cart-acento, var(--ggp-acento, #2459ad))); line-height: .95; }

@media (max-width: 720px) {
    .ggp-tot-wrap { justify-content: stretch; }
    .ggp-tot-card { width: 100%; }
    .ggp-lin-table { font-size: 13px; }
    .ggp-lin-table thead { display: none; }
    .ggp-lin-table, .ggp-lin-table tbody, .ggp-lin-table tr, .ggp-lin-table td { display: block; width: 100%; }
    .ggp-lin-table tbody tr {
        border: 1px solid var(--ggp-linea, #e6ecf6); border-radius: 8px; margin-bottom: 14px;
        padding: 12px 14px; box-shadow: 0 2px 8px rgba(13,54,119,.05);
    }
    .ggp-lin-table tbody tr:hover { background: #fff; }
    .ggp-lin-table td { border-bottom: none !important; padding: 7px 0; text-align: right; }
    .ggp-lin-table td.ggp-col-prod { text-align: left; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ggp-linea, #e6ecf6) !important; }
    .ggp-lin-table td::before {
        content: attr(data-th); float: left; font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .5px; color: var(--ggp-sec, #6b7280);
    }
    .ggp-lin-table td.ggp-col-prod::before { content: ''; }
}

/* =============================================================================
   14. CONFIGURADOR POR TARJETAS (Material / Formato / Impresión / Acabados)
   ============================================================================= */
.ggp-cfg { display: flex; flex-direction: column; gap: 26px; margin-bottom: 26px; }
.ggp-cfg-sec-title {
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); font-size: 19px; font-weight: 700;
    color: var(--ggp-tinta, #0d3677); letter-spacing: -.2px; margin: 0 0 12px;
    display: flex; align-items: center; gap: 9px;
}
.ggp-cfg-sec-title .ggp-cfg-grp-name {
    font-family: var(--ggp-fuente, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--ggp-sec, #6b7280);
}
/* Grid de chips: auto-fill con tamaño de columna ACOTADO (min 150 / max 220px) para que
   los grupos con pocos items (p.ej. Material n=2, Puntas n=1) NO estiren cada chip a media
   pantalla; quedan a tamaño uniforme alineados a la izquierda. align-items:stretch iguala
   la altura de los chips de una misma fila. */
.ggp-cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); gap: 10px; align-items: stretch; }
.ggp-cfg-grp { margin-bottom: 18px; }
.ggp-cfg-grp:last-child { margin-bottom: 0; }

/* Estructura base del chip (los COLORES los fija el bloque §18, anclados a azul
   literal para NO heredar el rojo/coral del tema-IA --ggp-acento/--ggp-cot-acento).
   display:flex + height:100% → todos los chips del grupo igualan altura. */
.ggp-cfg-card {
    position: relative; display: flex; flex-direction: column; gap: 0;
    height: 100%;
    background: #fff; border: 1.5px solid #e6ecf6; border-radius: 8px;
    overflow: hidden; cursor: pointer; text-align: left; width: 100%; padding: 0;
    font-family: inherit; color: var(--ggp-texto, #333333);
    transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
    white-space: normal;
}
.ggp-cfg-card:hover {
    box-shadow: 0 8px 20px -8px rgba(13,54,119,.18); transform: translateY(-2px);
}
.ggp-cfg-card-img {
    position: relative; width: 100%; height: 96px;
    background: var(--ggp-papel, #f4f7fc); overflow: hidden; border-bottom: 1px solid var(--ggp-linea, #e6ecf6);
}
.ggp-cfg-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ggp-cfg-card-img .ggp-cfg-ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 34px; color: #c2cdde; background: linear-gradient(135deg,#fbfcfe,#eef2f8);
}
/* Cuerpo: ocupa el alto restante y centra su contenido → texto centrado y a la
   misma altura aunque rompa a 2 líneas. Padding consistente .6rem .8rem. */
.ggp-cfg-card-body {
    flex: 1 1 auto; padding: .6rem .8rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 3px;
}
.ggp-cfg-card-name {
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif)); font-size: 14px; font-weight: 700;
    line-height: 1.3; color: var(--ggp-tinta, #0d3677); letter-spacing: -.1px;
    /* el label NUNCA se trunca — envuelve a varias líneas y parte palabras largas */
    white-space: normal; overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
}
.ggp-cfg-card-meta { font-size: 11px; color: var(--ggp-sec, #6b7280); margin-top: 2px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.ggp-cfg-check {
    position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--ggp-cot-acento, var(--ggp-tinta, #0d3677)); color: #fff; display: none; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px rgba(13,54,119,.25); z-index: 2;
}
.ggp-cfg-card.is-selected .ggp-cfg-check { display: flex; }
/* Chip de solo texto: misma altura mínima cómoda y texto centrado vertical. */
.ggp-cfg-card--noimg .ggp-cfg-card-body { padding: .7rem .85rem; min-height: 60px; }
.ggp-cfg-card--noimg .ggp-cfg-card-name { font-size: 14.5px; }
/* d2 / móvil: mismo auto-fill acotado (no estira los chips de grupos pequeños). */
.ggp-calc--d2 .ggp-cfg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 210px)); }
@media (max-width: 480px) {
    .ggp-cfg-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* =============================================================================
   15. DISEÑOS d1 / d2 / d3
   ============================================================================= */
/* d1 · App / ERP — usa la base, sin overrides */

/* d2 · Truyol — configurador con resumen lateral */
.ggp-calc--d2 { background: #fff; border: 1px solid var(--ggp-linea, #e6ecf6); }
.ggp-calc--d2 .ggp-calc-d2-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.ggp-calc--d2 .ggp-calc-d2-opciones { display: flex; flex-direction: column; gap: 18px; }
.ggp-calc--d2 .ggp-calc-config { flex-direction: column; gap: 16px; }
.ggp-calc--d2 .ggp-campo input,
.ggp-calc--d2 .ggp-campo select { width: 100%; }
.ggp-calc--d2 .ggp-calc-d2-resumen {
    position: sticky; top: 24px;
    background: var(--ggp-papel, #f4f7fc);
    border: 1px solid var(--ggp-linea, #e6ecf6);
    border-top: 3px solid var(--ggp-tinta, #0d3677);
    border-radius: 8px; padding: 24px 22px;
    box-shadow: 0 6px 18px -8px rgba(13,54,119,.16);
}
.ggp-calc--d2 .ggp-calc-d2-resumen .ggp-calc-resultado {
    flex-direction: column; align-items: stretch; border: none; background: transparent; box-shadow: none;
}
.ggp-calc--d2 .ggp-calc-d2-resumen .ggp-res-total {
    background: #fff; border: 1.5px solid var(--ggp-tinta, #0d3677);
    border-radius: 8px; padding: 16px; margin-top: 14px;
}
.ggp-calc--d2 .ggp-calc-d2-resumen .ggp-res-total .ggp-res-valor {
    font-size: 32px; font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.ggp-calc--d2 .ggp-calc-d2-resumen .ggp-res-campo {
    border-right: none; border-bottom: 1px solid var(--ggp-linea, #e6ecf6);
    display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; min-width: 0;
}
.ggp-calc--d2 .ggp-calc-d2-resumen .ggp-res-campo:last-child { border-bottom: none; }
.ggp-calc--d2 .ggp-calc-d2-resumen .ggp-res-campo label { margin-bottom: 0; }
.ggp-calc--d2 .ggp-calc-d2-resumen .ggp-calc-actions { flex-direction: column; align-items: stretch; }
.ggp-calc--d2 .ggp-calc-d2-resumen .ggp-btn-add,
.ggp-calc--d2 .ggp-calc-d2-resumen .ggp-btn-primary { width: 100%; text-align: center; }
@media (max-width: 800px) {
    .ggp-calc--d2 .ggp-calc-d2-grid { grid-template-columns: 1fr; }
    .ggp-calc--d2 .ggp-calc-d2-resumen { position: static; }
}

/* d3 · Sorpresa — ficha e-commerce simple */
.ggp-calc--d3 { background: #fff; border: none; padding: 0; }
.ggp-calc--d3 .ggp-calc-d3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.ggp-calc--d3 .ggp-calc-d3-img {
    border-radius: 8px; overflow: hidden; background: var(--ggp-papel, #f4f7fc);
    border: 1px solid var(--ggp-linea, #e6ecf6); aspect-ratio: 1/1;
    display: flex; align-items: center; justify-content: center;
}
.ggp-calc--d3 .ggp-calc-d3-img img { width: 100%; height: 100%; object-fit: cover; }
.ggp-calc--d3 .ggp-calc-d3-img .ggp-placeholder { font-size: 96px; color: #c2cdde; }
.ggp-calc--d3 .ggp-calc-title { font-size: clamp(30px, 5vw, 40px); }
.ggp-calc--d3 .ggp-calc-d3-precio {
    font-family: var(--ggp-fuente-titulos, var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif));
    font-size: 48px; font-weight: 700; color: var(--ggp-cot-acento, var(--ggp-acento, #2459ad));
    margin: 14px 0 6px; line-height: .98; letter-spacing: -1px;
}
.ggp-calc--d3 .ggp-calc-d3-precio span { font-size: 20px; font-weight: 600; color: var(--ggp-sec, #6b7280); }
.ggp-calc--d3 .ggp-calc-d3-detalle { font-size: 13px; color: var(--ggp-sec, #6b7280); margin-bottom: 22px; }
.ggp-calc--d3 .ggp-calc-resultado { display: none; }
.ggp-calc--d3 .ggp-calc-config { margin-bottom: 16px; }
.ggp-calc--d3 .ggp-btn-add { padding: 15px 34px; font-size: 15px; }
@media (max-width: 800px) {
    .ggp-calc--d3 .ggp-calc-d3-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* =============================================================================
   16. RESPONSIVE GENERAL
   ============================================================================= */
@media (max-width: 900px) {
    .ggp-detalle { grid-template-columns: 1fr; }
    .ggp-detalle-header { grid-template-columns: 1fr; gap: 28px; }
    .ggp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 520px) {
    .ggp-grid { grid-template-columns: 1fr; gap: 20px; }
    .ggp-detalle-nombre { font-size: 28px; }
    .ggp-cotizador-config { gap: 12px; }
    .ggp-cotizador .ggp-campo input, .ggp-campo input, .ggp-campo select { width: 100%; }
    .ggp-cotizador-btns { flex-direction: row; border-left: none; border-top: 1px solid var(--ggp-linea, #e6ecf6); }
}

/* =============================================================================
   17. ACCESIBILIDAD — reduce-motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .ggp-card, .ggp-card-img img,
    .ggp-btn-add, .ggp-btn-primary, .ggp-btn-secondary, .ggp-btn-volver,
    .ggp-cart-table tbody tr, .ggp-lin-table tbody tr,
    .ggp-campo input, .ggp-campo select, .ggp-cart-qty,
    .ggp-lin-qty, .ggp-lin-dto, .ggp-promo-input, .ggp-doc-field input,
    .ggp-cart-del, .ggp-btn-promo, .ggp-cfg-card {
        transition: none !important;
    }
    .ggp-card:hover, .ggp-cfg-card:hover,
    .ggp-btn-add:hover, .ggp-btn-primary:hover, .ggp-btn-secondary:hover { transform: none; }
    .ggp-btn-add::after, .ggp-btn-primary::after { display: none; }
}

/* =============================================================================
   18. v3.30 — ALINEACIÓN SISTEMA DE LA APP (ggp_app)  [bloque consolidado]
   Re-apunta de forma SISTEMÁTICA botones, inputs, labels, tablas, paneles de
   totales y chips a la capa de tokens de marca (--ggp-grad, --ggp-input-borde,
   --ggp-label, --ggp-paper, --ggp-line, etc.) definida inline en ggp_css().
   Gana por orden de fuente (misma especificidad, regla posterior). Sin
   !important nuevo. Aplica a TODOS los shortcodes a la vez.
   ============================================================================= */

/* —— E) BOTONES —————————————————————————————————————————————————————— */
/* Primario = gradiente azul de marca + barrido de brillo (firma app-button). */
.ggp-plugin-root .ggp-btn-add,
.ggp-plugin-root .ggp-btn-primary,
.ggp-plugin-root .ggp-btn-guardar,
.ggp-plugin-root .ggp-btn-volver {
    background: var(--ggp-cot-boton-bg, var(--ggp-grad, linear-gradient(135deg,#2459ad,#0d3677)));
    color: var(--ggp-cot-boton-color, #fff);
    border: none; border-radius: var(--ggp-radio, 8px);
    box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--ggp-tinta, #0d3677) 38%, transparent);
}
.ggp-plugin-root .ggp-btn-add:not(:disabled):hover,
.ggp-plugin-root .ggp-btn-primary:not(:disabled):hover,
.ggp-plugin-root .ggp-btn-guardar:not(:disabled):hover,
.ggp-plugin-root .ggp-btn-volver:hover {
    background: var(--ggp-cot-boton-bg, var(--ggp-grad-hover, linear-gradient(135deg,#0d3677,#0a2a5e)));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 7px 18px -4px color-mix(in srgb, var(--ggp-tinta, #0d3677) 55%, transparent);
}
.ggp-plugin-root .ggp-btn-add:focus-visible,
.ggp-plugin-root .ggp-btn-primary:focus-visible,
.ggp-plugin-root .ggp-btn-guardar:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ggp-accent, #2459ad) 45%, transparent); outline-offset: 2px;
}
/* Secundario / ghost = contorno 1.5px azul de marca sobre blanco. */
.ggp-plugin-root .ggp-btn-secondary {
    background: #fff; color: var(--ggp-accent, #2459ad);
    border: 1.5px solid var(--ggp-accent, #2459ad); border-radius: var(--ggp-radio, 8px);
}
.ggp-plugin-root .ggp-btn-secondary:hover {
    background: var(--ggp-soft, #eaf2ff); color: var(--ggp-tinta, #0d3677);
    border-color: var(--ggp-tinta, #0d3677);
}
.ggp-plugin-root .ggp-btn-link { color: var(--ggp-accent, #2459ad); border-radius: var(--ggp-radio, 8px); }
.ggp-plugin-root .ggp-btn-link:hover { background: var(--ggp-soft, #eaf2ff); color: var(--ggp-tinta, #0d3677); }
/* Borrar / vaciar = rojo del sistema (único rojo admitido). */
.ggp-plugin-root .ggp-cart-del:hover { background: color-mix(in srgb, var(--ggp-danger, #E63946) 12%, #fff); color: var(--ggp-danger, #E63946); }
/* Ticket (acción secundaria) sigue el gradiente azul. */
.ggp-plugin-root .ggp-btn-ticket { background: var(--ggp-grad, linear-gradient(135deg,#2459ad,#0d3677)); }
.ggp-plugin-root .ggp-btn-ticket:hover { background: var(--ggp-grad-hover, linear-gradient(135deg,#0d3677,#0a2a5e)); }

/* —— B) INPUTS (estilo Bootstrap-sm de la app) —————————————————————— */
.ggp-plugin-root .ggp-campo input,
.ggp-plugin-root .ggp-campo select,
.ggp-plugin-root .ggp-campo textarea,
.ggp-plugin-root .ggp-search input,
.ggp-plugin-root .ggp-cart-qty,
.ggp-plugin-root .ggp-lin-qty,
.ggp-plugin-root .ggp-promo-input,
.ggp-plugin-root .ggp-tot-card .ggp-promo-row .ggp-promo-input,
.ggp-plugin-root .ggp-doc-field input {
    border: 1px solid var(--ggp-input-borde, #ced4da);
    border-radius: 6px;
    background: #fff;
    color: var(--ggp-text, #2c3a52);
    font-family: var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.ggp-plugin-root .ggp-campo input:focus,
.ggp-plugin-root .ggp-campo select:focus,
.ggp-plugin-root .ggp-campo textarea:focus,
.ggp-plugin-root .ggp-search input:focus,
.ggp-plugin-root .ggp-cart-qty:focus,
.ggp-plugin-root .ggp-lin-qty:focus,
.ggp-plugin-root .ggp-promo-input:focus,
.ggp-plugin-root .ggp-tot-card .ggp-promo-row .ggp-promo-input:focus,
.ggp-plugin-root .ggp-doc-field input:focus {
    border-color: var(--ggp-accent, #2459ad);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ggp-accent, #2459ad) 22%, transparent);
    background: #fff;
}
.ggp-plugin-root .ggp-campo input::placeholder,
.ggp-plugin-root .ggp-campo textarea::placeholder,
.ggp-plugin-root .ggp-promo-input::placeholder,
.ggp-plugin-root .ggp-search input::placeholder { color: #9aa6b8; }
/* LABEL unificado: UPPERCASE #5b6a82 .68rem/600 letter-spacing .06em. */
.ggp-plugin-root .ggp-campo label,
.ggp-plugin-root .ggp-cotizador .ggp-campo label,
.ggp-plugin-root .ggp-res-campo label,
.ggp-plugin-root .ggp-cotizador-resultado .ggp-res-campo label {
    text-transform: uppercase; color: var(--ggp-label, #5b6a82);
    font-size: .68rem; font-weight: 600; letter-spacing: .06em;
}

/* —— CABECERA EDITORIAL —————————————————————————————————————————————— */
.ggp-plugin-root .ggp-section-eyebrow { color: var(--ggp-accent, #2459ad); letter-spacing: .18em; }
.ggp-plugin-root .ggp-section-eyebrow::before { background: var(--ggp-accent, #2459ad); }
.ggp-plugin-root .ggp-section-title { color: var(--ggp-tinta, #0d3677); letter-spacing: .09em; }

/* —— C) TABLAS (presupuesto / líneas / cualquier listado) ———————————— */
.ggp-plugin-root .ggp-lin-table th,
.ggp-plugin-root .ggp-cart-table th {
    color: var(--ggp-tinta, #0d3677);
    text-transform: uppercase; letter-spacing: .07em; font-size: 11.5px;
    background: var(--ggp-line-soft, #eaf2ff);
    border-bottom: 1px solid var(--ggp-line, #e6ecf6);
}
.ggp-plugin-root .ggp-lin-table td,
.ggp-plugin-root .ggp-cart-table td { border-bottom: 1px solid var(--ggp-line, #e6ecf6); color: var(--ggp-text, #2c3a52); }
.ggp-plugin-root .ggp-lin-table tbody tr:nth-child(even),
.ggp-plugin-root .ggp-cart-table tbody tr:nth-child(even) { background: var(--ggp-zebra, #fbfcfe); }
.ggp-plugin-root .ggp-lin-table tbody tr:hover,
.ggp-plugin-root .ggp-cart-table tbody tr:hover { background: var(--ggp-soft, #eaf2ff); }
.ggp-plugin-root .ggp-lin-total,
.ggp-plugin-root .ggp-lin-table td.ggp-lin-total { color: var(--ggp-tinta, #0d3677); }

/* —— D) PANELES / CARDS / TOTALES (carrito, presupuesto, calculadora) — */
.ggp-plugin-root .ggp-panel,
.ggp-plugin-root .ggp-calc,
.ggp-plugin-root .ggp-cotizador,
.ggp-plugin-root .ggp-calc--d2 .ggp-calc-d2-resumen {
    background: var(--ggp-paper, linear-gradient(180deg,#fbfcfe 0%,#fff 38%));
    border: 1px solid var(--ggp-line, #e6ecf6);
    border-radius: var(--ggp-radio-card, 12px);
    box-shadow: var(--ggp-sombra-card, 0 1px 2px rgba(13,54,119,.04));
}
/* Barra lateral de acento = 3px gradiente vertical azul (firma de la app). */
.ggp-plugin-root .ggp-panel::before,
.ggp-plugin-root .ggp-cotizador::before {
    background: var(--ggp-grad-vert, linear-gradient(180deg,#2459ad,#0d3677));
}
.ggp-plugin-root .ggp-tot-card {
    background: var(--ggp-paper, linear-gradient(180deg,#fbfcfe 0%,#fff 38%));
    border: 1px solid var(--ggp-line, #e6ecf6);
    border-radius: var(--ggp-radio-card, 12px);
    box-shadow: var(--ggp-sombra-card, 0 1px 2px rgba(13,54,119,.04));
    font-family: var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif);
}
.ggp-plugin-root .ggp-tot-card .ggp-tot-line .lbl { color: var(--ggp-sub, #6b7c99); }
.ggp-plugin-root .ggp-tot-card .ggp-tot-line .val { color: var(--ggp-text, #2c3a52); }
.ggp-plugin-root .ggp-tot-card .ggp-tot-total .lbl { color: var(--ggp-tinta, #0d3677); }
.ggp-plugin-root .ggp-tot-card .ggp-tot-total .val,
.ggp-plugin-root .ggp-cart-total .val,
.ggp-plugin-root .ggp-presu-total .val,
.ggp-plugin-root .ggp-cart-resumen .ggp-cart-rtotal .val { color: var(--ggp-tinta, #0d3677); }
/* Promo aplicada en verde de éxito del sistema. */
.ggp-plugin-root .ggp-tot-card .ggp-tot-descuento .val { color: var(--ggp-ok, #22c55e); }
/* Botón "Aplicar" del código promocional = gradiente azul de marca + brillo. */
.ggp-plugin-root .ggp-btn-promo,
.ggp-plugin-root .ggp-tot-card .ggp-promo-row .ggp-btn-promo {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--ggp-grad, linear-gradient(135deg,#2459ad,#0d3677)); color: #fff;
    border: none; border-radius: var(--ggp-radio, 8px);
    box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--ggp-tinta, #0d3677) 38%, transparent);
}
.ggp-plugin-root .ggp-btn-promo:hover,
.ggp-plugin-root .ggp-tot-card .ggp-promo-row .ggp-btn-promo:hover {
    background: var(--ggp-grad-hover, linear-gradient(135deg,#0d3677,#0a2a5e));
}
.ggp-plugin-root .ggp-btn-promo::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 60%; left: -75%;
    pointer-events: none; z-index: 2;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.30), transparent);
    transform: skewX(-18deg); transition: left .55s ease;
}
.ggp-plugin-root .ggp-btn-promo:hover::after { left: 135%; }

/* —— F) CHIPS DEL CONFIGURADOR (sistema de la app) ——————————————————— */
/* Colores con AZUL LITERAL (no --ggp-acento/--ggp-cot-acento) → inmunes al rojo/coral
   que inyecta el tema-IA. No-sel: borde #e6ecf6 sobre blanco. Sel: relleno #eaf2ff +
   borde #0d3677 + check azul. Cero rosa/coral en ningún estado. */
.ggp-plugin-root .ggp-cfg-card {
    border: 1.5px solid #e6ecf6; border-radius: var(--ggp-radio, 8px); background: #fff;
    box-shadow: none;
}
.ggp-plugin-root .ggp-cfg-card:hover { border-color: #2459ad; }
.ggp-plugin-root .ggp-cfg-card:focus-visible {
    outline: 3px solid color-mix(in srgb, #2459ad 35%, transparent); outline-offset: 2px;
}
.ggp-plugin-root .ggp-cfg-card.is-selected {
    border-color: #0d3677; border-width: 2px; background: #eaf2ff;
    box-shadow: 0 4px 14px -6px rgba(13,54,119,.22);
}
.ggp-plugin-root .ggp-cfg-card .ggp-cfg-check { background: #0d3677; }
.ggp-plugin-root .ggp-cfg-card-name { color: var(--ggp-text, #2c3a52); }
.ggp-plugin-root .ggp-cfg-card.is-selected .ggp-cfg-card-name { color: #0d3677; }
.ggp-plugin-root .ggp-cfg-sec-title { color: var(--ggp-tinta, #0d3677); }
.ggp-plugin-root .ggp-cfg-sec-title .ggp-cfg-grp-name {
    color: var(--ggp-label, #5b6a82); text-transform: uppercase; letter-spacing: .06em;
}
.ggp-plugin-root .ggp-cfg-card-meta { color: var(--ggp-sub, #6b7c99); }

/* —— G) PADDING Y ALINEACIÓN DE TEXTO (escalado de spacing consistente) ——— */
/* Card del configurador y panel: padding cómodo y uniforme. */
.ggp-plugin-root .ggp-calc { padding: 1.5rem 1.6rem; }
.ggp-plugin-root .ggp-panel { padding: 1.6rem 1.7rem; }
.ggp-plugin-root .ggp-calc--d2 .ggp-calc-d2-resumen { padding: 1.1rem 1.15rem; }
/* Cabecera editorial: aire bajo el título de sección. */
.ggp-plugin-root .ggp-cfg-sec-title { margin: 0 0 .6rem; }
/* Celdas de tabla: padding .5rem .75rem, line-height legible, alineación vertical media. */
.ggp-plugin-root .ggp-lin-table td,
.ggp-plugin-root .ggp-lin-table th,
.ggp-plugin-root .ggp-cart-table td,
.ggp-plugin-root .ggp-cart-table th { padding: .55rem .75rem; line-height: 1.3; vertical-align: middle; }
/* Importes / columnas numéricas alineados a la derecha con cifras tabulares. */
.ggp-plugin-root .ggp-lin-table td:not(.ggp-col-prod),
.ggp-plugin-root .ggp-lin-table th:not(.ggp-col-prod) { text-align: right; }
.ggp-plugin-root .ggp-lin-table .ggp-lin-precio-ud,
.ggp-plugin-root .ggp-lin-table .ggp-lin-subtotal,
.ggp-plugin-root .ggp-lin-table .ggp-lin-impuestos,
.ggp-plugin-root .ggp-lin-table .ggp-lin-total { font-variant-numeric: tabular-nums; }
/* Filas del panel de totales: label izquierda / importe derecha, misma baseline. */
.ggp-plugin-root .ggp-tot-card .ggp-tot-line {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .15rem 0;
}
.ggp-plugin-root .ggp-tot-card .ggp-tot-line .val { font-variant-numeric: tabular-nums; text-align: right; }
.ggp-plugin-root .ggp-tot-card { padding: 1rem 1.1rem; }
.ggp-plugin-root .ggp-tot-card .ggp-tot-total { margin-top: .35rem; padding-top: .6rem; }
/* Tira de resultados de la calculadora (Precio Ud./SubTotal/Impuestos/Total). */
.ggp-plugin-root .ggp-res-campo { padding: .9rem 1rem; }
.ggp-plugin-root .ggp-calc--d2 .ggp-calc-d2-resumen .ggp-res-campo { padding: .55rem 0; }

/* —— FONDO DE PÁGINA del módulo (mesa de trabajo de la app) —————————— */
.ggp-plugin-root.ggp-cart-wrap,
.ggp-plugin-root.ggp-presu-wrap { background: var(--ggp-bg-app, #f4f6f9); }

/* =============================================================================
   === v3.32 diseño ecommerce d4 + checkout ===
   Diseño 4 «Ecommerce» del configurador ([ggp_calculadora] .ggp-calc--d4) y piel
   CHECKOUT del carrito/presupuesto (.ggp-checkout-skin). Solo presentación: reutiliza
   los IDs/bloques compartidos del motor (#ggp-cantidad, #ggp-cfg, #ggp-res-*,
   #ggp-btn-add, #ggp-promo-*) y consume las variables --ggp-*. Sin !important nuevo.
   ============================================================================= */

/* ---- Layout 2 columnas: preview sticky + opciones ---- */
.ggp-calc--d4 { background: transparent; border: none; padding: 0; }
.ggp-calc--d4 .ggp-d4-grid {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 30px; align-items: start;
}

/* — Vista previa — */
.ggp-calc--d4 .ggp-d4-preview { position: sticky; top: 88px; }
.ggp-calc--d4 .ggp-d4-stage {
    position: relative; border-radius: 18px; overflow: hidden;
    background: radial-gradient(130% 120% at 28% 18%, #ffffff 0%, #eaf1fb 60%, #dde8f8 100%);
    border: 1px solid var(--ggp-linea, #e6ecf6);
    box-shadow: 0 30px 70px -28px rgba(13,54,119,.34);
    aspect-ratio: 4 / 3; display: grid; place-items: center;
}
.ggp-calc--d4 .ggp-d4-stage-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ggp-calc--d4 .ggp-d4-stage-tag {
    position: absolute; top: 14px; left: 14px; z-index: 5;
    background: rgba(255,255,255,.92); border: 1px solid var(--ggp-linea, #e6ecf6);
    border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ggp-acento, #2459ad); padding: .34rem .7rem;
}
/* tarjeta CSS de marca (cuando NO hay imagen real) */
.ggp-calc--d4 .ggp-d4-pc-wrap { position: relative; width: 64%; }
.ggp-calc--d4 .ggp-d4-pc {
    aspect-ratio: 1.62 / 1; border-radius: 13px; position: absolute; overflow: hidden;
    box-shadow: 0 26px 50px -22px rgba(11,23,51,.55), 0 2px 0 rgba(255,255,255,.6) inset;
}
.ggp-calc--d4 .ggp-d4-pc-back { left: 14%; top: -12%; width: 100%; background: #fff; transform: rotate(6deg); opacity: .96; }
.ggp-calc--d4 .ggp-d4-pc-back::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,#eaf1fb,#dbe7f8); }
.ggp-calc--d4 .ggp-d4-pc-mini { position: absolute; inset: 24% 18%; border-radius: 6px; border: 1.5px dashed #b9caea; }
.ggp-calc--d4 .ggp-d4-pc-front { position: relative; transform: rotate(-4deg); z-index: 2; }
.ggp-calc--d4 .ggp-d4-pc-front::before { content: ""; position: absolute; inset: 0; background: var(--ggp-grad, linear-gradient(135deg,#2459ad,#0d3677)); }
.ggp-calc--d4 .ggp-d4-pc-logo { position: absolute; top: 15px; left: 15px; width: 26px; height: 26px; border-radius: 7px; background: #fff; opacity: .96; }
.ggp-calc--d4 .ggp-d4-pc-name { position: absolute; top: 18px; right: 16px; left: 50px; text-align: right; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.92); text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ggp-calc--d4 .ggp-d4-pc-lines { position: absolute; bottom: 17px; left: 16px; right: 16px; display: flex; flex-direction: column; gap: 5px; }
.ggp-calc--d4 .ggp-d4-pc-lines i { height: 4px; border-radius: 3px; background: rgba(255,255,255,.9); }
.ggp-calc--d4 .ggp-d4-pc-lines i:nth-child(1) { width: 55%; }
.ggp-calc--d4 .ggp-d4-pc-lines i:nth-child(2) { width: 78%; opacity: .65; }
.ggp-calc--d4 .ggp-d4-pc-lines i:nth-child(3) { width: 40%; opacity: .45; }
/* miniaturas decorativas */
.ggp-calc--d4 .ggp-d4-thumbs { display: flex; gap: 10px; margin-top: 14px; }
.ggp-calc--d4 .ggp-d4-thumb {
    flex: 1; aspect-ratio: 1.45 / 1; border-radius: 11px; background: #fff;
    border: 1.5px solid var(--ggp-linea, #e6ecf6); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; color: var(--ggp-sub, #6b7c99);
    font-size: 16px; cursor: default;
}
.ggp-calc--d4 .ggp-d4-thumb small { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ggp-calc--d4 .ggp-d4-thumb.is-sel { border-color: var(--ggp-acento, #2459ad); box-shadow: 0 0 0 3px var(--ggp-soft, #ecf2fc); color: var(--ggp-acento, #2459ad); }

/* — Columna de opciones — */
.ggp-calc--d4 .ggp-d4-head { margin-bottom: 6px; }
.ggp-calc--d4 .ggp-d4-head .ggp-calc-title { font-size: clamp(26px, 4vw, 34px); margin: 4px 0 6px; }
.ggp-calc--d4 .ggp-d4-head .ggp-calc-sub { color: var(--ggp-sub, #6b7c99); }
.ggp-calc--d4 .ggp-d4-group { margin-top: 22px; }
.ggp-calc--d4 .ggp-d4-group-label {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ggp-label, #56657f); margin-bottom: 10px;
}
.ggp-calc--d4 .ggp-d4-group-label .ggp-d4-pick { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ggp-acento, #2459ad); }

/* tramos de cantidad */
.ggp-calc--d4 .ggp-d4-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; }
.ggp-calc--d4 .ggp-d4-tier {
    position: relative; border: 1.5px solid var(--ggp-linea, #e6ecf6); background: #fff;
    border-radius: 11px; padding: .85rem .5rem .7rem; text-align: center; cursor: pointer;
    font-family: inherit; transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.ggp-calc--d4 .ggp-d4-tier:hover { border-color: #aec6ee; transform: translateY(-1px); }
.ggp-calc--d4 .ggp-d4-tier.is-sel { border-color: var(--ggp-acento, #2459ad); background: linear-gradient(180deg, var(--ggp-soft-2, #e3edfb), #fff); box-shadow: 0 0 0 3px var(--ggp-soft, #ecf2fc); }
.ggp-calc--d4 .ggp-d4-tier-q { display: block; font-weight: 800; font-size: 17px; color: var(--ggp-tinta, #0d3677); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ggp-calc--d4 .ggp-d4-tier-u { display: block; font-size: 11.5px; color: var(--ggp-acento, #2459ad); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; min-height: 14px; }
/* v3.36 — badge %ahorro (verde) + badge ★Popular (azul) sobre el tramo */
.ggp-calc--d4 .ggp-d4-tier-save {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    background: var(--ggp-ok, #22c55e); color: #fff; font-size: 10px; font-weight: 700;
    padding: .14rem .45rem; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 3px 8px -2px rgba(19,138,85,.5); font-variant-numeric: tabular-nums;
}
.ggp-calc--d4 .ggp-d4-tier-save[hidden] { display: none; }
.ggp-calc--d4 .ggp-d4-tier-pop {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    background: var(--ggp-tinta, #0d3677); color: #fff; font-size: 10px; font-weight: 700;
    padding: .14rem .45rem; border-radius: 999px; white-space: nowrap; letter-spacing: .04em;
    box-shadow: 0 3px 8px -2px rgba(13,54,119,.55);
}
/* si coinciden Popular + ahorro en el mismo tramo, el ahorro baja al borde inferior */
.ggp-calc--d4 .ggp-d4-tier-pop ~ .ggp-d4-tier-save { top: auto; bottom: -9px; }

/* v3.36 — pista de selección por grupo (.ggp-cfg-pick) en el título de sección.
   El título es display:flex → empuja la pista a la derecha con margin-left:auto. */
.ggp-cfg-sec-title .ggp-cfg-pick {
    margin-left: auto; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--ggp-acento, #2459ad); max-width: 55%; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2;
}
.ggp-cfg-sec-title .ggp-cfg-pick:empty { display: none; }

/* v3.36 — refuerzo del placeholder de chip sin imagen en d4: NUNCA blanco/vacío,
   siempre fondo suave de marca + icono centrado bien visible. */
.ggp-calc--d4 .ggp-cfg-card-img { background: var(--ggp-soft, #ecf2fc); }
.ggp-calc--d4 .ggp-cfg-card-img .ggp-cfg-ph {
    background: linear-gradient(135deg, var(--ggp-soft, #ecf2fc), #fff);
    color: var(--ggp-acento, #2459ad); opacity: .55; font-size: 32px;
}

/* input numérico de fallback (oculto salvo si no hay tramos) */
.ggp-calc--d4 .ggp-d4-qty-fallback { display: none; margin-top: 6px; }
.ggp-calc--d4 .ggp-d4-qty-fallback.is-visible { display: block; }
.ggp-calc--d4 .ggp-d4-qty-fallback .ggp-calc-config { flex-direction: column; }
.ggp-calc--d4 .ggp-d4-qty-fallback .ggp-campo input { width: 100%; }

/* el configurador compartido (#ggp-cfg) ya está estilado; en d4 separamos secciones */
.ggp-calc--d4 #ggp-cfg { margin-top: 4px; }
.ggp-calc--d4 #ggp-cfg .ggp-cfg-sec { margin-top: 22px; }

/* price-card protagonista (mapea a #ggp-res-*) */
.ggp-calc--d4 .ggp-d4-price-card {
    margin-top: 26px; border-radius: 16px; background: #fff;
    border: 1px solid var(--ggp-linea, #e6ecf6);
    box-shadow: 0 12px 34px -14px rgba(13,54,119,.24); overflow: hidden;
}
.ggp-calc--d4 .ggp-d4-price-top {
    padding: 18px 20px 14px; display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; background: linear-gradient(180deg, #fbfcff, #fff);
}
.ggp-calc--d4 .ggp-d4-unit { font-size: 12px; color: var(--ggp-sub, #6b7c99); letter-spacing: .02em; }
.ggp-calc--d4 .ggp-d4-unit b { display: block; font-size: 18px; color: var(--ggp-tinta, #0d3677); font-variant-numeric: tabular-nums; margin-top: 2px; font-weight: 700; }
.ggp-calc--d4 .ggp-d4-unit b span { font-size: 13px; color: var(--ggp-sub, #6b7c99); }
.ggp-calc--d4 .ggp-d4-big { text-align: right; }
.ggp-calc--d4 .ggp-d4-big small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ggp-label, #56657f); font-weight: 700; }
.ggp-calc--d4 .ggp-d4-amt { font-size: 36px; font-weight: 800; color: var(--ggp-tinta, #0d3677); line-height: 1.02; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ggp-calc--d4 .ggp-d4-amt span { font-size: 18px; font-weight: 700; color: var(--ggp-sub, #6b7c99); }
.ggp-calc--d4 .ggp-d4-price-rows { padding: 6px 20px 4px; border-top: 1px dashed var(--ggp-linea, #e6ecf6); }
.ggp-calc--d4 .ggp-d4-prow { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 14px; }
.ggp-calc--d4 .ggp-d4-prow > span:first-child { color: var(--ggp-sub, #6b7c99); }
.ggp-calc--d4 .ggp-d4-prow > span:last-child { font-variant-numeric: tabular-nums; color: var(--ggp-texto, #2c3a52); font-weight: 600; }
.ggp-calc--d4 .ggp-d4-prow > span:last-child span { font-size: 12px; color: var(--ggp-sub, #6b7c99); font-weight: 500; }
/* REGLA: filas en 0,00 € ocultas (las marca el JS d4) */
.ggp-calc--d4 .ggp-d4-prow.ggp-d4-prow--zero { display: none; }
.ggp-calc--d4 .ggp-d4-price-cta { padding: 14px 20px 18px; }
.ggp-calc--d4 .ggp-d4-price-cta .ggp-calc-actions { flex-direction: column; align-items: stretch; gap: 9px; margin-top: 0; }
.ggp-calc--d4 .ggp-d4-price-cta .ggp-btn-add { width: 100%; text-align: center; justify-content: center; padding: .85rem; }
.ggp-calc--d4 .ggp-d4-price-cta .ggp-btn-link { text-align: center; }

@media (max-width: 860px) {
    .ggp-calc--d4 .ggp-d4-grid { grid-template-columns: 1fr; gap: 22px; }
    .ggp-calc--d4 .ggp-d4-preview { position: static; }
}

/* =============================================================================
   PIEL CHECKOUT del carrito / presupuesto (.ggp-checkout-skin) — diseño 4
   No cambia el JS: reestiliza la tabla de líneas, el panel de totales (resumen),
   el código promocional y añade bloque de confianza + stepper.
   ============================================================================= */
.ggp-checkout-skin .ggp-panel { background: transparent; border: none; box-shadow: none; padding: 0; }

/* stepper (solo presupuesto) */
.ggp-checkout-skin .ggp-stepbar {
    display: flex; gap: 0; margin: 4px 0 24px; border: 1px solid var(--ggp-linea, #e6ecf6);
    border-radius: 999px; background: #fff; padding: 5px; max-width: 520px;
}
.ggp-checkout-skin .ggp-step { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ggp-sub, #6b7c99); padding: .5rem; border-radius: 999px; }
.ggp-checkout-skin .ggp-step.is-done { color: var(--ggp-ok, #138a55); }
.ggp-checkout-skin .ggp-step.is-now { background: var(--ggp-grad, linear-gradient(135deg,#2459ad,#0d3677)); color: #fff; }

/* =============================================================================
   v3.35 — TARJETAS-LÍNEA + RESUMEN tipo checkout (markup nuevo en divs).
   El carrito ya NO usa <table class="ggp-lin-table">: cada línea es .ggp-line.
   Layout de 2 columnas (.ggp-checkout-grid): tarjetas a la izq, resumen sticky a la der.
   Se aplica SIEMPRE (markup de tarjetas es el único que emite ya el JS); bajo
   .ggp-checkout-skin (diseño 4) gana el grid de 2 columnas + sticky.
   ============================================================================= */

/* — Layout: 2 columnas en d4, 1 columna en el resto — */
.ggp-checkout-grid { display: block; }
.ggp-checkout-skin .ggp-checkout-grid {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px; align-items: start;
}

/* — Lista de tarjetas-línea — */
.ggp-plugin-root .ggp-cart-lines { display: flex; flex-direction: column; gap: 14px; }
.ggp-plugin-root .ggp-line {
    display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
    background: #fff; border: 1px solid var(--ggp-line, var(--ggp-linea, #e6ecf6));
    border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(11,23,51,.05);
}
/* miniatura cuadrada */
.ggp-plugin-root .ggp-line-thumb { width: 84px; height: 64px; border-radius: 8px; overflow: hidden; }
.ggp-plugin-root .ggp-line-thumb .ggp-cart-thumb,
.ggp-plugin-root .ggp-line-thumb .ggp-cart-thumb-ph {
    width: 100%; height: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    object-fit: cover; margin: 0;
}
.ggp-plugin-root .ggp-line-thumb .ggp-cart-thumb-ph {
    font-size: 26px; color: #b9c2d0; background: linear-gradient(135deg,#fbfcfe,#eef2f8);
    border: 1px solid var(--ggp-line, var(--ggp-linea, #e6ecf6));
}
/* cuerpo */
.ggp-plugin-root .ggp-line-body { min-width: 0; }
.ggp-plugin-root .ggp-line .ggp-lin-nombre { font-size: 16px; font-weight: 700; color: var(--ggp-tinta, #0d3677); line-height: 1.2; }
.ggp-plugin-root .ggp-line .ggp-lin-desc,
.ggp-plugin-root .ggp-line .ggp-lin-config { font-size: 12.5px; color: var(--ggp-sub, #6b7c99); margin-top: 3px; line-height: 1.45; }
/* control de cantidad inline −/+ */
.ggp-plugin-root .ggp-line-qty {
    display: inline-flex; align-items: center; margin-top: 10px;
    border: 1px solid var(--ggp-line, var(--ggp-linea, #e6ecf6)); border-radius: 8px; overflow: hidden;
}
.ggp-plugin-root .ggp-line-qty button {
    width: 30px; height: 30px; border: none; background: #fff; color: var(--ggp-accent, #2459ad);
    font-size: 17px; line-height: 1; cursor: pointer; padding: 0; transition: background .15s ease;
}
.ggp-plugin-root .ggp-line-qty button:hover { background: var(--ggp-soft, #eaf2ff); }
.ggp-plugin-root .ggp-line-qty .ggp-lin-qty {
    width: 48px; min-width: 48px; border: none; border-left: 1px solid var(--ggp-line, var(--ggp-linea, #e6ecf6));
    border-right: 1px solid var(--ggp-line, var(--ggp-linea, #e6ecf6)); border-radius: 0;
    text-align: center; padding: 6px 0; font-weight: 600; color: var(--ggp-tinta, #0d3677);
    font-variant-numeric: tabular-nums; background: #fff;
    -moz-appearance: textfield; appearance: textfield;
}
.ggp-plugin-root .ggp-line-qty .ggp-lin-qty::-webkit-outer-spin-button,
.ggp-plugin-root .ggp-line-qty .ggp-lin-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ggp-plugin-root .ggp-line-qty .ggp-lin-qty:focus { box-shadow: none; }
/* columna derecha: total grande + precio/ud + ✕ */
.ggp-plugin-root .ggp-line-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ggp-plugin-root .ggp-line .ggp-lin-total { font-weight: 800; color: var(--ggp-tinta, #0d3677); font-size: 18px; font-variant-numeric: tabular-nums; }
.ggp-plugin-root .ggp-line .ggp-lin-precio-ud { font-size: 12.5px; color: var(--ggp-sub, #6b7c99); font-variant-numeric: tabular-nums; }
.ggp-plugin-root .ggp-line .ggp-cart-del {
    margin-top: 6px; background: none; border: none; color: var(--ggp-sub, #6b7c99);
    font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; transition: color .15s ease;
}
.ggp-plugin-root .ggp-line .ggp-cart-del:hover { color: #e63946; }
/* tarjeta solo-lectura (presupuesto): sin control de cantidad */
.ggp-plugin-root .ggp-line--ro .ggp-line-qty { display: none; }

/* — Resumen / totales como card de papel — */
.ggp-plugin-root .ggp-cart-summary { min-width: 0; }
.ggp-checkout-skin .ggp-cart-summary .ggp-tot-card,
.ggp-checkout-skin .ggp-tot-wrap { position: sticky; top: 88px; }
.ggp-plugin-root .ggp-cart-summary .ggp-tot-wrap { margin-top: 0; }
.ggp-plugin-root .ggp-cart-summary .ggp-tot-card {
    background: #fff; border: 1px solid var(--ggp-line, var(--ggp-linea, #e6ecf6)); border-radius: 12px;
    box-shadow: 0 12px 34px -14px rgba(13,54,119,.24); padding: 18px 20px; width: 100%;
}
.ggp-plugin-root .ggp-cart-summary .ggp-tot-card::before { display: none; }
.ggp-plugin-root .ggp-tot-head {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ggp-accent, #2459ad); margin-bottom: 8px;
}
.ggp-plugin-root .ggp-cart-summary .ggp-tot-line { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 14px; }
.ggp-plugin-root .ggp-cart-summary .ggp-tot-line .lbl { color: var(--ggp-sub, #6b7c99); }
.ggp-plugin-root .ggp-cart-summary .ggp-tot-line .val { font-weight: 600; color: var(--ggp-text, #2c3a52); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ggp-plugin-root .ggp-cart-summary .ggp-tot-line.ggp-tot-total {
    border-top: 1px dashed var(--ggp-line, var(--ggp-linea, #e6ecf6)); margin-top: .5rem; padding-top: .9rem; align-items: baseline;
}
.ggp-plugin-root .ggp-cart-summary .ggp-tot-total .lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ggp-label, #5b6a82); }
.ggp-plugin-root .ggp-cart-summary .ggp-tot-total .val { font-size: 26px; font-weight: 800; color: var(--ggp-tinta, #0d3677); }

/* código promocional dentro del resumen */
.ggp-plugin-root .ggp-cart-summary .ggp-promo-row { display: flex; gap: 8px; padding: 10px 0; flex-wrap: wrap; }
.ggp-plugin-root .ggp-cart-summary .ggp-promo-input {
    flex: 1 1 130px; min-width: 0; border: 1.5px solid var(--ggp-line, var(--ggp-linea, #e6ecf6));
    border-radius: 8px; padding: .55rem .7rem; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
.ggp-plugin-root .ggp-cart-summary .ggp-btn-promo {
    background: var(--ggp-grad, linear-gradient(135deg,#2459ad,#0d3677)); color: #fff; border: none;
    border-radius: 8px; padding: 0 1rem; font-weight: 600; cursor: pointer;
}
.ggp-plugin-root .ggp-cart-summary .ggp-btn-promo:hover { background: var(--ggp-grad-hover, linear-gradient(135deg,#0d3677,#0a2a5e)); }
.ggp-plugin-root .ggp-cart-summary .ggp-promo-msg { flex: 1 1 100%; font-size: 12px; color: var(--ggp-sub, #6b7c99); }

/* CTAs del resumen */
.ggp-plugin-root .ggp-cart-cta { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.ggp-plugin-root .ggp-cart-cta .ggp-btn-primary,
.ggp-plugin-root .ggp-cart-cta .ggp-btn-secundario { width: 100%; justify-content: center; text-align: center; }
.ggp-plugin-root .ggp-cart-cta .ggp-btn-secundario {
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
    background: #fff; color: var(--ggp-accent, #2459ad); border: 1.5px solid var(--ggp-accent, #2459ad);
    border-radius: var(--ggp-radio, 8px); padding: .7rem 1rem; font-weight: 600; font-size: 14px; transition: background .15s ease;
}
.ggp-plugin-root .ggp-cart-cta .ggp-btn-secundario:hover { background: var(--ggp-soft, #eaf2ff); color: var(--ggp-tinta, #0d3677); }
.ggp-plugin-root .ggp-cart-cta .ggp-btn-link { align-self: center; }

/* filas de totales en 0 ocultas (no rompe; el JS no las marca, esto es defensivo) */
.ggp-plugin-root .ggp-cart-summary .ggp-tot-line.ggp-tot-zero { display: none; }

/* stepper (solo presupuesto) */
.ggp-checkout-skin .ggp-tot-card { box-shadow: 0 12px 34px -14px rgba(13,54,119,.24); }

/* trust / confianza */
.ggp-plugin-root .ggp-trust {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    margin-top: 14px; font-size: 12px; color: var(--ggp-sub, #6b7c99);
}
.ggp-plugin-root .ggp-trust span { display: inline-flex; align-items: center; gap: 5px; }

/* responsive: 1 columna */
@media (max-width: 860px) {
    .ggp-checkout-skin .ggp-checkout-grid { grid-template-columns: 1fr; }
    .ggp-checkout-skin .ggp-cart-summary .ggp-tot-card,
    .ggp-checkout-skin .ggp-tot-wrap { position: static; }
}
@media (max-width: 480px) {
    .ggp-plugin-root .ggp-line { grid-template-columns: 64px 1fr; }
    .ggp-plugin-root .ggp-line-thumb { width: 64px; height: 52px; }
    .ggp-plugin-root .ggp-line-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
}

/* =============================================================================
   v3.37 — VISTA CONMUTADA del carrito: VISTA A (carrito) ↔ VISTA B (datos+envío).
   El formulario de datos pasa a una pantalla aparte (paso 3 «Datos y envío»).
   ============================================================================= */
.ggp-plugin-root .ggp-cart-view[hidden] { display: none; }

/* stepbar (fallback scopeado a .ggp-plugin-root para que funcione aunque no sea d4;
   en d4 ya existe la versión .ggp-checkout-skin, que gana por especificidad). */
.ggp-plugin-root .ggp-stepbar {
    display: flex; gap: 0; margin: 4px 0 18px; border: 1px solid var(--ggp-line, var(--ggp-linea, #e6ecf6));
    border-radius: 999px; background: #fff; padding: 5px; max-width: 520px;
}
.ggp-plugin-root .ggp-step { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ggp-sub, #6b7c99); padding: .5rem; border-radius: 999px; }
.ggp-plugin-root .ggp-step.is-done { color: var(--ggp-ok, #138a55); }
.ggp-plugin-root .ggp-step.is-now { background: var(--ggp-grad, linear-gradient(135deg,#2459ad,#0d3677)); color: #fff; }

/* botón "← Volver al presupuesto" */
.ggp-plugin-root .ggp-gen-volver { display: inline-block; margin: 0 0 14px; }

/* layout de la VISTA B: formulario + mini-resumen (sticky) */
.ggp-plugin-root .ggp-gen-grid { display: block; }
.ggp-checkout-skin .ggp-gen-grid {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px; align-items: start;
}
.ggp-plugin-root .ggp-gen-col-form { min-width: 0; }
.ggp-plugin-root .ggp-gen-col-resumen { min-width: 0; }
.ggp-checkout-skin .ggp-gen-col-resumen .ggp-gen-resumen-card { position: sticky; top: 88px; }

/* el panel de datos como card de papel (anula el .ggp-gen-datos base de papel/top-accent) */
.ggp-plugin-root .ggp-cart-view-b .ggp-gen-datos {
    margin-top: 0; background: #fff; border: 1px solid var(--ggp-line, var(--ggp-linea, #e6ecf6));
    border-top: 1px solid var(--ggp-line, var(--ggp-linea, #e6ecf6));
    border-radius: 12px; box-shadow: 0 1px 2px rgba(11,23,51,.05); padding: 22px;
}
/* labels UPPERCASE de marca + inputs Bootstrap-sm (heredan del .ggp-campo global;
   aquí solo afinamos el tono del label y el grid de 2 columnas donde encaja). */
.ggp-plugin-root .ggp-cart-view-b .ggp-gen-datos .ggp-campo label {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ggp-label, #5b6a82);
}

/* mini-resumen de confirmación (reusa .ggp-tot-card/.ggp-tot-line del bloque v3.35) */
.ggp-plugin-root .ggp-gen-resumen-card {
    background: #fff; border: 1px solid var(--ggp-line, var(--ggp-linea, #e6ecf6)); border-radius: 12px;
    box-shadow: 0 12px 34px -14px rgba(13,54,119,.24); padding: 18px 20px; width: 100%;
}
.ggp-plugin-root .ggp-gen-resumen-card::before { display: none; }
.ggp-plugin-root .ggp-gen-resumen-card .ggp-tot-head {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ggp-accent, #2459ad); margin-bottom: 8px;
}
.ggp-plugin-root .ggp-gen-resumen-card .ggp-tot-line { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 14px; }
.ggp-plugin-root .ggp-gen-resumen-card .ggp-tot-line .lbl { color: var(--ggp-sub, #6b7c99); }
.ggp-plugin-root .ggp-gen-resumen-card .ggp-tot-line .val { font-weight: 600; color: var(--ggp-text, #2c3a52); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ggp-plugin-root .ggp-gen-resumen-card .ggp-tot-line.ggp-tot-total {
    border-top: 1px dashed var(--ggp-line, var(--ggp-linea, #e6ecf6)); margin-top: .5rem; padding-top: .9rem; align-items: baseline;
}
.ggp-plugin-root .ggp-gen-resumen-card .ggp-tot-total .lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ggp-label, #5b6a82); }
.ggp-plugin-root .ggp-gen-resumen-card .ggp-tot-total .val { font-size: 26px; font-weight: 800; color: var(--ggp-tinta, #0d3677); }
.ggp-plugin-root .ggp-gen-resumen-card .ggp-cart-cta { margin-top: 14px; }
.ggp-plugin-root .ggp-gen-resumen-card .ggp-cart-cta .ggp-btn-primary { width: 100%; justify-content: center; text-align: center; }
.ggp-plugin-root .ggp-gen-resumen-card .ggp-calc-feedback { display: block; margin-top: 10px; font-size: 13px; }

/* responsive: VISTA B en 1 columna; el mini-resumen deja de ser sticky */
@media (max-width: 860px) {
    .ggp-checkout-skin .ggp-gen-grid { grid-template-columns: 1fr; }
    .ggp-checkout-skin .ggp-gen-col-resumen .ggp-gen-resumen-card { position: static; }
}

/* =============================================================================
   v3.38 — PULIDO FINO (renovación de front). Sin !important nuevo, azul de marca.
   A) Bloque de valor bajo la preview d4 (rellena el aire de la columna izquierda).
   B) Chip del configurador sin imagen: placeholder más rico, menos soso.
   C) Microdetalles transversales: badges de tramo legibles, jerarquía price-card,
      hover de tarjetas-línea, alineación eyebrow/título del catálogo, sombras.
   ============================================================================= */

/* —— A) BLOQUE DE VALOR DE LA PREVIEW (d4) ——————————————————————————— */
.ggp-plugin-root .ggp-d4-prod-desc {
    margin: 16px 2px 0; font-size: 13.5px; line-height: 1.6; color: var(--ggp-sub, #6b7c99);
}
.ggp-plugin-root .ggp-d4-valueprops {
    list-style: none; margin: 16px 0 0; padding: 16px; display: flex; flex-direction: column; gap: 11px;
    background: linear-gradient(180deg, var(--ggp-soft, #eaf2ff) 0%, #fff 120%);
    border: 1px solid var(--ggp-line, #e6ecf6); border-radius: 14px;
}
.ggp-plugin-root .ggp-d4-valueprops li {
    display: flex; align-items: center; gap: 11px;
    font-size: 13.5px; font-weight: 600; color: var(--ggp-text, #2c3a52); line-height: 1.3;
}
.ggp-plugin-root .ggp-d4-vp-ico {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    background: #fff; border: 1px solid var(--ggp-line, #e6ecf6);
    box-shadow: 0 2px 6px -2px rgba(13,54,119,.18);
}
/* en móvil (1 col) el bloque de valor sobra visualmente bajo la preview → se oculta */
@media (max-width: 860px) {
    .ggp-plugin-root .ggp-d4-valueprops { display: none; }
    .ggp-plugin-root .ggp-d4-prod-desc { display: none; }
}

/* —— B) CHIP DEL CONFIGURADOR SIN IMAGEN ————————————————————————————— */
/* Cuando el chip no trae foto, el área de imagen quedaba con un icono pálido sobre
   gris plano. La rehacemos: fondo de marca sutil + icono nítido centrado, y el chip
   seleccionado tiñe esa franja para reforzar el estado. */
.ggp-plugin-root .ggp-cfg-card-img {
    background: linear-gradient(135deg, var(--ggp-soft, #eaf2ff), #fbfcff);
}
.ggp-plugin-root .ggp-cfg-card-img .ggp-cfg-ph {
    background: transparent; color: var(--ggp-accent, #2459ad); opacity: .42;
    font-size: 30px;
}
.ggp-plugin-root .ggp-cfg-card.is-selected .ggp-cfg-card-img {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ggp-accent, #2459ad) 18%, #fff), var(--ggp-soft, #eaf2ff));
}
.ggp-plugin-root .ggp-cfg-card.is-selected .ggp-cfg-card-img .ggp-cfg-ph { opacity: .7; }
/* chip de solo texto (sin franja de imagen): un punto-guía de marca a la izquierda del nombre */
.ggp-plugin-root .ggp-cfg-card--noimg.is-selected { background: var(--ggp-soft, #eaf2ff); }

/* —— C) MICRODETALLES TRANSVERSALES ————————————————————————————————— */
/* C1 · Badges de tramo (d4): el ★Popular y el %ahorro se solapaban arriba y costaba
   leerlos. Popular pasa a esquina sup-izq, ahorro a sup-der → nunca chocan. */
.ggp-plugin-root .ggp-d4-tier-pop {
    left: auto; right: auto; transform: none; top: -10px; left: 8px;
    letter-spacing: .02em;
}
.ggp-plugin-root .ggp-d4-tier-save {
    left: auto; transform: none; top: -10px; right: 8px;
}
.ggp-plugin-root .ggp-d4-tier-pop ~ .ggp-d4-tier-save { top: -10px; bottom: auto; }
/* un poco más de aire arriba en la fila de tramos para que los badges respiren */
.ggp-plugin-root .ggp-d4-tiers { margin-top: 4px; padding-top: 6px; }
.ggp-plugin-root .ggp-d4-tier { padding-top: 1rem; }

/* C2 · Price-card (d4): reforzar la jerarquía del total estimado y dar profundidad
   a la franja superior, que es donde cae la mirada. */
.ggp-plugin-root .ggp-d4-price-card { box-shadow: 0 18px 44px -18px rgba(13,54,119,.30); }
.ggp-plugin-root .ggp-d4-price-top {
    background: linear-gradient(180deg, var(--ggp-soft, #eaf2ff) 0%, #fff 100%);
    border-bottom: 1px solid var(--ggp-line, #e6ecf6);
}
.ggp-plugin-root .ggp-d4-amt { letter-spacing: -.03em; line-height: .98; }
.ggp-plugin-root .ggp-d4-big small { color: var(--ggp-accent, #2459ad); }

/* C2b · Carrito/presupuesto (checkout-skin): quitar la barra de acento azul vertical
   del panel izquierdo (.ggp-panel::before). El panel ya es transparente en d4; la barra
   quedaba flotando pegada al borde. El cotizador clásico (no checkout-skin) la conserva. */
.ggp-plugin-root.ggp-checkout-skin .ggp-panel::before { display: none; }

/* C3 · Tarjetas-línea del carrito: hover con elevación sutil (hoy son planas). */
.ggp-plugin-root .ggp-line { transition: border-color .16s ease, box-shadow .16s ease, transform .14s ease; }
.ggp-plugin-root .ggp-line:hover {
    border-color: var(--ggp-borde-azul, #d7e4fb);
    box-shadow: 0 10px 24px -14px rgba(13,54,119,.26);
    transform: translateY(-1px);
}

/* C4 · Catálogo: el eyebrow va alineado a la izquierda y el título salía centrado
   (incoherente). Los anclamos ambos a la izquierda, que es como se lee el grid. */
.ggp-plugin-root.ggp-productos .ggp-section-title,
.ggp-plugin-root.ggp-productos .ggp-section-eyebrow,
.ggp-plugin-root.ggp-productos .ggp-section-sub { text-align: left; }

/* C5 · Tarjetas de catálogo: hover un punto más vivo (borde azul de marca + sombra). */
.ggp-plugin-root .ggp-card:hover {
    border-color: var(--ggp-borde-azul, #d7e4fb);
    box-shadow: 0 14px 30px -16px rgba(13,54,119,.28);
}

/* C6 · Stepper del checkout: el paso activo gana un punto de contraste y el hecho
   un check sutil delante para leer el progreso de un vistazo. */
.ggp-plugin-root .ggp-step.is-done::before { content: "✓ "; font-weight: 700; }
.ggp-plugin-root .ggp-step.is-now { box-shadow: 0 4px 12px -4px rgba(13,54,119,.45); }

/* =============================================================================
   v3.39 — REDISEÑO del CATÁLOGO ([ggp_productos] / .ggp-productos). Tarjetas con más
   carácter, jerarquía Producto vs Categoría, CTA visible, buscador con presencia,
   hover premium. Solo presentación: NO toca ggpFiltrar() ni los enlaces. Azul de marca.
   ============================================================================= */

/* —— Cabecera del módulo: un poco más de aire bajo el sub —— */
.ggp-plugin-root.ggp-productos .ggp-section-sub { margin-bottom: 24px; }

/* —— BUSCADOR con icono integrado + más presencia —— */
.ggp-plugin-root.ggp-productos .ggp-search { gap: 14px; margin-bottom: 28px; }
.ggp-plugin-root .ggp-search-field {
    position: relative; flex: 1; display: flex; align-items: center;
}
.ggp-plugin-root .ggp-search-ico {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--ggp-accent, #2459ad); pointer-events: none; opacity: .8;
}
.ggp-plugin-root .ggp-search-field input {
    width: 100%; padding: 14px 18px 14px 46px;
    border: 1.5px solid var(--ggp-line, #e6ecf6); border-radius: 12px;
    font-family: inherit; font-size: 15px; font-weight: 500; color: var(--ggp-text, #2c3a52);
    background: #fff; outline: none; box-shadow: 0 1px 2px rgba(13,54,119,.05);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ggp-plugin-root .ggp-search-field input:focus {
    border-color: var(--ggp-accent, #2459ad);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ggp-accent, #2459ad) 14%, transparent);
}
.ggp-plugin-root.ggp-productos .ggp-count {
    background: var(--ggp-soft, #eaf2ff); color: var(--ggp-tinta, #0d3677);
    padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .01em;
}

/* —— GRID un punto más aireado —— */
.ggp-plugin-root.ggp-productos .ggp-grid { gap: 24px; }

/* —— TARJETA: imagen protagonista + cuerpo con CTA-pill —— */
.ggp-plugin-root.ggp-productos .ggp-card {
    border: 1px solid var(--ggp-line, #e6ecf6); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(13,54,119,.05); background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ggp-plugin-root.ggp-productos .ggp-card:hover {
    transform: translateY(-5px);
    border-color: var(--ggp-borde-azul, #d7e4fb);
    box-shadow: 0 22px 42px -20px rgba(13,54,119,.34);
}
/* imagen: ratio 4/3 (más editorial que el 88% casi-cuadrado) + degradado inferior
   sutil para que el badge y la transición al cuerpo respiren */
.ggp-plugin-root.ggp-productos .ggp-card-img { padding-top: 72%; }
.ggp-plugin-root.ggp-productos .ggp-card-img::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 62%, rgba(13,54,119,.10) 100%);
}
.ggp-plugin-root.ggp-productos .ggp-card:hover .ggp-card-img img { transform: scale(1.06); }

/* BADGE tipo píldora con punto-guía; Producto = azul de marca, Categoría = vidrio oscuro */
.ggp-plugin-root.ggp-productos .ggp-badge {
    top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 11px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    border-radius: 999px; box-shadow: 0 4px 12px -4px rgba(13,54,119,.4); z-index: 3;
}
.ggp-plugin-root.ggp-productos .ggp-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9;
}
.ggp-plugin-root.ggp-productos .ggp-badge-prod { background: var(--ggp-grad, linear-gradient(135deg,#2459ad,#0d3677)); color: #fff; }
.ggp-plugin-root.ggp-productos .ggp-badge-cat  { background: rgba(13,54,119,.78); color: #fff; backdrop-filter: blur(6px); }

/* CUERPO: título más presente + CTA-pill que se enciende al hover */
.ggp-plugin-root.ggp-productos .ggp-card-body { padding: 16px 18px 18px; gap: 12px; }
.ggp-plugin-root.ggp-productos .ggp-card-title { font-size: 17px; line-height: 1.25; color: var(--ggp-tinta, #0d3677); }
.ggp-plugin-root.ggp-productos .ggp-card-meta { margin-top: auto; }
.ggp-plugin-root.ggp-productos .ggp-card-meta::after { content: none; } /* quitamos la flecha heredada; el CTA-pill ya la lleva */
.ggp-plugin-root.ggp-productos .ggp-card-cta {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; letter-spacing: .01em;
    padding: 7px 14px; border-radius: 999px;
    transition: background .2s ease, color .2s ease, gap .2s ease;
}
.ggp-plugin-root.ggp-productos .ggp-card-cta::after {
    content: "→"; font-weight: 700; transition: transform .2s ease;
}
.ggp-plugin-root.ggp-productos .ggp-card:hover .ggp-card-cta::after { transform: translateX(3px); }
/* Producto = CTA de marca (acción «cotizar»); Categoría = CTA discreto (navegar) */
.ggp-plugin-root.ggp-productos .ggp-card--prod .ggp-card-cta {
    background: var(--ggp-soft, #eaf2ff); color: var(--ggp-accent, #2459ad);
}
.ggp-plugin-root.ggp-productos .ggp-card--prod:hover .ggp-card-cta {
    background: var(--ggp-grad, linear-gradient(135deg,#2459ad,#0d3677)); color: #fff;
}
.ggp-plugin-root.ggp-productos .ggp-card--cat .ggp-card-cta {
    background: transparent; color: var(--ggp-sub, #6b7c99); padding-left: 0;
}
.ggp-plugin-root.ggp-productos .ggp-card--cat:hover .ggp-card-cta { color: var(--ggp-accent, #2459ad); }

@media (prefers-reduced-motion: reduce) {
    .ggp-plugin-root.ggp-productos .ggp-card:hover { transform: none; }
    .ggp-plugin-root.ggp-productos .ggp-card-cta::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   §v3.40 — CATALOGO ECOMMERCE (maqueta "Propuesta 2a"). Scope: .ggp-plugin-root .ggp-cat2
   Una sola pantalla: header, carril, Categorias, Productos. Paleta de la maqueta como
   tokens LOCALES de .ggp-cat2 (azul #1E63B4, verde #1F9D55), NO ancladas a --ggp-acento
   (que el tema-IA puede tenir de rojo), asi que la pantalla nunca sale roja.
   ════════════════════════════════════════════════════════════════════════════ */
.ggp-plugin-root.ggp-cat2 {
    --c2-bg:      #F5F6F8;
    --c2-blue:    #1E63B4;
    --c2-green:   #1F9D55;
    --c2-green-d: #188247;
    --c2-ink:     #14213A;
    --c2-sub:     #8A929B;
    --c2-line:    #E5E8EE;
    --c2-blue-l:  #E8F0FA;
    --c2-green-l: #EAF7F0;
    --c2-text:    #4A525C;
    font-family: 'Manrope', var(--ggp-fuente-app, 'Roboto', 'Helvetica Neue', Arial, sans-serif);
    background: var(--c2-bg);
    color: var(--c2-ink);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(20,30,50,0.08);
    -webkit-font-smoothing: antialiased;
}
.ggp-plugin-root.ggp-cat2 *,
.ggp-plugin-root.ggp-cat2 *::before,
.ggp-plugin-root.ggp-cat2 *::after { box-sizing: border-box; }

/* HEADER */
.ggp-plugin-root.ggp-cat2 .ggp-cat2-header {
    background: #fff;
    border-bottom: 1px solid var(--c2-line);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--c2-ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-crumb { margin-bottom: 4px; font-size: 12.5px; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-crumb a { color: var(--c2-blue); text-decoration: none; font-weight: 600; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-crumb a:hover { text-decoration: underline; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-head-right { display: flex; align-items: center; gap: 10px; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--c2-bg);
    border: 1px solid var(--c2-line);
    border-radius: 999px;
    padding: 10px 18px;
    width: 320px; max-width: 100%;
    color: var(--c2-sub);
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-search svg { flex-shrink: 0; color: var(--c2-sub); }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-search input {
    border: none; background: transparent; outline: none;
    font-family: inherit; font-size: 13.5px; color: var(--c2-ink);
    width: 100%; padding: 0;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-search input::placeholder { color: var(--c2-sub); }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-cart {
    border: none; cursor: pointer; text-decoration: none;
    background: var(--c2-green); color: #fff !important;
    font-family: inherit; font-size: 13px; font-weight: 700;
    padding: 10px 18px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(31,157,85,0.35);
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.15s ease;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-cart:hover { background: var(--c2-green-d); color: #fff !important; }

/* CARRIL DE CATEGORIAS */
.ggp-plugin-root.ggp-cat2 .ggp-cat2-rail {
    background: #fff;
    padding: 16px 32px 20px;
    border-bottom: 1px solid var(--c2-line);
    display: flex; gap: 22px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-rail-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    cursor: pointer; width: 76px; flex-shrink: 0;
    background: none; border: none; padding: 0; font-family: inherit;
    white-space: normal;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-rail-thumb {
    width: 64px; height: 64px; border-radius: 999px; overflow: hidden;
    border: 2px solid transparent; padding: 2px; box-sizing: border-box;
    display: block;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-rail-thumb img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 999px; display: block;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-rail-ph,
.ggp-plugin-root.ggp-cat2 .ggp-cat2-rail-all {
    width: 100%; height: 100%; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c2-blue-l); color: var(--c2-blue);
    font-size: 22px;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-rail-all span { font-size: 12px; font-weight: 800; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-rail-name {
    font-size: 11.5px; font-weight: 600; color: var(--c2-text);
    text-align: center; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-rail-item.is-active .ggp-cat2-rail-thumb { border-color: var(--c2-blue); }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-rail-item.is-active .ggp-cat2-rail-name { color: var(--c2-blue); font-weight: 800; }

/* ENCABEZADOS DE SECCION */
.ggp-plugin-root.ggp-cat2 .ggp-cat2-sechead {
    padding: 22px 32px 6px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-secttl { font-size: 15px; font-weight: 800; color: var(--c2-ink); }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-secsub { font-size: 12.5px; color: var(--c2-sub); font-weight: 600; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-prodhead {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; color: var(--c2-sub); font-weight: 600;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-inword { color: var(--c2-sub); }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-chip-wrap { display: inline-flex; align-items: center; gap: 8px; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-chip {
    background: var(--c2-blue-l); color: var(--c2-blue); font-weight: 700;
    padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 12px;
    display: inline-flex; align-items: center; gap: 4px;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-chip-x {
    border: none; background: none; cursor: pointer; color: var(--c2-blue);
    font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 999px; font-family: inherit;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-chip-x:hover { background: rgba(30,99,180,0.14); color: var(--c2-blue); }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-results { color: var(--c2-sub); }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c2-text); }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-sort-lbl { color: var(--c2-sub); }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-sort-sel {
    background: #fff; border: 1px solid var(--c2-line); border-radius: 8px;
    padding: 6px 12px; font-weight: 600; cursor: pointer; font-family: inherit;
    color: var(--c2-text); font-size: 13px;
}

/* GRID */
.ggp-plugin-root.ggp-cat2 .ggp-cat2-grid {
    padding: 12px 32px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-cats { padding-bottom: 8px; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-prods { padding-bottom: 36px; }

/* TARJETA base compartida categoria + producto */
.ggp-plugin-root.ggp-cat2 .ggp-cat2-catcard,
.ggp-plugin-root.ggp-cat2 .ggp-cat2-prodcard {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(20,33,58,0.08);
    display: flex; flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    text-align: left; white-space: normal;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-catcard {
    cursor: pointer; border: none; padding: 0; font-family: inherit; width: 100%;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-catcard:hover,
.ggp-plugin-root.ggp-cat2 .ggp-cat2-prodcard:hover {
    box-shadow: 0 8px 24px rgba(20,33,58,0.14); transform: translateY(-2px);
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-media {
    position: relative; background: var(--c2-bg); display: block; overflow: hidden;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-media-cat  { aspect-ratio: 16 / 9; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-media-prod { aspect-ratio: 16 / 10; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-media-ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 42px; color: #c2cdde;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-badge {
    position: absolute; top: 10px; left: 10px;
    color: #fff; font-size: 10px; font-weight: 800;
    padding: 4px 9px; border-radius: 6px;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-badge-cat { background: rgba(20,33,58,0.78); letter-spacing: 0.06em; }

/* pie de categoria */
.ggp-plugin-root.ggp-cat2 .ggp-cat2-catfoot {
    padding: 13px 16px 15px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-catfoot-txt { display: flex; flex-direction: column; gap: 2px; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-catname { font-size: 14px; font-weight: 700; color: var(--c2-ink); }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-catmeta { font-size: 12px; color: var(--c2-sub); font-weight: 500; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-arrow {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px;
    background: var(--c2-blue-l); color: var(--c2-blue);
    font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* pie de producto */
.ggp-plugin-root.ggp-cat2 .ggp-cat2-prodfoot {
    padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-prodname { font-size: 14px; font-weight: 700; color: var(--c2-ink); line-height: 1.3; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-priceline {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-price { display: flex; flex-direction: column; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-price-lbl { font-size: 11px; color: var(--c2-sub); font-weight: 600; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-price-val { font-size: 16px; font-weight: 800; color: var(--c2-ink); min-height: 20px; }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-price-skel {
    display: inline-block; width: 62px; border-radius: 5px;
    background: linear-gradient(90deg, #eef1f5 25%, #e2e7ee 37%, #eef1f5 63%);
    background-size: 400% 100%; animation: ggpCat2Shimmer 1.3s ease infinite;
    color: transparent;
}
@keyframes ggpCat2Shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.ggp-plugin-root.ggp-cat2 .ggp-cat2-cta {
    border: 1px solid var(--c2-blue); cursor: pointer; text-decoration: none;
    background: #fff; color: var(--c2-blue) !important;
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    padding: 8px 0; border-radius: 8px; width: 100%; text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-cta:hover { background: var(--c2-blue); color: #fff !important; }

/* vacio */
.ggp-plugin-root.ggp-cat2 .ggp-cat2-empty {
    padding: 40px 32px 48px; text-align: center; color: var(--c2-sub); font-size: 14px;
}
.ggp-plugin-root.ggp-cat2 .ggp-cat2-empty-ico { font-size: 40px; display: block; margin-bottom: 10px; opacity: .6; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-header,
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-rail,
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-sechead,
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-grid { padding-left: 18px; padding-right: 18px; }
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-search { width: 100%; }
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-head-right { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 460px) {
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-catcard:hover,
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-prodcard:hover { transform: none; }
    .ggp-plugin-root.ggp-cat2 .ggp-cat2-price-skel { animation: none; }
}