/* =========================================================
   COMPRAR BOX — v3.0
   4 diseños seleccionables desde el panel de administración:
   predeterminado · minimal · neon · premium
   Las variables --cb-* se inyectan dinámicamente desde PHP.
========================================================= */

:root {
    --cb-primary: #8b0000;
    --cb-primary-dark: #590404;
    --cb-secondary: #1a1a2e;
    --cb-btn-text: #ffffff;
    --cb-radius: 18px;
    --cb-surface: #ffffff;
    --cb-surface-2: #f6f7fb;
    --cb-text: #14141a;
    --cb-text-muted: #6b7280;
    --cb-border: rgba(20, 20, 26, 0.08);

    /* --- AMPLIACIÓN: personalización visual/layout avanzada ---
       Estos son los valores por defecto (igual al aspecto de siempre);
       comprar_box_css_vars() los sobrescribe inline según los ajustes
       guardados en el panel de administración. */
    --cb-title-color: var(--cb-text);
    --cb-shadow-opacity: 0.5;
    --cb-banner-overlay-color: #000000;
    --cb-banner-overlay-opacity: 0;
    --cb-banner-gradient-opacity: 1;

    --cb-banner-height: 92px;
    --cb-avatar-size: 68px;
    --cb-padding-h: 18px;
    --cb-padding-v: 8px;
    --cb-content-align: center;
    --cb-max-width: none;

    --cb-title-weight: 700;
    --cb-text-weight: 400;
    --cb-title-letter-spacing: -0.01em;
    --cb-title-line-height: 1.3;
    --cb-title-transform: none;
    --cb-btn-text-transform: uppercase;

    --cb-btn-width: 100%;
    --cb-btn-padding-h-scale: 1;
    --cb-btn-padding-v-scale: 1;
    --cb-btn-radius: 13px;
    --cb-btn-shadow: none;
    --cb-btn-icon-scale: 1;

    --cb-version-bg: var(--cb-secondary);
    --cb-version-color: #ffffff;

    --cb-bar-bg: var(--cb-surface-2);
    --cb-bar-padding-scale: 1;
    --cb-stars-color: #f5b800;
    --cb-stars-empty-color: rgba(0, 0, 0, 0.18);

    --cb-hover-lift: 4px;
    --cb-transition-duration: 0.35s;
}

.widget-area .widget {
    padding: 0;
    margin-bottom: 24px;
    background: transparent;
    border-radius: var(--cb-radius);
    overflow: visible;
    box-shadow: none !important;
}

.footer-widgets .widget :last-child,
.sidebar .widget :last-child {
    margin-bottom: 0;
}

/* =========================================================
   BASE COMPARTIDA POR TODOS LOS DISEÑOS
========================================================= */
.cb-widget-box {
    position: relative;
    font-family: var(--cb-font-family, Poppins, sans-serif);
    background: var(--cb-surface);
    /* Container query en vez de (o además de) depender solo del ancho de
       la ventana del navegador: la tarjeta puede aparecer angosta en un
       escritorio ancho (sidebar, columna de cuadrícula, tarjeta de un
       carrusel) donde ningún "@media (max-width: ...)" del viewport se
       activaría jamás aunque la tarjeta se vea diminuta. Con
       "container-type: inline-size" los "@container" de más abajo
       reaccionan al ancho REAL de la propia tarjeta, no al de la ventana.
       Se apoya en "inline-size" (ancho) y no en tamaño completo porque no
       necesitamos que la altura dispare nada aquí. */
    container-type: inline-size;
    /* !important en estas dos líneas: algunos themes traen reglas globales
       de ".widget" o "aside > div" que resetean overflow/border-radius con
       más especificidad que la nuestra. Si eso ocurre, el banner (que es
       cuadrado por dentro) deja de recortarse contra la esquina redondeada
       de la tarjeta y "sobresale" en las puntas de arriba. Forzarlo aquí
       blinda la tarjeta contra ese conflicto sin tocar nada del theme. */
    border-radius: var(--cb-radius) !important;
    overflow: hidden !important;
    text-align: var(--cb-content-align, center);
    border: 1px solid var(--cb-border);
    max-width: var(--cb-max-width, none);
    margin-left: auto;
    margin-right: auto;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, calc(0.04 * var(--cb-shadow-opacity, 0.5) * 2)),
        0 8px 24px -8px rgba(16, 24, 40, calc(0.12 * var(--cb-shadow-opacity, 0.5) * 2));
    isolation: isolate;
    /* Fuerza a que el navegador le dé a la tarjeta su propia capa de
       composición: evita el bug conocido de Chrome/Safari donde el
       recorte con border-radius "gotea" en las esquinas cuando hay
       backdrop-filter u otros efectos encima. */
    transform: translateZ(0);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.cb-widget-box * { box-sizing: border-box; }

.cb-widget-box.cb-animado {
    transition: transform var(--cb-transition-duration, .35s) cubic-bezier(.2,.8,.2,1), box-shadow var(--cb-transition-duration, .35s) ease;
}

.cb-widget-box.cb-animado:hover {
    transform: translateY(calc(var(--cb-hover-lift, 4px) * -1));
    box-shadow:
        0 1px 2px rgba(16, 24, 40, calc(0.04 * var(--cb-shadow-opacity, 0.5) * 2)),
        0 20px 40px -12px rgba(16, 24, 40, calc(0.22 * var(--cb-shadow-opacity, 0.5) * 2));
}

.cb-banner {
    position: relative;
    height: var(--cb-banner-height, 92px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    order: 1;
}

/* Tinte de color encima de la imagen de portada (banner_overlay_*): capa
   independiente del degradado propio de cada diseño, para poder oscurecer
   o colorear una imagen de banner personalizada sin perder el degradado. */
.cb-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cb-banner-overlay-color, #000);
    opacity: var(--cb-banner-overlay-opacity, 0);
    pointer-events: none;
    z-index: 1;
}

.cb-avatar {
    position: relative;
    width: var(--cb-avatar-size, 68px);
    height: var(--cb-avatar-size, 68px);
    border-radius: 50%;
    background: var(--cb-surface);
    padding: 3px;
    z-index: 2;
    flex-shrink: 0;
}

.cb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.cb-body {
    /* El padding vertical (arriba/abajo) escala con --cb-gap-scale, igual
       que los márgenes entre bloques de abajo, así el control "Espaciado
       entre elementos" también separa visiblemente el banner del
       contenido y el contenido del borde inferior de la tarjeta. El
       padding horizontal viene de --cb-padding-h (Layout y espaciado). */
    padding: calc(var(--cb-padding-v, 8px) * var(--cb-gap-scale, 1)) var(--cb-padding-h, 18px) calc((var(--cb-padding-v, 8px) + 3px) * var(--cb-gap-scale, 1));
    order: 2;
    flex: 1 0 auto;
}

