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

:root{
    /* =========================================================
       VARIABLES CONTROLADAS DESDE CONFIGURACION
       Si el helper inyecta estas variables, toman prioridad.
       Estos valores son fallback.
    ========================================================= */
    --fd-color-primario: #6d28d9;
    --fd-color-secundario: #9333ea;
    --fd-color-terciario: #c084fc;

    --fd-color-fondo: #0f172a;
    --fd-color-cards: #111827;
    --fd-color-header: #0b1120;
    --fd-color-sidebar: #111827;

    --fd-color-texto: #f8fafc;
    --fd-color-texto-secundario: #cbd5e1;

    --fd-color-boton: #7c3aed;
    --fd-color-boton-hover: #6d28d9;

    --fd-color-bordes: #334155;

    --fd-color-exito: #22c55e;
    --fd-color-error: #ef4444;
    --fd-color-warning: #f59e0b;

    --fd-font-body: Inter, sans-serif;
    --fd-font-heading: Poppins, sans-serif;
    --fd-font-size-base: 16px;
    --fd-font-weight-heading: 700;

    /* =========================================================
       DECORACION LOCAL DEL ARCHIVO
       Esto NO debe salir de configuracion
    ========================================================= */
    --radius-xs: 12px;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 24px;

    --shadow-soft: 0 12px 30px rgba(0,0,0,.22);
    --shadow-card: 0 14px 34px rgba(2,6,23,.32);
    --shadow-glow: 0 0 0 1px rgba(255,255,255,.03), 0 18px 50px rgba(76,29,149,.18);

    --card-overlay-1: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
    --card-overlay-2: radial-gradient(circle at top right, rgba(192,132,252,.20), transparent 36%);
    --card-overlay-3: radial-gradient(circle at bottom left, rgba(124,58,237,.18), transparent 34%);

    --glass-border: 1px solid rgba(255,255,255,.06);
    --inner-highlight: inset 0 1px 0 rgba(255,255,255,.05);
    --transition-fast: 180ms ease;
    --transition-mid: 260ms ease;
}

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

html,
body{
    background:
        radial-gradient(circle at top, rgba(124,58,237,.14), transparent 30%),
        radial-gradient(circle at bottom, rgba(147,51,234,.08), transparent 25%),
        var(--fd-color-fondo);
    color:var(--fd-color-texto);
    font-family:var(--fd-font-body, Inter, sans-serif);
    font-size:var(--fd-font-size-base, 16px);
    min-height:100%;
}

body{
    line-height:1.45;
}

a{
    color:var(--fd-color-primario);
    text-decoration:none;
    transition:opacity var(--transition-fast);
}

a:hover{
    opacity:.92;
}

/* LAYOUT */
.app-shell{
    max-width:420px;
    margin:auto;
    min-height:100vh;
    position:relative;
    z-index:1;
    padding-bottom:88px;
}

.app-screen{
    padding:16px;
    position:relative;
}

/* HEADER */
.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:14px 0;
    margin-bottom:18px;
    background:transparent;
}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

/* BRAND */
.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-logo{
    width:56px;
    height:56px;
    min-width:56px;
    min-height:56px;
    border-radius:16px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        var(--fd-color-cards);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
}

.brand-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.brand-copy h1{
    color:var(--fd-color-primario);
    letter-spacing:-.02em;
    margin-bottom:2px;
}

.brand-copy p{
    color:var(--fd-color-texto-secundario);
    font-size:.93rem;
}

/* TITLES */
h1, h2, h3, h4, h5, h6,
.brand-copy h1,
.card-title,
.hero-title,
.section-title,
.plan-title,
.feature-label,
.analysis-label,
.info-label{
    font-family:var(--fd-font-heading, Poppins, sans-serif);
    font-weight:var(--fd-font-weight-heading, 700);
    line-height:1.1;
}

.hero-title,
.section-title,
.card-title,
.plan-title{
    letter-spacing:-.02em;
}

.card-title,
.plan-title{
    color:var(--fd-color-primario);
}

/* CARDS BASE */
.hero-card,
.panel-card,
.feature-card,
.result-card,
.info-card,
.plan-card,
.stat-card,
.alert-card{
    position:relative;
    overflow:hidden;
    background:var(--fd-color-cards);
    border:1px solid var(--fd-color-bordes);
    border-radius:var(--radius-md);
    padding:16px;
    margin-bottom:12px;
    box-shadow:var(--shadow-card), var(--inner-highlight);
    isolation:isolate;
}

.hero-card::before,
.panel-card::before,
.feature-card::before,
.result-card::before,
.info-card::before,
.plan-card::before,
.stat-card::before,
.alert-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        var(--card-overlay-2),
        var(--card-overlay-3),
        var(--card-overlay-1);
    pointer-events:none;
    z-index:0;
}

.hero-card > *,
.panel-card > *,
.feature-card > *,
.result-card > *,
.info-card > *,
.plan-card > *,
.stat-card > *,
.alert-card > *{
    position:relative;
    z-index:1;
}

.hero-card{
    padding:22px 18px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-glow);
}

.hero-card::after{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    right:-40px;
    top:-40px;
    background:radial-gradient(circle, rgba(192,132,252,.20), transparent 65%);
    pointer-events:none;
}

.panel-card{
    backdrop-filter:blur(8px);
}

.feature-card{
    text-align:left;
}

.result-card{
    border-color:rgba(192,132,252,.28);
}

.plan-card{
    border:1px solid rgba(192,132,252,.26);
    position:relative;
    overflow:hidden;
}

.plan-card.featured{
    box-shadow:
        0 0 0 1px rgba(192,132,252,.20),
        0 18px 50px rgba(109,40,217,.22);
}

.plan-card::after{
    content:"";
    position:absolute;
    top:-120%;
    left:-40%;
    width:60%;
    height:300%;
    transform:rotate(22deg);
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,0) 100%
    );
    transition:transform .7s ease;
    pointer-events:none;
}

.plan-card:hover::after{
    transform:translateX(260%) rotate(22deg);
}

.info-card{
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
        var(--fd-color-cards);
}

.stat-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:120px;
}

.feature-card,
.panel-card,
.hero-card,
.result-card,
.info-card,
.plan-card,
.legal-card{
    transition:
        transform .28s ease,
        box-shadow .32s ease,
        border-color .32s ease,
        filter .32s ease;
    will-change:transform;
}

.feature-card:hover,
.panel-card:hover,
.hero-card:hover,
.result-card:hover,
.info-card:hover,
.plan-card:hover,
.legal-card:hover{
    transform:translateY(-4px) scale(1.01);
    box-shadow:
        0 14px 34px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,255,255,.05) inset,
        0 0 24px rgba(255,214,110,.09);
    filter:saturate(1.06);
}

/* DECORATIVE BADGES / PILLS */
.badge,
.pill,
.chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:7px 12px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:var(--fd-color-texto);
    backdrop-filter:blur(8px);
}

