/**
 * JCC Design System — Liquid Glass v1.4
 *
 * CAMBIOS CRÍTICOS DE PERFORMANCE vs v1.3:
 * - backdrop-filter ELIMINADO de las cards (.jcc-gc).
 *   Razón: Firefox desktop hace composición CPU-bound cuando hay scroll
 *   detrás de elementos con backdrop-filter. v1.3 tenía 10-15 cards con
 *   este filter activo + scroll = jank severo incluso en hardware tope.
 *   Mantenido solo en:
 *     - .jcc-nav (un único elemento fijo)
 *     - .jcc-modal-overlay.open (on-demand)
 *
 * - mix-blend-mode: overlay del noise ELIMINADO. Firefox lo procesa por
 *   software. Reemplazado por opacidad estática embebida en el SVG.
 *
 * - Gradientes radiales del body reducidos de 5 a 3 (cada gradient = repaint
 *   en cambios de viewport; menos = más liviano).
 *
 * El glass real se compone ahora SIN blur de fondo:
 *   - highlight especular interno (gradient lineal estático) ✓
 *   - border-image gradient direccional ✓
 *   - noise estático sin blend mode ✓
 *   - sombras multi-capa ✓
 *   - rgba semi-transparente que deja ver el mesh ✓
 *   - glow accents posicionales (variantes por sección) ✓
 *
 * Resultado: visualmente equivalente a v1.3, rendering fluido en Firefox
 * desktop con i7 + RTX y en mobile lowend. Cero blur por scroll.
 */

/* ════════════════════════════════════════════════════════════════════════
 * 1. CSS VARIABLES
 * ════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Fondo: mesh saturado (3 gradients en lugar de 5) ── */
    --jcc-bg-base: #F4EDF1;
    --jcc-bg-1:    #FBDFC4;
    --jcc-bg-2:    #C9DCF2;
    --jcc-bg-3:    #DBC9EC;

    /* ── Glass surfaces ── */
    --jcc-glass:        rgba(255, 255, 255, 0.78);
    --jcc-glass-hover:  rgba(255, 255, 255, 0.88);
    --jcc-glass-strong: rgba(255, 255, 255, 0.92);
    --jcc-glass-solid:  rgba(255, 255, 255, 0.94);

    /* ── Glass borders direccionales ── */
    --jcc-glass-bd-from:   rgba(255, 255, 255, 0.95);
    --jcc-glass-bd-to:     rgba(255, 255, 255, 0.30);
    --jcc-glass-bd-flat:   rgba(255, 255, 255, 0.85);
    --jcc-glass-bd-strong: rgba(240, 238, 235, 0.95);

    /* ── Shadows: warmth-tinted, multi-layer ── */
    --jcc-shadow-sm:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 1px 2px rgba(120, 40, 50, 0.04),
        0 4px 12px -2px rgba(120, 40, 50, 0.05);
    --jcc-shadow-md:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 4px rgba(120, 40, 50, 0.05),
        0 12px 28px -6px rgba(120, 40, 50, 0.10);
    --jcc-shadow-lg:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 8px rgba(120, 40, 50, 0.06),
        0 24px 48px -8px rgba(120, 40, 50, 0.18);
    --jcc-shadow-nav:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -2px 10px rgba(0, 0, 0, 0.04),
        0 10px 40px -10px rgba(120, 40, 50, 0.18);

    /* ── Highlight: gradient especular interno ── */
    --jcc-highlight: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.00) 55%
    );

    /* ── Brand ── */
    --jcc-red:           #A30000;
    --jcc-red-dark:      #7A0000;
    --jcc-red-bg:        rgba(163, 0, 0, 0.07);
    --jcc-red-bg-strong: rgba(163, 0, 0, 0.12);

    /* ── Semantic ── */
    --jcc-green:        #2E9964;
    --jcc-green-soft:   #D4F0E2;
    --jcc-green-bg:     rgba(46, 153, 100, 0.07);
    --jcc-blue:         #4A7FC1;
    --jcc-blue-bg:      rgba(74, 127, 193, 0.07);
    --jcc-gold:         #C89B3C;
    --jcc-gold-bg:      rgba(200, 155, 60, 0.08);
    --jcc-orange:       #D48C3C;
    --jcc-orange-soft:  #FCEBD4;
    --jcc-orange-bg:    rgba(212, 140, 60, 0.07);
    --jcc-purple:       #8B5CB8;
    --jcc-purple-bg:    rgba(139, 92, 184, 0.07);

    /* ── Text ── */
    --jcc-t1: #1A1218;
    --jcc-t2: #5C5466;
    --jcc-t3: #9A93A2;
    --jcc-tw: #FFFFFF;

    /* ── Radius ── */
    --jcc-r-sm:   14px;
    --jcc-r-md:   18px;
    --jcc-r-lg:   24px;
    --jcc-r-pill: 50px;

    /* ── Typography ── */
    --jcc-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
    --jcc-font-display: 'DM Serif Display', Georgia, serif;
    --jcc-font-size:    15px;

    /* ── Transitions ── */
    --jcc-ts:        0.3s cubic-bezier(0.22, 1, 0.36, 1);
    --jcc-ts-fast:   0.16s ease-out;
    --jcc-ts-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    --jcc-ts-nav:    0.32s cubic-bezier(0.34, 1.4, 0.64, 1);

    /* ── Layout ── */
    --jcc-max-width:     1300px;
    --jcc-sidebar-width: 310px;
    --jcc-nav-h:         68px;
    --jcc-nav-bottom:    24px;

}

/* Reducción de motion: respeta preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
    :root {
        --jcc-ts:        0s;
        --jcc-ts-fast:   0s;
        --jcc-ts-spring: 0s;
        --jcc-ts-nav:    0s;
    }
    .jcc-anim { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 * 2. BASE
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-app {
    font-family: var(--jcc-font-body);
    font-size:   var(--jcc-font-size);
    color:       var(--jcc-t1);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Espacio inferior para que el bottom-nav no tape contenido */
    padding-bottom: calc(var(--jcc-nav-h) + var(--jcc-nav-bottom) + 24px);
}
.jcc-app *,
.jcc-app *::before,
.jcc-app *::after { box-sizing: border-box; }

.jcc-app :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--jcc-red);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Mesh background: 3 gradientes (era 5 en v1.3) */
body.jcc-glass-bg {
    background:
        radial-gradient(ellipse 80% 60% at 5% 12%,  var(--jcc-bg-1) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 95% 15%, var(--jcc-bg-2) 0%, transparent 60%),
        radial-gradient(ellipse 90% 60% at 50% 95%, var(--jcc-bg-3) 0%, transparent 55%),
        var(--jcc-bg-base);
    background-attachment: scroll;
}
body.jcc-glass-bg::-webkit-scrollbar       { width: 8px; }
body.jcc-glass-bg::-webkit-scrollbar-track { background: transparent; }
body.jcc-glass-bg::-webkit-scrollbar-thumb { background: rgba(163, 0, 0, 0.12); border-radius: 10px; }
body.jcc-glass-bg::-webkit-scrollbar-thumb:hover { background: rgba(163, 0, 0, 0.22); }

