/**
 * LSE Cotizador — Estilos frontend
 *
 * Encolado condicionalmente por class-assets.php (Fase 2).
 * Solo en páginas que usan el catálogo, la ficha de producto o el carrito.
 *
 * Convención: todos los selectores usan el prefijo .lse- para evitar colisiones
 * con el tema Hello Elementor.
 */

@import url("variables.css");

/* -------------------------------------------------------------------------
   Base — reset + blindaje anti-herencia del tema, dentro del scope del plugin

   ".lse-plugin *" tiene la misma especificidad (0,1,0) que cualquier clase
   de componente ".lse-algo" declarada más abajo en este archivo: como el
   reset va primero en el orden de cascada, un componente más específico
   siempre puede pisarlo, pero por defecto gana sobre selectores de elemento
   del tema (ej. "a { color: ... }", especificidad 0,0,1) que de otro modo
   heredarían tipografía/color ajenos dentro del plugin.
------------------------------------------------------------------------- */

.lse-plugin * {
    box-sizing: border-box;
    font-family: var(--lse-f-body);
    color: inherit;
}

.lse-plugin {
    font-family: var(--lse-f-body);
    color: var(--lse-ink);
    background: transparent;
}

/* -------------------------------------------------------------------------
   Blindaje reforzado — headings y controles nativos (<h1-h6>, <button>,
   <input type="button|submit">).

   El kit global de Elementor (Site Settings > Tipografía/Botones) estiliza
   estos elementos con selectores "clase-del-kit + elemento" (ej.
   ".elementor-kit-9 h2", ".elementor-kit-9 button"), especificidad
   (0,1,1) — más específica que una sola clase de componente nuestra
   (0,1,0), y por eso le gana a ".lse-plugin *" y a reglas como
   ".lse-filter-btn { font-family: ... }" sin importar el orden de carga.

   Se duplica la clase de scope (".lse-plugin.lse-plugin") para subir a
   (0,2,1): gana siempre, sin depender del orden de las hojas de estilo y
   sin usar !important.
------------------------------------------------------------------------- */

.lse-plugin.lse-plugin h1,
.lse-plugin.lse-plugin h2,
.lse-plugin.lse-plugin h3,
.lse-plugin.lse-plugin h4,
.lse-plugin.lse-plugin h5,
.lse-plugin.lse-plugin h6 {
    font-family: var(--lse-f-display);
}

.lse-plugin.lse-plugin button,
.lse-plugin.lse-plugin input[type="button"],
.lse-plugin.lse-plugin input[type="submit"] {
    font-family: var(--lse-f-body);
}

/* -------------------------------------------------------------------------
   Tipografía utilitaria
------------------------------------------------------------------------- */

.lse-text-display {
    font-family: var(--lse-f-display);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.lse-text-body {
    font-family: var(--lse-f-body);
    font-weight: 400;
    line-height: 1.55;
}

/* Certificaciones — el héroe */
.lse-cert-tag {
    font-family: var(--lse-f-mono);
    font-size:   var(--lse-mono-tag-size);
    font-weight: var(--lse-mono-weight);
    letter-spacing: var(--lse-mono-tracking);
    text-transform: uppercase;
    color: var(--lse-navy-700);
}

.lse-cert-eyebrow {
    font-family: var(--lse-f-mono);
    font-size:   var(--lse-mono-eyebrow-size);
    font-weight: var(--lse-mono-weight);
    letter-spacing: var(--lse-mono-tracking);
    text-transform: uppercase;
    color: var(--lse-navy-600);
}

/* -------------------------------------------------------------------------
   Botones base
------------------------------------------------------------------------- */

/* Selectores con ".lse-plugin " como ancestro (especificidad 0,2,x): el kit
   de Elementor estiliza <button>/<input type="button|submit"> con
   ".elementor-kit-N button" (0,1,1) — más específico que ".lse-btn-primary"
   sola (0,1,0). Sin el ancestro, el botón "Cotizar"/"Enviar cotización"
   (son <button>) heredaría el azul y el radius del tema en vez de los
   nuestros. Los botones que son <a> (ej. "Seguir explorando el catálogo")
   no lo necesitan por especificidad, pero se dejan igual por consistencia.

   Los estados :hover/:focus-visible del botón primario usan ADEMÁS el
   scope duplicado ".lse-plugin.lse-plugin" (especificidad 0,4,0 con el
   pseudo-clase incluido): el tema (Hello Elementor reset.css) trae
   "button:hover{background-color:#c36}" (magenta) — especificidad (0,1,1),
   igual de baja que el resto, pero se escapó del blindaje anterior (que
   solo cubría un nivel de ".lse-plugin "). Se sube un escalón más para que
   ningún hover nativo del tema pueda volver a ganar.

   :focus y :active van en la MISMA regla blindada: al hacer click con
   mouse el botón queda en :focus (no :focus-visible) y pasa por :active —
   estados que el tema/kit también estilizan en magenta y que el blindaje
   anterior no cubría (el botón se ponía magenta justo al clickearlo, ej.
   al disparar la validación de "Selecciona una talla"). */
.lse-plugin .lse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lse-space-2);
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-base);
    font-weight: 600;
    line-height: 1;
    padding: var(--lse-space-3) var(--lse-space-6);
    border-radius: var(--lse-radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--lse-transition),
                border-color var(--lse-transition),
                color var(--lse-transition),
                box-shadow var(--lse-transition);
}

.lse-plugin .lse-btn-primary {
    background-color: var(--lse-navy-800);
    border-color: var(--lse-navy-800);
    color: var(--lse-white);
}

.lse-plugin.lse-plugin .lse-btn-primary:hover,
.lse-plugin.lse-plugin .lse-btn-primary:focus,
.lse-plugin.lse-plugin .lse-btn-primary:focus-visible,
.lse-plugin.lse-plugin .lse-btn-primary:active {
    background-color: var(--lse-navy-700);
    border-color: var(--lse-navy-700);
    box-shadow: var(--lse-shadow);
    color: var(--lse-white);
    text-decoration: none;
}

.lse-plugin .lse-btn-outline {
    background-color: transparent;
    border-color: var(--lse-navy-800);
    color: var(--lse-navy-800);
}