.badge-primary{
    background:rgba(124,58,237,.14);
    border-color:rgba(124,58,237,.32);
    color:#efe7ff;
}

.badge-soft{
    background:rgba(255,255,255,.04);
    color:var(--fd-color-texto-secundario);
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    margin-bottom:14px;
    font-size:12px;
    font-weight:700;
    color:#fff2bf;
    background:linear-gradient(135deg, rgba(255,217,102,.14), rgba(255,255,255,.03));
    border:1px solid rgba(255,220,120,.24);
    box-shadow:0 0 18px rgba(255,214,102,.08);
}

.context-line{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.context-chip{
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    font-size:12px;
    font-weight:700;
}

.cosmic-pill{
    min-width:140px;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
}

.cosmic-pill .pill-label{
    display:block;
    font-size:11px;
    color:var(--fd-color-texto-secundario);
    margin-bottom:6px;
}

.cosmic-pill .pill-value{
    font-size:15px;
    font-weight:700;
    color:var(--fd-color-texto);
}

/* INPUT */
.input,
select,
input,
textarea{
    width:100%;
    padding:12px 14px;
    border-radius:var(--radius-xs);
    border:1px solid var(--fd-color-bordes);
    background:rgba(255,255,255,.02);
    color:var(--fd-color-texto);
    outline:none;
    transition:border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.input::placeholder,
textarea::placeholder{
    color:rgba(203,213,225,.70);
}

.input:focus,
select:focus,
input:focus,
textarea:focus{
    border-color:rgba(192,132,252,.55);
    box-shadow:0 0 0 4px rgba(124,58,237,.12);
}

/* BUTTONS */
.btn{
    width:100%;
    padding:14px 16px;
    border-radius:999px;
    border:none;
    cursor:pointer;
    font-family:var(--fd-font-body, Inter, sans-serif);
    font-weight:700;
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        opacity var(--transition-fast),
        box-shadow var(--transition-fast);
}

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

.btn:active{
    transform:translateY(0);
}

.btn-primary{
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
        var(--fd-color-boton);
    color:#fff;
    box-shadow:0 10px 24px rgba(124,58,237,.28);
}

.btn-primary:hover{
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
        var(--fd-color-boton-hover);
}

.btn-secondary{
    background:transparent;
    border:1px solid var(--fd-color-bordes);
    color:var(--fd-color-texto);
}

.btn-secondary:hover{
    border-color:rgba(192,132,252,.35);
    background:rgba(255,255,255,.03);
}

.btn-ghost{
    background:rgba(255,255,255,.03);
    color:var(--fd-color-texto);
    border:1px solid rgba(255,255,255,.06);
}

.btn-link-block{
    display:block;
    text-align:center;
    text-decoration:none;
}

/* GRID */
.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
}

.top-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:16px;
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-top:16px;
}

.hero-metrics{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-top:16px;
}

.analysis-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.radar-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    margin-top:14px;
}

.timeline-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.mini-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.plan-stack{
    display:grid;
    gap:14px;
}

.predicciones-stack{
    display:grid;
    gap:12px;
}

.prediction-main{
    display:grid;
    gap:12px;
    margin-top:14px;
}

.prediction-main.directo,
.prediction-main.combo{
    grid-template-columns:1.15fr .85fr;
}

/* NUMBERS */
.feature-number,
.result-number,
.stat-number{
    font-size:32px;
    font-weight:800;
    color:var(--fd-color-primario);
    letter-spacing:-.03em;
}

.prediction-number{
    font-size:clamp(2.6rem, 9vw, 4.2rem);
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    margin:10px 0 12px;
    color:var(--fd-color-primario);
    text-shadow:0 8px 28px rgba(124,58,237,.18);
}

.plan-price{
    color:#fff4ca;
    font-size:28px;
    font-weight:800;
    letter-spacing:-.03em;
    text-shadow:0 0 18px rgba(255,215,120,.12);
    white-space:nowrap;
}

.price-note{
    color:var(--fd-color-texto-secundario);
    font-size:.85rem;
    margin-top:4px;
}

.metric-box{
    padding:12px;
    border-radius:16px;
    text-align:center;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
}

.metric-box .metric-k{
    display:block;
    font-size:11px;
    color:var(--fd-color-texto-secundario);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.metric-box .metric-v{
    font-size:20px;
    font-weight:800;
    color:var(--fd-color-texto);
}

.mini-stat{
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
}

.mini-stat .label{
    font-size:12px;
    color:var(--fd-color-texto-secundario);
}

.mini-stat .value{
    font-size:18px;
    font-weight:800;
}

/* TEXT */
.muted-text,
.subtle,
.helper-text{
    color:var(--fd-color-texto-secundario);
}

.lead-text{
    font-size:1.02rem;
    color:var(--fd-color-texto);
}

.section-title{
    margin-bottom:10px;
    font-size:24px;
}

.section-subtitle{
    color:var(--fd-color-texto-secundario);
    margin-bottom:14px;
}

.section-copy{
    color:var(--fd-color-texto-secundario);
    line-height:1.6;
    margin-bottom:14px;
}

.section-block{
    margin-top:18px;
    margin-bottom:10px;
}

.hero-description,
.hero-text{
    color:var(--fd-color-texto-secundario);
    line-height:1.65;
    margin-top:8px;
    margin-bottom:14px;
}

.hero-title{
    font-size:30px;
    line-height:1.05;
    margin-bottom:12px;
    color:var(--fd-color-texto);
    text-shadow:0 4px 18px rgba(0,0,0,.22);
}

.hero-title strong{
    color:var(--fd-color-primario);
}

.hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}

.hero-actions{
    display:grid;
    gap:10px;
}

.feature-label,
.analysis-label,
.info-label,
.result-label{
    display:block;
    font-size:12px;
    font-weight:700;
    color:var(--fd-color-texto-secundario);
    text-transform:uppercase;
    letter-spacing:.07em;
    margin-bottom:8px;
}

.feature-text,
.analysis-text,
.info-text{
    color:var(--fd-color-texto);
}

.analysis-value{
    color:var(--fd-color-texto);
    line-height:1.55;
}

.card-subtitle{
    color:var(--fd-color-texto-secundario);
    line-height:1.55;
    margin-bottom:16px;
}

.mini-title{
    display:block;
    margin-bottom:8px;
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--fd-color-texto-secundario);
}

.mini-value{
    color:var(--fd-color-texto);
    font-size:1rem;
    font-weight:800;
    line-height:1.4;
}

.mini-text{
    color:var(--fd-color-texto-secundario);
    font-size:.9rem;
    line-height:1.55;
    margin-top:8px;
}

.text-center{
    text-align:center;
}

.mt-10{ margin-top:10px; }
.mt-12{ margin-top:12px; }

/* LIST / ITEMS */
.list-clean{
    list-style:none;
    display:grid;
    gap:10px;
}

.list-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.list-item-icon{
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(124,58,237,.14);
    color:var(--fd-color-primario);
    border:1px solid rgba(124,58,237,.20);
}

