/*
Theme Name: Calendario Equinoccial Premium
Version: 50.3.0
*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-base: #020611; 
    --gold-pure: #D4AF37;
    --gold-bright: #FDE08B;
    --gold-dark: #8B6508;
    --blue-ui: #3b82f6;
    --text-main: #F8FAFC;
    --text-muted: #94a3b8; 
    --border-glass: rgba(255, 255, 255, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-base);
    background-image: 
        radial-gradient(circle at 10% 40%, rgba(46, 204, 113, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 90% 60%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 110%, rgba(30, 80, 120, 0.6) 0%, #020611 50%);
    background-attachment: fixed;
    color: var(--text-main);
    line-height: 1.6; 
    overflow-x: hidden;
    min-height: 100vh;
}

/* Ronda 25 (25/09): cartelito sutil de idioma (ver eq_idioma_banner_html en functions.php) --
   franja angosta arriba de todo, mismo lugar en la portada y en el panel, para poder cambiar a
   mano el idioma que se detectó por IP. Va en style.css (no en front-page.css/page-acceso-vip.css)
   porque es el único de los tres estilos que carga en TODAS las páginas del sitio. */
.eq-idioma-banner {
    display: flex; justify-content: center; align-items: center; gap: 16px;
    padding: 6px 10px; background: rgba(6, 17, 36, 0.92);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.eq-idioma-opcion {
    font-family: 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.4px; text-transform: uppercase;
    color: rgba(248, 250, 252, 0.5); text-decoration: none; padding: 2px 4px;
}
.eq-idioma-opcion:hover { color: #F8FAFC; }
.eq-idioma-opcion.eq-idioma-activo { color: var(--gold-pure); font-weight: 600; }

/* HEADER SUPERIOR */
.app-topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 40px; background: rgba(6, 17, 36, 0.6);
    backdrop-filter: blur(15px); border-bottom: 1px solid var(--border-glass);
    position: sticky; top: 0; z-index: 100;
}
.logo-area { display: flex; align-items: center; gap: 15px; }
.logo-icon { font-size: 2.2rem; color: var(--gold-bright); text-shadow: 0 0 15px var(--gold-pure); }
.logo-text { font-family: 'Cinzel', serif; font-size: 1.1rem; line-height: 1.2; letter-spacing: 2px; }
.logo-text span { color: var(--text-muted); font-size: 0.9rem; letter-spacing: 3px; }

.user-profile {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.05); padding: 8px 20px 8px 8px; border-radius: 50px;
    border: 1px solid var(--border-glass); cursor: pointer;
}
.user-profile img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--text-muted); }
.user-info { display: flex; flex-direction: column; }
.user-info .name { font-size: 0.9rem; font-weight: 500; color: #fff; }
.user-info .tier { font-size: 0.75rem; color: var(--text-muted); }
.dropdown-icon { color: var(--text-muted); font-size: 0.7rem; margin-left: 10px; }

.top-actions { display: flex; gap: 20px; align-items: center; }
.action-btn { font-size: 1.2rem; cursor: pointer; position: relative; opacity: 0.7; transition: 0.3s; }
.action-btn:hover { opacity: 1; }
.badge { position: absolute; top: 0; right: -2px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; box-shadow: 0 0 10px #ef4444; }

/* BOTÓN HAMBURGUESA Y OVERLAY DEL MENÚ MOBILE: invisibles en desktop; la media query de abajo
   los activa y convierte el sidebar en un panel deslizante en vez de ocupar toda la pantalla. */
.nav-toggle-btn {
    display: none; background: transparent; border: 1px solid var(--border-glass); color: var(--text-main);
    font-size: 1.15rem; width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-toggle-btn:hover { background: rgba(255,255,255,0.05); }
.nav-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 190;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}

/* LAYOUT PRINCIPAL */
.app-layout {
    /* Ronda 13 (24/09): era "align-items: start", que deja a .app-sidebar con la altura de su
       propio contenido (más baja que .main-workspace en casi todas las vistas). Eso corta el
       "contenedor" del position:sticky de .sidebar-nav (más abajo, top:96px) apenas se hace
       scroll más allá de esa altura corta, y el menú deja de acompañar. Con "stretch" (el default
       real de flexbox, así que esto sólo saca una restricción, no agrega ninguna) .app-sidebar
       pasa a medir lo mismo que .main-workspace y el sticky puede acompañar todo el scroll. Sólo
       afecta el layout de escritorio: en mobile (@media max-width:900px, más abajo en este mismo
       archivo) .app-sidebar pasa a position:fixed y sale del flujo, así que esto no le cambia nada.
    */
    display: flex; gap: 30px; padding: 30px 40px; max-width: 1600px; margin: 0 auto; align-items: stretch;
}
.app-sidebar { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; }
.sidebar-nav { display: flex; flex-direction: column; gap: 8px; }
.nav-item {
    display: flex; align-items: center; gap: 15px; padding: 14px 20px; border-radius: 12px;
    cursor: pointer; color: var(--text-muted); font-size: 0.95rem; font-weight: 500; transition: all 0.3s ease;
}
.nav-icon { font-size: 1.1rem; opacity: 0.7; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item.active { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid var(--border-glass); }
.nav-item.active .nav-icon { opacity: 1; color: var(--gold-bright); }

.sidebar-title { color: var(--text-muted); letter-spacing: 2px; margin-bottom: 10px; padding-left: 10px; }
.module-btn { justify-content: space-between; padding: 12px 20px; font-size: 0.85rem; }
.lesson-submenu { display: none; flex-direction: column; padding-left: 20px; margin-top: 5px; gap: 5px; }
.lesson-submenu.open { display: flex; }
.sub-lesson-item { display: flex; gap: 10px; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; padding: 8px; border-radius: 8px; }
.sub-lesson-item:hover { background: rgba(255,255,255,0.05); color: #fff; }

.main-workspace { flex: 1; min-width: 0; }
.workspace-block { display: none; width: 100%; animation: fadeIn 0.5s ease forwards; }
.workspace-block.active-view { display: block; }

/* GLASSMORPHISM CARDS */
.premium-card {
    background: rgba(10, 15, 25, 0.55) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* DASHBOARD Y SVG PARA EVITAR CORTES */
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }
.circular-dashboard { padding: 30px; display: flex; flex-direction: column; }
.dash-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.dash-header h2 { font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--text-main); letter-spacing: 1px; }
.dash-header h2 span { font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700; color: var(--gold-bright); letter-spacing: 2px; text-shadow: 0 0 15px rgba(212,175,55,0.4); display: block; margin-top: 5px; }

/* Configuración especial para que el SVG 1000x1000 escale perfecto */
.svg-container { position: relative; width: 100%; max-width: 800px; margin: 0 auto; display: flex; justify-content: center;}
#circular-cal-svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 0 30px rgba(0,0,0,0.5)); }

.today-display {
    position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%);
    font-family: 'Cinzel', serif; color: var(--gold-bright); font-size: 1.2rem; font-weight: bold;
    letter-spacing: 2px; text-shadow: 0 0 10px rgba(212,175,55,0.8);
    background: rgba(0,0,0,0.6); padding: 10px 25px; border-radius: 30px; border: 1px solid var(--border-glass);
    pointer-events: none;
}

/* PANELES LATERALES (WIDGETS) */
.dash-sidebars { display: flex; flex-direction: column; gap: 30px; }
.side-widget { padding: 25px; }
.widget-title { font-family: 'Inter', sans-serif; font-size: 1rem; letter-spacing: 1.5px; color: #fff; margin-bottom: 25px; border-bottom: 1px solid var(--border-glass); padding-bottom: 15px; text-transform: uppercase; }

.summary-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.summary-list li { display: flex; align-items: center; gap: 15px; }
.icon-wrap { position: relative; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; }
.icon-glow { position: absolute; width: 100%; height: 100%; border-radius: 50%; opacity: 0.2; }
.icon-glow.gold { background: var(--gold-pure); box-shadow: 0 0 20px var(--gold-pure); }
.icon-glow.purple { background: #d946ef; box-shadow: 0 0 20px #d946ef; }
.icon-glow.white { background: #fff; box-shadow: 0 0 20px #fff; }

.icon-ring { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; z-index: 2;}
.icon-ring.gold { border: 2px solid var(--gold-bright); color: var(--gold-bright); }
.icon-ring.purple { border: 2px solid #d946ef; color: #fff; }
.icon-moon-full { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0%, #94a3b8 100%); z-index: 2; box-shadow: inset -5px -5px 10px rgba(0,0,0,0.5); }

.summary-list .details { display: flex; flex-direction: column; gap: 3px; }
.summary-list .label { font-size: 0.75rem; color: var(--text-muted); }
.summary-list .value { font-size: 0.85rem; color: #fff; font-weight: 500; }

.indicator-grid { display: flex; flex-direction: column; gap: 30px; align-items: center; }
.indicator-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ind-label { font-size: 0.75rem; color: var(--text-main); font-weight: 500; letter-spacing: 1px; }

.gauge-svg { width: 120px; height: 70px; overflow: visible; }
.luna-nueva-icon { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(90deg, #fff 50%, #1e293b 50%); box-shadow: 0 0 15px rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); }
.portal-spiral-icon { width: 50px; height: 50px; border-radius: 50%; border: 3px solid #4ade80; box-shadow: 0 0 15px #4ade80, inset 0 0 10px #4ade80; position: relative; animation: spin 8s linear infinite; }
.portal-spiral-icon::after { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 2px dashed #4ade80; border-radius: 50%; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* MATRIZ CLASICA Y OTROS */
.btn-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold-pure)); color: #000; font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; }

/* PANTALLA "ACCESO RESTRINGIDO" (sin ?pago=exitoso): .premium-card no trae padding propio y el
   link de acción no tenía separación del párrafo de arriba, así que en mobile —donde el texto
   ocupa más líneas— quedaban pegados/superpuestos. Esto le da su propio espacio, centrado. */
.eq-acceso-restringido {
    display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: 40px 20px;
}
.eq-acceso-restringido .premium-card { padding: 40px 30px; max-width: 480px; width: 100%; }
.eq-acceso-restringido .premium-card h2 { margin-bottom: 16px; font-size: 1.6rem; }
/* Ronda 27: pedido repetido del cliente -- este párrafo (el de "Acceso Restringido" Y el de
   "Confirmando tu pago...") no tenía NINGÚN font-size propio, así que heredaba el tamaño base del
   navegador (16px) sin que quedara explícito en ningún lado -- de ahí que quedara chico y ningún
   cambio anterior en OTROS archivos lo hubiera tocado. Ahora queda fijo acá, notoriamente más
   grande que el default. */
.eq-acceso-restringido .premium-card p { margin-bottom: 28px; line-height: 1.6; font-size: 1.2rem; }
.eq-acceso-restringido .premium-card a.btn-gold { display: inline-block; text-decoration: none; font-size: 1.05rem; }
.content-temple-box { padding: 40px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 15px; }
.cal-day { padding: 10px; background: rgba(0,0,0,0.5); border: 1px solid var(--border-glass); border-radius: 6px; text-align: center; display: flex; flex-direction: column; }
.cal-day span:first-child { font-size: 1.4rem; color: var(--gold-bright); font-family: 'Cinzel', serif; }
.cal-day span:last-child { font-size: 0.6rem; color: var(--text-muted); }
.month-navigator { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 20px 0; background: rgba(0,0,0,0.4); padding: 15px; border-radius: 12px; }
.nav-arrow { background: transparent; border: none; color: var(--gold-dark); font-size: 2.5rem; cursor: pointer; }
.horizontal-converter { margin-top: 30px; padding: 25px; background: rgba(0,0,0,0.4); border-radius: 12px; border: 1px solid var(--border-glass); }
.video-mockup { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 30px; border: 1px solid var(--gold-pure); }
.play-icon { font-size: 3rem; color: var(--gold-pure); }

@media (max-width: 1200px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dash-sidebars { flex-direction: row; flex-wrap: wrap; }
    .side-widget { flex: 1; min-width: 300px; }
}
@media (max-width: 900px) {
    .app-layout { flex-direction: column; }
    .nav-toggle-btn { display: flex; }
    .nav-overlay { display: block; }
    body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
    body.nav-open { overflow: hidden; }

    /* El sidebar (10 items) ya no vive en el flujo normal de la página en mobile —antes eso
       empujaba todo el contenido varias pantallas hacia abajo— sino que es un panel fijo,
       oculto fuera de la pantalla, que se desliza sobre el contenido al tocar el botón ☰. */
    .app-sidebar {
        position: fixed; top: 0; left: 0; z-index: 200; height: 100vh; width: 280px; max-width: 82vw;
        flex-direction: column; flex-wrap: nowrap; gap: 0;
        background: rgba(6, 17, 36, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        padding: 90px 16px 30px 16px; overflow-y: auto;
        transform: translateX(-100%); transition: transform 0.3s ease;
    }
    body.nav-open .app-sidebar { transform: translateX(0); }
}