.lse-plugin.lse-plugin .lse-btn-outline:hover,
.lse-plugin.lse-plugin .lse-btn-outline:focus,
.lse-plugin.lse-plugin .lse-btn-outline:focus-visible,
.lse-plugin.lse-plugin .lse-btn-outline:active {
    background-color: var(--lse-navy-800);
    color: var(--lse-white);
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   Indicador flotante del carrito (Grupo E)

   Reposicionado al lateral derecho, centrado en la mitad vertical de la
   pantalla — antes vivía abajo-a-la-derecha y chocaba con el botón fijo de
   WhatsApp del sitio (también fixed, bottom-right). Ambos siguen del lado
   derecho, pero ya no se solapan: WhatsApp vive abajo, esta burbuja vive a
   media altura.
------------------------------------------------------------------------- */

.lse-cart-indicator {
    position: fixed;
    top: 50%;
    right: var(--lse-space-5);
    z-index: var(--lse-z-cart);
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lse-navy-800);
    border-radius: 50%;
    box-shadow: var(--lse-shadow-lg);
    text-decoration: none;
    /* Promueve el elemento a su propia capa de composición: fixed +
       border-radius + box-shadow sin esto a veces pinta el círculo
       recortado/incompleto hasta el primer repaint. */
    will-change: transform;
    transition: box-shadow var(--lse-transition);
    /* translate(0, -50%) centra verticalmente — todos los demás estados
       (hover, animación) parten de este mismo offset y solo suman encima,
       nunca lo reemplazan, para no perder el centrado. */
    transform: translate(0, -50%);
    animation: lse-cart-attention 10s ease-in-out infinite;
}

.lse-cart-indicator:hover {
    /* Pausa la animación de "estoy aquí": mientras esté activa (infinite),
       su "transform" le gana en cascada al de :hover aunque este tenga
       mayor especificidad — son capas distintas. Al pausarla, el
       "transform" de acá abajo se aplica normalmente. */
    animation-play-state: paused;
    transform: translate(0, calc(-50% - 3px));
    box-shadow: var(--lse-shadow-xl);
    text-decoration: none;
}

/* "Estoy aquí": cada 10s, un pulso/rebote sutil que llama la atención y
   vuelve al reposo — el resto del ciclo queda completamente quieta. */
@keyframes lse-cart-attention {
    0%, 90%, 100% {
        transform: translate(0, -50%) scale(1);
    }
    93% {
        transform: translate(0, calc(-50% - 5px)) scale(1.1);
    }
    96% {
        transform: translate(0, -50%) scale(0.97);
    }
    98% {
        transform: translate(0, calc(-50% - 2px)) scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lse-cart-indicator {
        animation: none;
    }
}

/* Este indicador se inyecta en wp_footer, fuera del scope ".lse-plugin"
   (no hay ese ancestro disponible aquí), pero ya trae un id único en el
   markup — se usa para subir la especificidad (1,0,0), que le gana sin
   problema a ".elementor-kit-9 a{color:#287ABE}" (0,1,1) del kit de
   Elementor. El ícono usa stroke="currentColor", así que hereda este
   "color" — sin este empujón se pintaría azul del tema en vez de blanco. */
#lse-cart-indicator,
#lse-cart-indicator:hover {
    color: var(--lse-white);
}

.lse-cart-indicator__icon {
    width: 26px;
    height: 26px;
}

.lse-cart-indicator__count {
    position: absolute;
    top: -2px;
    right: -2px;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    background-color: var(--lse-secondary);
    color: var(--lse-white);
    border: 2px solid var(--lse-white);
    border-radius: 999px;
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-xs);
    font-weight: 700;
    padding: 0 var(--lse-space-1);
}

.lse-cart-indicator[data-count="0"] {
    display: none;
}

@media (max-width: 480px) {
    .lse-cart-indicator {
        width: 48px;
        height: 48px;
        right: var(--lse-space-3);
    }

    .lse-cart-indicator__icon {
        width: 22px;
        height: 22px;
    }
}

/* =========================================================================
   Archive del CPT producto — /productos/
   (contenedor de página; el grid interior lo definen las reglas de catálogo)
========================================================================= */

/* Sin padding-top: esta vista (archive del CPT, y lo mismo aplica al
   shortcode [lse_catalogo]) vive dentro de una pagina de Elementor, que ya
   controla su propio espaciado superior — un padding-top del plugin aqui
   se duplicaria con el del sitio. El espaciado inferior si se conserva. La
   unica vista que SI trae su propio padding-top es la single de producto
   (.lse-product-page / .lse-product-single), que se renderiza fuera del
   control de Elementor. */
.lse-catalogo-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--lse-space-6) var(--lse-space-12);
}

.lse-catalogo-archive__header {
    margin-bottom: var(--lse-space-8);
}

.lse-catalogo-archive__title {
    font-size:      var(--lse-text-4xl);
    font-weight:    900;
    letter-spacing: -0.02em;
    color:          var(--lse-navy-900);
    margin:         0;
}

@media (max-width: 768px) {
    .lse-catalogo-archive {
        padding: 0 var(--lse-space-4) var(--lse-space-8);
    }
    .lse-catalogo-archive__title {
        font-size: var(--lse-text-3xl);
    }
}

/* =========================================================================
   Catálogo — [lse_catalogo]
========================================================================= */

.lse-catalogo {
    width: 100%;
}

/* Filtros — slider horizontal de una sola línea (Grupo B) */
.lse-catalogo__filters-wrap {
    position: relative;
    margin-bottom: var(--lse-space-8);
}

.lse-catalogo__filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--lse-space-2);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: var(--lse-space-8);
}

.lse-catalogo__filters::-webkit-scrollbar {
    display: none;
}

/* Indicador de que se puede hacer scroll: degradado a la derecha. No
   intercepta clics ni se mueve con el contenido (position: absolute sobre
   el wrapper, no dentro del área con overflow-x). */
.lse-catalogo__filters-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, transparent, var(--lse-white));
    pointer-events: none;
}

/* ".lse-plugin " como ancestro: son <button> (tabs), el kit de Elementor
   las estiliza con ".elementor-kit-N button" (0,1,1), más específico que
   ".lse-filter-btn" sola (0,1,0). Ver nota en "Botones base". */
.lse-plugin .lse-filter-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: var(--lse-f-body);
    font-size:   var(--lse-text-sm);
    font-weight: 600;
    line-height: 1;
    padding: var(--lse-space-2) var(--lse-space-5);
    border-radius: var(--lse-radius);
    border: 1.5px solid var(--lse-line);
    background: var(--lse-white);
    color: var(--lse-slate-600);
    cursor: pointer;
    transition: background-color var(--lse-transition),
                border-color var(--lse-transition),
                color var(--lse-transition);
}