/* ════════════════════════════════════════════════════════════════════════
 * 3. GLASS CARD
 *
 * v1.4: composición SIN backdrop-filter. El "glass" se simula con:
 * - rgba background (deja ver el mesh)
 * - ::before con highlight especular
 * - ::after con noise estático
 * - border gradient direccional
 * - sombras multi-capa
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-gc {
    position: relative;
    background: var(--jcc-glass);
    border: 1px solid var(--jcc-glass-bd-flat);
    border-radius: var(--jcc-r-lg);
    box-shadow: var(--jcc-shadow-sm);
    /* v1.4.4 PERF: hover corto (0.16s) = ~10 frames pintados en vez de ~18.
       box-shadow es paint-heavy en Firefox; menos frames = menos jank al
       pasar el mouse por la grilla de cards. */
    transition:
        background-color var(--jcc-ts-fast),
        box-shadow var(--jcc-ts-fast),
        transform var(--jcc-ts-fast);
    overflow: hidden;
    isolation: isolate;
    /* v1.4.4 PERF: containment — el engine puede podar layout/paint
       invalidations al interior de cada card. Seguro: overflow:hidden ya
       garantiza que nada visual escapa de la card. */
    contain: layout paint style;
}

/* Highlight especular */
.jcc-gc::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; /* fallback Safari <14.1 */
    inset: 0;
    background: var(--jcc-highlight);
    pointer-events: none;
    z-index: 0;
}

/* v1.4.1: noise overlay ELIMINADO de cards.
   Aplicar un pattern SVG en pseudo-elemento de cada card (15+ instancias)
   genera paint sumativo. El glass se sostiene con highlight + border
   gradient + sombras sin necesitar la textura. */

/* v1.4.4: border-image ELIMINADO.
   border-image ignora border-radius (el borde gradiente se dibujaba
   cuadrado sobre cards redondeadas) y suma paint por card. El borde
   flat rgba + highlight ::before sostienen el efecto glass. */

/* Contenido sobre los pseudo-elementos */
.jcc-gc > * { position: relative; z-index: 1; }

.jcc-gc:hover {
    background: var(--jcc-glass-hover);
    box-shadow: var(--jcc-shadow-md);
    transform: translateY(-1px);
}

.jcc-gc-static {
    position: relative;
    background: var(--jcc-glass);
    border: 1px solid var(--jcc-glass-bd-flat);
    border-radius: var(--jcc-r-lg);
    box-shadow: var(--jcc-shadow-sm);
}

/* ════════════════════════════════════════════════════════════════════════
 * 3b. GLOW ACCENTS — variantes de profundidad por sección
 *
 * Cada glow es un radial-gradient adicional posicionado en un cuadrante
 * distinto, con color de marca diferente. Se aplica como clase compuesta
 * en .jcc-gc para sumarse al highlight base.
 *
 * Implementación: agregamos un segundo background al ::before existente.
 * Como ::before ya tiene var(--jcc-highlight), los combinamos con
 * background-image multi-layer.
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-gc.jcc-glow-red-tr::before {
    background:
        radial-gradient(circle 200px at calc(100% + 30px) -20%, rgba(163, 0, 0, 0.18), transparent 65%),
        var(--jcc-highlight);
}
.jcc-gc.jcc-glow-blue-tl::before {
    background:
        radial-gradient(circle 220px at -10% -10%, rgba(74, 127, 193, 0.18), transparent 60%),
        var(--jcc-highlight);
}
.jcc-gc.jcc-glow-green-br::before {
    background:
        radial-gradient(circle 220px at 110% 110%, rgba(46, 153, 100, 0.20), transparent 60%),
        var(--jcc-highlight);
}
.jcc-gc.jcc-glow-gold-tc::before {
    background:
        radial-gradient(ellipse 280px 140px at 50% -30%, rgba(200, 155, 60, 0.22), transparent 70%),
        var(--jcc-highlight);
}
.jcc-gc.jcc-glow-purple-bl::before {
    background:
        radial-gradient(circle 200px at -10% 110%, rgba(139, 92, 184, 0.20), transparent 65%),
        var(--jcc-highlight);
}
.jcc-gc.jcc-glow-orange-mr::before {
    background:
        radial-gradient(circle 240px at 110% 50%, rgba(212, 140, 60, 0.20), transparent 60%),
        var(--jcc-highlight);
}

/* ════════════════════════════════════════════════════════════════════════
 * 4. TOPBAR (LEGACY — deprecated en v1.4)
 *
 * Los estilos se mantienen para retro-compatibilidad si otros plugins
 * todavía usan JCC_DS_Topbar::render(). En el dashboard ya no se renderiza.
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-topbar {
    position: sticky; top: 0; z-index: 200;
    height: 56px;
    background: var(--jcc-glass-solid);
    border-bottom: 1px solid var(--jcc-glass-bd-strong);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 36px;
}

/* ════════════════════════════════════════════════════════════════════════
 * 5. BOTTOM-NAV UNIVERSAL (v1.4 — reemplaza al topbar)
 *
 * Comportamiento:
 * - Posicionado bottom: 24px en desktop (flotante), 8px en mobile.
 * - Pill rounded, contenido centrado, max-width 720px en desktop.
 * - Backdrop-filter aquí SÍ porque es UN solo elemento fijo → cero costo
 *   de scroll-induced compositing (Firefox-safe).
 * - Item activo: padding mayor, label visible, color rojo.
 * - Items inactivos: solo ícono. Tooltip al hover.
 * - Indicador deslizante (.jcc-nav-indicator) animado por JS.
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-nav {
    position: fixed;
    bottom: var(--jcc-nav-bottom);
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    width: calc(100% - 32px);
    max-width: 720px;
    pointer-events: none;                /* hijos rescatan pointer-events */
}
.jcc-nav-inner {
    position: relative;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--jcc-r-pill);
    padding: 6px;
    box-shadow: var(--jcc-shadow-nav);
    pointer-events: auto;
}
/* v1.4.1: backdrop-filter REMOVIDO del nav.
   Firefox re-sampea el blur en cada frame que cambia algo detrás del
   nav fijo (scroll, animaciones, hover). El background opaco al 94%
   es visualmente equivalente y elimina el repaint continuo. */
