/* ============================================================
   WC Comunidad para Elementor Pro — comunidad.css v2.0.0
   ============================================================ */

:root {
    --wcce-color:  #0071a1;
    --wcce-radius: 6px;
}

/* ── Ocultar selector de orden nativo ────────────────────── */
.woocommerce-ordering,
form.woocommerce-ordering,
[class*="elementor"] .woocommerce-ordering,
[class*="elementor"] form.woocommerce-ordering {
    display: none !important;
}


/* ── Ocultar paginación nativa (la reemplaza la del plugin) ─ */
.woocommerce-pagination,
nav.woocommerce-pagination,
.elementor-pagination,
.e-load-more-anchor {
    display: none !important;
}
/* ── Ocultar contador nativo (usamos el nuestro) ─────────── */
.woocommerce-result-count,
[class*="elementor"] .woocommerce-result-count {
    display: none !important;
}

/* ── Barra: contador + desplegable en la misma fila ─────── */
.wcce-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1.2em;
    gap: 12px;
    flex-wrap: wrap;
}

.wcce-contador {
    font-size: 0.875em;
    color: #777;
}

.wcce-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ── Desplegable ─────────────────────────────────────────── */
.wcce-select {
    padding: 7px 34px 7px 12px;
    border: 1px solid #d3d3d3;
    border-radius: var(--wcce-radius);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23555' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    appearance: none;
    -webkit-appearance: none;
    font-size: 0.875em;
    color: #333;
    min-width: 210px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wcce-select:hover { border-color: var(--wcce-color); }
.wcce-select:focus {
    outline: none;
    border-color: var(--wcce-color);
    box-shadow: 0 0 0 2px rgba(0,113,161,0.15);
}

/* ── Botón quitar filtro ─────────────────────────────────── */
.wcce-btn-limpiar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: 1px solid #c0392b;
    border-radius: var(--wcce-radius);
    background: transparent;
    color: #c0392b;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.wcce-btn-limpiar:hover { background: #c0392b; color: #fff; }

/* ── Grid de productos ───────────────────────────────────── */
/* Se aplica al ul.products directamente.
   justify-content: start garantiza alineación a la izquierda
   cuando hay menos productos que columnas.                   */
ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 {
    display: grid !important;
    gap: 24px !important;
    justify-content: start !important;
}
ul.products.columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
    ul.products.columns-3,
    ul.products.columns-4,
    ul.products.columns-5,
    ul.products.columns-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    ul.products.columns-1,
    ul.products.columns-2,
    ul.products.columns-3,
    ul.products.columns-4,
    ul.products.columns-5,
    ul.products.columns-6 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* ── Etiqueta "Edición para:" ────────────────────────────── */
.wcce-edicion {
    font-size: 0.82em;
    margin: 4px 0 6px;
    line-height: 1.5;
}
.wcce-edicion-prefijo {
    /* color se aplica via style inline desde el admin */
}
.wcce-edicion-valor {
    color: inherit;
}
/* Los enlaces de comunidad heredan el color del tema */
.wcce-tag-link {
    text-decoration: underline;
    transition: opacity 0.2s;
}
.wcce-tag-link:hover {
    opacity: 0.75;
}

/* ── Spinner ─────────────────────────────────────────────── */
.wcce-loading {
    text-align: center;
    padding: 80px 20px;
    color: #999;
}
.wcce-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #eee;
    border-top-color: var(--wcce-color);
    border-radius: 50%;
    animation: wcce-spin 0.7s linear infinite;
    margin: 0 auto 16px;
}
@keyframes wcce-spin { to { transform: rotate(360deg); } }

/* ── Sin resultados / Vacío / Error ─────────────────────── */
.wcce-vacio,
.wcce-error {
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
    font-size: 1em;
    width: 100%;
}
.wcce-error { color: #c0392b; font-weight: 600; }

/* ── Paginación compacta ─────────────────────────────────── */
.wcce-paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2em;
    width: 100%;
}
.wcce-pag {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--wcce-color);
    background: transparent;
    color: var(--wcce-color);
    font-weight: 700;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}
.wcce-pag:hover,
.wcce-pag.activo { background: var(--wcce-color); color: #fff; }
.wcce-dots       { color: #aaa; padding: 0 4px; }

/* ── Responsive barra ────────────────────────────────────── */
@media (max-width: 640px) {
    .wcce-controls { flex-direction: column; align-items: stretch; width: 100%; }
    .wcce-select, .wcce-btn-limpiar { width: 100%; min-width: unset; }
}