/* ==========================================================================
   CDCAM SISTEMA — publico.css
   Estilos del frontend público. Por ahora cubre el Panel del Comerciante
   completo (public/panel-comerciante/*.php). Las páginas de catálogo
   público (shortcode-bodegas, shortcode-locales, shortcode-productos,
   shortcode-vitrina-perfil) se agregan aquí mismo cuando se revisen esos
   archivos — buscar el bloque "CATÁLOGO PÚBLICO (pendiente)" al final.

   Si ya existe una paleta de colores definida en
   includes/funciones-generales.php, reemplazar los valores de este :root
   por los códigos reales — el resto de la hoja solo usa estas variables,
   nunca colores sueltos, así que el cambio se propaga solo.
========================================================================== */

:root {
    /* Alineado con el índice 0 (verde) de cdcam_paleta_colores() en
       includes/funciones-generales.php — mismo verde que va a usar el PHP
       para la primera bodega/categoría, así el botón "Guardar" y las
       etiquetas verdes se sienten del mismo sistema visual. */
    --cdcam-color-primario:        #3B6D11; /* texto_suave del verde de la paleta */
    --cdcam-color-primario-oscuro: #27500A; /* badge_texto del verde de la paleta */
    --cdcam-color-primario-fondo:  #EAF3DE; /* bg del verde de la paleta */

    --cdcam-color-secundario:      #f5f5f5; /* fondo de botones secundarios */
    --cdcam-color-texto:           #212121;
    --cdcam-color-texto-suave:     #6b6b6b;
    --cdcam-color-borde:           #e0e0e0;
    --cdcam-color-fondo:           #ffffff;
    --cdcam-color-fondo-panel:     #fafafa;

    --cdcam-color-exito:           #3B6D11;
    --cdcam-color-exito-fondo:     #EAF3DE;
    --cdcam-color-error:           #993C1D; /* texto_suave del coral de la paleta, para quedar en familia */
    --cdcam-color-error-fondo:     #FAECE7;
    --cdcam-color-alerta:          #854F0B; /* texto_suave del ámbar de la paleta */
    --cdcam-color-alerta-fondo:    #FAEEDA;

    --cdcam-color-disponible:      #3B6D11;
    --cdcam-color-disponible-fondo:#EAF3DE;
    --cdcam-color-agotado:         #5F5E5A; /* texto_suave del gris de la paleta */
    --cdcam-color-agotado-fondo:   #F1EFE8;

    --cdcam-radio:      8px;
    --cdcam-radio-chico: 4px;
    --cdcam-sombra:     0 1px 3px rgba(0, 0, 0, 0.08);

    /* Tarjetas de producto: crema cálida (misma familia que el login y el
       perfil de vitrina) y sombras suaves con tinte cálido. */
    --cdcam-color-fondo-crema: #FFFCF5;
    --cdcam-color-borde-crema: #EDE3CC;
    --cdcam-radio-tarjeta: 16px;
    --cdcam-sombra-suave: 0 1px 2px rgba(59, 40, 10, 0.05), 0 5px 14px rgba(59, 40, 10, 0.07);
    --cdcam-sombra-media: 0 8px 20px rgba(59, 40, 10, 0.14);
}

/* ==========================================================================
   BASE / RESET LIGERO
   Solo lo mínimo para que los formularios y tablas se vean consistentes
   sin pelear con el tema activo de WordPress.
========================================================================== */

.cdcam-panel-comerciante,
.cdcam-panel-acceso {
    color: var(--cdcam-color-texto);
    font-size: 15px;
    line-height: 1.5;
}

.cdcam-panel-comerciante *,
.cdcam-panel-acceso * {
    box-sizing: border-box;
}

/* ==========================================================================
   AVISOS (éxito, error, pendiente, rechazado, stock bajo...)
   Un solo patrón visual reutilizado en todas las pestañas.
========================================================================== */

.cdcam-aviso {
    padding: 12px 16px;
    border-radius: var(--cdcam-radio-chico);
    margin: 0 0 16px;
    background: var(--cdcam-color-fondo-panel);
    border: 1px solid var(--cdcam-color-borde);
}

.cdcam-aviso p,
.cdcam-aviso ul {
    margin: 0;
}

.cdcam-aviso ul {
    padding-left: 20px;
    margin-top: 6px;
}

.cdcam-aviso-exito {
    background: var(--cdcam-color-exito-fondo);
    border-color: var(--cdcam-color-exito);
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-aviso-error {
    background: var(--cdcam-color-error-fondo);
    border-color: var(--cdcam-color-error);
    color: var(--cdcam-color-error);
}

.cdcam-aviso-pendiente,
.cdcam-aviso-stock-bajo {
    background: var(--cdcam-color-alerta-fondo);
    border-color: var(--cdcam-color-alerta);
    color: var(--cdcam-color-alerta);
}

.cdcam-aviso-rechazado {
    background: var(--cdcam-color-error-fondo);
    border-color: var(--cdcam-color-error);
    color: var(--cdcam-color-error);
}

.cdcam-aviso-sin-vitrina {
    background: var(--cdcam-color-fondo-panel);
    border-color: var(--cdcam-color-borde);
    color: var(--cdcam-color-texto-suave);
}

/* Estado vacío ("no hay nada"): píldora suave, centrada y minimalista,
   con un icono de bandeja vacía en el verde del plugin. */
.cdcam-aviso-vacio {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 640px;
    margin: 0 auto 16px;
    text-align: center;
    background: var(--cdcam-color-primario-fondo);
    border: 1px solid var(--cdcam-color-borde);
    border-radius: 30px;
    padding: 10px 22px;
    color: var(--cdcam-color-texto-suave);
}

.cdcam-aviso-vacio .ti {
    font-size: 18px;
    color: var(--cdcam-color-primario);
}

/* Ubicación de la vitrina, arriba del formulario en "Mi Vitrina" */
.cdcam-info-ubicacion {
    background: var(--cdcam-color-fondo-panel);
    border: 1px solid var(--cdcam-color-borde);
    border-radius: var(--cdcam-radio-chico);
    padding: 10px 14px;
    color: var(--cdcam-color-texto-suave);
    font-size: 14px;
}

.cdcam-info-ubicacion code {
    background: var(--cdcam-color-secundario);
    padding: 1px 6px;
    border-radius: 3px;
}

/* ==========================================================================
   ACCESO (formulario de login cuando no está logueado)
========================================================================== */

.cdcam-panel-acceso {
    max-width: 380px;
    margin: 0 auto;
    text-align: center;
}

.cdcam-panel-acceso form.login p {
    text-align: left;
}

.cdcam-panel-acceso input[type="text"],
.cdcam-panel-acceso input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cdcam-color-borde);
    border-radius: var(--cdcam-radio-chico);
}

.cdcam-panel-acceso .login-submit input {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    border: 1px solid rgba(39, 80, 10, 0.25);
    padding: 10px 18px;
    border-radius: var(--cdcam-radio-chico);
    cursor: pointer;
    font-weight: 600;
}

.cdcam-panel-acceso .login-submit input:hover {
    background: var(--cdcam-color-primario-fondo);
    box-shadow: inset 0 0 0 100vmax rgba(39, 80, 10, 0.1);
}

/* ==========================================================================
   ENCABEZADO DEL PANEL
========================================================================== */

.cdcam-panel-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--cdcam-color-fondo-panel);
    border: 1px solid var(--cdcam-color-borde);
    border-radius: var(--cdcam-radio);
    margin-bottom: 16px;
}

.cdcam-panel-saludo {
    display: block;
    font-size: 13px;
    color: var(--cdcam-color-texto-suave);
}

.cdcam-panel-vitrina-nombre {
    display: block;
    font-size: 19px;
    font-weight: 700;
}

.cdcam-etiqueta-inactivo {
    font-size: 13px;
    color: var(--cdcam-color-alerta);
    background: var(--cdcam-color-alerta-fondo);
    padding: 6px 12px;
    border-radius: var(--cdcam-radio-chico);
}

.cdcam-panel-encabezado-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cdcam-boton-cerrar-sesion {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--cdcam-radio-chico);
    background: transparent;
    border: 1px solid var(--cdcam-color-borde);
    color: var(--cdcam-color-texto-suave);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.cdcam-panel-encabezado-acciones a.cdcam-boton-cerrar-sesion {
    text-decoration: none !important;
}


.cdcam-boton-cerrar-sesion:hover {
    background: var(--cdcam-color-error-fondo, #FBE9E7);
    color: var(--cdcam-color-error);
}

/* ==========================================================================
   NAVEGACIÓN DE PESTAÑAS
========================================================================== */

.cdcam-panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.cdcam-panel-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    text-decoration: none !important;
    background: transparent;
    color: var(--cdcam-color-texto-suave);
    font-weight: 600;
    font-size: 14px;
    border-radius: 999px;
    border: 1px solid var(--cdcam-color-borde);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cdcam-panel-tab:hover {
    background: var(--cdcam-color-fondo-panel);
    color: var(--cdcam-color-primario);
}

.cdcam-panel-tab.cdcam-tab-activa {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    border-color: var(--cdcam-color-primario-fondo);
}

.cdcam-panel-contenido {
    padding-top: 4px;
}

/* ==========================================================================
   FORMULARIOS (compartido por las 4 pestañas)
========================================================================== */

.cdcam-formulario {
    max-width: 560px;
}

.cdcam-formulario p {
    margin-bottom: 16px;
}

.cdcam-formulario label {
    cursor: pointer;
}

.cdcam-formulario input[type="text"],
.cdcam-formulario input[type="password"],
.cdcam-formulario input[type="number"],
.cdcam-formulario input[type="date"],
.cdcam-formulario input[type="file"],
.cdcam-formulario select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--cdcam-color-borde);
    border-radius: var(--cdcam-radio-chico);
    font-size: 14px;
    background: var(--cdcam-color-fondo);
}

.cdcam-formulario input[type="text"]:focus,
.cdcam-formulario input[type="password"]:focus,
.cdcam-formulario input[type="number"]:focus,
.cdcam-formulario input[type="date"]:focus,
.cdcam-formulario select:focus {
    outline: none;
    border-color: var(--cdcam-color-primario);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.cdcam-formulario .description {
    display: inline-block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--cdcam-color-texto-suave);
}

.cdcam-form-titulo-seccion {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cdcam-color-texto-suave);
    margin: 24px 0 10px;
}

.cdcam-formulario .cdcam-form-titulo-seccion:first-child {
    margin-top: 0;
}

.cdcam-form-fila-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.cdcam-chips-que-compra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

/* Selector de categorías (elegir varias): mismo patrón de chips con
   casillas, en un contenedor flexible. Reutiliza .cdcam-chip / -texto. */
.cdcam-categorias-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.cdcam-chip {
    position: relative;
    cursor: pointer;
}

.cdcam-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cdcam-chip-texto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--cdcam-color-borde);
    background: var(--cdcam-color-fondo);
    color: var(--cdcam-color-texto-suave);
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cdcam-chip-texto .ti-check {
    display: none;
    font-size: 15px;
}

.cdcam-chip input[type="checkbox"]:checked + .cdcam-chip-texto {
    background: var(--cdcam-color-primario-fondo);
    border-color: var(--cdcam-color-primario);
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-chip input[type="checkbox"]:checked + .cdcam-chip-texto .ti-check {
    display: inline-block;
}

.cdcam-chip input[type="checkbox"]:focus-visible + .cdcam-chip-texto {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.cdcam-dropzone-foto {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px dashed var(--cdcam-color-borde);
    border-radius: var(--cdcam-radio);
    background: var(--cdcam-color-fondo-panel);
    position: relative;
    margin-bottom: 16px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cdcam-dropzone-foto:hover {
    border-color: var(--cdcam-color-primario);
    background: var(--cdcam-color-primario-fondo);
}

.cdcam-dropzone-foto-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cdcam-dropzone-foto-icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.cdcam-dropzone-foto-texto {
    font-size: 13px;
    color: var(--cdcam-color-texto-suave);
}

.cdcam-dropzone-foto-enlace {
    color: var(--cdcam-color-primario);
    font-weight: 600;
    cursor: pointer;
}

.cdcam-dropzone-foto-texto .description {
    display: block;
    margin-top: 2px;
}

.cdcam-dropzone-foto-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cdcam-switch-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--cdcam-color-fondo-panel);
    border-radius: var(--cdcam-radio);
    cursor: pointer;
    margin-bottom: 20px;
}

.cdcam-switch-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}

.cdcam-switch-subtexto {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--cdcam-color-texto-suave);
}

.cdcam-switch {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
}

.cdcam-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cdcam-switch-riel {
    position: absolute;
    inset: 0;
    background: var(--cdcam-color-borde);
    border-radius: 999px;
    transition: background 0.15s ease;
}

.cdcam-switch-riel::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.cdcam-switch input[type="checkbox"]:checked + .cdcam-switch-riel {
    background: var(--cdcam-color-primario);
}

.cdcam-switch input[type="checkbox"]:checked + .cdcam-switch-riel::before {
    transform: translateX(16px);
}

.cdcam-switch input[type="checkbox"]:focus-visible + .cdcam-switch-riel {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.cdcam-form-pie {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--cdcam-color-borde);
}

.cdcam-boton-guardar-destacado {
    width: 100%;
    text-align: center;
    padding: 13px 18px;
    font-size: 15px;
}

@media (min-width: 601px) {
    .cdcam-boton-guardar-destacado {
        width: auto;
        min-width: 220px;
    }
}


.cdcam-formulario .cdcam-campo-bloqueado {
    background: var(--cdcam-color-fondo-panel);
    color: var(--cdcam-color-texto-suave);
    cursor: not-allowed;
    border-color: var(--cdcam-color-borde);
}

.cdcam-aviso-info {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    border-radius: var(--cdcam-radio);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13.5px;
}

.cdcam-aviso-info p {
    margin: 0;
}

@media (max-width: 600px) {
    .cdcam-form-fila-2 {
        grid-template-columns: 1fr;
    }
}

.cdcam-formulario input[type="radio"],
.cdcam-formulario input[type="checkbox"] {
    margin-right: 6px;
}

/* Checklist de productos dentro de una promoción */
.cdcam-lista-checkboxes {
    display: block;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--cdcam-color-borde);
    border-radius: var(--cdcam-radio-chico);
    padding: 10px 14px;
    background: var(--cdcam-color-fondo-panel);
}

.cdcam-lista-checkboxes label {
    display: block;
    padding: 4px 0;
    font-weight: 400;
}

/* ==========================================================================
   BOTONES
========================================================================== */

.cdcam-boton-primario,
.cdcam-boton-secundario,
.cdcam-boton-eliminar {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--cdcam-radio-chico);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cdcam-boton-primario {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    border-color: rgba(39, 80, 10, 0.22);
}

.cdcam-boton-primario:hover {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    box-shadow: inset 0 0 0 100vmax rgba(39, 80, 10, 0.1);
}

.cdcam-boton-secundario {
    background: var(--cdcam-color-fondo);
    color: var(--cdcam-color-texto);
    border-color: var(--cdcam-color-borde);
    padding: 6px 14px;
    font-size: 13px;
}

.cdcam-boton-secundario:hover {
    border-color: var(--cdcam-color-primario);
    color: var(--cdcam-color-primario);
}

.cdcam-boton-eliminar {
    background: var(--cdcam-color-error-fondo);
    color: var(--cdcam-color-error);
    border-color: rgba(153, 60, 29, 0.22);
    padding: 6px 14px;
    font-size: 13px;
    margin-left: 6px;
}

.cdcam-boton-eliminar:hover {
    background: var(--cdcam-color-error-fondo);
    color: var(--cdcam-color-error);
    box-shadow: inset 0 0 0 100vmax rgba(153, 60, 29, 0.1);
}

.cdcam-panel-toolbar {
    margin-bottom: 18px;
}

/* ==========================================================================
   TABLAS (productos, movimientos de inventario, promociones)
========================================================================== */