.jcc-nav-list {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2px;
    list-style: none;
    margin: 0; padding: 0;
    position: relative;
    z-index: 2;
}
.jcc-nav-item {
    position: relative;
    flex: 0 0 auto;
}
.jcc-nav-link {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: var(--jcc-r-pill);
    color: var(--jcc-t2);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--jcc-font-body);
    font-size: 0.86rem;
    font-weight: 500;
    transition: color var(--jcc-ts-nav), padding var(--jcc-ts-nav);
    white-space: nowrap;
    position: relative;
}
.jcc-nav-link:hover { color: var(--jcc-t1); }
.jcc-nav-icon {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: currentColor;
    flex-shrink: 0;
    transition: transform var(--jcc-ts-nav);
}
.jcc-nav-icon svg { width: 22px; height: 22px; }
.jcc-nav-label {
    font-weight: 600;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition:
        max-width var(--jcc-ts-nav),
        opacity var(--jcc-ts-nav),
        margin var(--jcc-ts-nav);
}

/* Item activo: label visible, background rojo claro, color rojo */
.jcc-nav-item.is-active .jcc-nav-link {
    color: var(--jcc-red);
    padding: 10px 20px 10px 14px;
}
.jcc-nav-item.is-active .jcc-nav-label {
    max-width: 200px;
    opacity: 1;
}
.jcc-nav-item.is-active .jcc-nav-icon { transform: scale(1.05); }

/* Hover en items inactivos: ícono levemente más grande */
.jcc-nav-item:not(.is-active) .jcc-nav-link:hover .jcc-nav-icon {
    transform: scale(1.15);
}

/* Badge en items con notificaciones */
.jcc-nav-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--jcc-red);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
}
.jcc-nav-item.is-active .jcc-nav-badge {
    top: 4px;
    right: auto;
    left: 28px;
}

/* Tooltip de items inactivos */
.jcc-nav-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(20, 10, 15, 0.92);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--jcc-ts), transform var(--jcc-ts);
    z-index: 10;
}
.jcc-nav-item:not(.is-active) .jcc-nav-link:hover + .jcc-nav-tooltip,
.jcc-nav-item:not(.is-active) .jcc-nav-link:focus-visible + .jcc-nav-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Indicador deslizante: pill rojo claro detrás del activo */
.jcc-nav-indicator {
    position: absolute;
    top: 6px;
    left: 0;
    height: calc(100% - 12px);
    width: 0;
    background: var(--jcc-red-bg);
    border-radius: var(--jcc-r-pill);
    transition:
        transform var(--jcc-ts-nav),
        width var(--jcc-ts-nav);
    z-index: 1;
    pointer-events: none;
    opacity: 0;                  /* JS lo activa cuando calcula la posición */
}
.jcc-nav-indicator.is-ready { opacity: 1; }

/* Item "Más" (mobile only) */
.jcc-nav-more { display: none; }