.cb-title {
    font-family: var(--cb-font-family, Poppins, sans-serif);
    font-size: calc(17px * var(--cb-text-scale, 1));
    font-weight: var(--cb-title-weight, 700);
    letter-spacing: var(--cb-title-letter-spacing, -0.01em);
    color: var(--cb-title-color, var(--cb-text));
    margin: 4px 0 calc(10px * var(--cb-gap-scale, 1));
    line-height: var(--cb-title-line-height, 1.3);
    text-transform: var(--cb-title-transform, none);
}

.cb-chip {
    display: inline-block;
    font-size: calc(12.5px * var(--cb-text-scale, 1));
    font-weight: var(--cb-text-weight, 400);
    color: var(--cb-text-muted);
    background: var(--cb-surface-2);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: calc(8px * var(--cb-gap-scale, 1));
}

.cb-chip a { color: var(--cb-primary); font-weight: 600; text-decoration: none; }
.cb-chip a:hover { text-decoration: underline; }

.cb-meta {
    font-size: calc(13px * var(--cb-text-scale, 1));
    font-weight: var(--cb-text-weight, 400);
    color: var(--cb-text-muted);
    margin-bottom: calc(10px * var(--cb-gap-scale, 1));
}

/* Envuelve la etiqueta ("Desarrollador:") y el valor para poder apilarlos
   verticalmente en diseños tipo tarjeta. En el resto de diseños se queda
   como texto en línea, igual que antes. */
.cb-meta-text { display: inline; }
.cb-meta-value { margin-left: 4px; }

/* Plataforma junto al campo "Plataforma": restringida exclusivamente a
   Windows (contenedor dedicado de ejecución para los programas). Se
   muestra como una mini-etiqueta con su icono. */
.cb-plataforma-lista {
    display: inline-flex;
    flex-wrap: wrap;
    /* Mismo criterio de escalado que el resto de márgenes/espaciados de la
       tarjeta (controlado por "Espaciado entre elementos" en Ajustes), así
       las etiquetas de plataforma no quedan pegadas entre sí cuando se
       aumenta el espaciado general. */
    gap: calc(8px * var(--cb-gap-scale, 1));
    vertical-align: middle;
}

.cb-plataforma-item {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--cb-gap-scale, 1));
    background: var(--cb-surface-2);
    border: 1px solid var(--cb-border);
    border-radius: 999px;
    padding: 2px 9px 2px 7px;
    font-size: calc(11.5px * var(--cb-text-scale, 1));
    font-weight: 600;
    line-height: 1.6;
}

.cb-plataforma-icon { flex-shrink: 0; opacity: 0.85; }

/* La tarjetita de "Desarrollador" autorrellenada por IA empieza vacía y
   oculta; front.js la revela (añadiendo .cb-ia-autofill-listo) solo si la
   IA devuelve un dato real, para no dejar una etiqueta vacía visible
   mientras llega la respuesta o si la IA no encuentra nada fiable. */
.cb-ia-autofill { visibility: hidden; height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; }
.cb-ia-autofill.cb-ia-autofill-listo { visibility: visible; height: auto; overflow: visible; }

.cb-badge-version {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cb-version-bg, var(--cb-secondary));
    color: var(--cb-version-color, #fff);
    font-size: calc(12.5px * var(--cb-text-scale, 1));
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: calc(14px * var(--cb-gap-scale, 1));
    letter-spacing: 0.01em;
}

/* El punto verde decorativo se sustituyó por el icono de "versión" que ya
   viaja dentro del propio contenido de la insignia (ver comprar_box_icon()). */
.cb-badge-version::before { display: none; }

/* E) Variantes de estilo de la insignia de versión. "pildora" es el
   comportamiento de siempre (border-radius 999px ya definido arriba). */
.cb-badge-version-rectangular { border-radius: calc(var(--cb-radius) * 0.25); }

.cb-badge-version-outline {
    background: transparent;
    border: 1.5px solid var(--cb-version-bg, var(--cb-secondary));
    color: var(--cb-version-bg, var(--cb-secondary));
}
.cb-badge-version-outline .cb-meta-icon { color: inherit; }

.cb-badge-version-minimal {
    background: transparent;
    color: var(--cb-version-bg, var(--cb-secondary));
    padding: 6px 2px;
}

.cb-meta-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 6px;
    vertical-align: -3px;
    /* El tamaño real del SVG viene por atributo width/height="15", pero la
       propiedad CSS width/height tiene más prioridad que esos atributos de
       presentación, así que esto permite escalarlo desde el panel. */
    width: calc(15px * var(--cb-icon-scale, 1));
    height: calc(15px * var(--cb-icon-scale, 1));
}

.cb-meta-icon svg { width: 100%; height: 100%; }

.cb-badge-version .cb-meta-icon {
    margin-right: 0; /* el espaciado ya lo da el "gap" del contenedor flex */
}

.cb-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(12px * var(--cb-btn-scale, 1));
    width: var(--cb-btn-width, 100%);
    min-width: 0;
    background: var(--cb-btn-bg, linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-primary-dark) 100%));
    color: var(--cb-btn-text);
    padding: calc(10px * var(--cb-btn-scale, 1) * var(--cb-btn-padding-v-scale, 1)) calc(14px * var(--cb-btn-scale, 1) * var(--cb-btn-padding-h-scale, 1));
    border-radius: var(--cb-btn-radius, calc(var(--cb-radius) * 0.7));
    text-decoration: none;
    box-shadow: var(--cb-btn-shadow, 0 8px 20px -6px color-mix(in srgb, var(--cb-primary) 60%, transparent));
    box-sizing: border-box;
    text-align: left;
}

.cb-button.cb-btn-icon-solo { justify-content: center; }
.cb-button.cb-btn-icon-derecha { flex-direction: row; }