.reason-list{
    display:grid;
    gap:10px;
    margin-top:14px;
}

.reason-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--fd-color-texto-secundario);
    line-height:1.55;
}

.reason-dot{
    width:9px;
    height:9px;
    min-width:9px;
    border-radius:999px;
    margin-top:7px;
    background:var(--fd-color-primario);
    box-shadow:0 0 0 5px rgba(124,58,237,.12);
}

/* ALERTS */
.alert-ok,
.alert-error,
.alert-warning{
    border-radius:var(--radius-sm);
    padding:14px 16px;
    margin-bottom:12px;
    border:1px solid transparent;
    box-shadow:var(--shadow-soft);
}

.alert-ok{
    background:rgba(34,197,94,.10);
    border-color:rgba(34,197,94,.35);
}

.alert-error{
    background:rgba(239,68,68,.10);
    border-color:rgba(239,68,68,.35);
}

.alert-warning{
    background:rgba(245,158,11,.10);
    border-color:rgba(245,158,11,.35);
}

.empty-state,
.empty-box{
    padding:16px;
    border-radius:16px;
    background:rgba(255,255,255,.03);
    border:1px dashed rgba(255,255,255,.10);
    color:var(--fd-color-texto-secundario);
    line-height:1.6;
}

.summary-box{
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    color:var(--fd-color-texto-secundario);
    line-height:1.65;
}

.status{
    margin-top:12px;
    min-height:20px;
    font-size:14px;
}

.status.ok{
    color:#8ff0b5;
    text-shadow:0 0 10px rgba(143,240,181,.15);
}

.status.error{
    color:#ff9b9b;
    text-shadow:0 0 10px rgba(255,155,155,.14);
}

/* DIVIDERS */
.divider{
    width:100%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    margin:14px 0;
}

/* NAV */
.bottom-nav{
    position:fixed;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    max-width:420px;
    width:100%;
    height:72px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:nowrap;
    background:rgba(11,17,32,.92);
    backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.06);
    box-shadow:0 -8px 24px rgba(0,0,0,.22);
    z-index:50;
}

.nav-link{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
    font-size:11px;
    color:var(--fd-color-texto-secundario);
    transition:
        color var(--transition-fast),
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
    border-radius:14px;
    margin:6px;
}

.nav-link:hover{
    transform:translateY(-1px);
}

.nav-link.active{
    color:var(--fd-color-primario);
    background:rgba(124,58,237,.10);
    box-shadow:0 0 0 1px rgba(192,132,252,.18) inset;
}

.nav-link span{
    white-space:nowrap;
}

.nav-ico{
    font-size:18px;
    line-height:1;
}

/* HERO / DECORATIVE BLOCKS */
.mystic-bg{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
        radial-gradient(circle at 20% 15%, rgba(192,132,252,.18), transparent 22%),
        radial-gradient(circle at 80% 10%, rgba(124,58,237,.14), transparent 18%),
        radial-gradient(circle at 50% 85%, rgba(147,51,234,.12), transparent 22%);
}

.glow-border{
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 12px 34px rgba(0,0,0,.22);
}

.premium-hover{
    transition:transform .25s ease, box-shadow .25s ease;
}

.premium-hover:hover{
    transform:translateY(-3px);
    box-shadow:
        0 16px 38px rgba(0,0,0,.28),
        0 0 22px rgba(255,214,110,.07);
}

.cosmic-strip{
    display:flex;
    gap:10px;
    overflow:auto;
    padding-bottom:6px;
    scrollbar-width:none;
}

.cosmic-strip::-webkit-scrollbar{
    display:none;
}

.mystic-highlight{
    position:relative;
    overflow:hidden;
}

.mystic-highlight::after{
    content:"";
    position:absolute;
    inset:auto -30% -65% auto;
    width:180px;
    height:180px;
    background:radial-gradient(circle, rgba(255,222,128,.14), transparent 70%);
    pointer-events:none;
}

.top-icon{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(135deg, rgba(124,58,237,.22), rgba(255,255,255,.04)),
        var(--fd-color-cards);
    border:1px solid rgba(192,132,252,.24);
    color:#fff;
    box-shadow:0 10px 24px rgba(76,29,149,.18);
    font-size:18px;
    animation:softFloat 3.2s ease-in-out infinite;
}

.mini-live{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 14px;
    border-radius:16px;
    text-align:center;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06);
    color:var(--fd-color-texto);
}

.mini-live-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 5px rgba(34,197,94,.12);
    animation:pulseLive 1.5s infinite;
}

@keyframes pulseLive{
    0%{ transform:scale(1); opacity:1; }
    70%{ transform:scale(1.15); opacity:.7; }
    100%{ transform:scale(1); opacity:1; }
}

@keyframes softFloat{
    0%,100%{ transform:translateY(0px); }
    50%{ transform:translateY(-4px); }
}

/* MEDIA */
.media-thumb{
    width:100%;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
}

.media-thumb img{
    width:100%;
    display:block;
}

/* LOTERIAS / RESULTADOS */
.lottery-tabs{
    display:flex;
    gap:10px;
    overflow:auto;
    margin-top:10px;
}

.lottery-tab{
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    font-size:13px;
    text-decoration:none;
}

.lottery-tab.active{
    background:rgba(192,132,252,.15);
}

.lottery-chip-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.lottery-chip{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:10px 14px;
    border-radius:999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
        var(--fd-color-cards);
    border:1px solid rgba(255,255,255,.08);
    color:var(--fd-color-texto);
    font-size:.92rem;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 10px 20px rgba(0,0,0,.14);
    transition:
        transform .18s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.lottery-chip:hover{
    transform:translateY(-2px);
    border-color:rgba(192,132,252,.35);
    box-shadow:
        0 14px 28px rgba(0,0,0,.20),
        0 0 0 1px rgba(255,255,255,.03) inset;
}

.lottery-chip.active{
    background:
        linear-gradient(135deg, rgba(124,58,237,.24), rgba(192,132,252,.10)),
        var(--fd-color-cards);
    border-color:rgba(192,132,252,.42);
    color:#fff;
    box-shadow:
        0 0 0 1px rgba(192,132,252,.18) inset,
        0 16px 34px rgba(76,29,149,.26);
}

.lottery-chip-logo{
    width:30px;
    height:30px;
    min-width:30px;
    border-radius:999px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-size:.78rem;
    font-weight:800;
}

.lottery-chip-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.prediction-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.lottery-head{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.lottery-head-logo{
    width:52px;
    height:52px;
    min-width:52px;
    border-radius:16px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
        var(--fd-color-cards);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-soft);
    font-weight:800;
    color:var(--fd-color-texto);
}

.lottery-head-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.lottery-head-copy h3{
    margin:0 0 4px 0;
    color:var(--fd-color-texto);
    font-size:1.02rem;
}

.lottery-head-copy p{
    margin:0;
    color:var(--fd-color-texto-secundario);
    font-size:.88rem;
    line-height:1.45;
}

.prediction-highlight,
.prediction-side,
.mini-card,
.recent-card,
.analysis-card,
.analysis-box,
.pred-item{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),
        var(--fd-color-cards);
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    padding:14px;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.prediction-highlight::before,
.prediction-side::before,
.mini-card::before,
.recent-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right, rgba(192,132,252,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 34%);
    pointer-events:none;
}