/* Responsive del nav */
@media (max-width: 599px) {
    .jcc-nav {
        bottom: 8px;
        width: calc(100% - 16px);
    }
    .jcc-nav-link {
        padding: 8px 10px;
    }
    .jcc-nav-item.is-active .jcc-nav-link {
        padding: 8px 14px 8px 10px;
    }
    .jcc-nav-item.is-mobile-extra { display: none; }
    .jcc-nav-more                  { display: block; }
    /* En mobile reducimos tooltip y nav-label tamaño */
    .jcc-nav-label { font-size: 0.80rem; }
    .jcc-nav-tooltip { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 * 7. SECTION HEADERS
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-sh {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 6px;
}
.jcc-section-title {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--jcc-t3);
}
.jcc-section-link {
    font-size: 0.8rem;
    color: var(--jcc-red);
    text-decoration: none;
    font-weight: 600;
}
.jcc-section-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════
 * 8. BUTTONS
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--jcc-font-body);
    font-size: 0.84rem; font-weight: 600;
    padding: 9px 20px;
    border-radius: var(--jcc-r-pill);
    border: none;
    cursor: pointer;
    transition: background-color var(--jcc-ts-fast), color var(--jcc-ts-fast), box-shadow var(--jcc-ts-fast), transform var(--jcc-ts-fast);
    text-decoration: none;
    position: relative;
    z-index: 2;
}
.jcc-btn-primary {
    background: linear-gradient(180deg, #B81000 0%, var(--jcc-red) 100%);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 8px rgba(163, 0, 0, 0.18);
}
.jcc-btn-primary:hover {
    background: linear-gradient(180deg, var(--jcc-red) 0%, var(--jcc-red-dark) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 4px 14px rgba(163, 0, 0, 0.30);
}
.jcc-btn-outline {
    background: transparent;
    color: var(--jcc-red);
    border: 1.5px solid rgba(163, 0, 0, 0.22);
}
.jcc-btn-outline:hover {
    background: rgba(163, 0, 0, 0.05);
    border-color: var(--jcc-red);
}
.jcc-btn-lg {
    padding: 14px 28px;
    font-size: 0.95rem; font-weight: 700;
    border-radius: var(--jcc-r-sm);
    justify-content: center;
    width: 100%;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 4px 16px rgba(163, 0, 0, 0.22);
}
.jcc-btn-lg:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 6px 24px rgba(163, 0, 0, 0.32);
    transform: translateY(-1px);
}
.jcc-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * 9. ICON CONTAINER
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-ico {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--jcc-red-bg);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.jcc-ico svg { width: 20px; height: 20px; color: var(--jcc-red); }
.jcc-ico-lg     { width: 44px; height: 44px; border-radius: 14px; }
.jcc-ico-lg svg { width: 22px; height: 22px; }
.jcc-ico-sm     { width: 32px; height: 32px; border-radius: 10px; }
.jcc-ico-sm svg { width: 16px; height: 16px; }

/* ── v1.5.5: ícono SÓLIDO (glifo blanco sobre rojo) ──
   Tratamiento con más presencia, alineado con el header del shortcode de
   Pedidos. Se combina con .jcc-card-head para el patrón ícono + título. */
.jcc-ico-solid {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: linear-gradient(158deg, #BE1414 0%, var(--jcc-red) 62%);
    box-shadow:
        0 4px 11px rgba(163, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
/* Los íconos del catálogo son stroke-based (currentColor) → blancos acá */
.jcc-ico-solid svg { width: 23px; height: 23px; color: #fff; }
/* Íconos custom dentro del ícono sólido: tamaño base. El forzado a blanco
   se quitó en v1.5.9 — un PNG subido se muestra con sus colores propios y
   sin contenedor (ver el bloque de íconos custom más abajo). */
.jcc-ico-solid .jcc-icon-custom {
    width: 23px; height: 23px;
    object-fit: contain;
}
.jcc-ico-solid-sm     { width: 40px; height: 40px; border-radius: 12px; }
.jcc-ico-solid-sm svg,
.jcc-ico-solid-sm .jcc-icon-custom { width: 20px; height: 20px; }
.jcc-ico-solid-lg     { width: 56px; height: 56px; border-radius: 16px; }
.jcc-ico-solid-lg svg,
.jcc-ico-solid-lg .jcc-icon-custom { width: 28px; height: 28px; }

/* ── v1.5.5: header de card — ícono a la izquierda + título serif ── */
.jcc-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-width: 0;
}
.jcc-card-title {
    font-family: var(--jcc-font-display);
    font-weight: 400;
    font-size: 1.16rem;
    line-height: 1.22;
    color: var(--jcc-t1);
    min-width: 0;
}
.jcc-card-title-sm { font-size: 1.04rem; }
.jcc-card-title-lg { font-size: 1.38rem; }

/* ════════════════════════════════════════════════════════════════════════
 * 10. TAGS / BADGES
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-tag {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}
.jcc-tag-new     { background: var(--jcc-green-soft);  color: var(--jcc-green); }
.jcc-tag-popular { background: var(--jcc-orange-soft); color: var(--jcc-orange); }
.jcc-tag-pending { background: var(--jcc-orange-soft); color: var(--jcc-orange); }
.jcc-tag-overdue { background: rgba(163, 0, 0, 0.08);  color: var(--jcc-red); }
.jcc-tag-paid    { background: var(--jcc-green-soft);  color: var(--jcc-green); }
.jcc-tag-blocked { background: rgba(0, 0, 0, 0.05);    color: var(--jcc-t3); }

.jcc-badge-active {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 13px;
    border-radius: var(--jcc-r-pill);
    font-size: 0.76rem; font-weight: 600;
    background: var(--jcc-green-soft);
    color: var(--jcc-green);
    position: relative;
    z-index: 2;
}
.jcc-badge-active .jcc-dot {
    width: 6px; height: 6px;
    background: currentColor;
    border-radius: 50%;
    /* v1.4.1: animación blink ELIMINADA. Causaba repaint continuo cada 2s
       en 2-3 elementos visibles permanentemente. El glow estático con
       box-shadow simula el "vivo" sin costo de repintado. */
    box-shadow: 0 0 0 3px rgba(46, 153, 100, 0.18);
}

.jcc-clickable { cursor: pointer; }
.jcc-clickable:hover { transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════════════════
 * 11. MODALS
 *
 * El overlay del modal SÍ tiene backdrop-filter: aparece on-demand
 * (no en cada page load), tapa todo el viewport, y solo está activo
 * mientras el modal está abierto. Costo aceptable.
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-modal-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0; /* fallback Safari <14.1 */
    inset: 0;
    z-index: 1000;
    background: rgba(20, 10, 15, 0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* v1.4.4 PERF: visibility saca los modales cerrados del render tree y
       del hit-testing (con ~8 modales en DOM, ahorra layout en cada reflow).
       El delay 0.3s permite que la animación de cierre termine antes de
       ocultar. content-visibility además skipea el layout interno. */
    visibility: hidden;
    content-visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    padding: 20px;
}
.jcc-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    content-visibility: visible;
    transition: opacity 0.3s ease;
}
/* v1.4.4 PERF: blur del overlay deshabilitado en Firefox.
   Su implementación de backdrop-filter re-samplea el viewport completo
   y es CPU-bound al animar la apertura/cierre. El guard
   (not (-moz-appearance:none)) excluye Firefox: Chrome/Safari no parsean
   -moz-appearance, por lo que el "not" es true para ellos. */
@supports ((backdrop-filter: blur(8px)) and (not (-moz-appearance: none))) {
    @media (prefers-reduced-motion: no-preference) {
        .jcc-modal-overlay.open {
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
    }
}

.jcc-modal-box {
    position: relative;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--jcc-glass-bd-strong);
    border-radius: var(--jcc-r-lg);
    width: 100%; max-width: 600px; max-height: 85vh;
    overflow: hidden;
    box-shadow: var(--jcc-shadow-lg);
    transform: translateY(16px) scale(0.97);
    transition: transform var(--jcc-ts);
    display: flex;
    flex-direction: column;
    isolation: isolate;
}
.jcc-modal-box::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; /* fallback Safari <14.1 */
    inset: 0;
    background: var(--jcc-highlight);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.jcc-modal-overlay.open .jcc-modal-box { transform: translateY(0) scale(1); }

.jcc-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;   /* v1.5.0: aire entre [Volver] · título · [X] */
    padding: 22px 26px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.jcc-modal-header h2 {
    font-family: var(--jcc-font-display);
    font-size: 1.2rem; font-weight: 400;
    display: flex; align-items: center; gap: 10px;
    flex: 1;         /* v1.5.0: el título domina el espacio disponible */
    min-width: 0;    /* permite ellipsis/wrap controlado sin empujar la X */
}
.jcc-modal-header h2 svg { flex-shrink: 0; }
.jcc-modal-close { flex-shrink: 0; }
/* v1.5.5: OJO — esta regla tenía más especificidad (0,1,2) que
   .jcc-ico-solid svg (0,1,1), así que pintaba de rojo el glifo que ahora va
   dentro del ícono sólido (rojo sobre rojo = invisible). La limitamos a
   svg hijo DIRECTO del h2, caso legacy en el que no hay ícono sólido. */
.jcc-modal-header h2 > svg { width: 22px; height: 22px; color: var(--jcc-red); }

/* v1.5.5: título del modal con más presencia (ícono sólido + serif mayor) */
.jcc-modal-header h2 { font-size: 1.34rem; gap: 12px; }
.jcc-modal-title-txt { min-width: 0; line-height: 1.2; }
.jcc-modal-ico { box-shadow: 0 3px 9px rgba(163, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.20); }

@media (max-width: 480px) {
    .jcc-modal-header h2 { font-size: 1.12rem; gap: 10px; }
    .jcc-modal-ico { width: 36px; height: 36px; border-radius: 11px; }
    .jcc-modal-ico svg,
    .jcc-modal-ico .jcc-icon-custom { width: 18px; height: 18px; }
}
.jcc-modal-close {
    width: 34px; height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 17px;
    color: var(--jcc-t2);
    transition: background-color var(--jcc-ts-fast), color var(--jcc-ts-fast);
    flex-shrink: 0;
}
.jcc-modal-close:hover {
    background: var(--jcc-red);
    color: #fff;
    border-color: var(--jcc-red);
}

/* v1.5.0: botón "← Volver" REDISEÑADO.
   El intento anterior (flex-basis:100%) estiraba el botón a todo el ancho
   dentro del header flex sin wrap, aplastando el título (bug reportado).
   Ahora es una pill compacta a la IZQUIERDA del título — patrón estándar:
   [← Volver]  Título ................ [X]
   flex:0 0 auto → nunca se estira; el h2 conserva flex:1 y su jerarquía. */
.jcc-modal-back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px 7px 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--jcc-t2);
    font-family: var(--jcc-font-sans);
    font-size: 0.83rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--jcc-ts-fast), color var(--jcc-ts-fast), border-color var(--jcc-ts-fast), transform var(--jcc-ts-fast);
    animation: jcc-back-in 0.22s ease-out;
}
/* En pantallas angostas: solo el ícono (círculo compacto, simétrico a la X) */
@media (max-width: 480px) {
    .jcc-modal-back { padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 50%; }
    .jcc-modal-back .jcc-modal-back-txt { display: none; }
}
.jcc-modal-back svg { flex-shrink: 0; }
.jcc-modal-back:hover {
    background: var(--jcc-red);
    color: #fff;
    border-color: var(--jcc-red);
}
.jcc-modal-back:active { transform: scale(0.96); }
@keyframes jcc-back-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .jcc-modal-back { animation: none; }
}