.cdcam-tabla-productos,
.cdcam-tabla-movimientos,
.cdcam-tabla-promociones {
    width: 100%;
    border-collapse: collapse;
    background: var(--cdcam-color-fondo);
    border: 1px solid var(--cdcam-color-borde);
    border-radius: var(--cdcam-radio);
    overflow: hidden;
    font-size: 14px;
}

.cdcam-tabla-productos th,
.cdcam-tabla-movimientos th,
.cdcam-tabla-promociones th {
    text-align: left;
    background: var(--cdcam-color-fondo-panel);
    padding: 10px 14px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cdcam-color-texto-suave);
    border-bottom: 1px solid var(--cdcam-color-borde);
}

.cdcam-tabla-productos td,
.cdcam-tabla-movimientos td,
.cdcam-tabla-promociones td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cdcam-color-borde);
    vertical-align: middle;
}

.cdcam-tabla-productos tr:last-child td,
.cdcam-tabla-movimientos tr:last-child td,
.cdcam-tabla-promociones tr:last-child td {
    border-bottom: none;
}

.cdcam-tabla-productos tr:hover td,
.cdcam-tabla-movimientos tr:hover td,
.cdcam-tabla-promociones tr:hover td {
    background: var(--cdcam-color-fondo-panel);
}

/* Scroll horizontal en pantallas angostas, en vez de romper el layout */
.cdcam-tab-mis-productos,
.cdcam-tab-mi-inventario,
.cdcam-tab-mis-promociones {
    overflow-x: auto;
}

/* ==========================================================================
   MINIATURAS Y ETIQUETAS DE ESTADO
========================================================================== */

.cdcam-miniatura-producto {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--cdcam-radio-chico);
    border: 1px solid var(--cdcam-color-borde);
    display: block;
}

.cdcam-sin-foto {
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 10px;
    color: var(--cdcam-color-texto-suave);
    background: var(--cdcam-color-secundario);
    border-radius: var(--cdcam-radio-chico);
}

.cdcam-etiqueta-disponible,
.cdcam-etiqueta-agotado,
.cdcam-etiqueta-entrada,
.cdcam-etiqueta-salida {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cdcam-etiqueta-disponible {
    background: var(--cdcam-color-disponible-fondo);
    color: var(--cdcam-color-disponible);
}

.cdcam-etiqueta-agotado {
    background: var(--cdcam-color-agotado-fondo);
    color: var(--cdcam-color-agotado);
}

.cdcam-etiqueta-entrada {
    background: var(--cdcam-color-disponible-fondo);
    color: var(--cdcam-color-disponible);
}

.cdcam-etiqueta-salida {
    background: var(--cdcam-color-error-fondo);
    color: var(--cdcam-color-error);
}

/* ==========================================================================
   RESPONSIVE — el panel se usa mucho desde el celular en un marketplace
   de comerciantes, así que el encabezado y las pestañas se acomodan solas.
========================================================================== */

@media (max-width: 600px) {
    .cdcam-panel-encabezado {
        flex-direction: column;
        align-items: flex-start;
    }

    .cdcam-panel-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .cdcam-panel-tab {
        white-space: nowrap;
    }

    .cdcam-formulario {
        max-width: 100%;
    }

    /* El panel no depende del ancho que el tema le dé al contenido de la
       página: en celular se extiende a todo el ancho del viewport. Aplica a
       los dos paneles (comerciante y comprador). Fuera de Elementor; dentro
       de Elementor el panel usa el ancho del contenedor. */
    body:not(.elementor-page) .cdcam-panel-comerciante,
    body:not(.elementor-page) .cdcam-panel-comprador {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        padding: 0 16px;
    }

    /* Las tablas del panel conservan sus columnas en el celular: se desplazan
       hacia los lados (scroll horizontal) en vez de apilarse en vertical. */
    .cdcam-panel-comerciante .cdcam-tab-mis-productos,
    .cdcam-panel-comerciante .cdcam-tab-mi-inventario,
    .cdcam-panel-comerciante .cdcam-tab-mis-promociones {
        -webkit-overflow-scrolling: touch;
    }

    .cdcam-panel-comerciante .cdcam-tabla-productos,
    .cdcam-panel-comerciante .cdcam-tabla-movimientos,
    .cdcam-panel-comerciante .cdcam-tabla-promociones {
        display: table !important; /* si el tema las pone en bloque */
        width: max-content;
        min-width: 100%;
    }

    .cdcam-panel-comerciante .cdcam-tabla-productos thead,
    .cdcam-panel-comerciante .cdcam-tabla-movimientos thead,
    .cdcam-panel-comerciante .cdcam-tabla-promociones thead {
        display: table-header-group;
    }

    .cdcam-panel-comerciante .cdcam-tabla-productos tr,
    .cdcam-panel-comerciante .cdcam-tabla-movimientos tr,
    .cdcam-panel-comerciante .cdcam-tabla-promociones tr {
        display: table-row !important;
    }

    .cdcam-panel-comerciante .cdcam-tabla-productos td,
    .cdcam-panel-comerciante .cdcam-tabla-movimientos td,
    .cdcam-panel-comerciante .cdcam-tabla-promociones td,
    .cdcam-panel-comerciante .cdcam-tabla-productos th,
    .cdcam-panel-comerciante .cdcam-tabla-movimientos th,
    .cdcam-panel-comerciante .cdcam-tabla-promociones th {
        display: table-cell !important;
        white-space: nowrap;
    }
}

/* ==========================================================================
   BADGE DE COLOR DINÁMICO (bodega / categoría)
   La forma vive aquí en CSS; el color lo pone PHP con style="" inline,
   usando cdcam_color_para_indice() de includes/funciones-generales.php:
     <span class="cdcam-badge" style="background:<?php echo $color['bg']; ?>;
                                       color:<?php echo $color['badge_texto']; ?>;">
       <?php echo esc_html( $bodega['ciudad'] ); ?>
     </span>
   No hay que crear una clase CSS por cada color: son 8 y rotan, así que
   fijarlos aquí duplicaría lo que ya calcula cdcam_color_para_indice().
========================================================================== */

.cdcam-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.8;
}

/* ==========================================================================
   CATÁLOGO PÚBLICO
   Cubre shortcode-bodegas.php, shortcode-locales.php,
   shortcode-productos.php y shortcode-vitrina-perfil.php.
========================================================================== */

/* ---- Filtro por ciudad (arriba del grid de bodegas) ---- */

.cdcam-filtro-ciudades {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2rem;
}

.cdcam-filtro-ciudad {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.cdcam-filtro-ciudad:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.cdcam-filtro-ciudad.cdcam-filtro-activo {
    opacity: 1 !important;
}

.cdcam-filtro-categorias {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2rem;
}

.cdcam-filtro-categoria {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.cdcam-filtro-categoria:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.cdcam-filtro-categoria.cdcam-filtro-activo {
    opacity: 1 !important;
}


/* ---- [cdcam_bodegas]: grid de bodegas activas ---- */

.cdcam-grid-bodegas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 320px));
    gap: 20px;
    justify-content: center;
}

.cdcam-tarjeta-bodega {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    padding-bottom: 2rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Imagen de fondo de la bodega: muy desvanecida, encima del color pero por
   debajo del contenido, sin tocar el fondo de color de la tarjeta.
   La opacidad llega en línea desde la bodega (deslizador del editor). */
.cdcam-tarjeta-bodega-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.cdcam-tarjeta-bodega:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.cdcam-tarjeta-bodega:hover .cdcam-tarjeta-bodega-icono {
    transform: scale(1.1);
}

.cdcam-tarjeta-bodega:hover .cdcam-tarjeta-bodega-conteo i {
    transform: translateX(4px);
}

.cdcam-tarjeta-bodega-icono {
    display: block;
    text-align: center;
    padding: 2.5rem 1.5rem 1rem;
    font-size: 44px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.cdcam-tarjeta-bodega-ciudad {
    display: block;
    text-align: center;
    font-weight: 500;
    font-size: 19px;
    margin: 0 0 6px;
    text-decoration: none !important;
}

.cdcam-tarjeta-bodega-region {
    display: block;
    text-align: center;
    font-size: 14px;
    margin: 0 0 18px;
    text-decoration: none !important;
}

.cdcam-tarjeta-bodega-conteo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 12px;
    margin: 0 auto;
    width: fit-content;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.55);
    text-decoration: none !important;
}

.cdcam-tarjeta-bodega-conteo i {
    font-size: 20px;
    transition: transform 0.2s ease;
}

/* ---- [cdcam_locales]: lista de locales, con filtro activo por bodega ---- */

p.cdcam-filtro-activo {
    color: var(--cdcam-color-texto-suave);
    font-size: 14px;
    margin-bottom: 14px;
}

p.cdcam-filtro-activo a {
    color: var(--cdcam-color-primario);
    text-decoration: none;
}

p.cdcam-filtro-activo a:hover {
    text-decoration: underline;
}

.cdcam-grid-locales {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    gap: 14px;
}

.cdcam-tarjeta-local {
    --cdcam-color-hover: var(--cdcam-color-primario);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 18px 20px;
    background: var(--cdcam-color-fondo);
    border: 1px solid var(--cdcam-color-borde);
    border-radius: 16px;
    text-decoration: none !important;
    color: var(--cdcam-color-texto);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cdcam-tarjeta-local:hover {
    border-color: var(--cdcam-color-hover);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.cdcam-tarjeta-local:hover .cdcam-tarjeta-local-icono {
    transform: scale(1.1);
}

.cdcam-tarjeta-local:hover .cdcam-tarjeta-local-conteo i {
    transform: translateX(4px);
}

.cdcam-tarjeta-local-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

.cdcam-tarjeta-local-icono {
    font-size: 36px;
    line-height: 1;
    margin: 6px 0 10px;
    color: var(--cdcam-color-texto-suave);
    transition: transform 0.2s ease;
}

.cdcam-tarjeta-local-nombre {
    font-size: 16.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.cdcam-tarjeta-local-categoria {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--cdcam-color-fondo-panel);
    color: var(--cdcam-color-texto-suave);
    flex-shrink: 0;
}

/* Las categorías viven en una sola fila: si no caben, la píldora que
   sobresale se recorta y el borde derecho se desvanece de forma sutil.
   Cuando la fila cabe completa no se nota nada (el espacio sobrante al
   final queda sin contenido). */
.cdcam-tarjeta-local-categorias {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 6px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
}

.cdcam-tarjeta-local-dueno {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 13px;
    color: var(--cdcam-color-texto-suave);
    margin-bottom: 4px;
}

.cdcam-tarjeta-local-dueno i {
    font-size: 15px;
}

.cdcam-tarjeta-local-conteo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 4px 12px;
    margin-top: 4px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--cdcam-color-texto-suave);
    background: var(--cdcam-color-fondo-panel);
}

.cdcam-tarjeta-local-conteo i {
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Estado abierto/cerrado/sin-horario: línea propia bajo el nombre del local.
   El color y el punto verde/rojo vienen de .cdcam-estado-abierto/.cdcam-estado-cerrado
   (definidos más abajo, con prioridad); por defecto queda en gris "Sin horario". */
.cdcam-tarjeta-local-estado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cdcam-color-texto-suave);
}

.cdcam-tarjeta-local-estado .cdcam-estado-horario-punto {
    background: var(--cdcam-color-texto-suave);
}

/* Local activo que aún no tiene vitrina: tarjeta informativa, sin enlace. */
.cdcam-tarjeta-local-sin-vitrina {
    cursor: default;
}

.cdcam-tarjeta-local-sin-vitrina:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--cdcam-color-borde);
}

.cdcam-tarjeta-local-sin-vitrina .cdcam-tarjeta-local-icono {
    opacity: 0.6;
}

.cdcam-tarjeta-local-sinvitrina-cta {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cdcam-color-texto-suave);
    background: var(--cdcam-color-fondo-panel);
}

/* ---- [cdcam_compradores]: grilla de compradores (puntos de compra) ----
   Reutiliza el estilo de tarjeta de locales; aquí van solo los extras
   propios: fila de nombre + sello "Verificado". */

.cdcam-grid-compradores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

/* A prueba de Elementor (solo compradores): ancho cómodo y centrado, y columnas
   que nunca desbordan aunque la sección sea muy ancha o muy angosta. En móvil
   se mantienen las 2 columnas (regla responsive de abajo). */
.cdcam-lista-compradores,
.cdcam-grid-compradores {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.cdcam-grid-compradores {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    min-width: 0;
}

.cdcam-grid-compradores .cdcam-tarjeta-comprador {
    min-width: 0;
}

/* Nombre del negocio y sello "Verificado" comparten la misma fila, centrada.
   Si el nombre es muy largo, el sello baja a otra línea sin romperse. */
.cdcam-tarjeta-comprador-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    width: 100%;
    margin-bottom: 4px;
}

.cdcam-tarjeta-comprador-titulo .cdcam-tarjeta-local-nombre {
    margin-bottom: 0;
}

.cdcam-tarjeta-comprador-sello {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #1F7A3D;
    margin-bottom: 0;
}

.cdcam-tarjeta-comprador-sello .ti {
    font-size: 14px;
}

/* ---- [cdcam_productos]: catálogo, filtro de categorías y tarjeta de producto ---- */

.cdcam-filtro-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

/* ---- Barra de filtros del catálogo (ciudad, búsqueda, ofertas y orden) ---- */

.cdcam-filtros-catalogo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 16px;
    margin-bottom: 16px;
}

.cdcam-filtro-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cdcam-filtro-etiqueta {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--cdcam-color-texto-suave);
}

.cdcam-filtro-select,
.cdcam-filtros-catalogo input[type="search"] {
    height: 38px;
    padding: 0 14px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--cdcam-color-texto);
    background: var(--cdcam-color-fondo-panel);
    border: 1px solid var(--cdcam-color-borde);
    border-radius: 999px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cdcam-filtro-select {
    min-width: 160px;
    padding-right: 30px;
    cursor: pointer;
}

.cdcam-filtros-catalogo input[type="search"] {
    width: 220px;
    padding-right: 40px;
}

.cdcam-filtros-catalogo input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.cdcam-filtro-select:hover,
.cdcam-filtros-catalogo input[type="search"]:hover {
    border-color: var(--cdcam-color-texto-suave);
}

.cdcam-filtro-select:focus,
.cdcam-filtros-catalogo input[type="search"]:focus {
    border-color: var(--cdcam-color-primario);
    box-shadow: 0 0 0 3px var(--cdcam-color-primario-fondo);
}

.cdcam-buscador-caja {
    position: relative;
}

.cdcam-buscador-boton {
    position: absolute;
    top: 0;
    right: 4px;
    width: 34px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--cdcam-color-texto-suave);
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.15s ease;
}

.cdcam-buscador-boton i {
    font-size: 18px;
    line-height: 1;
}

.cdcam-buscador-boton:hover {
    color: var(--cdcam-color-primario);
}

.cdcam-filtro-ofertas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px dashed var(--cdcam-color-borde);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--cdcam-color-texto-suave);
    text-decoration: none !important;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cdcam-filtro-ofertas:hover {
    border-color: var(--cdcam-color-primario);
    color: var(--cdcam-color-primario);
}

.cdcam-filtro-ofertas.cdcam-filtro-activo {
    border-style: solid;
    border-color: var(--cdcam-color-primario-fondo);
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
}

@media (max-width: 640px) {
    .cdcam-filtros-catalogo {
        align-items: stretch;
    }
    .cdcam-filtro-control {
        flex: 1 1 100%;
    }
    .cdcam-filtro-select,
    .cdcam-filtros-catalogo input[type="search"],
    .cdcam-filtro-ofertas {
        width: 100%;
    }
}

/* ---- Píldoras: una sola fila con scroll lateral y desvanecido ----
   El contenedor "carrusel" hace el scroll (barra oculta; se desliza con
   dedo, touchpad o rueda). La fila interior no envuelve: si cabe, queda
   centrada; si no, desborda y el JS agrega .cdcam-tiene-mas (fade derecho)
   hasta llegar al final (.cdcam-pildoras-fin lo quita). */

.cdcam-filtros-carrusel {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 18px;
}

.cdcam-filtros-carrusel::-webkit-scrollbar {
    display: none;
    height: 0;
}