.prediction-highlight > *,
.prediction-side > *,
.mini-card > *,
.recent-card > *{
    position:relative;
    z-index:1;
}

.analysis-box .k{
    font-size:12px;
    color:var(--fd-color-texto-secundario);
}

.analysis-box .v{
    font-size:18px;
    font-weight:800;
}

.support-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 12px;
}

.support-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(124,58,237,.12);
    border:1px solid rgba(192,132,252,.24);
    color:#f3e8ff;
    font-size:.82rem;
    font-weight:700;
    box-shadow:0 6px 16px rgba(76,29,149,.14);
}

.state-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:8px 12px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.01em;
    margin:8px 0 12px;
    border:1px solid transparent;
}

.state-green{
    background:rgba(34,197,94,.12);
    border-color:rgba(34,197,94,.24);
    color:#dcfce7;
}

.state-red{
    background:rgba(239,68,68,.12);
    border-color:rgba(239,68,68,.24);
    color:#fee2e2;
}

.state-amber{
    background:rgba(245,158,11,.12);
    border-color:rgba(245,158,11,.24);
    color:#fef3c7;
}

.state-violet{
    background:rgba(168,85,247,.14);
    border-color:rgba(168,85,247,.28);
    color:#f3e8ff;
}

.combo-base,
.recent-combo-inline{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:12px 0;
}

.combo-ball,
.recent-combo-inline span{
    min-width:52px;
    height:52px;
    padding:0 12px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
        var(--fd-color-cards);
    border:1px solid rgba(255,255,255,.09);
    color:var(--fd-color-texto);
    font-size:1rem;
    font-weight:800;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.combo-ball.additional{
    background:
        linear-gradient(135deg, rgba(124,58,237,.24), rgba(192,132,252,.10)),
        var(--fd-color-cards);
    border-color:rgba(192,132,252,.34);
    color:#fff;
}

.reading-box{
    margin-top:12px;
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    color:var(--fd-color-texto-secundario);
    line-height:1.65;
}

.recent-card + .recent-card{
    margin-top:12px;
}

.recent-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.recent-title{
    margin:0 0 4px 0;
    color:var(--fd-color-texto);
    font-size:.96rem;
}

.recent-sub{
    color:var(--fd-color-texto-secundario);
    font-size:.82rem;
    line-height:1.45;
}

.recent-number{
    font-size:1.7rem;
    font-weight:800;
    letter-spacing:.06em;
    color:var(--fd-color-primario);
    text-shadow:0 8px 24px rgba(124,58,237,.16);
    margin:8px 0 2px;
}

.table-wrap{
    margin-top:14px;
    overflow:auto;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.02);
}

.result-table,
.table-wrap table{
    width:100%;
    border-collapse:collapse;
    min-width:560px;
}

.result-table th,
.result-table td,
.table-wrap th,
.table-wrap td{
    padding:12px 14px;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.result-table th,
.table-wrap th{
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--fd-color-texto);
    background:rgba(255,255,255,.04);
}

.result-table td,
.table-wrap td{
    color:var(--fd-color-texto-secundario);
    font-size:.92rem;
}

/* ENERGY / TEMPERATURE / SPECIAL */
.energy-circle{
    width:118px;
    height:118px;
    margin:12px auto 14px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 35%),
        radial-gradient(circle at center, rgba(124,58,237,.26), rgba(15,23,42,.2));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 0 0 8px rgba(255,255,255,.02),
        0 0 22px rgba(124,58,237,.24),
        inset 0 0 30px rgba(255,255,255,.04);
}

.energy-circle span{
    font-size:38px;
    font-weight:800;
    color:#fff7d1;
    text-shadow:0 0 18px rgba(255,218,121,.22);
}

.temp-grid{
    margin-top:14px;
}

.temp-card{
    border-width:1px;
    border-style:solid;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.temp-card .feature-number{
    font-size:34px;
    font-weight:800;
    margin:10px 0 8px;
    letter-spacing:.04em;
}

.temp-frio{
    background:linear-gradient(135deg, rgba(255,80,80,.16), rgba(255,255,255,.03));
    border-color:rgba(255,90,90,.28);
}

.temp-frio .feature-label,
.temp-frio .feature-number,
.temp-frio .feature-text{
    color:#ff6b6b !important;
}

.temp-repetido{
    background:linear-gradient(135deg, rgba(245,158,11,.16), rgba(255,255,255,.03));
    border-color:rgba(245,158,11,.30);
}

.temp-repetido .feature-label,
.temp-repetido .feature-number,
.temp-repetido .feature-text{
    color:#fbbf24 !important;
}

.temp-caliente{
    background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(255,255,255,.03));
    border-color:rgba(34,197,94,.28);
}

.temp-caliente .feature-label,
.temp-caliente .feature-number,
.temp-caliente .feature-text{
    color:#4ade80 !important;
}

.registro-highlight{
    background:linear-gradient(
        180deg,
        rgba(99,102,241,.15),
        rgba(99,102,241,.05)
    );
    animation:registroFloat 2.5s ease-in-out infinite;
}

@keyframes registroFloat{
    0%{ transform:translateY(0px); }
    50%{ transform:translateY(-4px); }
    100%{ transform:translateY(0px); }
}

/* TABS */
.tabs{
    display:flex;
    gap:10px;
    margin:18px 0;
    padding:6px;
    border-radius:18px;
    background:rgba(255,255,255,0.04);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.06);
    position:relative;
    overflow:hidden;
}

.tab{
    flex:1;
    text-align:center;
    padding:12px 16px;
    border-radius:14px;
    cursor:pointer;
    user-select:none;
    transition:
        transform .22s ease,
        box-shadow .28s ease,
        background .28s ease,
        color .28s ease,
        letter-spacing .22s ease;
    position:relative;
    z-index:1;
}

.tab:hover{
    transform:translateY(-1px);
    box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 8px 18px rgba(0,0,0,.22);
}

.tab.active{
    background:
        radial-gradient(circle at 50% 50%, rgba(255,215,90,.22), rgba(255,255,255,.03) 60%),
        linear-gradient(135deg, rgba(255,220,120,.18), rgba(255,180,0,.08));
    color:#fff6cf;
    box-shadow:
        0 0 0 1px rgba(255,220,130,.28) inset,
        0 0 18px rgba(255,215,120,.22),
        0 0 34px rgba(255,190,80,.12);
    letter-spacing:.2px;
}

.tab.active::before{
    content:"";
    position:absolute;
    inset:-20%;
    background:radial-gradient(circle, rgba(255,222,128,.24) 0%, rgba(255,222,128,0) 62%);
    animation:tabGlowPulse 1.8s ease-in-out infinite;
    pointer-events:none;
}