/* Fila de item que abre otro modal: cursor pointer + affordance en hover */
.jcc-mi-haschild { cursor: pointer; }
.jcc-mi-haschild:hover { background: rgba(255, 255, 255, 0.6); }
/* v1.5.7: 14px arriba — el mismo valor que el padding-bottom del header,
   así el contenido queda simétrico respecto del borde divisorio. v1.5.6
   usaba 4px y el texto quedaba pegado a la línea; el original (18px + los
   ~13px que el <p> heredaba del user-agent) daba ~31px, demasiado. */
.jcc-modal-body {
    padding: 14px 26px 26px;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    flex: 1;
}
/* v1.5.6: margin-top explícito en 0. Antes solo se definía margin-bottom,
   por lo que el <p> heredaba el margin-block-start del user-agent (1em ≈
   13px) y sumaba al hueco entre el título y la descripción. */
.jcc-modal-body > p {
    font-size: 0.88rem;
    color: var(--jcc-t2);
    margin: 0 0 16px;
    line-height: 1.6;
}
/* Cualquier primer hijo del body arranca pegado al header */
.jcc-modal-body > *:first-child { margin-top: 0; }

/* Modal items */
.jcc-mi {
    display: flex; align-items: center; gap: 14px;
    padding: 14px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--jcc-r-sm);
    transition: background-color var(--jcc-ts-fast), border-color var(--jcc-ts-fast), transform var(--jcc-ts-fast);
}
.jcc-mi:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 2px 8px rgba(120, 40, 50, 0.04);
}
.jcc-mi-ico {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--jcc-red-bg);
}
.jcc-mi-ico svg { width: 20px; height: 20px; color: var(--jcc-red); }
.jcc-mi-info { flex: 1; }
.jcc-mi-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 1px; }
.jcc-mi-sub   { font-size: 0.78rem; color: var(--jcc-t3); }
.jcc-mi-btn {
    padding: 8px 16px;
    border-radius: var(--jcc-r-pill);
    border: none;
    background: linear-gradient(180deg, #B81000 0%, var(--jcc-red) 100%);
    color: #fff;
    font-family: var(--jcc-font-body);
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
    transition: box-shadow var(--jcc-ts-fast), transform var(--jcc-ts-fast), background-color var(--jcc-ts-fast);
    white-space: nowrap;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 6px rgba(163, 0, 0, 0.15);
    text-decoration: none;
}
.jcc-mi-btn:hover {
    background: linear-gradient(180deg, var(--jcc-red) 0%, var(--jcc-red-dark) 100%);
}
.jcc-mi-btn-outline {
    background: transparent;
    color: var(--jcc-red);
    border: 1.5px solid rgba(163, 0, 0, 0.2);
    box-shadow: none;
}
.jcc-mi-btn-outline:hover {
    background: rgba(163, 0, 0, 0.05);
}
.jcc-mi-today {
    background: rgba(163, 0, 0, 0.04);
    border-color: rgba(163, 0, 0, 0.12);
}
.jcc-mi-today .jcc-mi-title::after {
    content: 'HOY';
    margin-left: 8px;
    font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--jcc-red);
    color: #fff;
    padding: 2px 7px;
    border-radius: 10px;
    vertical-align: middle;
}
.jcc-modal-divider {
    margin: 16px 0 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.jcc-modal-divider-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--jcc-t1);
    margin-bottom: 10px;
}

/* ════════════════════════════════════════════════════════════════════════
 * 12. INFO TOOLTIP
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-info-trigger {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--jcc-red-bg);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}
.jcc-info-trigger svg { width: 12px; height: 12px; color: var(--jcc-red); }
.jcc-info-trigger:hover .jcc-info-bubble,
.jcc-info-trigger:focus-visible .jcc-info-bubble {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.jcc-info-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 260px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--jcc-glass-bd-strong);
    border-radius: var(--jcc-r-sm);
    box-shadow: var(--jcc-shadow-lg);
    font-size: 0.8rem;
    color: var(--jcc-t2);
    line-height: 1.6;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--jcc-ts), transform var(--jcc-ts);
    z-index: 10;
}
.jcc-info-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--jcc-glass-bd-strong);
}

/* ════════════════════════════════════════════════════════════════════════
 * 13. CHECKBOX
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-check input[type="checkbox"] { display: none; }
.jcc-check-box {
    width: 22px; height: 22px;
    border-radius: 7px;
    border: 2px solid rgba(163, 0, 0, 0.2);
    display: flex; align-items: center; justify-content: center;
    transition: background-color var(--jcc-ts-fast), border-color var(--jcc-ts-fast);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
}
.jcc-check-box svg {
    width: 14px; height: 14px;
    color: white;
    opacity: 0;
    transition: opacity var(--jcc-ts-fast);
}
.jcc-check input:checked + .jcc-check-box {
    background: var(--jcc-red);
    border-color: var(--jcc-red);
}
.jcc-check input:checked + .jcc-check-box svg { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════
 * 15. ANIMATIONS
 * ════════════════════════════════════════════════════════════════════════ */