.cdcam-filtros-carrusel > .cdcam-filtro-categorias,
.cdcam-filtros-carrusel > .cdcam-filtro-ciudades {
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: 0;
}

.cdcam-filtros-carrusel.cdcam-tiene-mas {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 70px), transparent 100%);
}

.cdcam-filtros-carrusel.cdcam-pildoras-fin {
    -webkit-mask-image: none;
            mask-image: none;
}

.cdcam-catalogo-bodegas .cdcam-filtros-carrusel {
    margin-bottom: 2rem;
}

/* .cdcam-chip ya existe (usado en el perfil de vitrina como etiqueta simple);
   aquí se reutiliza como filtro clicable, agregando estado activo/hover. */
.cdcam-catalogo .cdcam-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--cdcam-color-secundario);
    color: var(--cdcam-color-texto-suave);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cdcam-catalogo .cdcam-chip:hover {
    border-color: var(--cdcam-color-primario);
    color: var(--cdcam-color-primario);
}

.cdcam-catalogo .cdcam-chip.cdcam-chip-activo {
    background: var(--cdcam-color-primario);
    color: #fff;
}

.cdcam-grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 10px;
}

/* ---- Tarjeta de producto: estilo "suave y flotante" (catálogo y vitrina) ----
   Crema cálida de la paleta, sombra en capas (sin borde duro gris), esquinas
   muy redondeadas y foto enmarcada. La misma familia visual del login y del
   perfil de vitrina. */

.cdcam-tarjeta-producto {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 4px;
    background: var(--cdcam-color-fondo-crema);
    border: 1px solid var(--cdcam-color-borde-crema);
    border-radius: var(--cdcam-radio-tarjeta);
    overflow: hidden;
    box-shadow: var(--cdcam-sombra-suave);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cdcam-tarjeta-producto:hover {
    transform: translateY(-3px);
    box-shadow: var(--cdcam-sombra-media);
    border-color: rgba(59, 109, 17, 0.28);
}

.cdcam-tarjeta-producto-imagen {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #F2F6E7, var(--cdcam-color-primario-fondo));
}

.cdcam-tarjeta-producto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.cdcam-tarjeta-producto:hover .cdcam-tarjeta-producto-imagen img {
    transform: scale(1.05);
}

.cdcam-tarjeta-producto-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 8px 12px;
    flex: 1;
}

.cdcam-tarjeta-producto-nombre {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cdcam-color-texto);
    /* El título SIEMPRE en una sola fila: si es muy largo se corta con "…". */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Precio como "chip" pastel — misma familia suave que los chips de las
   bodegas (fondo pastel + letra oscura), sin rellenos verdes fuertes. */
.cdcam-tarjeta-producto-precio {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 8px;
    align-self: center;
    max-width: 100%;
    margin-top: 2px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.cdcam-tarjeta-producto-precio-promo {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-tarjeta-producto-precio-anterior {
    font-size: 11.5px;
    font-weight: 600;
    color: inherit;
    opacity: 0.72;
    text-decoration: line-through;
}

.cdcam-tarjeta-producto-vitrina {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-size: 12.5px;
    color: var(--cdcam-color-texto-suave);
    text-decoration: none !important;
    white-space: nowrap;
}

.cdcam-tarjeta-producto-vitrina-texto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cdcam-tarjeta-producto-vitrina:hover {
    color: var(--cdcam-color-primario);
}

.cdcam-tarjeta-producto-logo-vitrina {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Agotado: foto en gris suave, tarjeta sin elevación y botón en rojo suave. */
.cdcam-tarjeta-producto.cdcam-producto-agotado:hover {
    transform: none;
    box-shadow: var(--cdcam-sombra-suave);
    border-color: var(--cdcam-color-borde-crema);
}

.cdcam-tarjeta-producto.cdcam-producto-agotado .cdcam-tarjeta-producto-imagen img {
    filter: grayscale(1);
    opacity: 0.65;
}

/* El botón de tarjetas agotadas (sea "Agotado" bloqueado en la vitrina o el
   enlace "Ver producto" del catálogo) va en rojo suave; está definido al
   final del archivo para ganar a la regla de legibilidad verde de 1.10.16. */

/* Botón de tarjeta: píldora con relleno verde pastel y letra verde oscura
   SIEMPRE visible (sin contorno transparente). Al hover el pastel se
   oscurece un poco con un velo suave. */
.cdcam-tarjeta-producto .cdcam-boton-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: auto;
    padding: 10px 12px;
    border: 1px solid rgba(39, 80, 10, 0.28);
    border-radius: 999px;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: none;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.cdcam-tarjeta-producto .cdcam-boton-whatsapp:hover {
    background: var(--cdcam-color-primario-fondo);
    border-color: var(--cdcam-color-primario);
    color: var(--cdcam-color-primario-oscuro);
    box-shadow: inset 0 0 0 100vmax rgba(39, 80, 10, 0.12);
    transform: none;
}

.cdcam-tarjeta-producto .cdcam-boton-whatsapp:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.25);
}

/* Cinta "Agotado" sobre la foto — clase separada de .cdcam-etiqueta-agotado
   a propósito: esa es una píldora inline (tabla del panel del comerciante),
   esta es un overlay posicionado sobre la imagen. Mismos colores de la
   paleta, layout distinto. */
.cdcam-cinta-agotado {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--cdcam-color-error-fondo);
    color: var(--cdcam-color-error);
    box-shadow: 0 1px 4px rgba(153, 60, 29, 0.15);
}

/* ---- Botón de WhatsApp (catálogo y perfil de vitrina) ---- */

.cdcam-boton-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--cdcam-radio-chico);
    background: #25D366;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 4px;
    transition: background 0.15s ease;
}

.cdcam-boton-whatsapp:hover {
    background: #1DA851;
    color: #fff;
}

.cdcam-boton-whatsapp-grande {
    padding: 12px 22px;
    font-size: 15px;
    margin-top: 14px;
}

.cdcam-boton-whatsapp:visited,
.cdcam-boton-whatsapp:active,
.cdcam-boton-whatsapp:focus {
    color: #fff;
}

.cdcam-boton-whatsapp-bloqueado {
    background: var(--cdcam-color-secundario);
    color: var(--cdcam-color-texto-suave);
    border: 1px solid var(--cdcam-color-texto-suave);
    pointer-events: none;
    cursor: not-allowed;
}

.cdcam-boton-whatsapp-bloqueado:hover {
    background: var(--cdcam-color-secundario);
}

/* ---- shortcode-vitrina-perfil.php: ficha pública de una vitrina ---- */

.cdcam-perfil-vitrina-encabezado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 24px 22px;
    border-radius: var(--cdcam-radio);
    margin-bottom: 24px;
}

.cdcam-perfil-vitrina-codigo {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cdcam-color-texto-suave);
    text-transform: uppercase;
}

.cdcam-perfil-vitrina-nombre {
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    color: var(--cdcam-color-texto);
}

.cdcam-perfil-vitrina-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.cdcam-perfil-vitrina-meta .cdcam-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--cdcam-color-texto);
    font-size: 12.5px;
    font-weight: 600;
}

.cdcam-perfil-vitrina-subtitulo {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 14px;
}

/* Variante de aviso que faltaba: vitrina inactiva vista por su dueño/admin */
.cdcam-aviso-borrador {
    background: var(--cdcam-color-alerta-fondo);
    border-color: var(--cdcam-color-alerta);
    color: var(--cdcam-color-alerta);
}




/* Oculta el título de "entrada" y el autor/fecha que pone el tema Astra
   en la página individual de una vitrina — el contenido real (nombre,
   categoría, etc.) ya lo pinta shortcode-vitrina-perfil.php aparte. */
.single-cdcam_vitrina .entry-title,
.single-cdcam_vitrina .entry-meta,
.single-cdcam_vitrina .ast-author-meta,
.single-cdcam_vitrina .post-meta {
    display: none !important;

}


/* ==========================================================================
   PERFIL DE VITRINA — REDISEÑO CON LOGO Y PESTAÑAS
   Estilos nuevos para shortcode-vitrina-perfil.php: logo/inicial en el
   encabezado, pestañas (Productos/Promociones/Datos del vendedor), tarjeta
   de producto estilo "puesto de mercado" (solo dentro de .cdcam-perfil-vitrina,
   para no afectar el catálogo general de [cdcam_productos]), tarjetas de
   promoción y la pestaña de datos del vendedor.
========================================================================== */

/* ---- Encabezado: logo + texto lado a lado ---- */

.cdcam-perfil-vitrina-encabezado {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.cdcam-perfil-vitrina-boton-contacto {
    flex-shrink: 0;
    margin-top: 0 !important;
}
.cdcam-perfil-vitrina-logo {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cdcam-color-fondo);
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--cdcam-sombra);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdcam-perfil-vitrina-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cdcam-perfil-vitrina-logo-inicial {
    font-size: 30px;
    font-weight: 800;
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-perfil-vitrina-encabezado-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    text-align: center;
}

/* ---- Cabecera de vitrina con portada/banner (como la del comprador) ----
   La foto de portada la sube SOLO el admin (metabox "Foto de portada").
   Si no hay imagen, se usa un degradado del color de la bodega. El logo
   queda encimado a la portada y los chips pasan a fondo claro legible. */

.cdcam-vitrina-portada-caja {
    border-radius: var(--cdcam-radio);
    overflow: hidden;
    margin-bottom: 24px;
    background: #fff;
}

.cdcam-perfil-vitrina-portada {
    height: 175px;
    background-color: #EDE3CC;
    background-size: cover;
    background-position: center;
}

.cdcam-vitrina-portada-caja .cdcam-perfil-vitrina-encabezado {
    margin-bottom: 0;
}

.cdcam-vitrina-portada-caja .cdcam-perfil-vitrina-logo {
    margin-top: -45px;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
}

.cdcam-vitrina-portada-caja .cdcam-perfil-vitrina-meta .cdcam-chip {
    background: var(--cdcam-color-fondo-panel);
    color: var(--cdcam-color-texto);
    border: 1px solid var(--cdcam-color-borde);
}

@media (max-width: 600px) {
    .cdcam-perfil-vitrina-portada {
        height: 140px;
    }

    .cdcam-vitrina-portada-caja .cdcam-perfil-vitrina-logo {
        margin-top: 0 !important;
    }
}

/* ---- Pestañas dentro de la vitrina: botones tipo píldora, centrados,
   mismo lenguaje visual que .cdcam-filtro-ciudad / .cdcam-filtro-categoria.
   Se usa mayor especificidad (.cdcam-perfil-vitrina-tabs .cdcam-panel-tab)
   para no afectar las pestañas del panel del comerciante, que sí usan el
   estilo de subrayado original. ---- */

.cdcam-perfil-vitrina-tabs {
    justify-content: center;
    border-bottom: none;
    gap: 8px;
    margin-bottom: 26px;
}

.cdcam-perfil-vitrina-tabs .cdcam-panel-tab {
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--cdcam-color-fondo-panel);
    color: var(--cdcam-color-texto-suave);
    border-bottom: none;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.cdcam-perfil-vitrina-tabs .cdcam-panel-tab:hover {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    text-decoration: none !important;
    transform: translateY(-1px);
}

.cdcam-perfil-vitrina-tabs .cdcam-panel-tab.cdcam-tab-activa {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    border-bottom: none;
    box-shadow: inset 0 0 0 1px rgba(39, 80, 10, 0.35);
}

.cdcam-perfil-vitrina-tab-contador {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: 5px;
    border-radius: 999px;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* Cuando la pestaña está activa, el contador va con el verde más tenue. */
.cdcam-perfil-vitrina-tabs .cdcam-panel-tab.cdcam-tab-activa .cdcam-perfil-vitrina-tab-contador {
    background: rgba(39, 80, 10, 0.14);
    color: var(--cdcam-color-primario-oscuro);
}

/* ---- Tarjeta de producto dentro del perfil de vitrina ----
   Hereda el estilo "suave y flotante" de la base (crema cálida, sombra en
   capas, radio 16px, foto enmarcada, precio sello y botón píldora de
   contorno). La personalidad "puesto de mercado" ahora es la misma en todo
   el catálogo y en la vitrina. */

.cdcam-cinta-promocion {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--cdcam-color-alerta-fondo);
    color: var(--cdcam-color-alerta);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* ---- Pestaña Promociones ---- */

.cdcam-grid-promociones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 14px;
}

.cdcam-tarjeta-promocion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--cdcam-color-exito-fondo);
    border: 1px solid var(--cdcam-color-primario);
    border-radius: var(--cdcam-radio);
}