@keyframes tabGlowPulse{
    0%,100%{ transform:scale(.92); opacity:.55; }
    50%{ transform:scale(1.08); opacity:1; }
}

/* PLANES */
.featured-plan{
    border-color:rgba(255,215,120,.24);
    box-shadow:
        0 0 0 1px rgba(255,220,130,.14) inset,
        0 12px 30px rgba(0,0,0,.28),
        0 0 24px rgba(255,214,110,.08);
}

.plan-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    margin-bottom:12px;
}

.plan-badge-free{
    color:#dfffea;
    background:rgba(34,197,94,.14);
    border:1px solid rgba(34,197,94,.24);
}

.plan-badge-recommended{
    color:#fff4c8;
    background:rgba(245,158,11,.14);
    border:1px solid rgba(245,158,11,.26);
}

.plan-badge-premium{
    color:#f3e8ff;
    background:rgba(168,85,247,.14);
    border:1px solid rgba(168,85,247,.24);
}

.plan-headline{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.plan-title{
    font-size:22px;
    color:var(--fd-color-texto);
}

.plan-desc{
    color:var(--fd-color-texto-secundario);
    line-height:1.6;
}

/* FORMS / AUTH / FIELDS */
.auth-card .card-title,
.panel-card .card-title,
.plan-title{
    margin-bottom:8px;
}

.field{
    margin-bottom:14px;
}

.field label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:var(--fd-color-texto);
}

.logout-mini{
    margin-top:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:12px;
    text-decoration:none;
    background:rgba(255, 6, 6, .82);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    transition:all .25s ease;
}

.logout-mini:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.2);
}

/* LEGAL */
.legal-check-wrap{
    margin-top:12px;
    margin-bottom:10px;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
}

.legal-check-label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    cursor:pointer;
    line-height:1.45;
    font-size:13px;
    color:rgba(255,255,255,.88);
}

.legal-check-label input[type="checkbox"]{
    margin-top:2px;
    width:18px;
    height:18px;
    accent-color:#f5c36b;
    flex:0 0 auto;
}

.legal-check-links{
    color:#fff2b3;
    text-decoration:none;
    border-bottom:1px dashed rgba(255,215,120,.45);
}

.legal-check-links:hover{
    color:#fff6cf;
}

.legal-panel{
    margin-top:20px;
    margin-bottom:20px;
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
}

.legal-section-title{
    margin:0 0 14px 0;
    text-align:center;
    font-size:20px;
    color:#fff6cf;
}

.legal-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.legal-card{
    padding:16px;
    border-radius:16px;
    background:rgba(255,255,255,0.03);
    text-align:center;
}

.legal-label{
    display:block;
    font-weight:700;
    margin-bottom:8px;
    color:#fff2b3;
}

.legal-desc{
    margin:0 0 12px 0;
    font-size:14px;
    line-height:1.5;
    color:rgba(255,255,255,0.78);
}

.legal-btn{
    width:100%;
    border:none;
    border-radius:12px;
    padding:12px 14px;
    cursor:pointer;
    font-weight:600;
    color:#0B0B1A;
    background:linear-gradient(135deg, #f6d365, #fda085);
    transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}

.legal-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.25);
    opacity:.96;
}

.legal-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(0,0,0,.70);
    backdrop-filter:blur(8px);
    z-index:9999;
}

.legal-modal.active{
    display:flex;
}

.legal-content{
    width:100%;
    max-width:560px;
    max-height:80vh;
    overflow:auto;
    border-radius:20px;
    padding:18px;
    background:#0B0B1A;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.legal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
}

.legal-header h3{
    margin:0;
    color:#fff6cf;
    font-size:20px;
}

.legal-close{
    border:none;
    background:rgba(255,255,255,0.06);
    color:#fff;
    width:36px;
    height:36px;
    border-radius:10px;
    cursor:pointer;
    font-size:18px;
}

.legal-close:hover{
    background:rgba(255,255,255,0.12);
}

.legal-body{
    font-size:14px;
    line-height:1.7;
    color:rgba(255,255,255,0.84);
    white-space:pre-line;
}

/* PARTICLES */
.particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:0;
}

.particle{
    position:absolute;
    bottom:-20px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(255,233,171,.8);
    box-shadow:0 0 12px rgba(255,233,171,.45);
    animation:floatParticle linear infinite;
}

@keyframes floatParticle{
    0%{
        transform:translateY(0) scale(.8);
        opacity:0;
    }
    10%{
        opacity:1;
    }
    100%{
        transform:translateY(-105vh) scale(1.4);
        opacity:0;
    }
}

.casino-target{
    display:inline-block;
    letter-spacing:.03em;
}

/* MOBILE */
@media (max-width:768px){
    .grid-2,
    .grid-3,
    .hero-stats,
    .hero-metrics,
    .analysis-grid,
    .prediction-main.directo,
    .prediction-main.combo,
    .timeline-grid,
    .radar-grid,
    .mini-grid,
    .top-grid{
        grid-template-columns:1fr;
    }

    .prediction-number{
        font-size:2.8rem;
    }

    .lottery-chip{
        width:100%;
        justify-content:flex-start;
    }
}

@media (min-width:768px){
    .legal-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}
.hero-meta--flush{
    margin-top:0;
}

.mini-card--spaced{
    margin-top:14px;
}

.combo-ball--featured{
    background:rgba(124,58,237,.24);
    border-color:rgba(139,92,246,.55);
}
.card-actions{
    margin-top:14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.btn-sm{
    width:auto;
    min-width:140px;
    padding:10px 14px;
    font-size:.88rem;
}
.hero-meta--flush{
    margin-top:0;
}

.mini-card--spaced{
    margin-top:14px;
}

.combo-ball--featured{
    background:rgba(124,58,237,.24);
    border-color:rgba(139,92,246,.55);
    color:#fff;
}

.card-actions{
    margin-top:14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.btn-sm{
    width:auto;
    min-width:140px;
    padding:10px 14px;
    font-size:.88rem;
}

.item-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
    margin-bottom:10px;
}

.item-badge--current{
    background:rgba(34,197,94,.14);
    border:1px solid rgba(34,197,94,.24);
    color:#dcfce7;
}

.result-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(124,58,237,.12);
    border:1px solid rgba(192,132,252,.22);
    color:#f5f3ff;
    font-weight:800;
    letter-spacing:.04em;
}