.lse-plugin .lse-filter-btn:hover {
    border-color: var(--lse-navy-700);
    color: var(--lse-navy-700);
}

.lse-plugin .lse-filter-btn.is-active {
    background-color: var(--lse-navy-800);
    border-color:     var(--lse-navy-800);
    color:            var(--lse-white);
}

/* Grid */
.lse-catalogo__grid {
    display: grid;
    gap: var(--lse-space-5);
}

.lse-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.lse-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.lse-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.lse-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .lse-grid-cols-3,
    .lse-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: 2 columnas (catálogo denso y escaneable); 1 sola en pantallas muy angostas. */
@media (max-width: 560px) {
    .lse-catalogo__grid { gap: var(--lse-space-4); }

    .lse-grid-cols-2,
    .lse-grid-cols-3,
    .lse-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
    .lse-grid-cols-1,
    .lse-grid-cols-2,
    .lse-grid-cols-3,
    .lse-grid-cols-4 { grid-template-columns: 1fr; }
}

/* Tarjeta de producto — patrón e-commerce (imagen protagonista + acción icono) */
.lse-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Imagen — contenedor relativo que aloja el link de la imagen + el ícono
   flotante. aspect-ratio 4/5 (antes 3/4): cards más chicas — Grupo B. */
.lse-product-card__media-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--lse-radius-lg);
    overflow: hidden;
    background-color: var(--lse-paper);
    box-shadow: var(--lse-shadow-sm);
    transition: box-shadow var(--lse-transition);
}

.lse-product-card:hover .lse-product-card__media-wrap {
    box-shadow: var(--lse-shadow);
}

.lse-product-card__media {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ".lse-plugin " como ancestro (0,2,0): el reset del tema trae
   "img{height:auto;max-width:100%}" (elemento, 0,0,1) — en teoria nuestra
   ".lse-product-card__img" sola (0,1,0) ya le gana, pero el kit de
   Elementor viene repitiendo este mismo patron con selectores mas
   especificos en otros elementos (ver notas de "Botones base"); se sube la
   especificidad aqui tambien para que el "cover" no dependa de eso. */
.lse-plugin .lse-product-card__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform var(--lse-transition-slow);
}

/* Mini zoom en hover — SOLO para cards sin imagen de hover; cuando hay una
   segunda imagen (--has-hover-img), el hover hace crossfade a esa imagen en
   vez de escalar. */
.lse-plugin .lse-product-card:not(.lse-product-card--has-hover-img):hover .lse-product-card__img {
    transform: scale(1.04);
}

/* Segunda imagen (primera de la galería distinta a la base): encima de la
   base, invisible hasta el hover. Absoluta dentro del <a>.lse-product-card
   __media (position:absolute + inset:0), debajo del badge/ícono (z-index 2). */
.lse-plugin .lse-product-card__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--lse-transition-slow);
}

@media (hover: hover) {
    .lse-plugin .lse-product-card--has-hover-img:hover .lse-product-card__img--hover {
        opacity: 1;
    }
}

.lse-product-card__img-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--lse-blue-50) 0%, var(--lse-blue-100) 100%);
}

/* Categoría — eyebrow overlay arriba-izquierda sobre la imagen */
.lse-product-card__badge {
    position: absolute;
    top: var(--lse-space-3);
    left: var(--lse-space-3);
    z-index: 2;
    background: rgba(255, 255, 255, 0.94);
    color: var(--lse-navy-900);
    font-family: var(--lse-f-mono);
    font-size: 10px;
    font-weight: var(--lse-mono-weight);
    letter-spacing: var(--lse-mono-tracking);
    text-transform: uppercase;
    padding: 4px var(--lse-space-2);
    border-radius: 999px;
}

/* Acción de cotizar — ícono flotante esquina inferior derecha de la imagen.
   ".lse-plugin " como ancestro (0,2,0): es un <a>, y el kit de Elementor
   trae ".elementor-kit-9 a{color:#287ABE}" (0,1,1), más específico que
   ".lse-product-card__quote-btn" sola (0,1,0) — el ícono se veía azul de
   Elementor en vez de blanco. Misma técnica que en "Botones base". */
.lse-plugin .lse-product-card__quote-btn {
    position: absolute;
    right: var(--lse-space-3);
    bottom: var(--lse-space-3);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--lse-navy-900);
    color: var(--lse-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--lse-shadow);
    text-decoration: none;
    transition: background-color var(--lse-transition), transform var(--lse-transition), opacity var(--lse-transition);
}

.lse-plugin .lse-product-card__quote-btn:hover,
.lse-plugin .lse-product-card__quote-btn:focus-visible {
    background-color: var(--lse-blue-500);
    color: var(--lse-white);
    transform: scale(1.08);
}

.lse-product-card__quote-icon {
    width: 18px;
    height: 18px;
}

/* El ícono de cotizar es SIEMPRE visible (desktop y mobile por igual): que
   quede claro que la card es interactuable sin depender de pasar el mouse. */

/* Overlay del nombre — SOLO desktop (Grupo B). En mobile se mantiene
   .lse-product-card__info (nombre debajo de la imagen), sin cambios. */
.lse-product-card__overlay {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: var(--lse-space-8) var(--lse-space-3) var(--lse-space-3);
    background: linear-gradient(to top, rgba(9, 25, 54, 0.85) 0%, rgba(9, 25, 54, 0) 100%);
    pointer-events: none;
}

/* ".lse-plugin " como ancestro: es un <a>, y el kit de Elementor trae
   ".elementor-kit-N a{color:#287ABE}" (0,1,1), más específico que
   ".lse-product-card__overlay-name" sola (0,1,0). Misma técnica que en
   ".lse-product-card__quote-btn". */
.lse-plugin .lse-product-card__overlay-name {
    display: block;
    /* El padre tiene pointer-events:none para dejar pasar los clics al link
       de la imagen; el nombre SÍ es clicable (es un <a> real, ver PHP). */
    pointer-events: auto;
    font-family: var(--lse-f-display);
    font-size: var(--lse-text-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--lse-white);
    text-decoration: none;
    /* Deja aire a la derecha para no quedar debajo del ícono de cotizar. */
    padding-right: 48px;
}

.lse-plugin .lse-product-card__overlay-name:hover {
    text-decoration: underline;
}