.cdcam-tarjeta-promocion-descuento {
    font-size: 19px;
    font-weight: 800;
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-tarjeta-promocion-nombre {
    font-weight: 700;
    color: var(--cdcam-color-texto);
}

.cdcam-tarjeta-promocion-alcance,
.cdcam-tarjeta-promocion-vigencia {
    font-size: 12.5px;
    color: var(--cdcam-color-texto-suave);
}

/* ---- Pestaña Datos del vendedor ---- */

.cdcam-datos-vendedor {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cdcam-datos-vendedor-fila {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cdcam-datos-vendedor-fila .ti {
    font-size: 20px;
    color: var(--cdcam-color-primario);
    margin-top: 2px;
}

.cdcam-datos-vendedor-etiqueta {
    display: block;
    font-size: 12px;
    color: var(--cdcam-color-texto-suave);
}

.cdcam-datos-vendedor-valor {
    display: block;
    font-weight: 600;
    color: var(--cdcam-color-texto);
}

.cdcam-mi-vitrina-logo-actual {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--cdcam-color-borde);
    margin-bottom: 8px;
}

/* ---- Login del panel del comerciante ---- */

.cdcam-login-caja {
    max-width: 360px;
    margin: 40px auto;
    padding: 32px 28px;
    background: #FFFCF5;
    border: 1px solid #EAE0C8;
    border-radius: var(--cdcam-radio);
    box-shadow: 0 4px 14px rgba(59, 40, 10, 0.08);
    text-align: center;
}

.cdcam-login-titulo {
    font-size: 19px;
    font-weight: 800;
    color: var(--cdcam-color-texto);
    margin: 0 0 4px;
}

.cdcam-login-subtitulo {
    font-size: 13.5px;
    color: var(--cdcam-color-texto-suave);
    margin: 0 0 20px;
}

.cdcam-login-formulario {
    text-align: left;
}

.cdcam-login-formulario .cdcam-boton-primario {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

/* ---- Login: ojito para mostrar/ocultar la contraseña ---- */

.cdcam-clave-caja {
    position: relative;
    display: block;
}

.cdcam-clave-caja input[type="password"],
.cdcam-clave-caja input[type="text"] {
    padding-right: 44px;
}

.cdcam-clave-ojito {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--cdcam-radio-chico);
    background: transparent;
    color: var(--cdcam-color-texto-suave);
    cursor: pointer;
}

.cdcam-clave-ojito:hover {
    color: var(--cdcam-color-primario);
    background: rgba(46, 125, 50, 0.08);
}

.cdcam-clave-ojito:focus-visible {
    outline: none;
    color: var(--cdcam-color-primario);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.18);
}

.cdcam-clave-ojito svg {
    display: block;
}

.cdcam-clave-ojito .cdcam-ojo-oculto {
    display: none;
}

.cdcam-clave-ojito[aria-pressed="true"] .cdcam-ojo-visible {
    display: none;
}

.cdcam-clave-ojito[aria-pressed="true"] .cdcam-ojo-oculto {
    display: block;
}

/* ---- Tarjetas de producto — catálogo y vitrina usan la misma base
   "suave y flotante" definida arriba (crema, sombra en capas, radio 16px,
   foto enmarcada, precio sello y botón píldora de contorno). Los overrides
   viejos de catálogo/perfil se eliminaron para evitar conflictos. */


/* ==========================================================================
   RESPONSIVE — CATÁLOGO PÚBLICO
========================================================================== */

@media (max-width: 600px) {
    .cdcam-grid-bodegas,
    .cdcam-grid-locales,
    .cdcam-grid-productos {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .cdcam-perfil-vitrina-encabezado {
        padding: 18px 16px;
    }

    .cdcam-perfil-vitrina-nombre {
        font-size: 21px;
    }
}

@media (max-width: 600px) {
    .cdcam-tarjeta-local-conteo {
        font-size: 12px;
        gap: 6px;
        padding: 3px 10px;
    }
}

@media (max-width: 600px) {
    .cdcam-filtro-ciudades {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .cdcam-filtro-ciudad {
        white-space: nowrap;
    }

    .cdcam-grid-bodegas,
    .cdcam-grid-locales,
    .cdcam-grid-productos {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .cdcam-tarjeta-producto {
        padding: 8px 8px 2px;
    }

    .cdcam-tarjeta-producto-info {
        padding: 10px 6px 10px;
    }

    .cdcam-tarjeta-producto-precio {
        font-size: 13px;
        padding: 4px 10px;
    }

    .cdcam-perfil-vitrina-encabezado {
        padding: 18px 16px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        row-gap: 10px;
        column-gap: 12px;
    }

    .cdcam-perfil-vitrina-logo {
        width: 44px;
        height: 44px;
        order: 1;
    }

    .cdcam-perfil-vitrina-logo-inicial {
        font-size: 19px;
    }

    .cdcam-perfil-vitrina-encabezado-texto {
        display: contents;
    }

    .cdcam-perfil-vitrina-nombre {
        order: 2;
        font-size: 19px;
        text-align: left;
    }

    .cdcam-perfil-vitrina-codigo {
        order: 3;
        width: 100%;
        text-align: center;
    }

    .cdcam-perfil-vitrina-meta {
        order: 4;
        width: 100%;
        justify-content: center;
    }

    .cdcam-perfil-vitrina-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .cdcam-perfil-vitrina-tabs .cdcam-panel-tab {
        white-space: nowrap;
    }

    .cdcam-perfil-vitrina-boton-contacto {
        order: 5;
        width: 100%;
        justify-content: center;
        margin-top: 4px !important;
    }

    .cdcam-perfil-vitrina .cdcam-grid-productos {
        grid-template-columns: repeat(2, 1fr);
        justify-content: stretch;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdcam-tarjeta-producto,
    .cdcam-tarjeta-producto .cdcam-boton-whatsapp,
    .cdcam-tarjeta-producto-imagen img {
        transition: none !important;
    }

    .cdcam-tarjeta-producto:hover,
    .cdcam-tarjeta-producto.cdcam-producto-agotado:hover {
        transform: none;
    }

    .cdcam-tarjeta-producto:hover .cdcam-tarjeta-producto-imagen img {
        transform: none;
    }
}



/* ==========================================================================
   MAPA DE COMPRADORES
   Estilos para public/shortcode-mapa-compradores.php: leyenda, lienzo SVG,
   marcadores (círculo único o círculo agrupado con número), popup de
   "elegir negocio" y el listado accesible de respaldo (<details>).
   Usa las mismas variables de :root de arriba del archivo — nada de
   colores sueltos, para quedar en el mismo sistema visual.
========================================================================== */

.cdcam-mapa-compradores {
    color: var(--cdcam-color-texto);
    font-size: 15px;
    line-height: 1.5;
    max-width: 640px;
    margin: 0 auto;
}

.cdcam-mapa-compradores * {
    box-sizing: border-box;
}

/* ---- Leyenda (verde = comprador activo, rojo = inactivo) ---- */

.cdcam-mapa-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--cdcam-color-texto-suave);
}

.cdcam-mapa-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cdcam-mapa-punto-leyenda {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- Colores compartidos por leyenda, marcadores del SVG y popup ---- */

.cdcam-punto-verde {
    background: #4CE026 !important;
    fill: #4CE026 !important;
}

.cdcam-punto-rojo {
    background: var(--cdcam-color-error);
    fill: var(--cdcam-color-error);
}

/* ---- Lienzo SVG ---- */

.cdcam-mapa-svg-contenedor {
    position: relative; /* para centrar el aviso de "sin resultados" encima del mapa */
    border-radius: var(--cdcam-radio);
    overflow: hidden;
    box-shadow: var(--cdcam-sombra);
    margin-bottom: 16px;
}

/* ---- Filtro por departamento del mapa ----
   En computador las píldoras se muestran TODAS en filas (sin scroll); en
   pantallas chicas se convierten en una fila con scroll horizontal. */
.cdcam-mapa-filtros {
    margin-bottom: 16px;
}

.cdcam-mapa-carrusel-deptos {
    margin-bottom: 8px;
    overflow: visible;
}

.cdcam-mapa-filtros .cdcam-filtro-ciudades {
    margin-bottom: 0;
}

/* El color de cada píldora llega en línea (pastel por departamento); aquí
   solo se cuida la forma y el resaltado del departamento activo. */
.cdcam-mapa-pildora-departamento {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    opacity: 0.85;
}

.cdcam-mapa-pildora-departamento:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.cdcam-mapa-pildora-departamento.cdcam-filtro-activo {
    outline: 2px solid var(--cdcam-color-primario-oscuro);
    outline-offset: 2px;
    opacity: 1 !important;
}

/* En móvil: carrusel horizontal con el NOMBRE COMPLETO de cada departamento
   (ancho natural). La pista de scroll es un indicador "›" que el CSS muestra
   a la derecha mientras el JS marca .cdcam-tiene-mas (hay más píldoras) y
   oculta al llegar al final (.cdcam-pildoras-fin). El aro del activo es
   interior (box-shadow inset) y el contenedor guarda aire arriba/abajo para
   que nada quede pegado al borde ni se corte. */
@media (max-width: 600px) {
    .cdcam-mapa-carrusel-deptos {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 0 6px;
    }

    .cdcam-mapa-carrusel-deptos::-webkit-scrollbar {
        display: none;
        height: 0;
    }

    .cdcam-mapa-carrusel-deptos .cdcam-mapa-deptos {
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .cdcam-mapa-pildora-departamento {
        white-space: nowrap;
    }

    .cdcam-mapa-pildora-departamento:focus {
        outline: none;
    }

    .cdcam-mapa-pildora-departamento.cdcam-filtro-activo {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--cdcam-color-primario-oscuro);
    }

    /* Indicador flotante de scroll: solo mientras haya más píldoras ocultas. */
    .cdcam-mapa-carrusel-deptos::after {
        content: "›";
        display: none;
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        line-height: 19px;
        text-align: center;
        border-radius: 50%;
        border: 1px solid var(--cdcam-color-borde);
        background: var(--cdcam-color-fondo-panel);
        color: var(--cdcam-color-texto-suave);
        font-size: 18px;
        pointer-events: none;
    }

    .cdcam-mapa-carrusel-deptos.cdcam-tiene-mas::after {
        display: block;
    }

    .cdcam-mapa-carrusel-deptos.cdcam-pildoras-fin::after {
        display: none;
    }
}

/* ---- Aviso de "sin resultados" centrado sobre el mapa ---- */
.cdcam-mapa-sin-resultados {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    text-align: center;
    z-index: 5;
}

.cdcam-mapa-sin-resultados[hidden] {
    display: none;
}

.cdcam-mapa-sin-resultados-texto {
    max-width: 440px;
    padding: 16px 22px;
    border: 1px solid var(--cdcam-color-borde);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--cdcam-sombra);
    color: var(--cdcam-color-texto);
    font-size: 15px;
}

.cdcam-mapa-sin-resultados-ver-todos {
    padding: 9px 18px;
    border: none;
    border-radius: 30px;
    background: var(--cdcam-color-primario);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cdcam-mapa-sin-resultados-ver-todos:hover {
    background: var(--cdcam-color-primario-oscuro);
}

.cdcam-mapa-svg {
    display: block;
    width: 100%;
    height: auto;
}

.cdcam-mapa-colombia {
    fill: var(--cdcam-color-fondo);
    stroke: var(--cdcam-color-primario);
    stroke-width: 1.2;
    opacity: 0.9;
}

/* ---- Marcadores ---- */

.cdcam-mapa-marcador {
    cursor: pointer;
}

.cdcam-mapa-circulo {
    stroke: var(--cdcam-color-fondo);
    stroke-width: 2;
    transition: r 0.15s ease, opacity 0.15s ease;
}

/* El pulso del anillo verde lo anima publico.js (cdcamMapaPulso) tocando los
   atributos del SVG directamente (r y opacity), así el tema no puede
   desactivarlo con reglas CSS. Aquí solo evitamos que capture clics. */
.cdcam-mapa-anillo-pulso {
    pointer-events: none;
}

.cdcam-mapa-marcador:hover .cdcam-mapa-circulo,
.cdcam-mapa-marcador:focus .cdcam-mapa-circulo {
    opacity: 0.8;
}

.cdcam-mapa-marcador-grupo {
    outline: none;
}

.cdcam-mapa-marcador-grupo:focus .cdcam-mapa-circulo {
    stroke: var(--cdcam-color-primario);
    stroke-width: 3;
}

.cdcam-mapa-numero {
    fill: var(--cdcam-color-fondo);
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-anchor: middle;
    /* Centrado óptico en el círculo, sea cual sea el radio (2+ puntos). */
    dominant-baseline: central;
    alignment-baseline: middle;
    pointer-events: none;
    user-select: none;
}

/* ---- Tooltip flotante (lo posiciona publico.js, esto solo lo viste) ---- */

.cdcam-mapa-tooltip {
    position: fixed;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    color: var(--cdcam-color-primario-oscuro);
    border: 1px solid var(--cdcam-color-borde-crema);
    box-shadow: 0 3px 10px rgba(59, 109, 17, 0.14);
    font-size: 12.5px;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 8px;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity 0.12s ease;
}

/* Puntito verde de acento, mismo lenguaje que los puntos del mapa. */
.cdcam-mapa-tooltip::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cdcam-color-primario);
    margin-right: 7px;
    flex-shrink: 0;
}

.cdcam-mapa-tooltip.cdcam-mapa-tooltip-visible {
    opacity: 1;
}

/* ---- Popup: municipios con varios puntos de compra ---- */

.cdcam-mapa-popup-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    z-index: 10000;
}

.cdcam-mapa-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    background: #ffffff;
    border: 1px solid var(--cdcam-color-borde-crema);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    padding: 18px;
    width: 90%;
    max-width: 340px;
    max-height: 80vh;
    overflow-y: auto;
}

.cdcam-mapa-popup[hidden] {
    display: none;
}

.cdcam-mapa-popup-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-weight: 600;
    font-size: 14px;
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-mapa-popup-titulo::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cdcam-color-primario);
    flex-shrink: 0;
}

.cdcam-mapa-popup ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cdcam-mapa-popup li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    color: var(--cdcam-color-texto);
    text-decoration: none !important;
}

.cdcam-mapa-popup li a:hover {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    text-decoration: none !important;
}

.cdcam-mapa-popup-punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cdcam-mapa-popup-cerrar {
    display: block;
    margin: 0 auto;
    padding: 8px 22px;
    border-radius: 999px;
    background: #EAF3DE !important;
    color: #27500A !important;
    border: 1px solid rgba(39, 80, 10, 0.3) !important;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cdcam-mapa-popup-cerrar:hover {
    background: #DCEBCB !important;
}

/* ---- Listado accesible de respaldo (<details>) — minimalista ----
   Sin caja pesada: el resumen es una píldora suave centrada con chevron y las
   filas son limpias, con el municipio alineado a la derecha. */
.cdcam-mapa-listado {
    border: 0;
    padding: 0;
}

.cdcam-mapa-listado summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 4px;
    padding: 8px 16px;
    border: 1px solid var(--cdcam-color-borde);
    border-radius: 30px;
    background: var(--cdcam-color-fondo-panel);
    color: var(--cdcam-color-texto);
    font-size: 14px;
    font-weight: 500;
}

.cdcam-mapa-listado summary::-webkit-details-marker {
    display: none;
}

.cdcam-mapa-listado summary::after {
    content: "▾";
    color: var(--cdcam-color-texto-suave);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.cdcam-mapa-listado[open] summary::after {
    transform: rotate(180deg);
}

.cdcam-mapa-listado ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.cdcam-mapa-listado li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    border-top: 1px solid var(--cdcam-color-borde);
    font-size: 14px;
}

.cdcam-mapa-listado li:first-child {
    border-top: 0;
}

.cdcam-mapa-listado li:hover {
    background: var(--cdcam-color-fondo-panel);
}

.cdcam-mapa-listado li a,
.cdcam-mapa-listado li a:link,
.cdcam-mapa-listado li a:visited,
.cdcam-mapa-listado li a:hover,
.cdcam-mapa-listado li a:focus,
.cdcam-mapa-listado li a:active {
    color: var(--cdcam-color-primario);
    text-decoration: none !important;
    border-bottom: none !important;
    font-weight: 500;
}

.cdcam-mapa-listado-municipio {
    margin-left: auto;
    color: var(--cdcam-color-texto-suave);
    font-size: 13px;
    text-align: right;
}

.cdcam-mapa-etiqueta-departamento {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.4px;
    fill: var(--cdcam-color-texto-suave);
    paint-order: stroke;
    stroke: var(--cdcam-color-fondo-panel);
    stroke-width: 5px;
    stroke-linejoin: round;
    text-anchor: middle;
    pointer-events: none;
    user-select: none;
}

/* ==========================================================================
   CHAT: contenedor de burbujas con alto fijo y scroll propio, para que la
   conversación no vaya empujando el resto de la página hacia abajo.
   Aplica tanto al panel del comprador (tab-mis-mensajes.php) como al widget
   de la ficha pública (pintado por JS en publico.js).
========================================================================== */
.cdcam-mensajes-hilo-mensajes {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain; /* evita que el scroll "se pase" a la página */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px;
    scroll-behavior: smooth;
}

.cdcam-mensajes-nombre {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cdcam-color-texto-suave);
    margin-bottom: 2px;
}

.cdcam-mensajes-escribiendo {
    margin: 0 0 8px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--cdcam-color-texto-suave);
    display: none; /* el JS lo cambia a "block" cuando corresponde */
    align-items: center;
    gap: 6px;
}

.cdcam-mensajes-escribiendo::after {
    content: '...';
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: cdcam-puntos-escribiendo 1.2s steps(4, end) infinite;
    overflow: hidden;
    vertical-align: bottom;
}

@keyframes cdcam-puntos-escribiendo {
    0%   { width: 0; }
    100% { width: 1.2em; }
}
/* ==========================================================================
   PANEL DEL COMPRADOR: pestaña "Mis Mensajes"
   Ámbito: public/panel-comerciante/tab-mis-mensajes.php
========================================================================== */

.cdcam-mensajes-layout {
    display: flex;
    background: var(--cdcam-color-fondo);
    border: 1px solid var(--cdcam-color-borde);
    border-radius: var(--cdcam-radio);
    overflow: hidden;
    min-height: 420px;
}

/* ---------- Lista de conversaciones ---------- */
.cdcam-mensajes-lista {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--cdcam-color-borde);
    background: var(--cdcam-color-fondo-panel);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.cdcam-mensajes-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: var(--cdcam-color-texto); /* neutraliza el azul de enlace del tema */
    transition: background 0.15s ease;
}

/* Blindaje anti-tema: algunos temas pintan un subrayado azul en todos los
   enlaces (a { text-decoration: underline }) que se hereda al nombre, al
   número y a las iniciales. Se neutraliza en todos los estados y en los
   hijos, con !important para ganarle a cualquier regla del tema. */
.cdcam-mensajes-item,
.cdcam-mensajes-item:link,
.cdcam-mensajes-item:visited,
.cdcam-mensajes-item:hover,
.cdcam-mensajes-item:focus,
.cdcam-mensajes-item:active {
    text-decoration: none !important;
    border-bottom: none !important;
}

.cdcam-mensajes-item *,
.cdcam-mensajes-item .cdcam-mensajes-avatar {
    text-decoration: none !important;
    border-bottom: none !important;
}

.cdcam-mensajes-item:hover {
    background: var(--cdcam-color-fondo);
}

.cdcam-mensajes-item-activa {
    border-left-color: var(--cdcam-color-primario);
    background: #F3F7EC; /* verde muy suave, en familia con la paleta */
}