.cb-widget-box.cb-animado .cb-button {
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cb-widget-box.cb-animado .cb-button:active { transform: translateY(0) scale(0.99); }

/* =========================================================
   EFECTO DE HOVER DEL BOTÓN "IR A LA PÁGINA OFICIAL"
   Ajustes → Iconos → "Icono del botón...". Cada tarjeta usa uno
   de estos 5 efectos (elevar es el comportamiento de siempre).
   Todos siguen dependiendo del interruptor general "Animaciones
   e interacciones": si está apagado, el botón no anima nada.
========================================================= */
.cb-widget-box.cb-animado .cb-button.cb-button-hover-elevar:hover {
    transform: translateY(-2px) scale(1.01);
    filter: brightness(1.05);
}

.cb-widget-box.cb-animado .cb-button.cb-button-hover-escala:hover {
    transform: scale(1.045);
}

.cb-widget-box.cb-animado .cb-button.cb-button-hover-contorno:hover {
    box-shadow:
        0 8px 20px -6px color-mix(in srgb, var(--cb-primary) 60%, transparent),
        0 0 0 3px color-mix(in srgb, var(--cb-primary) 45%, transparent);
}

.cb-widget-box.cb-animado .cb-button.cb-button-hover-brillo {
    position: relative;
    overflow: hidden;
}

.cb-widget-box.cb-animado .cb-button.cb-button-hover-brillo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 62%);
    transform: translateX(-70%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.cb-widget-box.cb-animado .cb-button.cb-button-hover-brillo:hover::after {
    transform: translateX(70%);
}

.cb-widget-box.cb-animado .cb-button.cb-button-hover-ninguno:hover {
    transform: none;
    filter: none;
}

/* =========================================================
   DISEÑOS "PRO" DEL BOTÓN "IR A LA PÁGINA OFICIAL"
   Ajustes → Iconos → "Diseño del botón". El "Predeterminado" no
   lleva clase extra de estilo (usa cb-btn-style-predeterminado,
   que no sobreescribe nada). Los 5 siguientes son variantes de
   UI/UX 2026; los estilos 3D y Neobrutalismo llevan su propia
   micro-interacción de clic y no usan el "Efecto de hover"
   genérico de arriba.
========================================================= */

/* --- 1. Glass Pro (glassmorphism avanzado) --- */
.cb-btn-style-glass {
    background: linear-gradient(135deg, color-mix(in srgb, var(--cb-primary) 55%, transparent) 0%, color-mix(in srgb, var(--cb-primary) 25%, transparent) 100%);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 8px 28px -8px color-mix(in srgb, var(--cb-primary) 55%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cb-btn-style-glass .cb-button-icon {
    background: rgba(255, 255, 255, 0.28);
}

/* --- 2. Gradiente Líquido (degradado animado en bucle) --- */
.cb-btn-style-liquido {
    background: linear-gradient(120deg, var(--cb-primary) 0%, var(--cb-secondary) 45%, var(--cb-primary-dark) 75%, var(--cb-primary) 100%);
    background-size: 300% 300%;
    border: none;
}

.cb-widget-box.cb-animado .cb-btn-style-liquido {
    animation: cb-liquido-flow 6s ease infinite;
}

@keyframes cb-liquido-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- 3. Botón 3D Minimalista (relieve sólido, se "hunde" al pulsar) --- */
.cb-btn-style-3d {
    background: var(--cb-primary);
    border: none;
    box-shadow:
        0 6px 0 0 color-mix(in srgb, var(--cb-primary) 65%, black 35%),
        0 12px 18px -8px rgba(0, 0, 0, 0.35);
    transform: translateY(0);
}

.cb-widget-box.cb-animado .cb-btn-style-3d {
    transition: transform .15s ease, box-shadow .15s ease;
}

.cb-widget-box.cb-animado .cb-btn-style-3d:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 0 0 color-mix(in srgb, var(--cb-primary) 65%, black 35%),
        0 16px 22px -8px rgba(0, 0, 0, 0.4);
}

.cb-widget-box.cb-animado .cb-btn-style-3d:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 0 color-mix(in srgb, var(--cb-primary) 65%, black 35%);
}

/* --- 4. Neobrutalismo Elegante (borde grueso + sombra dura desplazada) --- */
.cb-btn-style-neobrutal {
    background: var(--cb-primary);
    color: #14141a;
    border: 3px solid #14141a;
    border-radius: 8px;
    box-shadow: 6px 6px 0 0 #14141a;
    transform: translate(0, 0);
}

.cb-btn-style-neobrutal .cb-button-icon,
.cb-btn-style-neobrutal .cb-fa-icon,
.cb-btn-style-neobrutal .cb-globe-fallback { color: #14141a; }

.cb-btn-style-neobrutal .cb-button-icon { background: rgba(20, 20, 26, 0.12); }

.cb-widget-box.cb-animado .cb-btn-style-neobrutal {
    transition: transform .15s ease, box-shadow .15s ease;
}

.cb-widget-box.cb-animado .cb-btn-style-neobrutal:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 0 #14141a;
}

.cb-widget-box.cb-animado .cb-btn-style-neobrutal:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 0 #14141a;
}

/* --- 5. Micro-interacción de Luz (halo suave + reflejo de vidrio) --- */
.cb-btn-style-luz {
    position: relative;
    background: var(--cb-btn-bg, linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-primary-dark) 100%));
    border: 1px solid color-mix(in srgb, var(--cb-primary) 45%, white 15%);
    box-shadow:
        0 0 0 0 color-mix(in srgb, var(--cb-primary) 55%, transparent),
        0 8px 20px -8px color-mix(in srgb, var(--cb-primary) 55%, transparent);
    overflow: hidden;
}

.cb-widget-box.cb-animado .cb-btn-style-luz {
    transition: box-shadow .35s ease;
}

.cb-widget-box.cb-animado .cb-btn-style-luz:hover {
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--cb-primary) 22%, transparent),
        0 10px 26px -8px color-mix(in srgb, var(--cb-primary) 65%, transparent);
}

.cb-btn-style-luz::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 55%);
    opacity: .75;
    pointer-events: none;
}

/* Ícono circular: muestra el favicon real del sitio o, si falla, un ícono de globo genérico */
.cb-button-icon {
    width: calc(36px * var(--cb-icon-scale, 1) * var(--cb-btn-scale, 1) * var(--cb-btn-icon-scale, 1));
    height: calc(36px * var(--cb-icon-scale, 1) * var(--cb-btn-scale, 1) * var(--cb-btn-icon-scale, 1));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.cb-favicon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.cb-globe-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.cb-fa-icon {
    font-size: calc(16px * var(--cb-icon-scale, 1));
    line-height: 1;
    color: inherit;
}

.cb-custom-icon-img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
}

.cb-button-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

.cb-button-title {
    font-size: calc(13px * var(--cb-text-scale, 1) * var(--cb-btn-scale, 1));
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: var(--cb-btn-text-transform, uppercase);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
}