/* Línea corta de info debajo de la card (tallas/colores/característica) —
   SOLO desktop. Una sola línea, se recorta con ellipsis si es muy larga. */
.lse-product-card__meta-line {
    display: none;
    margin: var(--lse-space-2) var(--lse-space-1) 0;
    font-size: var(--lse-text-xs);
    color: var(--lse-slate-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Info — nombre discreto + acción secundaria (ficha PDF) debajo de la
   imagen. Mobile: layout original, sin cambios ("lo que ya funciona"). */
.lse-product-card__info {
    padding: var(--lse-space-3) var(--lse-space-1) 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lse-product-card__name {
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--lse-navy-800);
    text-decoration: none;
    transition: color var(--lse-transition);
}

.lse-product-card__name:hover {
    color: var(--lse-blue-500);
}

/* Desktop (Grupo B): nombre en el overlay sobre la imagen en vez de debajo,
   más la línea corta de info. Va DESPUÉS de las reglas base de arriba a
   propósito: misma especificidad (0,1,0), así que el orden en la hoja de
   estilo decide — tiene que ganar la última. */
@media (min-width: 769px) {
    .lse-product-card__overlay {
        display: block;
    }

    .lse-product-card__info {
        display: none;
    }

    .lse-product-card__meta-line {
        display: block;
    }
}

/* Paginación del catálogo */
.lse-catalogo__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--lse-space-2);
    margin-top: var(--lse-space-10);
}

/* Sin botones (1 sola página tras filtrar): el <nav> queda vacío pero
   persiste en el DOM (el JS solo reemplaza su innerHTML) — se oculta así
   en vez de removerlo, para no tener que recrearlo si vuelve a haber
   más de una página. */
.lse-catalogo__pagination:empty {
    display: none;
    margin-top: 0;
}

/* ".lse-plugin " como ancestro: son <button> (paginación). Ver nota en
   "Botones base". */
.lse-plugin .lse-page-btn {
    font-family: var(--lse-f-mono);
    font-size: var(--lse-text-sm);
    font-weight: 600;
    line-height: 1;
    min-width: 38px;
    height: 38px;
    padding: 0 var(--lse-space-2);
    border-radius: var(--lse-radius);
    border: 1.5px solid var(--lse-line);
    background: var(--lse-white);
    color: var(--lse-slate-600);
    cursor: pointer;
    transition: background-color var(--lse-transition),
                border-color var(--lse-transition),
                color var(--lse-transition);
}

.lse-plugin .lse-page-btn:hover {
    border-color: var(--lse-navy-700);
    color: var(--lse-navy-700);
}

.lse-plugin .lse-page-btn.is-active {
    background-color: var(--lse-navy-800);
    border-color:     var(--lse-navy-800);
    color:            var(--lse-white);
    cursor: default;
}

/* Estado vacío */
.lse-catalogo__empty {
    color: var(--lse-slate-600);
    font-family: var(--lse-f-body);
    padding: var(--lse-space-12) 0;
    text-align: center;
}

/* =========================================================================
   Bloque de certificaciones compartido (catálogo + ficha)
========================================================================= */

.lse-certs-block {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lse-space-2);
}

.lse-cert-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    background: var(--lse-paper);
    border: 1px solid var(--lse-blue-200);
    border-radius: var(--lse-radius);
    padding: var(--lse-space-2) var(--lse-space-3);
}

.lse-cert-badge__norma {
    color: var(--lse-navy-900);
}

.lse-cert-badge__label {
    color: var(--lse-slate-600);
}

/* =========================================================================
   Wrapper de la single de producto — templates/producto-single.php
   Resuelve el choque con el header del tema (fijo/transparente): padding-top
   generoso y separación del footer. Fondo heredado del tema (sin tarjeta).
========================================================================= */

.lse-product-page {
    max-width: 1200px;
    margin: 0 auto 100px;
    padding: 80px 20px 60px;
}

@media (max-width: 768px) {
    .lse-product-page {
        margin-bottom: 60px;
        padding: 80px 20px 40px;
    }
}

/* =========================================================================
   Ficha individual de producto — templates/producto-ficha.php ([lse_producto])
========================================================================= */

.lse-product-single {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--lse-space-12) var(--lse-space-6);
}

/* Layout dos columnas */
.lse-product-single__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lse-space-12);
    align-items: start;
}

@media (max-width: 768px) {
    .lse-product-single__inner {
        grid-template-columns: 1fr;
        gap: var(--lse-space-8);
    }
}

/* Galería sticky al hacer scroll — solo desktop (mobile queda en flujo normal).
   top generoso para que quede aire visible entre el navbar y la imagen. */
@media (min-width: 769px) {
    .lse-product-single__gallery {
        position: sticky;
        top: 220px;
    }
}

/* Galería */
.lse-gallery__main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--lse-radius-lg);
    overflow: hidden;
    background-color: var(--lse-paper);
    border: 1px solid var(--lse-line);
}

.lse-gallery__main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity var(--lse-transition);
}

/* Zoom lupa sobre la imagen principal — solo dispositivos con mouse. El CSS
   aplica el scale en hover; el punto ampliado (transform-origin) lo mueve el
   JS inline de producto-ficha.php siguiendo el cursor. El overflow:hidden de
   .lse-gallery__main ya recorta la imagen escalada. */
@media (hover: hover) and (pointer: fine) {
    .lse-gallery__main {
        cursor: zoom-in;
    }

    .lse-gallery__main-img {
        transition: opacity var(--lse-transition), transform 0.15s ease-out;
    }

    .lse-gallery__main:hover .lse-gallery__main-img {
        transform: scale(2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lse-gallery__main-img {
        transition: opacity var(--lse-transition);
    }
}

.lse-gallery__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--lse-blue-50) 0%, var(--lse-blue-100) 100%);
}

.lse-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lse-space-2);
    margin-top: var(--lse-space-3);
}

/* ".lse-plugin " como ancestro: es <button>. Ver nota en "Botones base". */
.lse-plugin .lse-gallery__thumb-btn {
    width: 64px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: var(--lse-radius);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: none;
    transition: border-color var(--lse-transition);
}

.lse-plugin .lse-gallery__thumb-btn:hover,
.lse-plugin .lse-gallery__thumb-btn.is-active {
    border-color: var(--lse-navy-700);
}