.cdcam-mensajes-item-activa:hover {
    background: #F3F7EC;
}

.cdcam-mensajes-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-mensajes-item-cuerpo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cdcam-mensajes-item-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cdcam-mensajes-item-nombre {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cdcam-color-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cdcam-mensajes-item-activa .cdcam-mensajes-item-nombre {
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-mensajes-item-whatsapp {
    font-size: 11.5px;
    color: var(--cdcam-color-texto-suave);
}

/* Contador de no leídos: píldora verde suave (ya no roja) */
.cdcam-mensajes-badge {
    flex-shrink: 0;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Hilo ---------- */
.cdcam-mensajes-hilo {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px;
    background: var(--cdcam-color-fondo);
}

.cdcam-mensajes-hilo-encabezado {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--cdcam-color-borde);
}

.cdcam-mensajes-avatar-grande {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

.cdcam-mensajes-hilo-titulo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cdcam-mensajes-hilo-titulo strong {
    font-size: 14.5px;
    color: var(--cdcam-color-texto);
}

.cdcam-mensajes-hilo-titulo span {
    font-size: 12px;
    color: var(--cdcam-color-texto-suave);
}

/* Separador de día */
.cdcam-mensajes-separador {
    align-self: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--cdcam-color-texto-suave);
    background: var(--cdcam-color-fondo-panel);
    border-radius: 10px;
    padding: 3px 10px;
    margin: 6px 0 2px;
}

/* Estados vacíos */
.cdcam-mensajes-vacio,
.cdcam-mensajes-hilo-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    text-align: center;
    color: var(--cdcam-color-texto-suave);
    font-size: 13px;
}

.cdcam-mensajes-vacio {
    margin: auto;
}

.cdcam-mensajes-vacio .ti,
.cdcam-mensajes-hilo-vacio .ti {
    font-size: 34px;
    color: var(--cdcam-color-borde);
}

.cdcam-mensajes-vacio p,
.cdcam-mensajes-hilo-vacio p {
    margin: 0;
}

@media (max-width: 780px) {
    .cdcam-mensajes-layout {
        flex-direction: column;
        min-height: 0;
    }

    .cdcam-mensajes-lista {
        width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--cdcam-color-borde);
    }

    .cdcam-mensajes-hilo {
        padding: 14px;
    }
}


/* ==========================================================================
   CHAT DEL PUNTO DE COMPRA — tarjeta junto a los datos de contacto
   Ámbito: public/shortcode-punto-compra-perfil.php (.cdcam-chat-punto-compra)
========================================================================== */

.cdcam-punto-compra-cuerpo {
    display: flex;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
}

.cdcam-punto-compra-cuerpo .cdcam-datos-vendedor {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
}

.cdcam-punto-compra-cuerpo .cdcam-datos-vendedor .cdcam-boton-whatsapp-grande {
    margin-top: auto;
}

.cdcam-chat-punto-compra {
    flex: 1 1 300px;
    border: 1px solid var(--cdcam-color-borde);
    border-radius: var(--cdcam-radio);
    background: var(--cdcam-color-fondo);
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.cdcam-chat-punto-compra-encabezado {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--cdcam-color-primario);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    border-bottom: 1px solid var(--cdcam-color-borde);
    border-top-left-radius: var(--cdcam-radio);
    border-top-right-radius: var(--cdcam-radio);
}

.cdcam-chat-punto-compra-encabezado .ti {
    font-size: 17px;
}

