/* ==========================================================================
   GALERÍA MODULAR DE CLIENTES - ESTILOS DEFINITIVOS
   ==========================================================================

   COLORES: esta hoja usa variables CSS definidas en PF Studio > Ajustes.
   El bloque "html" de abajo es solo un respaldo por si el plugin pf-studio
   estuviera desactivado: pf-studio publica los colores con ":root" (mayor
   especificidad que "html"), así que cuando está activo, SIEMPRE gana lo
   configurado en el panel. Para cambiar colores, usa el panel, no este
   archivo.
   ========================================================================== */

html {
    --pf-color-fondo: #111111;
    --pf-color-superficie: #181818;
    --pf-color-texto: #ffffff;
    --pf-color-texto-suave: #aaaaaa;
    --pf-color-acento: #4cd964;
    --pf-color-acento-2: #00ca23;
    --pf-color-error: #ff4757;
    --pf-color-boton: #ffffff;
    --pf-color-boton-texto: #0b0b0b;
}

/* 1. CONTENEDOR SUPERIOR Y BANNER PROMOCIONAL */
.galeria-banners-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin: 10px auto 20px auto !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.galeria-info-header {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--pf-color-superficie) !important;
    color: var(--pf-color-texto-suave) !important;
    padding: 14px 22px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    width: fit-content !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.galeria-info-header strong {
    color: var(--pf-color-texto) !important;
}

.galeria-promo-banner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #366a00 !important;
    color: var(--pf-color-texto-suave) !important;
    padding: 8px 22px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    width: fit-content !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.galeria-promo-banner strong,
#galeria-promo-count {
    color: var(--pf-color-acento-2) !important;
}


/* 2. GRID MASONRY DE FOTOGRAFÍAS */
.galeria-modular-grid {
    display: block !important;
    column-count: 3 !important;
    column-gap: 16px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

@media (max-width: 640px) {
    .galeria-modular-grid {
        column-count: 1 !important;
    }
}

.galeria-modular-item {
    background: var(--pf-color-superficie) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: inline-block !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    break-inside: avoid !important;
    box-sizing: border-box !important;
}

.galeria-modular-item.galeria-filtered-out {
    display: none !important;
}

.galeria-item-header {
    padding: 10px 14px 14px 14px !important;
    text-align: center !important;
}

.galeria-file-name-top {
    color: var(--pf-color-texto-suave) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.galeria-modular-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    cursor: pointer !important;
    object-fit: cover !important;
}

.galeria-item-footer {
    padding: 10px 14px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    background: var(--pf-color-superficie) !important;
}

.galeria-item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    justify-content: flex-end !important;
}

.galeria-selected-prod-tag {
    background: #2a2a2a !important;
    color: var(--pf-color-acento-2) !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    margin-right: auto !important;
    font-weight: 600 !important;
}

.galeria-action-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

.galeria-action-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #c9c9c9 !important;
    stroke-width: 2 !important;
    fill: none !important;
}

/* CORAZÓN ROJO */
.galeria-btn-heart.active svg {
    stroke: var(--pf-color-error) !important;
    fill: var(--pf-color-error) !important;
}

/* CARRITO VERDE */
.galeria-btn-cart.active svg {
    stroke: var(--pf-color-acento-2) !important;
}


/* 3. BARRA FLOTANTE INFERIOR
   Ancho FIJO (no depende de cuántos botones estén visibles): la barra es
   una columna vertical con los botones utilitarios arriba (pegados unos a
   otros y de lado a lado, sin espacios) y la fila de contadores
   (favoritas / carrito), separada de los botones, abajo. Al mostrar/
   ocultar botones solo cambia la ALTURA de la barra, de forma suave,
   nunca el ancho. */