@keyframes jcc-fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.jcc-anim { animation: jcc-fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.jcc-d1 { animation-delay: 0.03s; } .jcc-d2 { animation-delay: 0.06s; }
.jcc-d3 { animation-delay: 0.09s; } .jcc-d4 { animation-delay: 0.12s; }
.jcc-d5 { animation-delay: 0.15s; } .jcc-d6 { animation-delay: 0.18s; }
.jcc-d7 { animation-delay: 0.21s; } .jcc-d8 { animation-delay: 0.24s; }
.jcc-d9 { animation-delay: 0.27s; } .jcc-d10{ animation-delay: 0.30s; }

/* ════════════════════════════════════════════════════════════════════════
 * 16. UTILITIES
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-text-muted     { color: var(--jcc-t3); }
.jcc-text-secondary { color: var(--jcc-t2); }
.jcc-text-red       { color: var(--jcc-red); }
.jcc-text-green     { color: var(--jcc-green); }
.jcc-font-display   { font-family: var(--jcc-font-display); }
.jcc-font-bold      { font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
 * 17. DRAG HANDLE
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-drag-handle {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 3px;
    border-radius: 2px;
    background: rgba(163, 0, 0, 0.10);
    opacity: 0;
    transition: opacity var(--jcc-ts-fast), transform var(--jcc-ts-fast), color var(--jcc-ts-fast);
    pointer-events: none;
    z-index: 2;
}
.jcc-gc:hover > .jcc-drag-handle,
[data-jcc-id]:hover > .jcc-drag-handle { opacity: 1; }

.jcc-dragging {
    opacity: 0.5;
    transform: scale(0.96);
    cursor: grabbing !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * 18. PAGE LAYOUT
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-page {
    max-width: var(--jcc-max-width);
    margin: 0 auto;
    padding: 24px 36px 60px;
}
.jcc-layout-2col {
    display: grid;
    grid-template-columns: 1fr var(--jcc-sidebar-width);
    gap: 24px;
    align-items: start;
}
.jcc-main-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}
/* v1.4: sidebar ya no necesita estar sticky por topbar — usa stickiness propia */
.jcc-right-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px - var(--jcc-nav-h) - var(--jcc-nav-bottom));
    overflow-y: auto;
    scrollbar-width: thin;
}
.jcc-right-col::-webkit-scrollbar       { width: 4px; }
.jcc-right-col::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.06); border-radius: 4px; }

/* ════════════════════════════════════════════════════════════════════════
 * 19. RESPONSIVE
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .jcc-layout-2col { grid-template-columns: 1fr; }
    .jcc-right-col {
        position: static;
        max-height: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .jcc-page { padding: 20px 16px 90px; }
    .jcc-modal-box { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
 * 20. MODAL SHORTCODE CONTENT (v1.4)
 *
 * Contenedor del HTML libre / shortcodes inyectados desde admin.
 * Estilos defensivos: muchos plugins (Contact Form 7, WPForms, etc.)
 * traen su propio CSS. Aquí solo damos un wrapper neutro con tipografía
 * consistente y respiro vertical.
 * ════════════════════════════════════════════════════════════════════════ */
.jcc-modal-shortcode {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.9rem;
    color: var(--jcc-t2);
    line-height: 1.6;
}
.jcc-modal-shortcode:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.jcc-modal-shortcode > *:first-child { margin-top: 0; }
.jcc-modal-shortcode > *:last-child  { margin-bottom: 0; }
.jcc-modal-shortcode p { margin: 0 0 12px; }
.jcc-modal-shortcode h2,
.jcc-modal-shortcode h3,
.jcc-modal-shortcode h4 {
    font-family: var(--jcc-font-display);
    font-weight: 400;
    color: var(--jcc-t1);
    margin: 18px 0 10px;
}
.jcc-modal-shortcode a { color: var(--jcc-red); text-decoration: underline; }
.jcc-modal-shortcode a:hover { color: var(--jcc-red-dark); }
.jcc-modal-shortcode img,
.jcc-modal-shortcode iframe,
.jcc-modal-shortcode video {
    max-width: 100%;
    height: auto;
    border-radius: var(--jcc-r-sm);
}
.jcc-modal-shortcode input[type="text"],
.jcc-modal-shortcode input[type="email"],
.jcc-modal-shortcode input[type="tel"],
.jcc-modal-shortcode input[type="number"],
.jcc-modal-shortcode textarea,
.jcc-modal-shortcode select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    font-family: var(--jcc-font-body);
    font-size: 0.92rem;
    transition: opacity var(--jcc-ts-fast), transform var(--jcc-ts-fast), color var(--jcc-ts-fast);
}
.jcc-modal-shortcode input:focus,
.jcc-modal-shortcode textarea:focus,
.jcc-modal-shortcode select:focus {
    outline: none;
    border-color: var(--jcc-red);
    background: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
 * v1.4.4 — UX refinements
 * ════════════════════════════════════════════════════════════════════════ */

/* Press feedback: los elementos clickeables "responden" al click.
   transform es composited → costo cero de paint. */
.jcc-btn:active,
.jcc-mi-btn:active,
.jcc-qa-card:active,
.jcc-nav-link:active {
    transform: scale(0.975);
    transition-duration: 0.06s;
}
.jcc-gc:active { transform: translateY(0) scale(0.995); }

/* Anclas internas: que el scroll no las esconda bajo el bottom-nav */
.jcc-app :target {
    scroll-margin-bottom: calc(var(--jcc-nav-h) + var(--jcc-nav-bottom) + 16px);
    scroll-margin-top: 24px;
}

/* Área táctil mínima 44px en nav para mobile (WCAG 2.5.8) */
@media (max-width: 599px) {
    .jcc-nav-link { min-height: 44px; min-width: 44px; justify-content: center; }
}

/* Selección de texto con color de marca (detalle estético) */
.jcc-app ::selection {
    background: rgba(163, 0, 0, 0.14);
}

/* Scrollbar del body del modal más discreta */
.jcc-modal-body::-webkit-scrollbar       { width: 6px; }
.jcc-modal-body::-webkit-scrollbar-track { background: transparent; }
.jcc-modal-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }
.jcc-modal-body { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }

/* ════════════════════════════════════════════════════════════════════════
 * v1.4.8 — ARMADURA ANTI-THEME (Valenti / temas de magazine)
 *
 * Los temas comerciales aplican reglas agresivas a contenedores y elementos
 * genéricos (div, ul, li, a, [class*="col"]) que pisan nuestros estilos por
 * especificidad o !important. Este bloque REAFIRMA nuestras propiedades
 * críticas scopeadas a .jcc-app, ganando especificidad de forma legítima
 * (dos clases > una) y usando !important SOLO donde el theme también lo usa.
 * Todo bajo .jcc-app → no afecta ninguna regla fuera del dashboard.
 * ════════════════════════════════════════════════════════════════════════ */

.jcc-app, .jcc-app * { box-sizing: border-box; }
.jcc-app { line-height: 1.5; -webkit-font-smoothing: antialiased; }
.jcc-app .jcc-page { max-width: none; }