.cdcam-chat-contenido {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ---- Formulario inicial (nombre + WhatsApp) ---- */
.cdcam-chat-form-inicial p {
    margin: 0 0 12px;
}

.cdcam-chat-form-inicial label {
    font-size: 12.5px;
    color: var(--cdcam-color-texto-suave);
}

.cdcam-chat-form-inicial .cdcam-boton-primario {
    width: 100%;
}

/* ---- Dentro de la tarjeta compacta del chat público el hilo es más
   corto que en el panel del comprador. ---- */
.cdcam-chat-punto-compra .cdcam-mensajes-hilo-mensajes {
    border: none;
    background: transparent;
    padding: 0;
    max-height: 260px;
}

/* ---- Burbujas: visitante a la izquierda, comprador a la derecha ---- */
.cdcam-mensajes-burbuja {
    max-width: 74%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.cdcam-mensajes-burbuja-visitante {
    align-self: flex-start;
    background: var(--cdcam-color-fondo);
    border: 1px solid var(--cdcam-color-borde);
    border-top-left-radius: 4px;
}

.cdcam-mensajes-burbuja-comprador {
    align-self: flex-end;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    border-top-right-radius: 4px;
}

.cdcam-mensajes-burbuja-comprador .cdcam-mensajes-nombre {
    color: var(--cdcam-color-primario);
}

.cdcam-mensajes-burbuja p {
    margin: 0;
    word-break: break-word;
}

.cdcam-mensajes-burbuja .cdcam-mensajes-hora {
    display: block;
    text-align: right;
    margin-top: 3px;
    font-size: 10.5px;
}

.cdcam-mensajes-burbuja-comprador .cdcam-mensajes-hora {
    color: var(--cdcam-color-primario-oscuro);
    opacity: 0.7;
}

/* ---- Responder: textarea con su borde + botón circular verde a un lado ---- */
.cdcam-mensajes-form-responder {
    margin-top: 12px;
}

.cdcam-mensajes-componer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cdcam-mensajes-componer-fila {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.cdcam-mensajes-componer-fila textarea {
    flex: 1;
    border: 1px solid var(--cdcam-color-borde);
    border-radius: 14px;
    background: var(--cdcam-color-fondo);
    resize: none;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--cdcam-color-texto);
    max-height: 120px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cdcam-mensajes-componer-fila:focus-within textarea {
    border-color: var(--cdcam-color-primario);
    box-shadow: 0 0 0 3px var(--cdcam-color-primario-fondo);
}

.cdcam-mensajes-componer-fila textarea::placeholder {
    color: var(--cdcam-color-texto-suave);
    opacity: 0.7;
}

.cdcam-mensajes-enviar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(39, 80, 10, 0.25);
    border-radius: 50%;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none; /* sin anillo de foco azul del navegador */
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.cdcam-mensajes-enviar .ti {
    font-size: 16px;
}

.cdcam-mensajes-enviar:hover {
    background: var(--cdcam-color-primario-fondo);
    box-shadow: inset 0 0 0 100vmax rgba(39, 80, 10, 0.12);
}

.cdcam-mensajes-enviar:focus-visible {
    box-shadow: 0 0 0 3px var(--cdcam-color-primario-fondo);
}

.cdcam-mensajes-enviar:active {
    transform: scale(0.94);
}

.cdcam-mensajes-enviar:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Contador de caracteres (X/500), alineado a la derecha bajo la caja */
.cdcam-mensajes-contador {
    align-self: flex-end;
    font-size: 11px;
    color: var(--cdcam-color-texto-suave);
    line-height: 1;
}

@media (max-width: 780px) {
    .cdcam-mensajes-componer-fila {
        align-items: stretch;
    }

    .cdcam-mensajes-componer-fila textarea {
        min-height: 44px;
    }

    .cdcam-mensajes-enviar {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 780px) {
    .cdcam-punto-compra-cuerpo {
        flex-direction: column;
    }
}

/* ============================================================
   REDISEÑO — FICHA PÚBLICA DEL PUNTO DE COMPRA
   Ámbito: shortcode-punto-compra-perfil.php (.cdcam-perfil-punto-compra)
============================================================ */

.cdcam-perfil-punto-compra {
    background: #f6f7f2;
    padding: 24px;
    border-radius: var(--cdcam-radio);
    overflow: hidden;
}

/* Ancho de las fichas (vitrina y punto de compra): neutro y a prueba de
   Elementor. En contenedores angostos llenan su ancho; si algún día caen en
   un contenedor a todo lo ancho, ambas se limitan y centran al MISMO ancho
   (variable --cdcam-perfil-ancho, 1160px por defecto). No depende de bloques
   ni clases del tema. */
.cdcam-perfil-vitrina,
.cdcam-perfil-punto-compra {
    width: 100%;
    max-width: var(--cdcam-perfil-ancho, 1160px);
    margin-inline: auto;
}

/* Celular: la ficha se queda DENTRO de su contenedor con 16px de aire a cada
   lado (no rompe a todo lo ancho del navegador), así funciona también si el
   shortcode va embebido en Elementor u otros contenedores. */
@media (max-width: 600px) {
    body .cdcam-perfil-vitrina.cdcam-perfil-punto-compra {
        width: 100%;
        max-width: none;
        margin-left: 0;
        box-sizing: border-box;
        padding: 0 5px;
    }
}

.cdcam-punto-compra-portada{
    height:200px;
    background-color:#5c3d22;
    background-size:cover;
    background-position:center;
    margin:-24px -24px 0;
    width:calc(100% + 48px);
}

.cdcam-fila-nombre-verificado{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

.cdcam-badge-verificado{
    display:inline-flex; align-items:center; gap:4px;
    background:var(--cdcam-color-primario-fondo);
    color:var(--cdcam-color-primario-oscuro);
    font-size:11px; font-weight:700;
    padding:3px 9px 3px 7px; border-radius:20px;
}
.cdcam-badge-verificado .ti{ font-size:13px; }

.cdcam-estado-horario{
    display:flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:600; margin-top:6px;
}
.cdcam-estado-horario-punto{ width:8px; height:8px; border-radius:50%; }
.cdcam-estado-abierto{ color:#2c8a4f; }
.cdcam-estado-abierto .cdcam-estado-horario-punto{ background:#3fae63; }
.cdcam-estado-cerrado{ color:#8a3f3f; }
.cdcam-estado-cerrado .cdcam-estado-horario-punto{ background:#c95c5c; }

@media (max-width:780px){
    .cdcam-punto-compra-portada{ height:150px; }
}


.cdcam-perfil-punto-compra .cdcam-perfil-vitrina-logo {
    margin-top: -45px; /* la mitad de los 90px de alto del logo */
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
}

@media (max-width: 600px) {
    /* El logo trae width/height:90px como estilo inline desde el PHP, así
       que solo un !important en CSS externo lo puede pisar en el celular. */
    .cdcam-perfil-punto-compra .cdcam-perfil-vitrina-logo {
        width: 64px !important;
        height: 64px !important;
        margin-top: -32px !important; /* la mitad de 64px */
    }

    /* Orden en celular: logo y café/cacao en la misma fila (los chips van
       "al frente" del logo); debajo, el nombre, el horario y el botón,
       cada uno en su propia línea. */
    .cdcam-perfil-punto-compra .cdcam-perfil-vitrina-logo {
        order: 1 !important;
    }
    .cdcam-perfil-punto-compra .cdcam-perfil-vitrina-meta {
        order: 2 !important;
        width: auto !important; /* el CSS general le pone 100%; por eso saltaba a su propia línea */
        justify-content: flex-start !important;
    }
    .cdcam-perfil-punto-compra .cdcam-fila-nombre-verificado {
        order: 3 !important;
        width: 100% !important;
    }
    .cdcam-perfil-punto-compra .cdcam-estado-horario {
        order: 4 !important;
        width: 100% !important;
    }
    .cdcam-perfil-punto-compra .cdcam-perfil-vitrina-boton-contacto {
        order: 5 !important;
        width: 100% !important;
    }
}

.cdcam-perfil-punto-compra .cdcam-perfil-vitrina-encabezado {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--cdcam-color-borde);
}

.cdcam-perfil-punto-compra .cdcam-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
}

.cdcam-perfil-punto-compra .cdcam-chip-cafe {
    background: #fbe9df;
    color: #a4441e;
}

.cdcam-perfil-punto-compra .cdcam-chip-cacao {
    background: #e9f0e4;
    color: #2f6b4f;
}

.cdcam-perfil-punto-compra .cdcam-datos-vendedor-fila .ti {
    color: #2f6b4f;
}

.cdcam-perfil-punto-compra .cdcam-datos-vendedor-etiqueta {
    color: #8a9080;
}



.cdcam-perfil-punto-compra .cdcam-datos-vendedor-titulo {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cdcam-color-texto-suave);
    margin: 0 0 4px;
}

.cdcam-perfil-punto-compra .cdcam-boton-como-llegar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: -8px 0 0 30px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--cdcam-color-borde);
    background: #fff;
    color: #2f6b4f;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
}

.cdcam-perfil-punto-compra .cdcam-boton-como-llegar:hover {
    border-color: #2f6b4f;
    background: var(--cdcam-color-primario-fondo);
}

.cdcam-dias-horario {
    display: flex;
    gap: 6px;
    margin: -8px 0 0 30px;
}

.cdcam-dia-pildora {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.cdcam-perfil-punto-compra .cdcam-dia-abierto {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-perfil-punto-compra .cdcam-dia-cerrado {
    background: var(--cdcam-color-fondo-panel);
    color: var(--cdcam-color-texto-suave);
}

.cdcam-perfil-punto-compra .cdcam-dia-hoy {
    outline: 2px solid #2f6b4f;
    outline-offset: 1px;
}

/* Mismas píldoras de días, pero para la ficha pública de la VITRINA (el
   punto de compra usa las reglas anteriores, con su propio wrapper). */
.cdcam-perfil-vitrina .cdcam-dia-abierto {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-perfil-vitrina .cdcam-dia-cerrado {
    background: var(--cdcam-color-fondo-panel);
    color: var(--cdcam-color-texto-suave);
}

.cdcam-perfil-vitrina .cdcam-dia-hoy {
    outline: 2px solid #2f6b4f;
    outline-offset: 1px;
}

.cdcam-perfil-punto-compra .cdcam-chat-punto-compra {
    background: #ffffff;
    border-color: #e2e6db;
}

.cdcam-perfil-punto-compra .cdcam-chat-punto-compra-encabezado {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    border-bottom: none;
    padding: 16px 20px 4px;
    border-top-left-radius: var(--cdcam-radio);
    border-top-right-radius: var(--cdcam-radio);
}

.cdcam-perfil-punto-compra .cdcam-chat-form-inicial input,
.cdcam-perfil-punto-compra .cdcam-mensajes-form-responder textarea {
    background: #f6f7f2;
    border: 0.5px solid #e2e6db;
}

.cdcam-perfil-punto-compra .cdcam-boton-primario {
    background: #2f6b4f;
    color: #ffffff;
    border-color: transparent;
}

.cdcam-perfil-punto-compra .cdcam-boton-primario:hover {
    background: #234f3a;
    color: #ffffff;
    box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.08);
}

.cdcam-perfil-punto-compra .cdcam-boton-whatsapp {
    background: #2f6b4f;
}

.cdcam-perfil-punto-compra .cdcam-boton-whatsapp:hover {
    background: #234f3a;
}


/* ---- Arregla el subrayado que el tema le mete a los botones ---- */
.cdcam-boton-whatsapp,
.cdcam-boton-whatsapp-bloqueado,
.cdcam-boton-primario,
.cdcam-boton-secundario,
.cdcam-boton-eliminar {
    text-decoration: none !important;
}

/* ---- Corrige el botón "Contactar" bloqueado (candado):
   que NO se pinte de verde, se queda gris como estaba pensado ---- */
.cdcam-perfil-punto-compra .cdcam-boton-whatsapp.cdcam-boton-whatsapp-bloqueado {
    background: var(--cdcam-color-secundario);
    color: var(--cdcam-color-texto-suave);
}

/* ==========================================================================
   CHAT EN VIVO DE LA VITRINA — dentro de la pestaña "Datos del vendedor"
   Ámbito: public/shortcode-vitrina-perfil.php (.cdcam-chat-vitrina).
   Mismo diseño que el chat del punto de compra, pero con la paleta pastel
   de la vitrina (encabezado pastel con letra oscura, sin verde fuerte).
========================================================================== */

.cdcam-chat-vitrina-seccion {
    margin-top: 26px;
    border-top: 1px solid var(--cdcam-color-borde);
    padding-top: 20px;
}

.cdcam-chat-vitrina {
    border: 1px solid var(--cdcam-color-borde);
    border-radius: var(--cdcam-radio);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 720px;
}

.cdcam-chat-vitrina-encabezado {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--cdcam-color-borde);
}

.cdcam-chat-vitrina-encabezado .ti {
    font-size: 18px;
}

.cdcam-chat-vitrina .cdcam-chat-contenido {
    padding: 16px 18px;
}

.cdcam-chat-vitrina .cdcam-mensajes-hilo-mensajes {
    border: none;
    background: transparent;
    padding: 0;
    max-height: 300px;
}

.cdcam-chat-vitrina .cdcam-chat-form-inicial input,
.cdcam-chat-vitrina .cdcam-mensajes-form-responder textarea {
    background: #f6f7f2;
    border: 1px solid #e2e6db;
}

.cdcam-chat-vitrina .cdcam-boton-primario {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    border-color: rgba(39, 80, 10, 0.22);
}

.cdcam-chat-vitrina .cdcam-boton-primario:hover {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    box-shadow: inset 0 0 0 100vmax rgba(39, 80, 10, 0.1);
}

.cdcam-chat-vitrina-nota {
    font-size: 12px;
    color: var(--cdcam-color-texto-suave);
    margin: 10px 2px 0;
    max-width: 720px;
}

/* El badge de la pestaña "Mensajes" del panel del comerciante va junto al
   texto del tab (el mismo .cdcam-mensajes-badge ya da la píldora). */
.cdcam-panel-tab-badge {
    margin-left: 7px;
    display: inline-flex;
}

/* ==========================================================================
   FICHA DE VITRINA — DATOS + CHAT AL FRENTE (solo escritorio)
   En pantallas angostas (celular) el chat se mantiene debajo de los datos,
   como estaba. En pantallas anchas (>= 881px) los datos del vendedor y el
   chat en vivo se ponen lado a lado: datos a la izquierda, chat a la
   derecha ("al frente" de los datos), con tarjetas parejas.
========================================================================== */

.cdcam-vitrina-cuerpo-chat {
    /* En móvil no hay layout especial: los bloques se apilan con sus
       márgenes propios (chat debajo de los datos). */
}

@media (min-width: 881px) {

    .cdcam-vitrina-cuerpo-chat {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 18px;
        align-items: start;
        max-width: 860px;
        margin: 0 auto;
    }

    .cdcam-vitrina-cuerpo-chat .cdcam-datos-vendedor {
        background: #fff;
        border: 1px solid var(--cdcam-color-borde);
        border-radius: var(--cdcam-radio);
        padding: 20px;
        margin: 0;
    }

    .cdcam-vitrina-cuerpo-chat .cdcam-chat-vitrina-seccion {
        margin-top: 0;
        border-top: 0;
        padding-top: 0;
    }

    .cdcam-vitrina-cuerpo-chat .cdcam-chat-vitrina,
    .cdcam-vitrina-cuerpo-chat .cdcam-chat-vitrina-nota {
        max-width: none;
    }
}

/* ==========================================================================
   PESTAÑAS DEL PANEL EN CELULAR / TABLET: fila deslizable con "pedacito"
   Los botones (Mis Datos, Mis Productos, Mi Inventario…) se muestran en una
   sola fila que se desliza horizontalmente. Sin barrita de scroll visible,
   con botones un poco más compactos para que SIEMPRE asome un pedazo del
   siguiente y se entienda que hay más. El desvanecido lo prende/ apaga el
   JS (assets/js/publico.js → cdcamPistasTabsPanel) solo cuando sobra
   contenido hacia la derecha (o hacia la izquierda al volver).
========================================================================== */

@media (max-width: 780px) {
    .cdcam-panel-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cdcam-panel-tabs::-webkit-scrollbar {
        display: none;
    }

    .cdcam-panel-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 13px;
    }

    .cdcam-panel-tabs.cdcam-tabs-fade-der {
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 22px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 22px), transparent 100%);
    }

    .cdcam-panel-tabs.cdcam-tabs-fade-izq {
        -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 calc(100% - 22px), transparent 100%);
        mask-image: linear-gradient(270deg, #000 0%, #000 calc(100% - 22px), transparent 100%);
    }
}

/* ==========================================================================
   VITRINA PÚBLICA — mejoras 1.10.15
   Ancho completo en móvil, chips de categoría con color (2 visibles en
   celular), bloque "abierto/cerrado + horario" junto al botón de Chat en
   vivo, y descuento más llamativo en las tarjetas de producto.
========================================================================== */

/* ---- Columna de contacto: estado + horario encima del botón "Chat en vivo" ---- */
.cdcam-perfil-vitrina-contacto-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cdcam-perfil-vitrina-contacto-caja .cdcam-perfil-vitrina-boton-contacto {
    margin-top: 2px !important;
}

.cdcam-perfil-vitrina-contacto-horario {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cdcam-color-texto-suave);
}

/* ---- Chips de categoría con color (paleta por posición) ---- */
.cdcam-perfil-vitrina-meta-categorias {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.cdcam-perfil-vitrina-meta-categorias .cdcam-chip-categoria {
    border: 1px solid transparent;
}

/* ---- Promoción en las tarjetas: píldora amarilla (rama ámbar de la paleta)
   que dice "Mejor oferta"; la distinguen el precio tachado y su tamaño algo
   mayor. Mismo esquema en el catálogo general y en la vitrina, porque
   comparten estos estilos. ---- */
.cdcam-tarjeta-producto .cdcam-cinta-promocion {
    background: #F9E4A6; /* amarillo claro, un pelín más fuerte que alerta-fondo */
    color: #633806;      /* ámbar badge_texto de la paleta */
    font-size: 13px;
    font-weight: 800;
    padding: 4px 12px;
    letter-spacing: 0.02em;
    /* Borde fino ámbar + halo blanco suave: la píldora se distingue aunque la
       foto del producto sea amarilla, clara u oscura. */
    border: 1px solid rgba(99, 56, 6, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 2px 8px rgba(99, 56, 6, 0.22);
}

.cdcam-tarjeta-producto .cdcam-tarjeta-producto-precio-promo {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    font-size: 16px;
    font-weight: 800;
    /* En móvil no se parte en dos renglones: precio anterior + precio nuevo
       quedan en una sola línea de la píldora. */
    flex-wrap: nowrap;
    white-space: nowrap;
}

.cdcam-tarjeta-producto .cdcam-tarjeta-producto-precio-anterior {
    color: var(--cdcam-color-primario-oscuro);
    opacity: 0.72;
}

/* ---- Móvil: la píldora de promoción un poco más compacta para que entre
   completa (tachado + precio nuevo / unidad) en las tarjetas angostas ---- */
@media (max-width: 600px) {
    .cdcam-tarjeta-producto .cdcam-tarjeta-producto-precio-promo {
        font-size: 12.5px;
        padding: 4px 10px;
        gap: 2px 6px;
    }

    .cdcam-tarjeta-producto .cdcam-tarjeta-producto-precio-anterior {
        font-size: 10.5px;
    }

    .cdcam-tarjeta-producto .cdcam-cinta-promocion {
        font-size: 12px;
        padding: 4px 11px;
    }
}

/* ==========================================================================
   Cintas "Agotado" y "Mejor oferta" como SELLO DIAGONAL DE ESQUINA (1.11.11)
   Banda ancha que cruza la esquina superior izquierda en diagonal; el
   sobrante se recorta solo con el overflow:hidden del contenedor de la foto.
   Quedan más cuadradas (radio pequeño) y muy visibles sobre cualquier foto.
   El color, el borde y el halo de cada cinta se conservan de sus reglas base.
========================================================================== */
.cdcam-tarjeta-producto .cdcam-cinta-agotado,
.cdcam-tarjeta-producto .cdcam-cinta-promocion {
    top: 10px;
    left: -62px;
    width: 200px;
    padding: 5px 14px;
    text-align: center;
    border-radius: 6px;
    transform: rotate(-45deg);
    box-sizing: border-box;
    white-space: nowrap;
    z-index: 1;
}

@media (max-width: 600px) {
    .cdcam-tarjeta-producto .cdcam-cinta-agotado,
    .cdcam-tarjeta-producto .cdcam-cinta-promocion {
        top: 8px;
        left: -52px;
        width: 155px;
        padding: 4px 10px;
    }
}

/* ---- Móvil: vitrina a todo el ancho (fuera de Elementor), 2 chips ---- */
@media (max-width: 600px) {
    body:not(.elementor-page) .cdcam-perfil-vitrina {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        box-sizing: border-box;
        padding: 0 16px;
    }

    /* Dentro de Elementor la vitrina no rompe el contenedor: usa el ancho del
       widget con un pequeño aire lateral. */
    .elementor-page .cdcam-perfil-vitrina {
        width: 100%;
        margin-left: 0;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .cdcam-perfil-vitrina-meta-categorias .cdcam-chip-categoria:nth-child(n+3) {
        display: none;
    }

    .cdcam-perfil-vitrina-encabezado > .cdcam-perfil-vitrina-contacto-caja {
        order: 5;
        width: 100%;
        margin-top: 4px;
    }

    .cdcam-perfil-vitrina-contacto-caja .cdcam-perfil-vitrina-boton-contacto {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   VITRINA PÚBLICA — mejoras 1.10.16
   Separador bajo el encabezado, texto legible en el botón "Preguntar" y
   soporte para el mensaje automático de interés por producto.
========================================================================== */

/* Separador visual entre el bloque del logo/nombre/bodega/botón y lo de
   abajo (solo dentro del perfil de vitrina, para no tocar el punto de
   compra ni otros usos). */
.cdcam-perfil-vitrina .cdcam-perfil-vitrina-tabs {
    border-top: 1px solid var(--cdcam-color-borde);
    padding-top: 22px;
    margin-top: 6px;
}

/* El botón verde "Preguntar" de las tarjetas siempre con texto oscuro
   legible (antes el :visited/:focus dejaba el texto en blanco sobre el
   verde claro). El :not() protege el botón gris "Agotado". */
.cdcam-tarjeta-producto .cdcam-boton-whatsapp:not(.cdcam-boton-whatsapp-bloqueado),
.cdcam-tarjeta-producto .cdcam-boton-whatsapp:not(.cdcam-boton-whatsapp-bloqueado):visited,
.cdcam-tarjeta-producto .cdcam-boton-whatsapp:not(.cdcam-boton-whatsapp-bloqueado):active,
.cdcam-tarjeta-producto .cdcam-boton-whatsapp:not(.cdcam-boton-whatsapp-bloqueado):focus {
    color: var(--cdcam-color-primario-oscuro) !important;
}

/* ---- Botón en tarjetas agotadas: rojo suave de la paleta (mismo acabado
   para el "Agotado" bloqueado de la vitrina y para el enlace "Ver producto"
   del catálogo cuando el producto está agotado). Va al final para ganar a la
   regla de legibilidad verde de 1.10.16 y a los hovers verdes de la tarjeta.
   El botón "Contactar" bloqueado del punto de compra no está en una tarjeta,
   así que no se ve afectado. ---- */
.cdcam-tarjeta-producto.cdcam-producto-agotado .cdcam-boton-whatsapp,
.cdcam-tarjeta-producto.cdcam-producto-agotado .cdcam-boton-whatsapp:visited,
.cdcam-tarjeta-producto.cdcam-producto-agotado .cdcam-boton-whatsapp:active,
.cdcam-tarjeta-producto.cdcam-producto-agotado .cdcam-boton-whatsapp:focus {
    background: var(--cdcam-color-error-fondo);
    border-color: rgba(153, 60, 29, 0.28);
    color: var(--cdcam-color-error) !important;
    box-shadow: none;
}

.cdcam-tarjeta-producto.cdcam-producto-agotado .cdcam-boton-whatsapp:hover {
    background: var(--cdcam-color-error-fondo);
    border-color: var(--cdcam-color-error);
    color: var(--cdcam-color-error) !important;
    box-shadow: inset 0 0 0 100vmax rgba(153, 60, 29, 0.12);
}

/* ==========================================================================
   PUBLICIDAD — anuncios (1.10.52)
   Creativos libres que crea el admin. Rotan en productos/locales/bodegas
   (un anuncio al azar por carga: banner arriba de la grilla o tarjeta al
   inicio) y también salen vía shortcode [cdcam_publicidad] en cualquier
   página. La etiqueta "Publicidad" va discreta, en gris neutro, para no
   confundirse con la píldora amarilla de ofertas.
========================================================================== */

.cdcam-anuncio {
    position: relative;
    display: flex;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--cdcam-color-borde-crema);
    border-radius: var(--cdcam-radio-tarjeta, 16px);
    box-shadow: var(--cdcam-sombra-suave);
    color: var(--cdcam-color-texto);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cdcam-anuncio:visited,
.cdcam-anuncio:hover,
.cdcam-anuncio:focus,
.cdcam-anuncio:active {
    color: var(--cdcam-color-texto);
}

/* Nada de subrayados ni fondos de enlace, ni en el bloque ni en sus hijos, en
   ningún estado (los temas suelen subrayar los <a> y sus hijos al pasar el
   ratón o quedar visitados). Gana aunque el tema use !important después. */
.cdcam-anuncio,
.cdcam-anuncio * {
    text-decoration: none !important;
    border-bottom: none !important;
    background-image: none !important;
}

.cdcam-anuncio:hover {
    box-shadow: var(--cdcam-sombra-media);
    transform: translateY(-1px);
}

.cdcam-anuncio-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #E5E0D5;
    color: var(--cdcam-color-texto-suave);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.2;
}

.cdcam-anuncio-media {
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
}

.cdcam-anuncio-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cdcam-anuncio-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 96px;
    background: var(--cdcam-color-alerta-fondo);
    color: var(--cdcam-color-alerta);
    font-size: 30px;
}

.cdcam-anuncio-cuerpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 18px;
    min-width: 0;
}

.cdcam-anuncio-titulo {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El texto opcional siempre ocupa MÍNIMO 2 líneas y se recorta a 2 con "…":
   así, escribas mucho o nada, la tarjeta mantiene el mismo alto. */
.cdcam-anuncio-texto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--cdcam-color-texto-suave);
    min-height: calc(1.45em * 2);
}

.cdcam-anuncio-boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
}

.cdcam-anuncio-boton .ti {
    font-size: 14px;
}

/* ---- Formato banner: franja horizontal sobre la grilla ---- */
.cdcam-anuncio-banner {
    flex-direction: row;
    align-items: stretch;
    margin: 2px 0 18px;
}

.cdcam-anuncio-banner .cdcam-anuncio-media {
    width: 240px;
    max-width: 34%;
    min-height: 120px;
}

.cdcam-anuncio-banner .cdcam-anuncio-cuerpo {
    justify-content: center;
    padding: 18px 22px;
}

.cdcam-anuncio-banner .cdcam-anuncio-titulo {
    font-size: 17px;
}

/* ---- Formato tarjeta: celda mezclada al inicio de la grilla ---- */
.cdcam-anuncio-tarjeta {
    flex-direction: column;
    height: 100%;
}

.cdcam-anuncio-tarjeta .cdcam-anuncio-media {
    width: 100%;
    height: 168px;
}

.cdcam-anuncio-tarjeta .cdcam-anuncio-placeholder {
    min-height: 168px;
}

/* ---- Banner: SIEMPRE horizontal, igual en celular, tablet y PC ----
   En pantallas angostas la foto se encoge para mantener la misma estructura:
   imagen a la izquierda y contenido a la derecha. Nunca se apila. */
.cdcam-anuncio-banner .cdcam-anuncio-media {
    width: clamp(96px, 26%, 240px);
    min-height: 120px;
}

@media (max-width: 700px) {
    .cdcam-anuncio-banner {
        margin: 2px 0 14px;
    }

    .cdcam-anuncio-banner .cdcam-anuncio-media {
        width: clamp(82px, 34%, 168px);
        min-height: 92px;
    }

    .cdcam-anuncio-banner .cdcam-anuncio-cuerpo {
        padding: 12px 14px;
    }

    .cdcam-anuncio-banner .cdcam-anuncio-titulo {
        font-size: 15px;
    }
}

/* ==========================================================================
   PUBLICIDAD — ajustes 1.10.53
   Slot dentro de la grilla, fila completa del banner intercalado y tarjeta
   que se estira igual que sus vecinas (mismo alto aunque el texto opcional
   cambie). El contenedor .cdcam-anuncio-slot se inyecta como un hijo más del
   grid; el JS de publico.js lo mueve al terminar la fila elegida.
========================================================================== */

.cdcam-anuncio-slot {
    display: block;
    min-width: 0;
}

/* Banner intercalado: ocupa TODA la fila de la grilla en la que caiga. */
.cdcam-anuncio-slot-banner {
    grid-column: 1 / -1;
}

.cdcam-anuncio-slot-banner > .cdcam-anuncio-banner {
    margin: 0;
    height: 100%;
}

/* Tarjeta intercalada: estira el anuncio hasta llenar la celda de la grilla,
   así la fila se ve pareja con las demás tarjetas del catálogo. */
.cdcam-anuncio-slot-tarjeta {
    height: 100%;
}

.cdcam-anuncio-slot-tarjeta > .cdcam-anuncio {
    height: 100%;
}

.cdcam-anuncio-slot-tarjeta .cdcam-anuncio-cuerpo {
    flex: 1;
}

.cdcam-anuncio-slot-tarjeta .cdcam-anuncio-boton {
    margin-top: auto;
}

/* La foto del anuncio responde igual que la de las tarjetas de producto:
   ocupa el ancho de la tarjeta y se ajusta sin deformarse. */
.cdcam-anuncio-tarjeta .cdcam-anuncio-media img,
.cdcam-anuncio-tarjeta .cdcam-anuncio-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.cdcam-anuncio-tarjeta .cdcam-anuncio-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
}