.galeria-cart-bar {
    position: fixed !important;
    bottom: 100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #1f1f1f !important;
    border-radius: 24px !important;
    padding: 0 !important; /* Sin padding: los botones van de borde a borde */
    overflow: hidden !important; /* Recorta las esquinas de los botones al radio de la barra */
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.8) !important;
    z-index: 999999 !important;
    width: 300px !important; /* Ancho fijo: nunca cambia al aparecer/ocultar botones */
    max-width: calc(100% - 30px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.galeria-bar-main-row {
    display: flex !important;
    flex-direction: column !important; /* Botones arriba, contadores abajo */
    width: 100% !important;
    gap: 0 !important; /* La separación entre botones y contadores la da el padding de cada bloque */
}

/* Contenedor de los botones utilitarios (ENVIAR FAVORITAS, AÑADIR FAVORITAS
   DIGITAL, BORRAR FAVORITOS, BORRAR SELECCIÓN): pegados uno a otro, sin
   espacios entre ellos ni a los lados, ocupando todo el ancho de la barra. */
.galeria-bar-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
}

.galeria-cart-counters {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important; /* Usar rem para mejor escalabilidad */
    width: 100% !important; /* Ocupa el ancho fijo de la barra */
    box-sizing: border-box !important;
    padding: 12px 16px !important; /* Separados de los botones y de los bordes de la barra */
}

.galeria-counter-item {
    flex-grow: 1 !important; /* Permite que cada botón se expanda para ocupar todo el espacio */
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
}

.galeria-counter-item svg {
    width: 18px !important;
    height: 18px !important;
    stroke: var(--pf-color-texto-suave) !important;
    fill: none !important;
    stroke-width: 2 !important;
    transition: all 0.3s ease !important;
}

.galeria-counter-item strong {
    color: var(--pf-color-texto) !important;
    font-size: 14px !important;
}

.galeria-counter-fav.active-filter {
    background: #333333 !important;
}
.galeria-counter-fav.active-filter svg {
    stroke: var(--pf-color-error) !important;
    fill: var(--pf-color-error) !important;
}
.galeria-counter-fav.active-filter strong {
    color: var(--pf-color-error) !important;
}

.galeria-counter-cart.active-filter {
    background: rgba(76, 217, 100, 0.2) !important;
}
.galeria-counter-cart.active-filter svg {
    stroke: var(--pf-color-acento-2) !important;
}
.galeria-counter-cart.active-filter strong {
    color: var(--pf-color-acento-2) !important;
}

.galeria-bar-wa-btn {
    background: var(--pf-color-superficie) !important;
    color: var(--pf-color-texto) !important;
    border: none !important;
    width: 100% !important; /* Llena el ancho fijo de la barra, de lado a lado */
    box-sizing: border-box !important;
    padding: 0 14px !important;
    border-radius: 0 !important; /* Sin radio propio: los botones van pegados; el radio de las esquinas lo da el overflow:hidden de la barra */
    font-weight: bold !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important; /* si algún texto no cabe, se recorta con "…" en vez de partirse a la mitad */
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease !important;
}

/* Botón visible: solo crece en ALTO (nunca en ancho, que ya es fijo al
   100% de la barra), con una transición suave. Sin gap ni margen: queda
   pegado al botón anterior/siguiente. */
.galeria-bar-wa-btn.visible {
    max-height: 44px !important;
    opacity: 1 !important;
    padding: 11px 14px !important;
}

/* Botones utilitarios de la barra (AÑADIR FAVORITAS X, BORRAR FAVORITOS,
   BORRAR SELECCIÓN): siempre gris, nunca el verde de la acción principal. */
.galeria-bar-wa-btn--gris {
    background: #333333 !important;
    color: #cccccc !important;
}
@media (hover: hover) {
    .galeria-bar-wa-btn--gris:hover {
        background: #3f3f3f !important;
        color: #ffffff !important;
    }
}


/* 4. VENTANAS MODALES Generales */
.galeria-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #0b0b0b !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

/* Modal 1: Seleccionar Producto */
.galeria-product-modal {
    background: var(--pf-color-superficie) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    max-width: 380px !important;
    width: 100% !important;
    position: relative !important;
    color: var(--pf-color-texto) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
}