.cb-button-domain {
    font-size: calc(12px * var(--cb-text-scale, 1) * var(--cb-btn-scale, 1));
    font-weight: 500;
    opacity: 0.82;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* =========================================================
   CAJITA DE VALORACIÓN (nota + estrellas + votos)
   Se posiciona en la esquina superior de la tarjeta y cada
   diseño la adapta con sus propios colores/ubicación abajo.
========================================================= */
/* =========================================================
   BARRA INFERIOR (valoración a la izquierda, compartir a la derecha)
   Ahora es parte del flujo normal de la tarjeta (debajo del botón),
   no un overlay flotando sobre la imagen. El "order:3" la reordena
   visualmente al final sin necesidad de mover su posición en el HTML.
========================================================= */
.cb-card-top-bar {
    position: relative;
    order: 3;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(12px * var(--cb-bar-padding-scale, 1)) calc(18px * var(--cb-bar-padding-scale, 1));
    background: var(--cb-bar-bg, var(--cb-surface-2));
    border-top: 1px solid var(--cb-border);
    pointer-events: auto;
}

.cb-card-top-bar > * { pointer-events: auto; }

/* =========================================================
   TOP DE PORTADA (valoración y/o compartir superpuestos encima
   del banner de la tarjeta). Es una zona independiente de la
   "barra inferior" de arriba: cada elemento ("Votos"/"Compartir")
   elige a cuál de las dos zonas pertenece desde Ajustes →
   Contenido → "Posición de Votos" / "Posición de Compartir".
   Al no llevar "order", queda antes del banner en el flujo
   normal de la tarjeta (arriba de todo).
========================================================= */
.cb-portada-top-bar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(12px * var(--cb-bar-padding-scale, 1)) calc(18px * var(--cb-bar-padding-scale, 1));
    background: var(--cb-bar-bg, var(--cb-surface-2));
    border-bottom: 1px solid var(--cb-border);
    pointer-events: auto;
}

.cb-portada-top-bar > * { pointer-events: auto; }

/* Cada elemento ("Votos" y "Compartir") elige su propio slot desde
   Ajustes → Contenido → "Posición de Votos" / "Posición de Compartir".
   Los 3 slots reparten el ancho a partes iguales (truco clásico de
   cabecera de 3 columnas): el de la izquierda alinea su contenido al
   inicio, el del centro lo centra y el de la derecha lo alinea al final,
   así el elemento centrado queda realmente centrado en la barra
   independientemente de cuánto ocupen los otros dos lados. Si un slot
   queda vacío (ningún elemento asignado ahí), simplemente no se ve.
   Las mismas 3 alineaciones aplican tanto a la barra inferior como al
   "Top de Portada" (este último usa el sufijo "-portada-"). */
.cb-topbar-slot {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--cb-gap-scale, 1));
    flex: 1 1 0;
    min-width: 0;
}

.cb-topbar-slot-izquierda,
.cb-topbar-slot-portada-izquierda { justify-content: flex-start; }
.cb-topbar-slot-centro,
.cb-topbar-slot-portada-centro    { justify-content: center; }
.cb-topbar-slot-derecha,
.cb-topbar-slot-portada-derecha   { justify-content: flex-end; }

.cb-rating-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Predeterminado: misma tarjeta que el botón "Compartir" predeterminado
       (fondo, borde, padding y sombra iguales), para que ambos módulos
       luzcan coherentes entre sí cuando no se elige un estilo alternativo. */
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    padding: 6px 12px 6px 6px;
    border-radius: calc(var(--cb-radius) * 0.4);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.cb-rating-score {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    border-radius: calc(var(--cb-radius) * 0.28);
    background: var(--cb-primary);
    color: #fff;
    font-size: calc(12.5px * var(--cb-text-scale, 1));
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.cb-rating-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1;
}

.cb-rating-stars {
    position: relative;
    display: inline-block;
    font-size: calc(11px * var(--cb-icon-scale, 1));
    letter-spacing: 1px;
}

.cb-rating-stars-empty { color: var(--cb-stars-empty-color, rgba(0, 0, 0, 0.18)); }

.cb-rating-stars-full {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--cb-rating-pct);
    overflow: hidden;
    white-space: nowrap;
    color: var(--cb-stars-color, #f5a623);
    transition: width .12s ease;
}

.cb-rating-badge.cb-rating-hovering .cb-rating-stars-full {
    width: var(--cb-rating-hover-pct, var(--cb-rating-pct));
}

.cb-rating-votes {
    font-size: calc(9px * var(--cb-text-scale, 1));
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #6b7280;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Estrellas votables (insignia interactiva): 5 botones invisibles
   superpuestos a las estrellas visuales, uno por cada valor de 1 a 5. */
.cb-rating-stars-input {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 2;
}

.cb-rating-star-btn {
    flex: 1 1 20%;
    height: 100%;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cb-rating-badge.cb-rating-voted .cb-rating-star-btn,
.cb-rating-star-btn:disabled {
    cursor: default;
}

.cb-rating-interactiva .cb-rating-votes { transition: opacity .15s ease; }

/* =========================================================
   BOTÓN "COMPARTIR" + MENÚ DESPLEGABLE
   El menú se reubica con JS a document.body (position:fixed)
   para no quedar recortado por el overflow:hidden de la tarjeta.
========================================================= */
.cb-share-wrap {
    position: relative;
}

.cb-share-anchor { display: none; }

.cb-share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: calc(var(--cb-radius) * 0.4);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    font-family: var(--cb-font-family, Poppins, sans-serif);
    font-size: calc(11.5px * var(--cb-text-scale, 1));
    font-weight: 600;
    color: #27272f;
    line-height: 1;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease;
}

.cb-share-btn:hover { transform: translateY(-1px); }

.cb-share-icon {
    display: flex;
    color: var(--cb-primary);
    flex-shrink: 0;
    width: calc(15px * var(--cb-icon-scale, 1));
    height: calc(15px * var(--cb-icon-scale, 1));
}

.cb-share-icon svg { width: 100%; height: 100%; }

.cb-share-btn-label { white-space: nowrap; }

/* =========================================================
   ESTILOS ALTERNATIVOS DE "VOTOS" (insignia de valoración)
   Ajustes → Diseño y Apariencia → "Estilo de Compartir y Votos".
   'predeterminado' no necesita clase extra (es el aspecto de siempre).
========================================================= */
.cb-rating-style-contorno {
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--cb-border);
    border-radius: calc(var(--cb-radius) * 0.5);
    background: transparent;
    box-shadow: none;
}

.cb-rating-style-solido {
    padding: 4px 12px 4px 4px;
    border: none;
    border-radius: calc(var(--cb-radius) * 0.5);
    background: var(--cb-primary);
    box-shadow: none;
}