.img-fallback{
    background:rgba(255,255,255,.04);
}
.hero-meta--flush{margin-top:0}
.mini-card--spaced{margin-top:14px}
.combo-ball--featured{
    background:rgba(124,58,237,.24);
    border-color:rgba(139,92,246,.55);
    color:#fff;
}
.card-actions{
    margin-top:14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.btn-sm{
    width:auto;
    min-width:140px;
    padding:10px 14px;
    font-size:.88rem;
}
.item-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
    margin-bottom:10px;
}
.item-badge--current{
    background:rgba(34,197,94,.14);
    border:1px solid rgba(34,197,94,.24);
    color:#dcfce7;
}
.result-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(124,58,237,.12);
    border:1px solid rgba(192,132,252,.22);
    color:#f5f3ff;
    font-weight:800;
    letter-spacing:.04em;
}
.img-fallback{
    background:rgba(255,255,255,.04);
}
/* =========================================================
   BLOQUE DESTACADO: RESULTADO DEL DIA
   Diferencia visual para la tarjeta principal de resultados
========================================================= */

.panel-card--resultado-dia{
    background:
        linear-gradient(180deg, rgba(255,215,90,.06), rgba(255,255,255,.02)),
        linear-gradient(135deg, rgba(245,158,11,.08), rgba(124,58,237,.08)),
        var(--fd-color-cards);
    border:1px solid rgba(255,215,120,.22);
    box-shadow:
        0 0 0 1px rgba(255,220,130,.08) inset,
        0 18px 42px rgba(0,0,0,.30),
        0 0 30px rgba(255,190,80,.08);
}

.panel-card--resultado-dia::before{
    background:
        radial-gradient(circle at top right, rgba(255,215,120,.14), transparent 32%),
        radial-gradient(circle at bottom left, rgba(124,58,237,.10), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 34%);
}

.prediction-highlight--resultado-dia{
    background:
        linear-gradient(180deg, rgba(255,225,140,.08), rgba(255,255,255,.02)),
        linear-gradient(135deg, rgba(245,158,11,.10), rgba(124,58,237,.08)),
        #171423;
    border:1px solid rgba(255,215,120,.24);
    box-shadow:
        0 12px 28px rgba(0,0,0,.24),
        0 0 0 1px rgba(255,220,130,.05) inset;
}

.prediction-highlight--resultado-dia::before{
    background:
        radial-gradient(circle at top right, rgba(255,215,120,.18), transparent 34%),
        radial-gradient(circle at bottom left, rgba(168,85,247,.12), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 36%);
}

.prediction-side--resultado-dia{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        #121827;
    border:1px solid rgba(255,215,120,.12);
}

.panel-card--resultado-dia .lottery-head-copy h3{
    color:#fff7d6;
}

.panel-card--resultado-dia .lottery-head-copy p{
    color:#f6ddb0;
}

.panel-card--resultado-dia .prediction-number{
    color:#ffd76e;
    text-shadow:
        0 0 18px rgba(255,215,110,.18),
        0 10px 28px rgba(245,158,11,.16);
}

.panel-card--resultado-dia .reading-box{
    background:rgba(255,248,220,.04);
    border:1px solid rgba(255,215,120,.14);
    color:#f4e6c7;
}

.panel-card--resultado-dia .support-tag{
    background:rgba(245,158,11,.12);
    border:1px solid rgba(255,215,120,.24);
    color:#fff1c2;
    box-shadow:0 6px 16px rgba(245,158,11,.10);
}

.panel-card--resultado-dia .mini-card{
    background:
        linear-gradient(180deg, rgba(255,240,190,.04), rgba(255,255,255,.015)),
        #151a28;
    border:1px solid rgba(255,215,120,.10);
}

.panel-card--resultado-dia .mini-title{
    color:#f0d7a3;
}

.panel-card--resultado-dia .mini-value{
    color:#fff7de;
}

.panel-card--resultado-dia .mini-text{
    color:#d9c8a3;
}

.panel-card--resultado-dia .reason-item{
    color:#eadcbc;
}

.panel-card--resultado-dia .reason-dot{
    background:#ffd76e;
    box-shadow:0 0 0 5px rgba(255,215,110,.10);
}

/* Badge visual solo para "Predicción de hoy" */
.panel-card--resultado-dia .hero-meta .pill:first-child{
    background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(255,215,120,.10));
    border:1px solid rgba(255,215,120,.30);
    color:#fff3c9;
    box-shadow:0 0 16px rgba(255,190,80,.10);
}

/* Estado principal más visible dentro del bloque */
.panel-card--resultado-dia .state-pill{
    box-shadow:0 0 18px rgba(255,255,255,.04);
}

.panel-card--resultado-dia .state-green{
    background:rgba(34,197,94,.14);
    border-color:rgba(34,197,94,.28);
    color:#dcfce7;
}

.panel-card--resultado-dia .state-amber{
    background:rgba(245,158,11,.16);
    border-color:rgba(255,215,120,.34);
    color:#fff0bf;
}

.panel-card--resultado-dia .state-red{
    background:rgba(239,68,68,.16);
    border-color:rgba(239,68,68,.28);
    color:#ffe1e1;
}

.panel-card--resultado-dia .state-violet{
    background:rgba(168,85,247,.18);
    border-color:rgba(192,132,252,.30);
    color:#f3e8ff;
}
.panel-biblia {
    background: linear-gradient(135deg, #0f2f1f, #1f5c3f);
    border: 1px solid rgba(0,255,150,0.2);
}

.panel-biblia .card-title {
    color: #7dffb3;
}

.panel-biblia .info-label {
    color: #9affc7;
}

.panel-biblia .feature-label {
    color: #9affc7;
}
.panel-horoscopo {
    background: linear-gradient(135deg, #1a0f2e, #3a1f5c);
    border: 1px solid rgba(180,100,255,0.2);
}

.panel-horoscopo .card-title {
    color: #caa6ff;
}

.panel-horoscopo .info-label {
    color: #d8c2ff;
}
/* =========================
   LOGIN / REGISTRO MODAL
   ULTRA COMPACTO
   ========================= */

#registerModal.login-modal{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(0,0,0,.70);
    backdrop-filter: blur(8px);
    z-index: 9999;
}

#registerModal.login-modal.active{
    display: flex;
}

#registerModal .login-modal-content{
    width: 100%;
    max-width: 460px;
    margin: 0;
    padding: 12px;
}

#registerModal .login-modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}

#registerModal .login-modal-header .card-title{
    margin: 0;
    line-height: 1.1;
}

#registerModal .login-modal-body{
    color: var(--fd-color-texto-secundario);
    line-height: 1.2;
}

#registerModal .field{
    margin-bottom: 6px;
}

#registerModal .field label{
    display:block;
    margin-bottom:2px;
    font-size:.85rem;
    line-height:1.1;
}

#registerModal .login-row{
    display: flex;
    gap: 6px;
}

#registerModal #modal_pais{
    max-width: 110px;
}

#registerModal #modal_celular{
    flex: 1;
    min-width: 0;
}

#registerModal .input{
    padding: 7px 10px;
    min-height: 34px;
}

#registerModal .login-help{
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    line-height: 1.1;
    opacity: .7;
}

#registerModal .legal-check-wrap{
    margin: 6px 0;
    font-size: .8rem;
    line-height: 1.15;
}

#registerModal .btn{
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
}