/* Glass cards: reafirmar fondo/sombra/borde (el theme los aplana) */
.jcc-app .jcc-gc {
    background: var(--jcc-glass) !important;
    box-shadow: var(--jcc-shadow-sm) !important;
    border: 1px solid var(--jcc-glass-bd-flat) !important;
    border-radius: var(--jcc-r-lg) !important;
}
.jcc-app .jcc-gc::before { background: var(--jcc-highlight) !important; }

/* Sidebar sticky: el theme lo rompe por float o por overflow en ancestros */
.jcc-app .jcc-right-col {
    position: sticky !important;
    top: 20px !important;
    float: none !important;
}
.jcc-app,
.jcc-app .jcc-page,
.jcc-app .jcc-layout-2col,
.jcc-app .jcc-main-col { overflow: visible !important; }

/* Bottom-nav: matar bullets/puntos que inyecta el theme */
.jcc-app .jcc-nav-list,
.jcc-app .jcc-nav-item { list-style: none !important; }
.jcc-app .jcc-nav-list::before, .jcc-app .jcc-nav-list::after,
.jcc-app .jcc-nav-item::before, .jcc-app .jcc-nav-item::after,
.jcc-app .jcc-nav-link::before, .jcc-app .jcc-nav-link::after {
    content: none !important;
    display: none !important;
}
.jcc-app .jcc-nav-link {
    text-decoration: none !important;
    background-image: none !important;
    list-style: none !important;
}

/* Enlaces internos: el theme los subraya/recolorea */
.jcc-app a { text-decoration: none; box-shadow: none; }
.jcc-app a:hover { text-decoration: none; }

/* Botones: el theme resetea case/padding/ancho de <button> */
.jcc-app .jcc-btn,
.jcc-app .jcc-mi-btn {
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    width: auto !important;
}

/* Headings: el theme les mete margin/color/font propios */
.jcc-app h1, .jcc-app h2, .jcc-app h3, .jcc-app h4 {
    margin: 0; padding: 0;
    text-transform: none; letter-spacing: normal;
    color: inherit; font-weight: inherit;
}
.jcc-app .jcc-section-title { color: var(--jcc-t1); }
/* v1.5.5: el título de card es un <h3> en las full cards; la regla de la
   armadura (.jcc-app h3) tiene más especificidad que .jcc-card-title, así
   que reafirmamos con dos clases. */
.jcc-app .jcc-card-title {
    font-family: var(--jcc-font-display);
    font-weight: 400;
    color: var(--jcc-t1);
}

/* Listas: sin bullets del theme, salvo dentro de contenido shortcode */
.jcc-app ul, .jcc-app ol { list-style: none; margin: 0; padding: 0; }
.jcc-app .jcc-modal-shortcode ul { list-style: disc; margin: revert; padding: revert; }
.jcc-app .jcc-modal-shortcode ol { list-style: decimal; margin: revert; padding: revert; }

/* Íconos custom (img): el theme fuerza max-width/borders */
.jcc-app .jcc-icon-custom {
    max-width: none;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    vertical-align: middle;
}

/* Estado de Cuota (gauge SVG): el theme lo deforma dando height:auto/max-width */
.jcc-app .jcc-dash-gauge-ring {
    width: 90px !important;
    height: 90px !important;
    flex-shrink: 0;
}
.jcc-app .jcc-dash-gauge-ring svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1;
}
.jcc-app .jcc-dash-gauge-ring circle { fill: none !important; }

/* ════════════════════════════════════════════════════════════════════════
 * v1.4.9 — MODO PORTAL (template sin theme)
 * En el template portal el body es nuestro por completo: sin márgenes de
 * user-agent, tipografía base del DS y el mesh de fondo garantizado.
 * ════════════════════════════════════════════════════════════════════════ */
body.jcc-portal {
    margin: 0;
    padding: 0;
    font-family: var(--jcc-font-sans);
    color: var(--jcc-t1);
    min-height: 100vh;
}
body.jcc-portal .jcc-app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 20px 0;
}
@media (max-width: 720px) {
    body.jcc-portal .jcc-app { padding: 16px 12px 0; }
}

/* ════════════════════════════════════════════════════════════════════════
 * v1.5.0 — Lazy-load de modales, avatar imagen, nav WebView, semáforo cuota
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Spinner de carga diferida ── */
/* v1.5.6: is-loaded lo vuelve un bloque normal (ver JS). Mientras carga es
   flex centrado para el spinner; después, contenido a ancho completo y sin
   min-height, que agregaba espacio en blanco. */