.cb-rating-style-solido .cb-rating-score {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.cb-rating-style-solido .cb-rating-votes { color: rgba(255, 255, 255, 0.85); }
.cb-rating-style-solido .cb-rating-stars-empty { color: rgba(255, 255, 255, 0.35); }

.cb-rating-style-minimal {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.cb-rating-style-minimal .cb-rating-score {
    background: transparent;
    color: var(--cb-primary);
    padding: 0;
    min-width: 0;
}

/* Elemento de pulgar + "% recomendado": solo lo genera el markup para el
   estilo pro-recomendado, pero por si acaso se oculta también por CSS en
   cualquier otro estilo. */
.cb-rating-recomendado { display: none; }

/* =========================================================
   ESTILOS "PRO" DE VOTOS (2026)
   Ajustes → Apariencia → "Estilo de Votos". Se suman a los de
   siempre (predeterminado/contorno/solido/minimal); el
   "Predeterminado" sigue disponible arriba del todo para volver
   atrás cuando quieras.
========================================================= */

/* --- Pro: Cápsula Degradada (pastilla de vidrio + nota con resplandor) --- */
.cb-rating-style-pro-gradiente {
    background: linear-gradient(120deg, color-mix(in srgb, var(--cb-primary) 20%, var(--cb-surface)) 0%, color-mix(in srgb, var(--cb-secondary) 20%, var(--cb-surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--cb-primary) 35%, transparent);
    border-radius: 999px;
    padding: 5px 14px 5px 5px;
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--cb-primary) 45%, transparent);
}

.cb-rating-style-pro-gradiente .cb-rating-score {
    background: linear-gradient(135deg, var(--cb-primary), var(--cb-secondary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-primary) 20%, transparent);
    border-radius: 50%;
    min-width: 26px;
    height: 26px;
}

/* --- Pro: Contador Destacado (nota en grande tipo tarjeta de estadística) --- */
.cb-rating-style-pro-contador {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: calc(var(--cb-radius) * 0.5);
    padding: 8px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cb-rating-style-pro-contador .cb-rating-score {
    background: transparent;
    color: var(--cb-primary);
    font-size: calc(22px * var(--cb-text-scale, 1));
    font-weight: 800;
    height: auto;
    min-width: 0;
    padding: 0;
}

.cb-rating-style-pro-contador .cb-rating-right {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* --- Pro: Recomendado (pulgares), estilo "% recomendado" tipo tienda de apps --- */
.cb-rating-style-pro-recomendado {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: calc(var(--cb-radius) * 0.4);
    padding: 6px 12px 6px 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.cb-rating-style-pro-recomendado .cb-rating-recomendado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: calc(12.5px * var(--cb-text-scale, 1));
}

.cb-rating-style-pro-recomendado .cb-rating-thumb-up { color: #16a34a; }
.cb-rating-style-pro-recomendado .cb-rating-thumb-down { color: #dc2626; }

/* En este estilo la nota/estrellas numéricas quedan pequeñas y discretas
   (siguen siendo clicables para votar), el protagonismo visual es el
   pulgar + porcentaje de arriba. */
.cb-rating-style-pro-recomendado .cb-rating-score {
    background: transparent;
    color: var(--cb-text-muted, #767688);
    font-size: calc(10.5px * var(--cb-text-scale, 1));
    font-weight: 600;
    min-width: 0;
    padding: 0;
}

.cb-rating-style-pro-recomendado .cb-rating-stars { transform: scale(0.85); transform-origin: left center; opacity: 0.7; }

/* =========================================================
   ESTILOS ALTERNATIVOS DE "COMPARTIR"
========================================================= */
.cb-share-style-solo-icono .cb-share-btn {
    padding: 8px;
    border-radius: 50%;
    gap: 0;
}

.cb-share-style-solo-icono .cb-share-btn-label { display: none; }

.cb-share-style-contorno .cb-share-btn {
    background: transparent;
    box-shadow: none;
}

.cb-share-style-solido .cb-share-btn {
    background: var(--cb-primary);
    border-color: var(--cb-primary);
    color: #fff;
    box-shadow: none;
}

.cb-share-style-solido .cb-share-icon { color: #fff; }

/* =========================================================
   ESTILOS "PRO" DE COMPARTIR (2026)
   Ajustes → Apariencia → "Estilo de Compartir". Se suman a los
   de siempre (predeterminado/solo-icono/contorno/solido).
========================================================= */

/* --- Pro: Glass (vidrio esmerilado) --- */
.cb-share-style-pro-glass .cb-share-btn {
    background: color-mix(in srgb, var(--cb-surface) 55%, transparent);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--cb-primary) 35%, transparent);
}

.cb-share-style-pro-glass .cb-share-icon {
    color: var(--cb-primary);
}

/* --- Pro: Píldora Degradada --- */
.cb-share-style-pro-gradiente .cb-share-btn {
    background: linear-gradient(120deg, var(--cb-primary) 0%, var(--cb-secondary) 100%);
    border: none;
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--cb-primary) 55%, transparent);
}

.cb-share-style-pro-gradiente .cb-share-icon { color: #fff; }

/* --- Pro: Flotante 3D (elevado, el icono rebota al pasar el cursor) --- */
.cb-share-style-pro-flotante .cb-share-btn {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.22);
}

.cb-widget-box.cb-animado .cb-share-style-pro-flotante .cb-share-btn {
    transition: transform .2s ease, box-shadow .2s ease;
}

.cb-widget-box.cb-animado .cb-share-style-pro-flotante .cb-share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px -8px rgba(0, 0, 0, 0.28);
}

.cb-widget-box.cb-animado .cb-share-style-pro-flotante .cb-share-icon {
    display: inline-flex;
    transition: transform .25s ease;
}

.cb-widget-box.cb-animado .cb-share-style-pro-flotante .cb-share-btn:hover .cb-share-icon {
    transform: translateY(-2px);
}

.cb-share-menu {
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    background: #fff;
    border-radius: 14px;
    box-shadow:
        0 20px 45px -12px rgba(16, 24, 40, 0.35),
        0 2px 10px rgba(16, 24, 40, 0.1);
    padding: 8px;
    font-family: var(--cb-font-family, Poppins, sans-serif);
}

.cb-share-menu.cb-share-menu-open {
    display: flex;
    animation: cb-share-fade-in .16s ease;
}

@keyframes cb-share-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.cb-share-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 9px;
    text-decoration: none;
    font-family: var(--cb-font-family, Poppins, sans-serif);
    font-size: calc(13px * var(--cb-text-scale, 1));
    font-weight: 500;
    color: #27272f;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.cb-share-item:hover { background: #f6f7fb; }

.cb-share-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: calc(10.5px * var(--cb-icon-scale, 1));
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.cb-share-item-facebook .cb-share-item-icon { background: #1877f2; }
.cb-share-item-twitter .cb-share-item-icon { background: #14141a; }
.cb-share-item-threads .cb-share-item-icon { background: #14141a; }
.cb-share-item-bluesky .cb-share-item-icon { background: #1185fe; }
.cb-share-item-reddit .cb-share-item-icon { background: #ff4500; }
.cb-share-item-linkedin .cb-share-item-icon { background: #0a66c2; }
.cb-share-item-pinterest .cb-share-item-icon { background: #e60023; }
.cb-share-item-flipboard .cb-share-item-icon { background: #e12828; font-size: calc(9px * var(--cb-icon-scale, 1)); }
.cb-share-item-email .cb-share-item-icon,
.cb-share-copy .cb-share-item-icon { background: #6b7280; }

/* =========================================================
   DISEÑO 1 · PREDETERMINADO
   Banner con degradado + avatar flotante centrado
========================================================= */
.cb-style-predeterminado .cb-banner {
    /* El degradado va SIEMPRE encima (con transparencia real vía color-mix
       con "transparent") y la imagen de portada personalizada queda debajo,
       a modo de foto con un tinte de color superpuesto. Si no se sube
       ninguna imagen, --cb-banner-image cae en "none" y solo se ve el
       degradado, exactamente igual que antes. */
    background-image:
        radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--cb-primary) 60%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--cb-secondary) 82%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--cb-secondary) 60%, var(--cb-primary)) 58%, transparent) 100%),
        var(--cb-banner-image, none);
    background-size: auto, auto, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
}

.cb-style-predeterminado .cb-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.10) 0, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0, transparent 40%);
}

.cb-style-predeterminado .cb-avatar {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.cb-style-predeterminado .cb-button:hover {
    box-shadow: 0 12px 26px -6px color-mix(in srgb, var(--cb-primary) 70%, transparent);
}

/* =========================================================
   DISEÑO 3 · NEON VIBRANTE
   Tarjeta oscura, resplandor de color, animaciones marcadas
========================================================= */
.cb-style-neon {
    background: linear-gradient(160deg, #0d0d14 0%, #17171f 100%);
    border: 1px solid color-mix(in srgb, var(--cb-primary) 45%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cb-primary) 20%, transparent),
        0 20px 45px -18px color-mix(in srgb, var(--cb-primary) 60%, transparent);
}

.cb-style-neon .cb-banner {
    /* Igual que en Predeterminado: el resplandor radial (con transparencia
       real) va encima y la imagen de portada personalizada queda detrás.
       Sin imagen personalizada, --cb-banner-image cae en "none" y el
       resultado es idéntico al de antes. */
    background-image:
        radial-gradient(120% 160% at 50% -30%, color-mix(in srgb, var(--cb-primary) 55%, transparent), transparent 65%),
        var(--cb-banner-image, none);
    background-size: auto, cover;
    background-position: center, center;
    background-repeat: no-repeat;
}

.cb-style-neon .cb-avatar {
    background: #17171f;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--cb-primary) 55%, transparent),
        0 0 26px color-mix(in srgb, var(--cb-primary) 55%, transparent);
}

.cb-style-neon .cb-title { color: #f5f5fa; }

.cb-style-neon .cb-chip {
    background: rgba(255, 255, 255, 0.06);
    color: #c7c7d4;
}

.cb-style-neon .cb-chip a { color: color-mix(in srgb, var(--cb-primary) 70%, white); }

.cb-style-neon .cb-meta { color: #93939f; }

.cb-style-neon .cb-badge-version {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid color-mix(in srgb, var(--cb-primary) 55%, transparent);
    color: #fff;
}

.cb-style-neon .cb-button {
    box-shadow:
        0 0 26px -4px color-mix(in srgb, var(--cb-primary) 75%, transparent),
        0 0 0 1px color-mix(in srgb, var(--cb-primary) 55%, transparent);
}

.cb-style-neon .cb-button-icon {
    background: rgba(255, 255, 255, 0.14);
}

.cb-widget-box.cb-style-neon.cb-animado:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cb-primary) 35%, transparent),
        0 24px 55px -16px color-mix(in srgb, var(--cb-primary) 75%, transparent);
}

.cb-widget-box.cb-style-neon.cb-animado .cb-button:hover {
    box-shadow:
        0 0 34px -2px color-mix(in srgb, var(--cb-primary) 90%, transparent),
        0 0 0 1px color-mix(in srgb, var(--cb-primary) 75%, transparent);
}

.cb-style-neon .cb-card-top-bar {
    background: rgba(13, 13, 20, 0.8);
    border-top: 1px solid color-mix(in srgb, var(--cb-primary) 35%, transparent);
}

.cb-style-neon .cb-portada-top-bar {
    background: rgba(13, 13, 20, 0.8);
    border-bottom: 1px solid color-mix(in srgb, var(--cb-primary) 35%, transparent);
}

.cb-style-neon .cb-rating-votes { color: #93939f; }
.cb-style-neon .cb-rating-stars-empty { color: rgba(255, 255, 255, 0.15); }

.cb-style-neon .cb-share-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--cb-primary) 45%, transparent);
    color: #f5f5fa;
    box-shadow: none;
}