#registerModal .login-secondary-btn{
    margin-top: 5px;
}

#registerModal .legal-close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

#registerModal .legal-close:hover{
    background: rgba(255,255,255,.12);
}

@media (max-width:768px){
    #registerModal .login-modal-content{
        padding: 10px;
    }

    #registerModal #modal_pais{
        max-width: 95px;
    }
}
.fd-poster-modal{
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.fd-poster-modal.active{
    display: flex;
}

.fd-poster-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(7, 10, 20, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.fd-poster-card{
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    z-index: 2;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255, 210, 120, 0.24);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255, 225, 160, 0.06) inset,
        0 0 34px rgba(255, 190, 60, 0.10);
    background:
        radial-gradient(circle at top, rgba(255,215,120,0.10), transparent 36%),
        linear-gradient(180deg, rgba(24,18,32,0.98) 0%, rgba(11,10,19,0.98) 100%);
    animation: fdPosterIn .35s ease;
}

@keyframes fdPosterIn{
    from{
        opacity: 0;
        transform: translateY(18px) scale(.96);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fd-poster-glow{
    position: absolute;
    inset: auto -40px -60px -40px;
    height: 160px;
    background: radial-gradient(circle, rgba(255,200,70,0.16) 0%, rgba(255,200,70,0.05) 40%, transparent 72%);
    pointer-events: none;
}

.fd-poster-close{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #f8e7b3;
    background: rgba(255,255,255,0.08);
    font-size: 16px;
    z-index: 3;
}

.fd-poster-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #2f1b00;
    background: linear-gradient(180deg, #ffe8a1 0%, #dca11a 100%);
    box-shadow: 0 8px 20px rgba(255,186,40,0.18);
}

.fd-poster-title{
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.15;
    font-size: 28px;
}

.fd-poster-title span{
    color: #ffd978;
    text-shadow: 0 0 16px rgba(255,215,120,0.18);
}

.fd-poster-subtitle{
    text-align: center;
    margin-bottom: 16px;
}

.fd-poster-grid{
    margin-top: 10px;
    margin-bottom: 16px;
}

.fd-poster-summary{
    text-align: center;
    margin-top: 6px;
    margin-bottom: 18px;
}

.fd-poster-actions{
    display: grid;
    gap: 10px;
}

.fd-soft-register-trigger{
    background: linear-gradient(180deg, rgba(255,214,102,0.18), rgba(255,186,64,0.10));
    border: 1px solid rgba(255,220,120,0.18);
}

@media (max-width: 480px){
    .fd-poster-card{
        max-width: 100%;
        border-radius: 22px;
    }

    .fd-poster-title{
        font-size: 24px;
    }
}
body.fd-modal-open{
    overflow: hidden;
}
.fd-register-modal{
    z-index: 13000;
}

.fd-register-card{
    max-width: 420px;
    width: 100%;
}

.fd-visit-urgency{
    margin: 4px 0 14px;
    padding: 10px 14px;
    border-radius: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #2f1b00;
    background: linear-gradient(180deg, #ffe8a1 0%, #dca11a 100%);
    box-shadow:
        0 8px 22px rgba(255,186,40,0.20),
        0 0 0 1px rgba(255,255,255,0.12) inset;
}

.fd-login-row{
    display: flex;
    gap: 8px;
}

.fd-login-row select{
    max-width: 140px;
    flex: 0 0 140px;
}

.fd-register-card .field{
    margin-bottom: 14px;
}

.fd-register-card .input,
.fd-register-card input,
.fd-register-card select{
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(255, 215, 120, 0.14);
    background: rgba(255,255,255,0.05);
    color: #f8f3df;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.fd-register-card .input::placeholder,
.fd-register-card input::placeholder{
    color: rgba(248,243,223,0.50);
}

.fd-register-card .input:focus,
.fd-register-card input:focus,
.fd-register-card select:focus{
    outline: none;
    border-color: rgba(255, 220, 120, 0.34);
    box-shadow:
        0 0 0 3px rgba(255, 204, 80, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.fd-register-card label{
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #f6e8bd;
}

.fd-register-card .login-help{
    display: block;
    margin-top: 8px;
    opacity: .78;
    font-size: 12px;
}

.fd-register-card .legal-check-wrap{
    margin-top: 2px;
    margin-bottom: 16px;
}

.fd-register-card .legal-check-label{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    color: #dfd6be;
}

.fd-register-card .legal-check-label input{
    margin-top: 3px;
}

.fd-register-card .legal-check-links{
    color: #ffd978;
    text-decoration: none;
    font-weight: 700;
}

.fd-register-card .legal-check-links:hover{
    text-decoration: underline;
}

.fd-register-card .status{
    border-radius: 14px;
}

.fd-register-card .status.ok{
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.22);
    color: #cbf7d8;
    padding: 12px 14px;
}

.fd-register-card .status.error{
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.22);
    color: #ffd2d2;
    padding: 12px 14px;
}
.fd-bible-card{
    margin:14px 0;
    padding:14px;
    border-radius:14px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    text-align:center;
}

.fd-bible-label{
    font-size:12px;
    opacity:.7;
    margin-bottom:6px;
}

.fd-bible-text{
    font-size:14px;
    line-height:1.4;
    font-style:italic;
}

.fd-bible-ref{
    font-size:12px;
    opacity:.6;
    margin-top:6px;
}


/* ============================
   IA NUMEROS TERMICOS
============================ */

.number-heat-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
}

.number-pill{
    padding:10px 14px;
    border-radius:10px;
    font-weight:700;
    font-size:14px;
    letter-spacing:1px;
}

.number-hot{
    background: rgba(60,140,255,.15);
    border:1px solid rgba(60,140,255,.35);
    color:#6fb1ff;
}

.number-warm{
    background: rgba(255,190,60,.12);
    border:1px solid rgba(255,190,60,.25);
    color:#ffd46a;
}

.number-cold{
    background: rgba(255,80,80,.12);
    border:1px solid rgba(255,80,80,.25);
    color:#ff9a9a;
}


/* ============================
   METRICAS IA AVANZADAS
============================ */

.ia-metrics-box{
    margin-top:14px;
    padding:16px;
    border-radius:14px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.05);
}

.ia-metric-row{
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    font-size:13px;
}

.ia-metric-row strong{
    color:#6fb1ff;
}


/* ============================
   RADAR PREDICTIVO
============================ */

.prediction-radar{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:12px;
}

.radar-item{
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
}

.radar-title{
    font-size:11px;
    color:var(--muted);
}

.radar-value{
    font-size:16px;
    font-weight:700;
    color:#6fb1ff;
}

.radar-text{
    font-size:11px;
    opacity:.7;
}


/* ============================
   VARIANTES IA
============================ */

.ia-variants{
    margin-top:14px;
}

.variant-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
}

.variant-badge{
    font-size:11px;
    padding:4px 8px;
    border-radius:8px;
    background:#18253a;
    color:#6fb1ff;
}

.variant-number{
    font-weight:700;
    letter-spacing:1px;
}


/* ============================
   HISTORICO EXPLICATIVO
============================ */

.history-insight{
    margin-top:12px;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.05);
    font-size:13px;
}