.lse-gallery__thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -------------------------------------------------------------------------
   Modal del visor de ficha técnica ("Ver ficha técnica")
   Fricción anti-descarga pedida por la cliente: el PDF se ve embebido con
   #toolbar=0 (sin barra de descargar/imprimir en Chrome/Edge). No es
   protección real — ver nota en producto-ficha.php.
------------------------------------------------------------------------- */
.lse-plugin .lse-pdf-modal {
    position: fixed;
    inset: 0;
    /* Por encima de la burbuja del carrito y del botón de WhatsApp (9000). */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--lse-space-4);
    background: rgba(9, 25, 54, 0.8);
}

/* (0,2,1): le gana a la regla base de arriba (0,2,0) — sin esto, el
   display:flex propio pisaría el [hidden] nativo del navegador. */
.lse-plugin .lse-pdf-modal[hidden] {
    display: none;
}

.lse-pdf-modal__dialog {
    position: relative;
    width: min(92vw, 900px);
    height: min(88vh, 1100px);
    background: var(--lse-white);
    border-radius: var(--lse-radius-lg);
    box-shadow: var(--lse-shadow);
    overflow: hidden;
}

.lse-pdf-modal__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Es <button>: misma técnica de especificidad de "Botones base" (el kit de
   Elementor y el reset del tema estilizan button/:hover/:focus). */
.lse-plugin .lse-pdf-modal__close {
    position: absolute;
    top: var(--lse-space-2);
    right: var(--lse-space-2);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--lse-navy-800);
    color: var(--lse-white);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--lse-shadow-sm);
    transition: background-color var(--lse-transition);
}

.lse-plugin.lse-plugin .lse-pdf-modal__close:hover,
.lse-plugin.lse-plugin .lse-pdf-modal__close:focus,
.lse-plugin.lse-plugin .lse-pdf-modal__close:focus-visible,
.lse-plugin.lse-plugin .lse-pdf-modal__close:active {
    background-color: var(--lse-navy-700);
    color: var(--lse-white);
}

@media (max-width: 700px) {
    .lse-plugin .lse-pdf-modal {
        padding: var(--lse-space-2);
    }

    .lse-pdf-modal__dialog {
        width: 100%;
        height: 92vh;
    }
}

/* Contenido del producto */
.lse-product-single__content {
    display: flex;
    flex-direction: column;
    gap: var(--lse-space-5);
}

.lse-product-single__cat {
    display: block;
    color: var(--lse-slate-400);
}

/* ".lse-plugin.lse-plugin " (0,2,1): el kit de Elementor trae
   ".elementor-kit-N h1{font-size:48px;...}" (0,1,1) — mas especifico que
   ".lse-product-single__title" sola (0,1,0). Sin esto, el tamano real
   heredaba el del kit en vez del nuestro (por eso hoy se ve tan grande).
   Grupo C: 2.8-3rem en vez del tamano del kit. */
.lse-plugin.lse-plugin .lse-product-single__title {
    font-size: 2.875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--lse-navy-900);
    margin: 0;
}

@media (max-width: 768px) {
    .lse-plugin.lse-plugin .lse-product-single__title {
        font-size: 2.25rem;
    }
}

/* Descripción corta */
.lse-product-single__desc {
    color: var(--lse-slate-600);
    font-size: var(--lse-text-lg);
    line-height: 1.6;
    margin: 0;
}

/* Acciones */
.lse-product-single__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lse-space-3);
    padding-top: var(--lse-space-2);
    border-top: 1px solid var(--lse-line);
}

/* =========================================================================
   Sección inferior — 3 columnas: Características | Certificaciones |
   Descargar ficha técnica (Grupo C). Antes "Características" y las
   certificaciones vivían arriba, entre el título y el formulario; ahora son
   datos de apoyo, sin protagonismo, debajo de la imagen y del formulario.
========================================================================= */

.lse-product-single__footer {
    margin-top: var(--lse-space-12);
    padding-top: var(--lse-space-8);
    border-top: 1px solid var(--lse-line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lse-space-8);
}

@media (max-width: 768px) {
    .lse-product-single__footer {
        grid-template-columns: 1fr;
        gap: var(--lse-space-6);
    }
}

/* Título de columna — deliberadamente chico (tope pedido: max 2rem; acá va
   bien por debajo, es una etiqueta de columna, no un subtítulo de página).
   ".lse-plugin.lse-plugin " (0,2,1): mismo motivo que ".../title" arriba —
   le gana al "h2{font-size:48px}" del kit de Elementor. */
.lse-plugin.lse-plugin .lse-product-single__footer-col-title {
    font-family: var(--lse-f-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--lse-navy-700);
    margin: 0 0 var(--lse-space-3);
}

.lse-product-single__footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Certificaciones — dato de apoyo, ya no el "héroe": sin fondo navy, solo
   los badges compartidos con el catálogo (paper + borde sutil). */
.lse-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lse-space-2);
}

.lse-features-list li {
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-base);
    color: var(--lse-ink);
    padding-left: var(--lse-space-5);
    position: relative;
}

.lse-features-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background-color: var(--lse-blue-500);
    border-radius: 999px;
}

/* Descripción larga (post_content) */
.lse-product-single__description {
    margin-top: var(--lse-space-12);
    padding-top: var(--lse-space-8);
    border-top: 1px solid var(--lse-line);
}

.lse-product-single__description-inner {
    max-width: 760px;
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-base);
    color: var(--lse-ink);
    line-height: 1.7;
}

/* =========================================================================
   Utilidades
========================================================================= */

.lse-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   Elementos de formulario base (input / select)
========================================================================= */

.lse-input,
.lse-select,
.lse-textarea {
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-base);
    color: var(--lse-ink);
    background: var(--lse-white);
    border: 1.5px solid var(--lse-line);
    border-radius: var(--lse-radius);
    padding: var(--lse-space-3) var(--lse-space-4);
    width: 100%;
    line-height: 1.4;
    transition: border-color var(--lse-transition), box-shadow var(--lse-transition);
    -webkit-appearance: none;
    appearance: none;
}

.lse-input:focus,
.lse-select:focus,
.lse-textarea:focus {
    outline: none;
    border-color: var(--lse-blue-500);
    box-shadow: 0 0 0 3px rgba(47,109,176,0.15);
}

.lse-textarea {
    resize: vertical;
    font-family: inherit;
}

.lse-input--qty {
    width: 72px;
    text-align: center;
    padding: var(--lse-space-2) var(--lse-space-2);
}

.lse-input--error {
    border-color: #c0392b;
}