/* ==========================================================================
   PUBLICIDAD — anuncio "solo imagen" (1.10.54)
   El anuncio es UNA sola foto que ocupa todo el formato elegido: el banner
   se muestra como una imagen panorámica a lo ancho y la tarjeta como una
   imagen que llena su celda. Se usa la misma estructura en cualquier tamaño
   de pantalla (la foto se recorta con object-fit: cover para que siempre
   quede bien encuadrada).
========================================================================== */

.cdcam-anuncio-solo-imagen {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.cdcam-anuncio-solo-imagen .cdcam-anuncio-solo-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

/* Banner solo-imagen: panorámico a lo ancho (se encoge de alto en pantallas
   estrechas manteniendo la misma proporción en celular, tablet y PC). */
.cdcam-anuncio-banner.cdcam-anuncio-solo-imagen {
    aspect-ratio: 21 / 9;
    margin: 2px 0 18px;
}

.cdcam-anuncio-slot-banner > .cdcam-anuncio-banner.cdcam-anuncio-solo-imagen {
    margin: 0;
    height: auto;
}

/* Tarjeta solo-imagen: llena su celda con la proporción típica de tarjeta. */
.cdcam-anuncio-tarjeta.cdcam-anuncio-solo-imagen {
    aspect-ratio: 4 / 3;
}

.cdcam-anuncio-slot-tarjeta > .cdcam-anuncio-tarjeta.cdcam-anuncio-solo-imagen {
    aspect-ratio: auto;
}

/* ==========================================================================
   PUBLICIDAD — tope de alto, precios y "texto encima de la foto" (1.10.56)
   - El banner de foto ancha (solo imagen o con fondo) queda con tope de alto
     en pantallas grandes; en móvil se encoge igual que antes.
   - Precios opcionales del anuncio, con tachado + rebaja + etiqueta Oferta.
   - Modo .cdcam-anuncio-fondo: la imagen es el fondo y el contenido va
     encima, con una sombra detrás del texto controlada por la variable
     --cdcam-fondo-sombra (0-0.9) que fija el editor.
========================================================================== */

/* Tope de alto: banner de foto a lo ancho nunca más alto que 300px en PC. */
.cdcam-anuncio-banner.cdcam-anuncio-solo-imagen,
.cdcam-anuncio-banner.cdcam-anuncio-fondo {
    aspect-ratio: 21 / 9;
    max-height: 300px;
}

/* ---- Precios opcionales del anuncio (modo normal y tarjeta) ---- */
.cdcam-anuncio-precios {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.cdcam-anuncio-precio {
    font-size: 17px;
    font-weight: 800;
    color: var(--cdcam-color-primario-oscuro);
    white-space: nowrap;
}

/* Precio original: va TACHADO. Lleva !important porque el blindaje anti-tema
   ".cdcam-anuncio * { text-decoration: none !important }" apagaría la línea. */
.cdcam-anuncio .cdcam-anuncio-precio-anterior {
    font-size: 13px;
    font-weight: 600;
    color: var(--cdcam-color-texto-suave);
    text-decoration: line-through !important;
    white-space: nowrap;
}

.cdcam-anuncio-etiqueta-oferta {
    background: #F9E4A6;
    color: #633806;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* El precio de descuento y su etiqueta "Oferta" forman una unidad que nunca
   se separa en líneas distintas (sobre todo importante en móvil); solo el
   precio original tachado puede bajar de línea si falta espacio. */
.cdcam-anuncio-precio-grupo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

/* En la tarjeta (computador, tablet y celular) precio normal (tachado) +
   precio de rebaja + etiqueta "Oferta" van SIEMPRE en UNA sola fila. En
   móvil se compactan los tamaños para que la fila quepa en las celdas de 2
   columnas sin recortarse. La rebaja + "Oferta" nunca se separan. */
.cdcam-anuncio-tarjeta .cdcam-anuncio-precios {
    flex-wrap: nowrap;
    max-width: 100%;
    gap: 4px;
}

.cdcam-anuncio-tarjeta .cdcam-anuncio-precio-grupo {
    gap: 4px;
}

.cdcam-anuncio-tarjeta .cdcam-anuncio-precio {
    font-size: 14px;
}

.cdcam-anuncio-tarjeta .cdcam-anuncio-precio-anterior {
    font-size: 12px;
}

.cdcam-anuncio-tarjeta .cdcam-anuncio-etiqueta-oferta {
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 0.04em;
}

/* ---- Modo "la foto es el fondo" (1.10.56 + 1.10.57) ----
   La imagen es el fondo del anuncio y el contenido va encima. El lado del
   oscurecido (izq/der/centro/abajo/arriba) viaja en [data-cdcam-fondo] y la
   intensidad/extensión en variables que pone el editor:
   --cdcam-fondo-sombra  (0-0.9) cuánto oscurece
   --cdcam-fondo-alcance (15-95%) hasta dónde llega el degradado             */

/* El banner-fondo ocupa SIEMPRE todo el ancho (igual que solo-imagen). */
.cdcam-anuncio-banner.cdcam-anuncio-fondo {
    width: 100%;
    max-width: none;
}

.cdcam-anuncio-fondo {
    position: relative;
    overflow: hidden;
}

.cdcam-anuncio-fondo .cdcam-anuncio-fondo-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

/* La tarjeta-fondo conserva un alto mínimo para que la foto se vea aunque
   el texto sea corto (en el slot igual se estira al alto de su fila). */
.cdcam-anuncio-tarjeta.cdcam-anuncio-fondo {
    min-height: 260px;
}

/* Velo: la sombra nace del lado elegido y se desvanece según el alcance. */
.cdcam-anuncio-fondo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.cdcam-anuncio-fondo[data-cdcam-fondo="izq"]::before {
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--cdcam-fondo-sombra, 0.55)) 0%,
        rgba(0, 0, 0, calc(var(--cdcam-fondo-sombra, 0.55) * 0.65)) calc(var(--cdcam-fondo-alcance, 55%) * 0.45),
        rgba(0, 0, 0, 0) var(--cdcam-fondo-alcance, 55%)
    );
}

.cdcam-anuncio-fondo[data-cdcam-fondo="der"]::before {
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, var(--cdcam-fondo-sombra, 0.55)) 0%,
        rgba(0, 0, 0, calc(var(--cdcam-fondo-sombra, 0.55) * 0.65)) calc(var(--cdcam-fondo-alcance, 55%) * 0.45),
        rgba(0, 0, 0, 0) var(--cdcam-fondo-alcance, 55%)
    );
}

.cdcam-anuncio-fondo[data-cdcam-fondo="abajo"]::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, var(--cdcam-fondo-sombra, 0.55)) 0%,
        rgba(0, 0, 0, calc(var(--cdcam-fondo-sombra, 0.55) * 0.65)) calc(var(--cdcam-fondo-alcance, 55%) * 0.45),
        rgba(0, 0, 0, 0) var(--cdcam-fondo-alcance, 55%)
    );
}

.cdcam-anuncio-fondo[data-cdcam-fondo="arriba"]::before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--cdcam-fondo-sombra, 0.55)) 0%,
        rgba(0, 0, 0, calc(var(--cdcam-fondo-sombra, 0.55) * 0.65)) calc(var(--cdcam-fondo-alcance, 55%) * 0.45),
        rgba(0, 0, 0, 0) var(--cdcam-fondo-alcance, 55%)
    );
}

.cdcam-anuncio-fondo[data-cdcam-fondo="centro"]::before {
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, var(--cdcam-fondo-sombra, 0.55)) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    background-size: calc(var(--cdcam-fondo-alcance, 55%) * 1.6) 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.cdcam-anuncio-fondo .cdcam-anuncio-cuerpo {
    position: relative;
    z-index: 2;
    align-self: center;
}

/* ---- Dónde se apoya el texto según el lado elegido ---- */

/* Tarjeta, lado abajo: contenido abajo, ancho completo, precio junto al botón. */
.cdcam-anuncio-slot-tarjeta > .cdcam-anuncio-fondo .cdcam-anuncio-cuerpo {
    flex: none;
}

.cdcam-anuncio-tarjeta.cdcam-anuncio-fondo[data-cdcam-fondo="abajo"] .cdcam-anuncio-cuerpo {
    margin-top: auto;
    align-self: stretch;
}

.cdcam-anuncio-tarjeta.cdcam-anuncio-fondo[data-cdcam-fondo="arriba"] .cdcam-anuncio-cuerpo {
    margin-bottom: auto;
    align-self: stretch;
}

.cdcam-anuncio-tarjeta.cdcam-anuncio-fondo[data-cdcam-fondo="centro"] .cdcam-anuncio-cuerpo {
    margin-top: auto;
    margin-bottom: auto;
    align-self: stretch;
}

/* Banner-fondo: el bloque de texto nunca pasa de la mitad del banner
   (PC, tablet y móvil). El botón "Ver más" se mantiene como siempre:
   debajo del precio, a la izquierda. */
.cdcam-anuncio-banner.cdcam-anuncio-fondo .cdcam-anuncio-cuerpo {
    width: 50%;
    max-width: 50%;
}

.cdcam-anuncio-banner.cdcam-anuncio-fondo[data-cdcam-fondo="der"] .cdcam-anuncio-cuerpo {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
    align-items: flex-end;
}

.cdcam-anuncio-banner.cdcam-anuncio-fondo[data-cdcam-fondo="centro"] .cdcam-anuncio-cuerpo {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-items: center;
}

.cdcam-anuncio-fondo .cdcam-anuncio-titulo {
    color: #FFFFFF;
}

.cdcam-anuncio-fondo .cdcam-anuncio-texto {
    color: rgba(255, 255, 255, 0.88);
}

.cdcam-anuncio-fondo .cdcam-anuncio-boton {
    background: #FFFFFF;
    color: #2A241A;
}

.cdcam-anuncio-fondo .cdcam-anuncio-precio {
    color: #FFFFFF;
}

.cdcam-anuncio-fondo .cdcam-anuncio-precio-anterior {
    color: rgba(255, 255, 255, 0.85);
}

/* El fondo estira toda la celda cuando va como tarjeta intercalada. */
.cdcam-anuncio-slot-tarjeta > .cdcam-anuncio-fondo {
    height: 100%;
}

/* El banner con fondo dentro del slot también lleva el tope de alto. */
.cdcam-anuncio-slot-banner > .cdcam-anuncio-banner.cdcam-anuncio-fondo {
    margin: 0;
    height: auto;
}

/* En móviles el contenido sobre la foto no queda pegado al borde. */
@media (max-width: 600px) {
    .cdcam-anuncio-fondo .cdcam-anuncio-cuerpo {
        padding: 14px 16px;
        gap: 5px;
    }

    /* Banner con texto encima de la foto: en móvil deja de ser 21:9 (si no,
       el contenido se desborda y el título/botón quedan pegados a los
       bordes). Crece con su texto y respira arriba y abajo. */
    .cdcam-anuncio-banner.cdcam-anuncio-fondo {
        aspect-ratio: auto;
        max-height: none;
        height: auto;
    }

    .cdcam-anuncio-banner.cdcam-anuncio-fondo .cdcam-anuncio-cuerpo {
        padding-top: 18px;
        padding-bottom: 22px;
    }

    /* En el banner con texto sobre la foto, en celular los tres van en UNA
       sola fila: precio normal (tachado) + precio de rebaja + "Oferta". */
    .cdcam-anuncio-banner.cdcam-anuncio-fondo .cdcam-anuncio-precios {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .cdcam-anuncio-banner.cdcam-anuncio-fondo .cdcam-anuncio-precio-grupo {
        gap: 4px;
    }

    .cdcam-anuncio-banner.cdcam-anuncio-fondo .cdcam-anuncio-precio {
        font-size: 13px;
    }

    .cdcam-anuncio-banner.cdcam-anuncio-fondo .cdcam-anuncio-precio-anterior {
        font-size: 11px;
    }

    .cdcam-anuncio-banner.cdcam-anuncio-fondo .cdcam-anuncio-etiqueta-oferta {
        font-size: 9px;
        padding: 2px 6px;
        letter-spacing: 0.04em;
    }

    .cdcam-anuncio-banner.cdcam-anuncio-fondo .cdcam-anuncio-texto {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .cdcam-anuncio-tarjeta.cdcam-anuncio-fondo .cdcam-anuncio-texto {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
}

/* ==========================================================================
   RESPONSIVE — COMPRADORES EN MÓVIL (1.10.79)
   En celular la grilla de compradores SIEMPRE muestra 2 columnas (tarjetas
   compactas). Se declara al final para ganar sobre el auto-fill base y sobre
   la herencia de .cdcam-grid-locales.
========================================================================== */
@media (max-width: 600px) {
    .cdcam-grid-compradores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* ==========================================================================
   RESPONSIVE — ANUNCIO TARJETA: precios en UNA sola fila en móvil (1.10.81)
   En celular (grilla de 2 columnas) la fila "precio tachado + rebaja +
   Oferta" se compacta y el contenido de la tarjeta gana ancho (menos padding
   lateral) para que la fila quepa COMPLETA sin recortar la etiqueta Oferta.
========================================================================== */
@media (max-width: 600px) {
    .cdcam-anuncio-tarjeta .cdcam-anuncio-cuerpo {
        padding: 12px 12px;
    }

    .cdcam-anuncio-tarjeta .cdcam-anuncio-precios {
        flex-wrap: nowrap;
        gap: 2px;
    }

    .cdcam-anuncio-tarjeta .cdcam-anuncio-precio-grupo {
        gap: 2px;
    }

    .cdcam-anuncio-tarjeta .cdcam-anuncio-precio {
        font-size: 12.5px;
    }

    .cdcam-anuncio-tarjeta .cdcam-anuncio-precio-anterior {
        font-size: 10.5px;
    }

    .cdcam-anuncio-tarjeta .cdcam-anuncio-etiqueta-oferta {
        font-size: 7.5px;
        padding: 1px 4px;
        letter-spacing: 0;
    }
}

/* ==========================================================================
   HARDENING ELEMENTOR (1.10.91)
   Los contenedores de los listados siempre ocupan el 100% de su contenedor y
   nunca desbordan (min-width:0). Así, aunque el shortcode viva dentro de una
   columna/sección de Elementor (más angosta o más ancha que el viewport), las
   tarjetas se mantienen bien en PC, tablet y celular.
========================================================================== */
.cdcam-lista-locales,
.cdcam-lista-compradores,
.cdcam-catalogo,
.cdcam-catalogo-bodegas,
.cdcam-grid-bodegas,
.cdcam-grid-locales,
.cdcam-grid-productos,
.cdcam-grid-compradores,
.cdcam-grid-promociones,
.cdcam-grid-vitrinas {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cdcam-grid-bodegas > *,
.cdcam-grid-locales > *,
.cdcam-grid-productos > *,
.cdcam-grid-compradores > *,
.cdcam-grid-promociones > *,
.cdcam-grid-vitrinas > * {
    min-width: 0;
}

/* ==========================================================================
   ELEMENTOR — IGUAL QUE ASTRA (1.10.92)
   1) Elementor inyecta ".elementor img { height:auto; max-width:100% }" y al
      cargar después pisa nuestras fotos (object-fit/height 100%). Con mayor
      especificidad (html body …) se re-declaran para que las tarjetas se vean
      igual que en Astra.
   2) Caja centrada: los listados se limitan a ~1240px centrados, imitando el
      contenedor de Astra; así aunque la sección de Elementor esté a todo el
      ancho con margen/padding 0, se ven igual que en Astra.
========================================================================== */

/* ---- Fotos: re-declarar el relleno de medios (gana al reset de Elementor) ---- */
html body .cdcam-tarjeta-producto .cdcam-tarjeta-producto-imagen img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

html body .cdcam-anuncio .cdcam-anuncio-media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

html body .cdcam-anuncio-tarjeta .cdcam-anuncio-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    min-height: 0;
    object-fit: cover;
}

html body .cdcam-anuncio-solo-imagen .cdcam-anuncio-solo-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    min-height: 0;
    object-fit: cover;
}

html body .cdcam-anuncio-fondo .cdcam-anuncio-fondo-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    min-height: 0;
    object-fit: cover;
}

/* Publicaciones campesinas: sus estilos viven inline en el shortcode, pero
   este bloque con mayor especificidad también los protege en Elementor. */
html body .cdc-publicaciones .cdc-media-item img,
html body .cdc-publicaciones .cdc-media-item video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* ---- Caja centrada igual que Astra (~1240px) ---- */
.cdcam-catalogo,
.cdcam-catalogo-bodegas,
.cdcam-lista-locales,
.cdcam-grid-bodegas,
.cdcam-grid-locales,
.cdcam-grid-productos,
.cdcam-grid-promociones {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   TARJETAS PRODUCTO/VITRINA — BLANCO LIMPIO (1.10.93)
   Se aclara el tono crema-amarillento que se veía "sucio":
   fondo blanco, borde gris frío y sombras neutras.
============================================================ */
.cdcam-tarjeta-producto {
    background: #ffffff;
    border-color: #e7e9ed;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
                0 5px 14px rgba(15, 23, 42, 0.06);
}

.cdcam-tarjeta-producto:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.cdcam-tarjeta-producto .cdcam-tarjeta-producto-imagen {
    background: linear-gradient(135deg, #f4f6f8, #e9eef3);
}

/* Logo vitrina bajo el nombre del producto: SIEMPRE circular, aunque la
   imagen subida sea larga o de otra proporción. Gana a reglas globales
   (Elementor/tema) que pongan img { height:auto; max-width:100% }. */
html body .cdcam-tarjeta-producto-vitrina .cdcam-tarjeta-producto-logo-vitrina {
    width: 16px !important;
    height: 16px !important;
    max-width: none !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: inline-block;
    flex-shrink: 0;
}

/* ============================================================
   LOGIN — TARJETA MINIMALISTA MODERNA (1.10.96)
   Tarjeta blanca con acento verde de marca, radio 16px y
   sombra neutra. Selectores con html body para ganar a
   reglas globales (Elementor/tema). No afecta a los paneles.
============================================================ */
html body .cdcam-login-caja {
    max-width: 400px;
    margin: 48px auto;
    padding: 36px 32px;
    background: #ffffff;
    border: 1px solid #e7e9ed;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 16px 40px rgba(15, 23, 42, 0.10);
    text-align: center;
}

html body .cdcam-login-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario);
}

html body .cdcam-login-titulo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #111827;
    margin: 0 0 6px;
}