.galeria-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    background: transparent !important;
    border: none !important;
    color: #888888 !important;
    font-size: 26px !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.galeria-product-modal-header h3 {
    margin: 0 0 15px 0 !important;
    font-size: 16px !important;
    text-align: center !important;
    color: var(--pf-color-texto) !important;
    letter-spacing: 1px !important;
}

/* NOTA: los estilos de .galeria-prod-row, .galeria-prod-name, .galeria-qty-controls,
   .galeria-qty-btn, .galeria-qty-val y .galeria-prod-img-preview del modal
   "Seleccionar producto" viven ahora en el <style> embebido dentro de
   galeria-modular.php (junto al resto de reglas específicas de ese modal),
   para que no haya dos definiciones compitiendo entre sí con !important. */

.galeria-btn-confirm-modal {
    background: var(--pf-color-boton) !important;
    color: var(--pf-color-boton-texto) !important;
    text-align: center !important;
    padding: 12px !important;
    border-radius: 12px !important;
    margin-top: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    font-size: 13px !important;
}


/* Modal 2: Resumen Carrito Checkout (Estilo Muestra.png) */
.galeria-cart-checkout-modal {
    background: #18181a !important;
    border-radius: 24px !important;
    padding: 24px !important;
    max-width: 440px !important;
    width: 100% !important;
    position: relative !important;
    color: var(--pf-color-texto) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.9) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.galeria-order-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    color: var(--pf-color-texto) !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
}

/* Sub-contenedor oscuro para items */
.galeria-order-items-box {
    background: #0d0d0f !important;
    border-radius: 16px !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
}

.galeria-order-item-row {
    background: #18181c !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.galeria-order-item-thumb {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

.galeria-order-item-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.galeria-order-item-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--pf-color-texto) !important;
}

.galeria-order-item-desc {
    font-size: 11px !important;
    color: #88888e !important;
}

.galeria-order-item-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.galeria-order-item-price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--pf-color-texto) !important;
}

.galeria-order-item-remove {
    background: transparent !important;
    border: none !important;
    color: #88888e !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 2px !important;
    line-height: 1 !important;
}

/* Opciones Forma Pedido y Pago */
.galeria-order-options-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.galeria-option-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.galeria-option-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #b3b3b3 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.galeria-option-buttons {
    background: #0d0d0f !important;
    border-radius: 14px !important;
    padding: 6px !important;
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.galeria-opt-btn {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: #88888e !important;
    padding: 8px 4px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

.galeria-opt-btn.active {
    background: #444444!important;
    color: var(--pf-color-texto) !important;
}

.galeria-opt-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
}

/* Banner Promo (Colocado encima del cupón) */
.galeria-modal-promo-banner {
    background: #0d0d0f !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--pf-color-texto) !important;
    margin-bottom: 12px !important;
}

/* Cupón Box */
.galeria-coupon-box {
    background: #0d0d0f !important;
    border-radius: 12px !important;
    padding: 6px 6px 6px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.galeria-coupon-box input {
    background: transparent !important;
    border: none !important;
    color: var(--pf-color-texto) !important;
    font-size: 12px !important;
    outline: none !important;
    width: 100% !important;
    font-weight: 600 !important;
}

.galeria-coupon-box input::placeholder {
    color: #55555e !important;
}

.galeria-coupon-box button {
    background: #28282c !important;
    color: var(--pf-color-texto) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
}

/* TOTAL Space (Gris Oscuro) */
.galeria-total-box {
    background: #545454 !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

.galeria-total-box span {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--pf-color-texto) !important;
    letter-spacing: 1px !important;
}

.galeria-total-box strong {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--pf-color-texto) !important;
}

/* Submit Button */
.galeria-btn-submit-order {
    background: #2c2c2c !important;
    color: var(--pf-color-texto) !important;
    border: none !important;
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s ease !important;
}

.galeria-btn-submit-order:hover {
    background: #383838 !important;
}