.lse-input:disabled,
.lse-select:disabled,
.lse-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--lse-paper);
}

.lse-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2346596B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--lse-space-3) center;
    padding-right: var(--lse-space-8);
}

/* Botón variante pequeña */
.lse-plugin .lse-btn--sm {
    font-size: var(--lse-text-xs);
    padding: var(--lse-space-1) var(--lse-space-3);
}

/* =========================================================================
   Campos de formulario estructurados
========================================================================= */

.lse-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--lse-space-2);
}

.lse-form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.lse-form-label {
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-sm);
    font-weight: 600;
    color: var(--lse-navy-800);
    display: flex;
    align-items: center;
    gap: var(--lse-space-1);
}

.lse-form-required {
    color: var(--lse-blue-500);
    font-weight: 700;
}

.lse-form-optional {
    color: var(--lse-slate-400);
    font-weight: 400;
    font-size: var(--lse-text-xs);
}

.lse-form-row {
    display: grid;
    gap: var(--lse-space-5);
}

.lse-form-row--2 { grid-template-columns: 1fr 1fr; }
.lse-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 700px) {
    .lse-form-row--2,
    .lse-form-row--3 { grid-template-columns: 1fr; }
}

@media (min-width: 701px) and (max-width: 900px) {
    .lse-form-row--3 { grid-template-columns: 1fr 1fr; }
}

.lse-form-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lse-space-4);
}

.lse-radio-label {
    display: flex;
    align-items: center;
    gap: var(--lse-space-2);
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-base);
    color: var(--lse-ink);
    cursor: pointer;
}

.lse-radio {
    width: 16px;
    height: 16px;
    accent-color: var(--lse-blue-500);
    cursor: pointer;
}

/* Mensajes de feedback */
.lse-form-messages {
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-sm);
    border-radius: var(--lse-radius);
    padding: 0;
}

.lse-form-messages:not(:empty) {
    padding: var(--lse-space-3) var(--lse-space-4);
}

.lse-form-messages--error {
    background: #fdf2f2;
    color: #c0392b;
    border: 1px solid #f5c6cb;
}

.lse-form-messages--success {
    background: var(--lse-green-50);
    color: var(--lse-green-dark);
    border: 1px solid var(--lse-green);
}

/* =========================================================================
   Selector de variables — [lse_boton_cotizar]
========================================================================= */

/* width:100% explicito: .lse-quote-selector es el unico hijo de
   .lse-product-single__actions (flex row, wrap). Sin ancho explicito, un
   item de flex se dimensiona "shrink-to-fit" en vez de llenar la fila —
   por eso quedaba un margen fantasma a la derecha en mobile. */
.lse-quote-selector {
    display: flex;
    flex-direction: column;
    gap: var(--lse-space-4);
    width: 100%;
}

/* Fila 1 (Talla + Color): 50%/50%, con mas espacio entre ambos selectores
   (se veian muy pegados con el gap chico). La fila de Cantidad + boton
   Cotizar usa su propio ancho — ver .lse-quote-selector__row--submit. */
.lse-quote-selector__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lse-space-8);
}

/* Si solo hay un campo (ej. producto sin tallas), que ocupe el MISMO ancho
   que ocuparia si estuvieran los dos atributos — no la fila completa (se ve
   desproporcionado: un <select> o los swatches estirados de punta a
   punta). Sin ningun override, un solo item en un grid de 2 columnas ya se
   auto-coloca en la primera columna (50%) y no se estira a la segunda —
   por eso alcanza con anular el unico override viejo (que lo hacia
   spanear el 100% con un max-width fijo). En mobile, la fila colapsa a 1
   columna de todas formas, asi que el campo ocupa el ancho completo igual
   que si hubiera dos — mismo comportamiento que con ambos atributos. */

/* Fila de Cantidad + boton "Cotizar": ancho propio (NO hereda el 50/50 de
   la fila de arriba) — Cantidad angosta y fija, boton con un ancho maximo
   razonable en vez de estirarse a lo que quede libre. Esta fila siempre
   tiene los mismos 2 campos, sin importar si el producto tiene talla y/o
   color o ninguno de los dos (esa variacion vive en la fila de arriba, no
   en esta), asi que el ancho del boton queda siempre igual. */
.lse-quote-selector__row--submit {
    grid-template-columns: minmax(100px, 160px) auto;
    align-items: end;
    gap: var(--lse-space-4);
}

.lse-quote-selector__row--submit .lse-quote-selector__submit {
    width: auto;
    min-width: 200px;
    max-width: 260px;
    justify-self: start;
}

@media (max-width: 700px) {
    .lse-quote-selector__row {
        grid-template-columns: 1fr;
    }

    /* Pedido explicito (con captura): a diferencia de Talla+Color, la fila
       de Cantidad + boton "Cotizar" NO colapsa a 1 columna en mobile — se
       mantiene lado a lado, Cantidad angosta + boton llenando el resto. */
    .lse-quote-selector__row--submit {
        grid-template-columns: minmax(72px, 110px) 1fr;
    }

    .lse-quote-selector__row--submit .lse-quote-selector__submit {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
}

/* Swatches de color */
.lse-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lse-space-3);
}

/* ".lse-plugin " como ancestro: es <button>. Ver nota en "Botones base". */
.lse-plugin .lse-color-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lse-space-1);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-xs);
    color: var(--lse-slate-600);
}

/* El swatch es un <button>: el reset.css del tema trae
   "button:hover, button:focus { background-color:#c36; color:#fff }"
   (magenta) — ya se subio la especificidad en otros botones sin necesitar
   !important, pero aca seguia colandose en vivo (confirmado con captura),
   fondo Y texto (el label hereda el color del <button>). Como el pedido es
   "sin hover ni color" (nunca debe cambiar), se fuerza con !important en
   vez de seguir persiguiendo la regla exacta que gana. */
.lse-plugin .lse-color-swatch,
.lse-plugin .lse-color-swatch:hover,
.lse-plugin .lse-color-swatch:focus,
.lse-plugin .lse-color-swatch:focus-visible,
.lse-plugin .lse-color-swatch:active,
.lse-plugin .lse-color-swatch.is-selected {
    background: none !important;
    color: var(--lse-slate-600) !important;
}