.jcc-modal-lazy-slot.is-loaded {
    display: block;
    min-height: 0;
}
.jcc-modal-lazy-slot {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}
.jcc-lazy-spinner {
    width: 34px; height: 34px;
    border: 3px solid rgba(163, 0, 0, 0.12);
    border-top-color: var(--jcc-red);
    border-radius: 50%;
    animation: jcc-spin 0.8s linear infinite;
}
@keyframes jcc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .jcc-lazy-spinner { animation-duration: 1.6s; }
}
.jcc-lazy-error {
    text-align: center;
    color: var(--jcc-t2);
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

/* ── Avatar con imagen (config admin) ──
 *
 * v1.5.9: cuando hay imagen, el PNG ES el avatar: se anula todo el
 * contenedor gráfico (degradado rojo, sombra, border-radius) y pasa a
 * 70×70. La clase .jcc-dash-avatar-img la agrega el renderer solo si hay
 * attachment, así que no depende de :has() y funciona en cualquier browser.
 *
 * Selector con DOS clases (0,2,0) a propósito: .jcc-dash-avatar está
 * definido en dashboard.css, que carga después de este archivo; con una
 * sola clase perdería el empate por orden de aparición.
 */
.jcc-dash-avatar { overflow: hidden; }
.jcc-dash-avatar.jcc-dash-avatar-img {
    width: 70px;
    height: 70px;
    background: none;
    background-image: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    overflow: visible;
}
.jcc-dash-avatar.jcc-dash-avatar-img img {
    width: 70px;
    height: 70px;
    object-fit: contain;      /* la imagen completa, sin recorte */
    border-radius: 0;
    display: block;
}
/* Sin imagen: comportamiento original (inicial sobre el degradado) */
.jcc-dash-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* ── Íconos custom (PNG/JPG/SVG subidos) ──
 *
 * v1.5.9: el archivo subido se muestra tal cual, sin ningún agregado
 * gráfico del contenedor (fondo tenue, degradado rojo, sombra, borde,
 * radio) y a 50×50.
 *
 * Se usa :has() porque el contenedor lo emiten muchos call sites distintos
 * (cards, modales, items, sidebar, member card) y sería frágil tocar todos.
 * :has() toma la especificidad de su argumento, así que estas reglas (0,2,0)
 * le ganan a las definiciones de una sola clase, incluso a las que están en
 * dashboard.css (que carga después).
 *
 * Fallback en browsers sin :has() (previos a fines de 2023): el selector se
 * descarta y el ícono se ve como hasta ahora — degradación limpia.
 *
 * El bottom-nav queda excluido a propósito: su alto es fijo y un ícono de
 * 50px rompería el layout de la barra.
 */
.jcc-ico:has(.jcc-icon-custom),
.jcc-ico-solid:has(.jcc-icon-custom),
.jcc-mi-ico:has(.jcc-icon-custom),
.jcc-full-ico:has(.jcc-icon-custom),
.jcc-dash-ms-ico:has(.jcc-icon-custom) {
    width: 50px;
    height: 50px;
    background: none;
    background-image: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    color: inherit;
}
.jcc-ico:has(.jcc-icon-custom) .jcc-icon-custom,
.jcc-ico-solid:has(.jcc-icon-custom) .jcc-icon-custom,
.jcc-mi-ico:has(.jcc-icon-custom) .jcc-icon-custom,
.jcc-full-ico:has(.jcc-icon-custom) .jcc-icon-custom,
.jcc-dash-ms-ico:has(.jcc-icon-custom) .jcc-icon-custom {
    width: 50px;
    height: 50px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    filter: none;             /* anula el forzado a blanco del ícono sólido */
}

/* ── Bottom-nav: fixes para WebViews angostos (WPMobile.app) ──
   El item activo expande padding + label; en viewports muy angostos los
   flex items se comprimían y el SVG del ícono se deformaba. */
.jcc-nav-icon,
.jcc-nav-icon svg { flex-shrink: 0; }
.jcc-nav-link { white-space: nowrap; }
.jcc-nav-label {
    white-space: nowrap;
    overflow: hidden;
}
/* Tope del label relativo al viewport: en pantallas angostas el pill activo
   no puede reclamar más de ~22vw, evitando el colapso de los demás items */
.jcc-nav-item.is-active .jcc-nav-label {
    max-width: clamp(0px, 22vw, 92px);
}
.jcc-nav-inner { max-width: calc(100vw - 16px); }
@media (max-width: 420px) {
    .jcc-nav-link { padding-left: 9px; padding-right: 9px; }
}

/* ── Semáforo "Estado de Cuota" (sin porcentaje) ──
   El color llega por CSS var --jcc-cuota-c desde el renderer. */
.jcc-cuota-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 0 4px;
    text-align: center;
}
.jcc-cuota-badge {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--jcc-cuota-c, var(--jcc-t3));
    background: color-mix(in srgb, var(--jcc-cuota-c, #8a8a8a) 12%, transparent);
    border: 2px solid color-mix(in srgb, var(--jcc-cuota-c, #8a8a8a) 35%, transparent);
}
/* Fallback para browsers sin color-mix (Safari <16.2): tinte neutro */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .jcc-cuota-badge { background: rgba(0, 0, 0, 0.05); border-color: currentColor; }
}
.jcc-cuota-label {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--jcc-cuota-c, var(--jcc-t1));
}
.jcc-cuota-sub {
    font-size: 0.78rem;
    color: var(--jcc-t3);
}

/* v1.5.1 — Modo diferido AISLADO (iframe) */
.jcc-modal-lazy-slot:has(.jcc-lazy-frame) { display: block; min-height: 0; }
.jcc-lazy-frame {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    overflow: hidden;
    transition: height 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) { .jcc-lazy-frame { transition: none; } }
/* Fallback para browsers sin :has() — el slot flex no rompe el iframe,
   solo lo centra; forzamos ancho completo por si acaso. */
.jcc-modal-lazy-slot > .jcc-lazy-frame { width: 100%; flex: 1 1 100%; }

/* ════════════════════════════════════════════════════════════════════════
 * v1.5.2 — Normalización de márgenes de shortcodes dentro de modales
 *
 * Los plugins traen márgenes/padding pensados para una página completa,
 * que dentro de un modal se ven como huecos enormes. Acotamos SOLO dentro
 * de .jcc-modal-shortcode (y del body del frame aislado), sin tocar cómo
 * se ven esos mismos plugins en el resto del sitio.
 * ════════════════════════════════════════════════════════════════════════ */

/* Párrafos vacíos residuales (cinturón y tirantes: el PHP ya los quita) */
.jcc-modal-shortcode p:empty,
.jcc-modal-frame-body p:empty { display: none; }

/* Espaciado uniforme entre bloques del contenido */
.jcc-modal-shortcode > p:last-of-type { margin-bottom: 0; }

/* ── WPBakery (vc_message, vc_toggle, wpb_*) ── */
.jcc-modal-shortcode .wpb_content_element,
.jcc-modal-shortcode .vc_message_box,
.jcc-modal-shortcode .vc_toggle,
.jcc-modal-frame-body .wpb_content_element,
.jcc-modal-frame-body .vc_message_box,
.jcc-modal-frame-body .vc_toggle {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}
.jcc-modal-shortcode .vc_toggle_content > *:last-child,
.jcc-modal-frame-body .vc_toggle_content > *:last-child { margin-bottom: 0; }
/* El wrapper de fila de WPBakery mete márgenes negativos y padding lateral */
.jcc-modal-shortcode .vc_row,
.jcc-modal-frame-body .vc_row { margin-left: 0 !important; margin-right: 0 !important; }

/* ── Amelia (booking) ──
   Cubre los wrappers de las versiones recientes (v2/v9): el contenedor
   raíz suele traer padding-top alto + margin propio. */
.jcc-modal-shortcode [id^="amelia-app"],
.jcc-modal-shortcode [class*="amelia-app"],
.jcc-modal-shortcode .amelia-v2-booking,
.jcc-modal-shortcode .am-fs,
.jcc-modal-frame-body [id^="amelia-app"],
.jcc-modal-frame-body [class*="amelia-app"],
.jcc-modal-frame-body .amelia-v2-booking,
.jcc-modal-frame-body .am-fs {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}
/* Amelia reserva altura mínima para sus pasos; dentro del modal sobra */
.jcc-modal-shortcode [id^="amelia-app"],
.jcc-modal-frame-body [id^="amelia-app"] { min-height: 0 !important; }

/* Último recurso genérico: cualquier hijo directo con margen superior
   grande al inicio del contenido queda pegado al bloque anterior. */
.jcc-modal-shortcode > div:first-child,
.jcc-modal-frame-body > div:first-child { margin-top: 0 !important; }

/* ── Body del frame aislado: sin márgenes de página ── */
.jcc-modal-frame-body { margin: 0 !important; padding: 0 !important; }
.jcc-modal-frame-body > *:first-child { margin-top: 0 !important; }
.jcc-modal-frame-body > *:last-child  { margin-bottom: 0 !important; }