.cb-style-neon .cb-rating-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--cb-primary) 45%, transparent);
    box-shadow: none;
}

.cb-style-neon .cb-rating-style-pro-contador,
.cb-style-neon .cb-rating-style-pro-recomendado {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--cb-primary) 45%, transparent);
}

.cb-style-neon .cb-share-style-pro-flotante .cb-share-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid color-mix(in srgb, var(--cb-primary) 45%, transparent);
}

.cb-style-neon .cb-share-icon { color: color-mix(in srgb, var(--cb-primary) 70%, white); }

/* =========================================================
   DISEÑO 5 · CLÁSICO (ORIGINAL)
   El diseño original del plugin: banner texturizado, avatar
   superpuesto, insignia negra y botón rojo clásico.
========================================================= */
.cb-style-clasico {
    border-radius: 10px;
    box-shadow: 0 1px 1px color-mix(in srgb, var(--cb-primary) 35%, transparent);
}

.cb-style-clasico .cb-banner {
    height: 100px;
    /* Si el admin subió un banner propio, --cb-banner-image lo sobrescribe;
       si no, se usa la imagen predeterminada del plugin. */
    background-image: var(--cb-banner-image, url('abstract-navy-red-background.webp'));
    background-position: center;
    background-size: cover;
    /* IMPORTANTE: el avatar se superpone a propósito sobre el borde inferior
       del banner (ver .cb-style-clasico .cb-avatar). Si este banner mantuviera
       "overflow:hidden" (heredado de la regla base .cb-banner), recortaría esa
       mitad inferior del avatar dejándolo "cortado" en línea recta. Por eso
       aquí se libera explícitamente el recorte. */
    overflow: visible;
}