.history-insight strong{
    color:#6fb1ff;
}


/* ============================
   IA LABEL
============================ */

.ai-label{
    font-size:10px;
    padding:4px 8px;
    border-radius:8px;
    background:rgba(60,140,255,.12);
    border:1px solid rgba(60,140,255,.3);
    color:#6fb1ff;
    margin-left:8px;
}

.nav-link-logout{
    color:#ff8e8e !important;
}
.nav-link-logout .nav-ico{
    color:#ff6b6b !important;
}
.logout-overlay{
    position:fixed;
    inset:0;
    background:rgba(7,10,20,.78);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
}
.logout-overlay.is-visible{
    opacity:1;
    pointer-events:auto;
}
.logout-card{
    width:min(88vw, 340px);
    background:linear-gradient(180deg, rgba(28,18,24,.98), rgba(18,12,18,.98));
    border:1px solid rgba(255,107,107,.25);
    border-radius:22px;
    padding:24px 20px;
    text-align:center;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    transform:translateY(18px) scale(.96);
    transition:transform .28s ease;
}
.logout-overlay.is-visible .logout-card{
    transform:translateY(0) scale(1);
}
.logout-spinner{
    width:54px;
    height:54px;
    border-radius:999px;
    margin:0 auto 14px;
    border:3px solid rgba(255,255,255,.12);
    border-top-color:#ff6b6b;
    animation:fdSpin .85s linear infinite;
}
.logout-title{
    font-size:18px;
    font-weight:800;
    color:#fff;
    margin-bottom:8px;
}
.logout-text{
    font-size:14px;
    line-height:1.55;
    color:rgba(255,255,255,.84);
}
@keyframes fdSpin{
    to{transform:rotate(360deg);}
}
.nav-link-logout{
    color:#ff8e8e !important;
}
.nav-link-logout .nav-ico{
    color:#ff6b6b !important;
}
.logout-overlay{
    position:fixed;
    inset:0;
    background:rgba(7,10,20,.78);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
}
.logout-overlay.is-visible{
    opacity:1;
    pointer-events:auto;
}
.logout-card{
    width:min(88vw, 340px);
    background:linear-gradient(180deg, rgba(28,18,24,.98), rgba(18,12,18,.98));
    border:1px solid rgba(255,107,107,.25);
    border-radius:22px;
    padding:24px 20px;
    text-align:center;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    transform:translateY(18px) scale(.96);
    transition:transform .28s ease;
}
.logout-overlay.is-visible .logout-card{
    transform:translateY(0) scale(1);
}
.logout-spinner{
    width:54px;
    height:54px;
    border-radius:999px;
    margin:0 auto 14px;
    border:3px solid rgba(255,255,255,.12);
    border-top-color:#ff6b6b;
    animation:fdSpin .85s linear infinite;
}
.logout-title{
    font-size:18px;
    font-weight:800;
    color:#fff;
    margin-bottom:8px;
}
.logout-text{
    font-size:14px;
    line-height:1.55;
    color:rgba(255,255,255,.84);
}
@keyframes fdSpin{
    to{transform:rotate(360deg);}
}
.nav-link-logout{
    color:#ff8e8e !important;
}
.nav-link-logout .nav-ico{
    color:#ff6b6b !important;
}
.logout-overlay{
    position:fixed;
    inset:0;
    background:rgba(7,10,20,.78);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
}
.logout-overlay.is-visible{
    opacity:1;
    pointer-events:auto;
}
.logout-card{
    width:min(88vw, 340px);
    background:linear-gradient(180deg, rgba(28,18,24,.98), rgba(18,12,18,.98));
    border:1px solid rgba(255,107,107,.25);
    border-radius:22px;
    padding:24px 20px;
    text-align:center;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    transform:translateY(18px) scale(.96);
    transition:transform .28s ease;
}
.logout-overlay.is-visible .logout-card{
    transform:translateY(0) scale(1);
}
.logout-spinner{
    width:54px;
    height:54px;
    border-radius:999px;
    margin:0 auto 14px;
    border:3px solid rgba(255,255,255,.12);
    border-top-color:#ff6b6b;
    animation:fdSpin .85s linear infinite;
}
.logout-title{
    font-size:18px;
    font-weight:800;
    color:#fff;
    margin-bottom:8px;
}
.logout-text{
    font-size:14px;
    line-height:1.55;
    color:rgba(255,255,255,.84);
}
@keyframes fdSpin{
    to{transform:rotate(360deg);}
}
.nav-link-logout{
    color:#ff8e8e !important;
}
.nav-link-logout .nav-ico{
    color:#ff6b6b !important;
}
.logout-overlay{
    position:fixed;
    inset:0;
    background:rgba(7,10,20,.78);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
}
.logout-overlay.is-visible{
    opacity:1;
    pointer-events:auto;
}
.logout-card{
    width:min(88vw, 340px);
    background:linear-gradient(180deg, rgba(28,18,24,.98), rgba(18,12,18,.98));
    border:1px solid rgba(255,107,107,.25);
    border-radius:22px;
    padding:24px 20px;
    text-align:center;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    transform:translateY(18px) scale(.96);
    transition:transform .28s ease;
}
.logout-overlay.is-visible .logout-card{
    transform:translateY(0) scale(1);
}
.logout-spinner{
    width:54px;
    height:54px;
    border-radius:999px;
    margin:0 auto 14px;
    border:3px solid rgba(255,255,255,.12);
    border-top-color:#ff6b6b;
    animation:fdSpin .85s linear infinite;
}
.logout-title{
    font-size:18px;
    font-weight:800;
    color:#fff;
    margin-bottom:8px;
}
.logout-text{
    font-size:14px;
    line-height:1.55;
    color:rgba(255,255,255,.84);
}
@keyframes fdSpin{
    to{transform:rotate(360deg);}
}
.nav-link-logout{
    color:#ff8e8e !important;
}
.nav-link-logout .nav-ico{
    color:#ff6b6b !important;
}
.logout-overlay{
    position:fixed;
    inset:0;
    background:rgba(7,10,20,.78);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
}
.logout-overlay.is-visible{
    opacity:1;
    pointer-events:auto;
}
.logout-card{
    width:min(88vw, 340px);
    background:linear-gradient(180deg, rgba(28,18,24,.98), rgba(18,12,18,.98));
    border:1px solid rgba(255,107,107,.25);
    border-radius:22px;
    padding:24px 20px;
    text-align:center;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.logout-spinner{
    width:54px;
    height:54px;
    border-radius:999px;
    margin:0 auto 14px;
    border:3px solid rgba(255,255,255,.12);
    border-top-color:#ff6b6b;
    animation:fdSpin .85s linear infinite;
}
@keyframes fdSpin{
    to{transform:rotate(360deg);}
}