html body .cdcam-login-subtitulo {
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
    margin: 0 0 22px;
}

html body .cdcam-login-formulario input[type="text"],
html body .cdcam-login-formulario input[type="password"] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 12px 46px 12px 14px;
    font-size: 14px;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html body .cdcam-login-formulario input[type="text"]:focus,
html body .cdcam-login-formulario input[type="password"]:focus {
    outline: none;
    border-color: var(--cdcam-color-primario);
    box-shadow: 0 0 0 3px rgba(59, 109, 17, 0.15);
}

html body .cdcam-login-formulario .cdcam-clave-caja input[type="password"],
html body .cdcam-login-formulario .cdcam-clave-caja input[type="text"] {
    padding-right: 44px;
}

html body .cdcam-login-formulario label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

html body .cdcam-login-formulario .cdcam-boton-primario {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    padding: 12px 16px;
    background: var(--cdcam-color-primario);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    transition: background 0.15s ease;
}

html body .cdcam-login-formulario .cdcam-boton-primario:hover {
    background: var(--cdcam-color-primario-oscuro);
}

@media (max-width: 480px) {
    html body .cdcam-login-caja {
        margin: 24px 12px;
        padding: 28px 20px;
    }
}

/* ---- Números confiables / bloqueados (1.10.98): insignia y acciones ---- */
html body .cdcam-mensajes-hilo-encabezado {
    flex-wrap: wrap;
}
html body .cdcam-mensajes-numero-acciones {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 6px 0 0;
}
html body .cdcam-mensajes-numero-badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}
html body .cdcam-mensajes-numero-confiable {
    background: #e6f6ec;
    color: #1e7e45;
}
html body .cdcam-mensajes-numero-sin-confirmar {
    background: #fff4e0;
    color: #9a6a00;
}
html body .cdcam-mensajes-numero-bloqueado {
    background: #fdeaea;
    color: #b91c1c;
}
html body .cdcam-mensajes-numero-form {
    margin: 0;
    flex: 0 0 auto;
}
html body .cdcam-mensajes-numero-confirmar,
html body .cdcam-mensajes-numero-reportar {
    background: none;
    border: 1px solid #cfd6dd;
    color: #3f4a58;
    font: inherit;
    font-size: 11px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
html body .cdcam-mensajes-numero-confirmar:hover {
    border-color: #1e7e45;
    color: #1e7e45;
}
html body .cdcam-mensajes-numero-reportar:hover {
    border-color: #b91c1c;
    color: #b91c1c;
}

/* ---- Píldoras de número en UNA sola fila en celular/tablet/PC (1.11.00) ----
   Los rótulos son siempre completos ("Número sin confirmar", "Confirmar
   número", "Reportar número falso") y la fila nunca se parte. En pantallas
   medianas solo se compacta un poco; en las muy angostas se reduce la fuente
   lo justo para que los tres rótulos completos quepan en la misma línea. */
@media (max-width: 600px) {
    html body .cdcam-mensajes-numero-acciones {
        gap: 6px;
    }
    html body .cdcam-mensajes-numero-badge {
        font-size: 10px;
        padding: 3px 7px;
    }
    html body .cdcam-mensajes-numero-confirmar,
    html body .cdcam-mensajes-numero-reportar {
        font-size: 10px;
        padding: 4px 7px;
    }
}
@media (max-width: 380px) {
    html body .cdcam-mensajes-numero-acciones {
        gap: 5px;
    }
    html body .cdcam-mensajes-numero-badge {
        font-size: 9px;
        padding: 2px 5px;
    }
    html body .cdcam-mensajes-numero-confirmar,
    html body .cdcam-mensajes-numero-reportar {
        font-size: 9px;
        padding: 3px 5px;
    }
}
@media (max-width: 340px) {
    html body .cdcam-mensajes-numero-acciones {
        gap: 4px;
    }
    html body .cdcam-mensajes-numero-badge {
        font-size: 8.5px;
        padding: 1px 4px;
    }
    html body .cdcam-mensajes-numero-confirmar,
    html body .cdcam-mensajes-numero-reportar {
        font-size: 8.5px;
        padding: 2px 4px;
    }
}

/* ==========================================================================
   TARJETA DE EJEMPLO EN LISTADOS VACÍOS
   Se muestra en vez del aviso de "no hay nada" cuando la opción está activa
   (CDCAM > Dashboard: cdcam_vacio_modo). Reusa las clases reales de
   cada tarjeta + el modificador .cdcam-tarjeta-ejemplo, así el diseño queda
   idéntico a cuando hay contenido.
   ========================================================================== */

/* ---- Contenedor: mensaje arriba + una tarjeta centrada ---- */
.cdcam-ejemplos {
    width: 100%;
}

.cdcam-ejemplos-aviso {
    text-align: center;
    color: var(--cdcam-color-texto-suave);
    font-size: 13.5px;
    font-weight: 500;
    margin: 0 0 14px;
}

.cdcam-ejemplos-uno {
    width: 100%;
    max-width: 230px;
    margin: 0 auto;
}

/* Las bodegas reales son más anchas (grid de 280-320px). */
.cdcam-ejemplos-uno-bodega {
    max-width: 300px;
}

/* ---- La tarjeta de ejemplo no es enlace ni reacciona al mouse ---- */
.cdcam-tarjeta-ejemplo {
    position: relative;
    pointer-events: none;
    cursor: default;
}

.cdcam-tarjeta-ejemplo:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ---- Cintilla coral "Ejemplo" en la esquina ---- */
.cdcam-cinta-ejemplo {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--cdcam-color-error-fondo);
    color: var(--cdcam-color-error);
    box-shadow: 0 1px 4px rgba(153, 60, 29, 0.15);
}

/* ---- Colores suaves para los datos de muestra ---- */

/* Bodega: no trae color propio (en las reales llega en línea), así que se le
   da el verde suave de la paleta. */
.cdcam-tarjeta-bodega.cdcam-tarjeta-ejemplo {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
}

.cdcam-tarjeta-ejemplo .cdcam-tarjeta-bodega-icono {
    color: var(--cdcam-color-primario) !important;
}

/* Píldora de ciudad del local/comprador de ejemplo. */
.cdcam-tarjeta-ejemplo .cdcam-tarjeta-local-badge {
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario-oscuro);
}

/* ==========================================================================
   ESTADO VACÍO CON ACCIÓN (CTA)
   Ícono en círculo verde suave + título + texto + botón "Contáctanos".
   ========================================================================== */

.cdcam-vacio-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    max-width: 420px;
    margin: 0 auto;
    padding: 28px 16px;
}

.cdcam-vacio-cta-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cdcam-color-primario-fondo);
    color: var(--cdcam-color-primario);
    font-size: 34px;
    margin-bottom: 6px;
}

.cdcam-vacio-cta-titulo {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--cdcam-color-texto);
}

.cdcam-vacio-cta-texto {
    margin: 0;
    font-size: 13.5px;
    color: var(--cdcam-color-texto-suave);
    line-height: 1.45;
}

.cdcam-vacio-cta-boton {
    margin-top: 12px;
}

/* ==========================================================================
   BLINDAJE CONTRA ELEMENTOR (1.11.29)
   En páginas construidas con Elementor, su CSS se carga después del plugin y
   su reset/tipografía base hacían que las cajas y píldoras se vieran más
   grandes. Aquí se fija una base de caja/tipografía dentro de los bloques del
   plugin y se refuerzan con `html body` los selectores de tamaño, para ganarle
   a Elementor SOLO dentro de estos bloques (sin !important masivo).
   ========================================================================== */

/* ---- 1) Base: caja y tipografía dentro de los contenedores del plugin ---- */
.cdcam-catalogo,
.cdcam-catalogo-bodegas,
.cdcam-lista-locales,
.cdcam-lista-compradores,
.cdcam-grid-bodegas,
.cdcam-grid-locales,
.cdcam-grid-productos,
.cdcam-grid-compradores,
.cdcam-grid-promociones,
.cdcam-grid-vitrinas,
.cdcam-perfil-vitrina,
.cdcam-perfil-punto-compra,
.cdcam-mapa-compradores,
.cdcam-vacio-cta,
.cdcam-ejemplos,
.cdc-publicaciones,
.cdcam-panel-comerciante,
.cdcam-panel-comprador,
.cdcam-panel-acceso {
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
}

.cdcam-catalogo *,
.cdcam-catalogo-bodegas *,
.cdcam-lista-locales *,
.cdcam-lista-compradores *,
.cdcam-grid-bodegas *,
.cdcam-grid-locales *,
.cdcam-grid-productos *,
.cdcam-grid-compradores *,
.cdcam-grid-promociones *,
.cdcam-grid-vitrinas *,
.cdcam-perfil-vitrina *,
.cdcam-perfil-punto-compra *,
.cdcam-mapa-compradores *,
.cdcam-vacio-cta *,
.cdcam-ejemplos *,
.cdc-publicaciones *,
.cdcam-panel-comerciante *,
.cdcam-panel-comprador *,
.cdcam-panel-acceso * {
    box-sizing: border-box;
}

/* ---- 2) Contenedores: ancho, límite y centrado ---- */
html body .cdcam-lista-locales,
html body .cdcam-lista-compradores,
html body .cdcam-catalogo,
html body .cdcam-catalogo-bodegas,
html body .cdcam-grid-bodegas,
html body .cdcam-grid-locales,
html body .cdcam-grid-productos,
html body .cdcam-grid-compradores,
html body .cdcam-grid-promociones,
html body .cdcam-grid-vitrinas {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

html body .cdcam-catalogo,
html body .cdcam-catalogo-bodegas,
html body .cdcam-lista-locales,
html body .cdcam-grid-bodegas,
html body .cdcam-grid-locales,
html body .cdcam-grid-productos,
html body .cdcam-grid-promociones {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

html body .cdcam-perfil-vitrina,
html body .cdcam-perfil-punto-compra {
    width: 100%;
    max-width: var(--cdcam-perfil-ancho, 1160px);
    margin-left: auto;
    margin-right: auto;
}

/* ---- 3) Tarjetas ---- */
html body .cdcam-tarjeta-bodega {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
    padding-bottom: 2rem;
    box-sizing: border-box;
}

html body .cdcam-tarjeta-local,
html body .cdcam-tarjeta-comprador {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 18px 20px;
    border-radius: 16px;
    text-align: center;
    box-sizing: border-box;
}

html body .cdcam-tarjeta-producto {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 4px;
    border-radius: var(--cdcam-radio-tarjeta);
    overflow: hidden;
    box-sizing: border-box;
}

html body .cdcam-tarjeta-promocion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: var(--cdcam-radio);
    box-sizing: border-box;
}

/* ---- 4) Píldoras, chips y cintas ---- */
html body .cdcam-filtro-ciudad,
html body .cdcam-filtro-categoria {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
}

html body .cdcam-filtro-ofertas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    box-sizing: border-box;
}

html body .cdcam-chip-texto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    box-sizing: border-box;
}

html body .cdcam-tarjeta-local-badge,
html body .cdcam-tarjeta-local-categoria {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    box-sizing: border-box;
}

html body .cdcam-tarjeta-local-conteo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-sizing: border-box;
}

html body .cdcam-tarjeta-bodega-conteo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-sizing: border-box;
}

html body .cdcam-cinta-agotado,
html body .cdcam-cinta-promocion,
html body .cdcam-cinta-ejemplo {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    box-sizing: border-box;
}

html body .cdcam-aviso-vacio {
    display: flex;
    width: fit-content;
    max-width: 640px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 16px;
    padding: 10px 22px;
    border-radius: 30px;
    text-align: center;
    box-sizing: border-box;
}

html body .cdcam-vacio-cta-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 34px;
    box-sizing: border-box;
}

/* ---- 5) Botones del plugin (público y paneles) ---- */
html body .cdcam-boton-primario,
html body .cdcam-boton-secundario,
html body .cdcam-boton-eliminar {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--cdcam-radio-chico);
    font-weight: 600;
    font-size: 14px;
    box-sizing: border-box;
}

html body .cdcam-boton-secundario {
    padding: 6px 14px;
    font-size: 13px;
}