.lse-color-swatch__box {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 2px solid var(--lse-line);
    background-color: var(--lse-swatch-color, #ccc);
    transition: border-color var(--lse-transition), box-shadow var(--lse-transition);
}

.lse-color-swatch:hover .lse-color-swatch__box {
    border-color: var(--lse-navy-700);
}

.lse-color-swatch.is-selected .lse-color-swatch__box {
    border-color: var(--lse-navy-900);
    box-shadow: 0 0 0 2px var(--lse-white), 0 0 0 4px var(--lse-navy-900);
}

.lse-color-swatch.is-selected .lse-color-swatch__label {
    font-weight: 700;
    color: var(--lse-navy-900);
}

.lse-color-swatch:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.lse-color-swatch:disabled .lse-color-swatch__box {
    filter: grayscale(60%);
}

.lse-color-swatch:disabled:hover .lse-color-swatch__box {
    border-color: var(--lse-line);
}

/* Checkbox "No encuentro mi talla/color" */
.lse-form-field--checkbox {
    flex-direction: row;
}

.lse-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--lse-space-2);
    font-family: var(--lse-f-body);
    font-size: var(--lse-text-sm);
    color: var(--lse-ink);
    cursor: pointer;
}

.lse-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--lse-blue-500);
    cursor: pointer;
}

/* Tap targets cómodos en mobile: swatches, checkbox y controles del selector */
@media (max-width: 768px) {
    .lse-color-swatches {
        gap: var(--lse-space-4);
    }

    .lse-color-swatch {
        min-width: 44px;
    }

    .lse-color-swatch__box {
        width: 44px;
        height: 44px;
    }

    .lse-checkbox-label {
        min-height: 44px;
    }

    .lse-checkbox {
        width: 20px;
        height: 20px;
    }
}

/* =========================================================================
   Pagina de cotizacion — [lse_pagina_cotizacion] (Grupo D)
   Envuelve el carrito ([lse_carrito_cotizacion]) y el formulario
   ([lse_formulario_cotizacion]) en dos columnas: carrito flexible y STICKY
   a la izquierda, formulario de ancho fijo en flujo normal a la derecha
   (el formulario suele ser mas largo que la lista, asi que es la columna
   que conviene que scrollee). En mobile, una sola columna (carrito arriba,
   formulario abajo, sin sticky).
========================================================================= */

/* Sin padding-top: shortcode insertado dentro de una pagina de Elementor,
   que ya controla su propio espaciado superior (ver nota en
   .lse-catalogo-archive). */
.lse-cotizacion-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--lse-space-6) var(--lse-space-12);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--lse-space-10);
    align-items: start;
}

/* Titulo de pagina — arriba de las dos columnas, ocupa todo el ancho del
   grid. El titulo propio del carrito (dentro de .lse-cotizacion-page__cart)
   se oculta aca para no duplicarlo; su subtitulo queda como encabezado de
   esa columna. ".lse-plugin.lse-plugin " (0,2,1): es un <h1>, mismo motivo
   que ".lse-product-single__title" — le gana al "h1{font-size:48px}" del
   kit de Elementor. */
.lse-plugin.lse-plugin .lse-cotizacion-page__title {
    grid-column: 1 / -1;
    font-size: var(--lse-text-3xl);
    font-weight: 900;
    color: var(--lse-navy-900);
    margin: 0 0 var(--lse-space-2);
}

.lse-cotizacion-page .lse-cart__title {
    display: none;
}

/* Sticky la columna del carrito (no el formulario): position:sticky no
   fuerza alturas por si solo — con pocos productos, la columna es corta y
   sencillamente no llega a "engancharse" en ningun lado, se comporta como
   flujo normal sin verse rara. */
.lse-cotizacion-page__cart {
    position: sticky;
    top: 120px;
}

@media (max-width: 900px) {
    .lse-cotizacion-page {
        grid-template-columns: 1fr;
        padding: 0 var(--lse-space-4) var(--lse-space-8);
    }

    .lse-cotizacion-page__cart {
        position: static;
        top: auto;
    }
}

/* Formulario como panel — solo cuando vive en la columna sticky de la
   pagina de cotizacion; el shortcode [lse_formulario_cotizacion] suelto en
   otro lado no se ve afectado. */
.lse-cotizacion-page__form .lse-quote-form-wrap {
    background: var(--lse-white);
    border: 1px solid var(--lse-line);
    border-radius: var(--lse-radius-lg);
    padding: var(--lse-space-6);
    box-shadow: var(--lse-shadow-sm);
}

/* =========================================================================
   Carrito de cotización — [lse_carrito_cotizacion]
========================================================================= */

.lse-cart {
    font-family: var(--lse-f-body);
}

.lse-cart__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lse-space-5);
    padding: var(--lse-space-10) 0;
}

.lse-cart__empty-text {
    color: var(--lse-slate-600);
    font-size: var(--lse-text-lg);
    margin: 0;
}

.lse-cart__header {
    margin-bottom: var(--lse-space-6);
}

.lse-cart__title {
    font-size: var(--lse-text-2xl);
    font-weight: 800;
    color: var(--lse-navy-900);
    margin: 0 0 var(--lse-space-1);
}

.lse-cart__subtitle {
    color: var(--lse-slate-600);
    margin: 0;
}

/* Encabezado tipo tabla — mismo reparto izquierda/derecha que las filas */
.lse-cart__table-header {
    display: flex;
    justify-content: space-between;
    gap: var(--lse-space-4);
    padding: 0 var(--lse-space-5) var(--lse-space-2);
    font-size: var(--lse-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lse-slate-400);
}

.lse-cart__items {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--lse-line);
    border-radius: var(--lse-radius-lg);
    overflow: hidden;
}

.lse-cart-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lse-space-4);
    padding: var(--lse-space-5);
    background: var(--lse-white);
    border-bottom: 1px solid var(--lse-line);
    transition: background-color var(--lse-transition);
}

.lse-cart-item:last-child { border-bottom: none; }
.lse-cart-item:hover { background: var(--lse-paper); }

/* -------------------------------------------------------------------------
   Izquierda de la fila: imagen + nombre + atributos + detalles
------------------------------------------------------------------------- */

.lse-cart-item__left {
    display: flex;
    gap: var(--lse-space-4);
    flex: 1;
    min-width: 0;
}

.lse-cart-item__thumb {
    flex-shrink: 0;
    display: block;
    width: 64px;
    height: 64px;
    border-radius: var(--lse-radius);
    overflow: hidden;
    background: var(--lse-paper);
    border: 1px solid var(--lse-line);
}