.cb-style-clasico .cb-avatar {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 65px;
    height: 65px;
    background: #eee;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.cb-style-clasico .cb-body { padding-top: 32px; }

.cb-style-clasico .cb-title {
    padding: 6px 15px;
    margin: 0 0 10px;
    font-size: calc(18px * var(--cb-text-scale, 1));
    color: #fff;
    background-image: url('bg_texto-h2.gif');
    border-bottom: 3px solid var(--cb-primary);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.cb-style-clasico .cb-chip {
    display: block;
    background: transparent;
    padding: 0;
    color: #666;
    font-size: calc(14px * var(--cb-text-scale, 1));
    margin-bottom: calc(5px * var(--cb-gap-scale, 1));
}

.cb-style-clasico .cb-meta {
    color: #666;
    font-size: calc(14px * var(--cb-text-scale, 1));
    margin-bottom: calc(5px * var(--cb-gap-scale, 1));
}

.cb-style-clasico .cb-badge-version {
    background: #000;
    border-radius: 5px;
    padding: 8px 15px;
    margin: 5px 5px 14px;
}

.cb-style-clasico .cb-badge-version::before { display: none; }

.cb-style-clasico .cb-button {
    border-radius: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.cb-style-clasico .cb-button-icon {
    background: rgba(255, 255, 255, 0.25);
}

.cb-style-clasico .cb-card-top-bar {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.cb-style-clasico .cb-portada-top-bar {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.cb-style-clasico .cb-rating-score { border-radius: 4px; }
.cb-style-clasico .cb-rating-votes { color: #666; }
.cb-style-clasico .cb-rating-stars-empty { color: rgba(0, 0, 0, 0.18); }

.cb-style-clasico .cb-share-btn {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    box-shadow: none;
}

.cb-style-clasico .cb-rating-badge {
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: none;
}

.cb-style-clasico .cb-rating-style-pro-contador,
.cb-style-clasico .cb-rating-style-pro-recomendado {
    background: #fff;
    border: 1px solid #ccc;
}

.cb-style-clasico .cb-share-style-pro-flotante .cb-share-btn {
    background: #fff;
    border: 1px solid #ccc;
}

.cb-style-clasico .cb-share-icon { color: var(--cb-primary); }

/* =========================================================
   MODO OSCURO AUTOMÁTICO
   (aplica a Predeterminado y Clásico; Neon ya es oscuro siempre).
========================================================= */
@media (prefers-color-scheme: dark) {
    .cb-widget-box.cb-modo-oscuro-auto.cb-style-predeterminado,
    .cb-widget-box.cb-modo-oscuro-auto.cb-style-clasico {
        --cb-surface: #1c1c24;
        --cb-surface-2: #26262f;
        --cb-text: #f4f4f6;
        --cb-text-muted: #a1a1ab;
        --cb-border: rgba(255, 255, 255, 0.08);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.3),
            0 8px 24px -8px rgba(0, 0, 0, 0.5);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 480px) {
    .cb-style-predeterminado .cb-banner { height: 80px; }
    .cb-style-predeterminado .cb-avatar { width: 58px; height: 58px; }
    .cb-title { font-size: calc(16px * var(--cb-text-scale, 1)); }
    .cb-button { font-size: calc(14px * var(--cb-text-scale, 1)); padding: 12px 18px; }
    .cb-card-top-bar,
    .cb-portada-top-bar { padding: 10px 14px; }
    .cb-share-btn-label { display: none; }
    .cb-share-btn { padding: 6px; }
}

/* Lo mismo que el "@media" de arriba, pero disparado por el ancho REAL de
   la tarjeta (ver "container-type" en .cb-widget-box) en vez del ancho de
   la ventana. Necesario porque la tarjeta puede vivir en un contenedor
   angosto —sidebar, columna de la plantilla "cuadrícula", tarjeta de un
   carrusel— dentro de una pantalla de escritorio ancha, donde el "@media"
   nunca se activaría aunque la tarjeta se vea diminuta. Ambos coexisten a
   propósito: en navegadores sin soporte de container queries (minoría
   residual), el "@media" sigue cubriendo al menos el caso de viewport
   móvil/tablet real. El umbral es algo menor que 480px porque el ancho de
   un contenedor (sin scrollbars ni chrome del navegador alrededor) tiende
   a sentirse "más apretado" antes que el viewport equivalente. */
@container (max-width: 360px) {
    .cb-style-predeterminado .cb-banner { height: 80px; }
    .cb-style-predeterminado .cb-avatar { width: 58px; height: 58px; }
    .cb-title { font-size: calc(16px * var(--cb-text-scale, 1)); }
    .cb-button { font-size: calc(14px * var(--cb-text-scale, 1)); padding: 12px 18px; }
    .cb-card-top-bar,
    .cb-portada-top-bar { padding: 10px 14px; }
    .cb-share-btn-label { display: none; }
    .cb-share-btn { padding: 6px; }
}

/* =========================================================
   SISTEMA DE PLANTILLAS: [comprar_box_grid]
   Contenedores que muestran VARIAS tarjetas juntas. Las tarjetas en sí
   (plantillas "cuadrícula" y "carrusel") son el mismo .cb-widget-box de
   siempre — solo cambia cómo se agrupan — así que heredan automáticamente
   todos los colores/tipografía/layout ya configurados en el panel.
========================================================= */
.cb-plantilla-shortcode {
    width: 100%;
    box-sizing: border-box;
    /* En el wrapper (no en .cb-grid-wrap): un elemento no puede definir un
       "container-type" y a la vez cambiar su propio grid-template-columns
       dentro de su propia @container query (crearía un ciclo). Poniéndolo
       aquí, .cb-grid-wrap —su hijo directo— sí puede consultarlo sin
       problema. */
    container-type: inline-size;
}
.cb-plantilla-shortcode *, .cb-plantilla-shortcode *::before, .cb-plantilla-shortcode *::after { box-sizing: border-box; }

/* --- Cuadrícula --- */
.cb-grid-wrap {
    display: grid;
    grid-template-columns: repeat(var(--cb-grid-cols, 3), 1fr);
    gap: 22px;
    width: 100%;
}

.cb-grid-item { min-width: 0; }
.cb-grid-item .cb-widget-box { max-width: none; margin: 0; height: 100%; }

@media (max-width: 900px) {
    .cb-grid-wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cb-grid-wrap { grid-template-columns: 1fr; }
}

/* Mismos 2 escalones, pero por el ancho real del contenedor del shortcode
   —no del viewport—, para el caso frecuente de un theme con columna de
   contenido angosta (por ejemplo 600px) en un monitor de escritorio
   ancho: sin esto, la cuadrícula intentaría igual 3-5 columnas fijas ahí
   y quedaría amontonada, aunque el visitante esté en pantalla grande. */
@container (max-width: 700px) {
    .cb-grid-wrap { grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 420px) {
    .cb-grid-wrap { grid-template-columns: 1fr; }
}

/* --- Lista minimalista --- */
.cb-lista-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    /* Igual razón que en .cb-widget-box: una lista puede vivir en un
       contenedor angosto (sidebar) dentro de una pantalla ancha. */
    container-type: inline-size;
}

.cb-lista-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--cb-surface, #fff);
    border: 1px solid var(--cb-border, rgba(20,20,26,0.08));
    border-radius: calc(var(--cb-radius, 18px) * 0.55);
    padding: 12px 16px;
    text-decoration: none;
    color: var(--cb-text, #14141a);
    transition: transform var(--cb-transition-duration, .25s) ease, box-shadow var(--cb-transition-duration, .25s) ease;
}

.cb-lista-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -10px rgba(16, 24, 40, 0.25);
}

.cb-lista-item-icono {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--cb-surface-2, #f6f7fb);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cb-lista-item-icono img { width: 100%; height: 100%; object-fit: cover; }
.cb-lista-item-icono-fallback { width: 60%; height: 60%; display: flex; align-items: center; justify-content: center; color: var(--cb-text-muted, #6b7280); }
.cb-lista-item-icono-fallback svg { width: 100%; height: 100%; }

.cb-lista-item-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cb-lista-item-titulo {
    font-weight: var(--cb-title-weight, 700);
    font-size: calc(14.5px * var(--cb-text-scale, 1));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-lista-item-meta {
    font-size: calc(12px * var(--cb-text-scale, 1));
    color: var(--cb-text-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cb-lista-item-meta a { color: inherit; }

.cb-lista-item-boton {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cb-btn-bg, var(--cb-primary, #8b0000));
    color: var(--cb-btn-text, #fff);
    font-size: calc(12px * var(--cb-text-scale, 1));
    font-weight: 700;
    text-transform: var(--cb-btn-text-transform, uppercase);
    padding: 8px 14px;
    border-radius: calc(var(--cb-radius, 18px) * 0.4);
    white-space: nowrap;
}

.cb-lista-item-boton svg { width: 14px; height: 14px; }

@media (max-width: 480px) {
    .cb-lista-item-meta { display: none; }
    .cb-lista-item-boton span { display: none; }
}

/* Mismo ajuste, disparado por el ancho real del contenedor (sidebar
   angosto en un escritorio ancho, por ejemplo) en vez del viewport. */
@container (max-width: 340px) {
    .cb-lista-item-meta { display: none; }
    .cb-lista-item-boton span { display: none; }
}

/* --- Carrusel --- */
.cb-carrusel-outer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    container-type: inline-size;
}

.cb-carrusel-wrap {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 2px 14px;
    flex: 1;
    /* Barra de scroll discreta en vez de ocultarla del todo: sigue siendo
       navegable con el trackpad/rueda del ratón sin depender solo de los
       botones, algo importante para accesibilidad. */
    scrollbar-width: thin;
}

.cb-carrusel-item {
    flex: 0 0 clamp(240px, 80vw, 300px);
    scroll-snap-align: start;
}

.cb-carrusel-item .cb-widget-box { max-width: none; margin: 0; }

.cb-carrusel-nav {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cb-border, rgba(20,20,26,0.08));
    background: var(--cb-surface, #fff);
    color: var(--cb-text, #14141a);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
}

.cb-carrusel-nav:hover { background: var(--cb-surface-2, #f6f7fb); }
.cb-carrusel-nav:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 640px) {
    .cb-carrusel-nav { display: none; }
}

@container (max-width: 480px) {
    .cb-carrusel-nav { display: none; }
}

/* =========================================================
   FICHAS DE FABRICANTE: página pública /fabricante/{slug}/
========================================================= */
.cb-fabricante-pagina {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    container-type: inline-size;
}

.cb-fabricante-banner {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 180px;
    background: linear-gradient(135deg, var(--cb-primary, #8b0000) 0%, var(--cb-secondary, #1a1a2e) 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 28px;
    margin-bottom: 28px;
}

.cb-fabricante-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}

.cb-fabricante-cabecera {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.cb-fabricante-logo {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    object-fit: contain;
    background: #fff;
    padding: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    flex-shrink: 0;
}

.cb-fabricante-logo-inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: var(--cb-primary, #8b0000);
}

.cb-fabricante-titulo {
    color: #fff;
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.cb-fabricante-descripcion {
    font-size: 15px;
    line-height: 1.6;
    color: inherit;
    max-width: 760px;
    margin-bottom: 28px;
}

.cb-fabricante-subtitulo {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

@container (max-width: 480px) {
    .cb-fabricante-banner { padding: 18px; min-height: 140px; }
    .cb-fabricante-logo { width: 52px; height: 52px; }
    .cb-fabricante-cabecera { gap: 12px; }
}

/* =========================================================
   CAJA INFORMATIVA: texto opcional encima/debajo del botón oficial.
========================================================= */
.cb-info-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    background: var(--cb-infobox-color-fondo, #fff8e1);
    color: var(--cb-infobox-color-texto, #5c4b13);
    border: 1px solid var(--cb-infobox-color-borde, #f0dfa0);
    border-radius: var(--cb-infobox-radio, 10px);
    padding: var(--cb-infobox-padding, 12px);
    font-size: calc(12.5px * var(--cb-text-scale, 1) * var(--cb-infobox-scale, 1));
    line-height: 1.5;
}

.cb-info-box-arriba { margin-bottom: var(--cb-infobox-margen, 10px); }
.cb-info-box-abajo  { margin-top: var(--cb-infobox-margen, 10px); }

.cb-info-box-icono {
    flex-shrink: 0;
    font-size: calc(15px * var(--cb-infobox-scale, 1));
    line-height: 1.4;
}

.cb-info-box-texto { flex: 1; min-width: 0; }
.cb-info-box-texto p { margin: 0 0 6px; }
.cb-info-box-texto p:last-child { margin-bottom: 0; }
.cb-info-box-texto a { color: inherit; text-decoration: underline; }