.lse-cart-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lse-cart-item__thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--lse-blue-50) 0%, var(--lse-blue-100) 100%);
}

.lse-cart-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lse-space-1);
}

.lse-cart-item__name {
    font-weight: 600;
    font-size: var(--lse-text-base);
    color: var(--lse-navy-800);
    text-decoration: none;
}

.lse-cart-item__name:hover { color: var(--lse-blue-500); }

.lse-cart-item__attrs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lse-space-1) var(--lse-space-3);
    font-size: var(--lse-text-xs);
    color: var(--lse-slate-600);
}

/* Detalles adicionales — <details>/<summary> nativo, colapsado por
   defecto. El textarea adentro sigue siendo editable (misma
   funcionalidad de siempre). */
.lse-cart-item__details {
    margin-top: var(--lse-space-1);
}

.lse-cart-item__details-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--lse-space-1);
    font-size: var(--lse-text-xs);
    font-weight: 600;
    color: var(--lse-blue-500);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.lse-cart-item__details-toggle::-webkit-details-marker {
    display: none;
}

.lse-cart-item__details-toggle:hover {
    color: var(--lse-navy-700);
}

.lse-cart-item__details-arrow {
    width: 10px;
    height: 7px;
    flex-shrink: 0;
    transition: transform var(--lse-transition);
}

.lse-cart-item__details[open] .lse-cart-item__details-arrow {
    transform: rotate(180deg);
}

.lse-cart-item__details-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lse-space-2);
    margin-top: var(--lse-space-2);
    max-width: 420px;
}

.lse-cart-item__details-body .lse-textarea {
    width: 100%;
}

/* -------------------------------------------------------------------------
   Derecha de la fila: cantidad (con label) + eliminar. Ninguno de los dos
   ocupa todo el ancho — se ajustan a su contenido.
------------------------------------------------------------------------- */

.lse-cart-item__right {
    display: flex;
    align-items: flex-start;
    gap: var(--lse-space-3);
    flex-shrink: 0;
}

.lse-cart-item__qty-field {
    flex-shrink: 0;
}

.lse-cart-item__qty-field .lse-form-label {
    white-space: nowrap;
}

/* ".lse-plugin " como ancestro: es <button>. Ver nota en "Botones base". */
.lse-plugin .lse-cart-item__remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: 1.6rem; /* alinea con el input, no con el label */
    border: none;
    background: none;
    cursor: pointer;
    color: var(--lse-slate-400);
    font-size: 18px;
    line-height: 1;
    border-radius: var(--lse-radius);
    transition: color var(--lse-transition), background-color var(--lse-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lse-cart-item__remove:hover {
    color: #c0392b;
    background: #fdf2f2;
}

@media (max-width: 560px) {
    .lse-cart-item {
        flex-wrap: wrap;
    }

    .lse-cart-item__right {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =========================================================================
   Formulario de cotización — [lse_formulario_cotizacion]
========================================================================= */

.lse-quote-form-wrap {
    font-family: var(--lse-f-body);
}

/* Honeypot: invisible para humanos */
.lse-quote-form__honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.lse-quote-form-header {
    margin-bottom: var(--lse-space-8);
}

/* ".lse-plugin.lse-plugin " (0,2,1): es un <h2>, mismo motivo que
   ".lse-product-single__title" — le gana al "h2{font-size:48px}" del kit
   de Elementor (por eso hoy se ve enorme). Tamano de encabezado de
   columna, no de titulo de pagina — "Lista de cotizacion" es el titulo de
   pagina real (.lse-cotizacion-page__title). */
.lse-plugin.lse-plugin .lse-quote-form-header__title {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--lse-navy-900);
    margin: 0 0 var(--lse-space-2);
}

.lse-quote-form-header__sub {
    color: var(--lse-slate-600);
    font-size: var(--lse-text-lg);
    margin: 0;
}

.lse-quote-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--lse-space-6);
}

.lse-quote-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lse-space-5);
    padding-top: var(--lse-space-4);
    border-top: 1px solid var(--lse-line);
}

/* Ancho completo de la columna del formulario; la nota baja a su propia
   linea (el footer ya es flex-wrap, no hace falta tocar nada mas).
   ".lse-plugin " como ancestro (0,2,0): es un <button type="submit">, y el
   reset.css del tema trae "[type=submit],button{width:auto}" — el
   selector de atributo "[type=submit]" tiene la MISMA especificidad
   (0,1,0) que ".lse-quote-form__submit" sola, empate que se resolvia por
   orden de carga a favor del tema. Se sube un escalon para ganar siempre. */
.lse-plugin .lse-quote-form__submit {
    width: 100%;
}

.lse-quote-form__note {
    color: var(--lse-slate-400);
    font-size: var(--lse-text-sm);
    margin: 0;
}

/* -------------------------------------------------------------------------
   Página de éxito — [lse_cotizacion_exito]
------------------------------------------------------------------------- */

/* Sin padding-top: shortcode insertado dentro de una pagina de Elementor,
   que ya controla su propio espaciado superior (ver nota en
   .lse-catalogo-archive). */
.lse-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--lse-space-6) var(--lse-space-12);
    max-width: 560px;
    margin: 0 auto;
    gap: var(--lse-space-5);
}

.lse-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--lse-space-2);
}

.lse-success__icon svg {
    display: block;
}

.lse-success__title {
    font-family: var(--lse-f-display);
    font-size: var(--lse-text-3xl);
    font-weight: 800;
    color: var(--lse-navy-900);
    margin: 0;
    line-height: 1.15;
}

.lse-success__folio {
    display: inline-block;
    font-family: var(--lse-f-mono);
    font-size: var(--lse-text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lse-secondary);
    background: var(--lse-paper);
    border: 1px solid var(--lse-line);
    padding: var(--lse-space-1) var(--lse-space-3);
    border-radius: var(--lse-radius-full);
    margin: 0;
}

.lse-success__message {
    color: var(--lse-slate-600);
    font-size: var(--lse-text-base);
    line-height: 1.6;
    max-width: 44ch;
    margin: 0;
}

.lse-success__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--lse-space-3);
    margin-top: var(--lse-space-3);
}

@media (max-width: 480px) {
    .lse-success {
        padding: 0 var(--lse-space-4) var(--lse-space-8);
    }
    .lse-success__title {
        font-size: var(--lse-text-2xl);
    }
    .lse-success__actions .lse-btn {
        width: 100%;
        justify-content: center;
    }
}