/* ════════════════════════════════════════════════════════════════════
   Fund Analyzer Web — estilo extraído fielmente del informe HTML que
   genera la aplicación Java (HtmlChartGenerator). Paleta slate oscuro.
   ════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}
body{background:#0f172a;color:#f1f5f9;font-family:'Segoe UI',system-ui,sans-serif;font-size:14px}
a{color:inherit}

header{background:#1e293b;border-bottom:1px solid #334155;padding:1.25rem 2rem}
header h1{font-size:1.4rem;font-weight:700;margin-bottom:.2rem}
header p{color:#94a3b8;font-size:.8rem}
.container{max-width:1400px;margin:0 auto;padding:1.5rem 2rem}

/* ── Menú de tipos de fondo (columna 4 del Excel) ── */
.type-nav{display:flex;flex-wrap:wrap;gap:.5rem;position:sticky;top:0;z-index:30;
          background:#0f172aee;backdrop-filter:blur(6px);padding:.85rem 0;margin-bottom:.5rem;
          border-bottom:1px solid #1e293b}
.type-btn{background:#1e293b;color:#94a3b8;border:1px solid #334155;cursor:pointer;
          padding:.45rem 1rem;font-size:.82rem;font-weight:600;border-radius:.55rem;
          transition:background .12s,color .12s}
.type-btn:hover{background:#243049;color:#cbd5e1}
.type-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6}

/* ── Selector de periodo global ── */
.period-bar{display:flex;align-items:center;gap:.75rem;
            position:sticky;top:3.4rem;z-index:20;background:#0f172aee;
            backdrop-filter:blur(6px);padding:.75rem 0;margin:-.5rem 0 .5rem}
.period-label{color:#94a3b8;font-size:.85rem;font-weight:600}
.period-seg{display:inline-flex;border:1px solid #334155;border-radius:.55rem;overflow:hidden}
.period-btn{background:#1e293b;color:#94a3b8;border:none;cursor:pointer;
            padding:.45rem .9rem;font-size:.82rem;font-weight:600;
            border-right:1px solid #334155;transition:background .12s,color .12s}
.period-btn:last-child{border-right:none}
.period-btn:hover{background:#243049;color:#cbd5e1}
.period-btn.active{background:#3b82f6;color:#fff}

.section-title{font-size:1.1rem;font-weight:600;margin:1.75rem 0 .875rem;
               padding-bottom:.4rem;border-bottom:2px solid #3b82f6;color:#e2e8f0}

/* ── Tabla ranking ── */
.tbl-wrap{overflow-x:auto;border-radius:.6rem;border:1px solid #334155;margin-bottom:1.5rem}
table{width:100%;border-collapse:collapse;font-size:.8rem}
th{background:#1e3a5f;padding:.6rem .75rem;text-align:right;color:#94a3b8;font-weight:600;
   white-space:nowrap;border-bottom:2px solid #334155}
th:nth-child(-n+3){text-align:left}
td{padding:.5rem .75rem;text-align:right;border-top:1px solid #1e293b}
td:nth-child(-n+3){text-align:left}
tr:hover td{background:#ffffff08}
.pos{color:#4ade80}.neg{color:#f87171}.na{color:#64748b;font-style:italic}

.badge{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;
       border-radius:50%;font-weight:700;font-size:.75rem}
.b1{background:#fef3c722;color:#f59e0b}.b2{background:#e2e8f022;color:#94a3b8}
.b3{background:#fff7ed22;color:#f97316}.bn{background:#1e293b;color:#64748b}

/* ── Checkboxes del overview ── */
.checks-wrap{column-count:3;column-gap:.65rem;margin-bottom:.65rem;padding:.6rem;
             background:#0f172a;border-radius:.4rem}
.chk-label{display:flex;align-items:center;gap:.4rem;cursor:pointer;font-size:.73rem;
           color:#94a3b8;width:100%;padding:.2rem .35rem;border-radius:.25rem;
           transition:background .15s;overflow:hidden;break-inside:avoid;
           -webkit-column-break-inside:avoid}
.chk-label:hover{background:#1e293b;color:#e2e8f0}
.chk-label input{width:12px;height:12px;cursor:pointer;accent-color:var(--c,#3b82f6);flex-shrink:0}
.chk-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.chk-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chk-actions{display:flex;gap:.4rem;margin-bottom:.4rem}
.chk-btn{background:#1e293b;border:1px solid #334155;color:#94a3b8;padding:.2rem .55rem;
         font-size:.72rem;border-radius:.3rem;cursor:pointer}
.chk-btn:hover{background:#334155;color:#e2e8f0}
@media(max-width:900px){.checks-wrap{column-count:2}}
@media(max-width:600px){.checks-wrap{column-count:1}}

/* ── Gráficos ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(520px,1fr));gap:1.25rem;margin-bottom:1.5rem}
.card{background:#1e293b;border:1px solid #334155;border-radius:.6rem;padding:1rem}
.card-title{font-size:.82rem;font-weight:600;margin-bottom:.1rem;color:#e2e8f0}
.card-sub{font-size:.7rem;color:#64748b;margin-bottom:.65rem;line-height:1.4}
.chart-box{position:relative;height:240px}
.card-wide{background:#1e293b;border:1px solid #334155;border-radius:.6rem;padding:1rem;margin-bottom:1.25rem}
.chart-box-tall{position:relative;height:360px}
.ret-badge{display:inline-block;padding:.1rem .45rem;border-radius:.25rem;
           font-size:.7rem;font-weight:700;margin-left:.3rem}
.ret-pos{background:#16a34a22;color:#4ade80}
.ret-neg{background:#dc262622;color:#f87171}

/* ── Estados (cargando / vacío / error) ── */
.notice{background:#1e293b;border:1px solid #334155;border-radius:.6rem;
        padding:2rem;text-align:center;color:#94a3b8;margin:1.5rem 0}
.notice.error{border-color:#7f1d1d;color:#f87171}

/* ── Páginas legales ── */
.legal{max-width:780px;margin:0 auto;padding:2.5rem 2rem;line-height:1.7}
.legal h1{font-size:1.6rem;margin-bottom:1.5rem;color:#e2e8f0}
.legal h2{font-size:1.1rem;margin:1.75rem 0 .6rem;color:#cbd5e1}
.legal p{color:#94a3b8;margin-bottom:1rem}
.legal a{color:#3b82f6}

/* ── Footer legal ── */
footer{text-align:center;padding:1.5rem;color:#475569;font-size:.72rem;
       border-top:1px solid #1e293b;margin-top:1.5rem}
footer a{color:#64748b;text-decoration:none;margin:0 .5rem}
footer a:hover{color:#94a3b8}

@media(max-width:900px){.grid{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════════
   LANDING — estilo inspirado en referencia (gradientes morado-cian,
   glow, tipografía grande). Datos 100% reales del JSON.
   ════════════════════════════════════════════════════════════════════ */

.lp{max-width:1200px;margin:0 auto;padding:0 2rem}

/* Barra superior tipo marca */
.lp-nav{display:flex;align-items:center;justify-content:space-between;
        max-width:1200px;margin:0 auto;padding:1.4rem 2rem}
.lp-brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:#f1f5f9}
.lp-logo{width:30px;height:30px;border-radius:8px;
         background:linear-gradient(135deg,#8b5cf6,#06b6d4);display:inline-block}
.lp-nav-cta{background:#1e293b;border:1px solid #334155;color:#e2e8f0;
            padding:.55rem 1.1rem;border-radius:.6rem;font-size:.85rem;font-weight:600;
            text-decoration:none;transition:background .14s}
.lp-nav-cta:hover{background:#243049}

/* ── HERO ── */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;
      padding:3rem 0 4rem;position:relative}
.hero-tag{display:inline-block;background:#8b5cf61f;border:1px solid #8b5cf659;
          color:#c4b5fd;font-size:.78rem;font-weight:600;padding:.4rem .9rem;
          border-radius:2rem;margin-bottom:1.4rem}
.hero h1{font-size:3rem;line-height:1.08;font-weight:800;letter-spacing:-.02em;margin-bottom:1.2rem}
.hero h1 .grad{background:linear-gradient(120deg,#8b5cf6,#06b6d4);
               -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:#94a3b8;font-size:1.05rem;line-height:1.6;margin-bottom:1.8rem;max-width:30rem}
.hero-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.btn-grad{display:inline-flex;align-items:center;gap:.5rem;
          background:linear-gradient(120deg,#8b5cf6,#3b82f6);color:#fff;border:none;
          padding:.8rem 1.6rem;border-radius:.7rem;font-weight:700;font-size:.95rem;
          text-decoration:none;cursor:pointer;
          box-shadow:0 8px 30px -8px #8b5cf6aa;transition:transform .14s,box-shadow .14s}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 12px 38px -8px #8b5cf6cc}
.btn-ghost{color:#cbd5e1;text-decoration:none;font-weight:600;font-size:.9rem;
           display:inline-flex;align-items:center;gap:.4rem}
.btn-ghost:hover{color:#fff}

/* Panel de la gráfica destacada */
.hero-panel{position:relative;background:linear-gradient(160deg,#1e293b,#0f172a);
            border:1px solid #334155;border-radius:1.1rem;padding:1.5rem;
            box-shadow:0 30px 80px -30px #8b5cf655;overflow:hidden}
.hero-panel::after{content:"";position:absolute;bottom:-40%;left:50%;transform:translateX(-50%);
                   width:120%;height:60%;
                   background:radial-gradient(ellipse at center,#06b6d433,transparent 70%);
                   pointer-events:none}
.hero-panel .hp-label{color:#94a3b8;font-size:.82rem;margin-bottom:.2rem}
.hero-panel .hp-big{font-size:2.6rem;font-weight:800;line-height:1;
                    background:linear-gradient(120deg,#22d3ee,#22c55e);
                    -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.2rem}
.hero-panel .hp-sub{color:#64748b;font-size:.78rem;margin-bottom:1rem}
.hp-chart{position:relative;height:200px}
.hp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.2rem}
.hp-stat{background:#0f172a99;border:1px solid #334155;border-radius:.6rem;padding:.7rem .8rem}
.hp-stat .v{font-size:1.15rem;font-weight:800;color:#e2e8f0}
.hp-stat .k{font-size:.68rem;color:#64748b;margin-top:.15rem}

/* ── Sección categorías ── */
.lp-section{padding:3rem 0}
.lp-section-head{text-align:center;max-width:640px;margin:0 auto 2.5rem}
.lp-section-head h2{font-size:2rem;font-weight:800;margin-bottom:.5rem;letter-spacing:-.01em}
.lp-section-head p{color:#94a3b8;line-height:1.6}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}
.cat-card{display:flex;flex-direction:column;background:linear-gradient(160deg,#1e293b,#172033);
          border:1px solid #334155;border-radius:.9rem;padding:1.5rem;text-decoration:none;
          color:inherit;position:relative;overflow:hidden;
          transition:transform .15s,border-color .15s,box-shadow .15s}
.cat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
                  background:linear-gradient(90deg,var(--accent,#3b82f6),transparent)}
.cat-card::after{content:"";position:absolute;top:-30%;right:-20%;width:55%;height:80%;
                 background:radial-gradient(circle,var(--accent,#3b82f6)22,transparent 70%);
                 opacity:0;transition:opacity .2s;pointer-events:none}
.cat-card:hover{transform:translateY(-4px);border-color:var(--accent,#3b82f6);
                box-shadow:0 20px 50px -20px var(--accent,#3b82f6)66}
.cat-card:hover::after{opacity:1}
.cat-icon{width:3rem;height:3rem;border-radius:.7rem;display:flex;align-items:center;
          justify-content:center;font-size:1.5rem;margin-bottom:1rem;
          background:var(--accent,#3b82f6)1f;border:1px solid var(--accent,#3b82f6)44}
.cat-name{font-size:1.2rem;font-weight:700;color:#f1f5f9;margin-bottom:.25rem}
.cat-count{font-size:.78rem;color:#94a3b8;margin-bottom:1.2rem}
.cat-metric{margin-top:auto}
.cat-metric .mv{font-size:1.5rem;font-weight:800;line-height:1}
.cat-metric .mk{font-size:.68rem;color:#64748b;margin-top:.2rem}
.cat-best{font-size:.72rem;color:#64748b;line-height:1.5;margin-top:.9rem;
          border-top:1px solid #334155;padding-top:.8rem}
.cat-best strong{color:#cbd5e1;font-weight:600}
.cat-cta{margin-top:.9rem;font-size:.82rem;font-weight:700;color:var(--accent,#3b82f6);
         display:inline-flex;align-items:center;gap:.4rem}
.cat-card.all{background:linear-gradient(160deg,#1e3a5f,#172033);border-color:#3b82f680}
.cat-card.all .cat-name{color:#fff}

@media(max-width:860px){.hero{grid-template-columns:1fr}.hero h1{font-size:2.3rem}}
@media(max-width:600px){.cat-grid{grid-template-columns:1fr}.hp-stats{grid-template-columns:repeat(3,1fr)}}

/* ════════════════════════════════════════════════════════════════════
   TEMA UNIFICADO — aplica el look de la landing (gradientes morado-cian,
   glow, tipografía) a la vista de fondos y páginas legales.
   ════════════════════════════════════════════════════════════════════ */

/* Fondo con glow ambiental sutil en todas las páginas */
body{
  background:
    radial-gradient(900px 500px at 85% -5%, #8b5cf61a, transparent 60%),
    radial-gradient(800px 500px at 0% 0%, #06b6d414, transparent 55%),
    #0f172a;
  background-attachment:fixed;
}

/* Header de la vista, estilo barra de marca de la landing */
header{background:#1e293bcc;backdrop-filter:blur(8px);
       border-bottom:1px solid #334155}
header h1{background:linear-gradient(120deg,#e2e8f0,#c4b5fd);
          -webkit-background-clip:text;background-clip:text;color:transparent;
          display:inline-block}

/* Menú de tipos como pills; activo con gradiente y glow */
.type-btn{border-radius:2rem}
.type-btn.active{background:linear-gradient(120deg,#8b5cf6,#3b82f6);
                 border-color:transparent;box-shadow:0 6px 20px -8px #8b5cf6cc}

/* Selector de periodo: activo con gradiente */
.period-btn.active{background:linear-gradient(120deg,#8b5cf6,#3b82f6)}

/* Títulos de sección con barra de acento degradada */
.section-title{border-bottom:none;position:relative;padding-left:.9rem}
.section-title::before{content:"";position:absolute;left:0;top:.1rem;bottom:.1rem;
                       width:4px;border-radius:3px;
                       background:linear-gradient(180deg,#8b5cf6,#06b6d4)}

/* Cards con degradado y glow al hover, como en la landing */
.card,.card-wide{background:linear-gradient(160deg,#1e293b,#172033)}
.card{transition:transform .14s,border-color .14s,box-shadow .14s}
.card:hover{border-color:#3b82f655;box-shadow:0 16px 40px -22px #8b5cf655}

/* Cabecera de tabla con tinte de marca */
th{background:linear-gradient(180deg,#243049,#1e3a5f)}

/* Botón genérico .btn con gradiente (botones de la vista) */
.btn{background:linear-gradient(120deg,#8b5cf6,#3b82f6);
     box-shadow:0 8px 24px -10px #8b5cf6aa}
.btn:hover{background:linear-gradient(120deg,#7c4ddb,#2563eb)}

/* Páginas legales: encabezado con barra de marca y acento en títulos */
.legal h1{background:linear-gradient(120deg,#e2e8f0,#c4b5fd);
          -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.legal h2{color:#c4b5fd}
.legal a{color:#8b5cf6}

/* ── Páginas estáticas SEO (h1/lead de cada categoría) ── */
.seo-h1{font-size:2rem;font-weight:800;letter-spacing:-.01em;margin:.5rem 0 .6rem;
        background:linear-gradient(120deg,#e2e8f0,#c4b5fd);
        -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.seo-lead{color:#94a3b8;line-height:1.6;margin-bottom:1.5rem;max-width:48rem}
main.container{padding-top:1rem}

/* ── Aviso de borrador pendiente de validación jurídica ── */
.legal-draft{background:#78350f33;border:1px solid #f59e0b66;border-left:4px solid #f59e0b;
             border-radius:.5rem;padding:1rem 1.2rem;margin-bottom:1.8rem;
             color:#fcd34d;font-size:.85rem;line-height:1.6}
.legal-draft strong{color:#fbbf24}

/* ── Mi cartera ── */
.cart-badge{display:inline-flex;align-items:center;justify-content:center;
            min-width:1.3rem;height:1.3rem;padding:0 .35rem;border-radius:1rem;
            background:#8b5cf6;color:#fff;font-size:.72rem;font-weight:700;margin-left:.35rem}
.add-cart{background:#1e293b;border:1px solid #8b5cf666;color:#c4b5fd;cursor:pointer;
          padding:.3rem .6rem;font-size:.72rem;font-weight:600;border-radius:.4rem;
          white-space:nowrap;transition:background .12s,color .12s}
.add-cart:hover{background:#8b5cf6;color:#fff}
.add-cart.in{background:#8b5cf6;color:#fff;border-color:#8b5cf6}
.add-cart.in:hover{background:#7c3aed}

.cart-summary{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
              gap:1rem;background:linear-gradient(160deg,#1e293b,#172033);
              border:1px solid #334155;border-radius:.7rem;padding:1rem 1.25rem;margin-bottom:.5rem}
.cart-summary strong{font-size:1.15rem}
.cart-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.weight-warn{font-size:.8rem;margin-left:.4rem}
.weight-warn.over{color:#f87171;font-weight:700}
.weight-warn.under{color:#94a3b8}

.w-input{width:5rem;background:#0f172a;border:1px solid #334155;color:#f1f5f9;
         padding:.35rem .5rem;border-radius:.4rem;font-size:.82rem;text-align:right}
.w-input:focus{outline:none;border-color:#8b5cf6}
.del-cart{background:#1e293b;border:1px solid #7f1d1d;color:#f87171;cursor:pointer;
          width:1.8rem;height:1.8rem;border-radius:.4rem;font-weight:700;
          transition:background .12s,color .12s}
.del-cart:hover{background:#dc2626;color:#fff}

/* ── Bloque de metodología (transparencia) ── */
.methodology{background:linear-gradient(160deg,#1e293b,#172033);border:1px solid #334155;
             border-radius:.6rem;margin:1rem 0 1.25rem;overflow:hidden}
.methodology summary{cursor:pointer;padding:.8rem 1.1rem;font-size:.85rem;font-weight:600;
                     color:#c4b5fd;list-style:none;user-select:none}
.methodology summary::-webkit-details-marker{display:none}
.methodology summary:hover{background:#ffffff06}
.methodology[open] summary{border-bottom:1px solid #334155}
.meth-body{padding:1rem 1.1rem;font-size:.83rem;line-height:1.6;color:#94a3b8}
.meth-body p{margin-bottom:.7rem}
.meth-formula-label{color:#cbd5e1}
.meth-formula{background:#0f172a;border:1px solid #334155;border-radius:.45rem;
              padding:.7rem .9rem;font-family:ui-monospace,Menlo,Consolas,monospace;
              font-size:.8rem;color:#e2e8f0;line-height:1.9;word-spacing:.1rem}
.meth-term{display:inline-block;background:#8b5cf61f;border:1px solid #8b5cf644;
           border-radius:.3rem;padding:.05rem .4rem;margin:.1rem .1rem;color:#c4b5fd;white-space:nowrap}
.meth-note{font-size:.76rem;color:#64748b}
.meth-formula sup{font-size:.7em}

/* ── Métricas agregadas de la cartera ── */
.port-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem}
.port-metric{background:linear-gradient(160deg,#1e293b,#172033);border:1px solid #334155;
             border-radius:.6rem;padding:1rem 1.2rem;text-align:center}
.pm-val{font-size:1.5rem;font-weight:800;line-height:1.1}
.pm-val.na{color:#64748b;font-style:italic;font-size:1.1rem}
.pm-key{font-size:.74rem;color:#94a3b8;margin-top:.35rem}
@media(max-width:760px){.port-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.port-metrics{grid-template-columns:1fr}}

/* ── Buscador de fondos ── */
.search-box{display:flex;gap:.5rem;margin:.5rem 0 .4rem;max-width:30rem}
.search-box input{flex:1;background:#0f172a;border:1px solid #334155;color:#f1f5f9;
                  padding:.7rem .9rem;border-radius:.6rem;font-size:.9rem}
.search-box input:focus{outline:none;border-color:#8b5cf6}
.search-msg{font-size:.82rem;min-height:1.1rem;margin-bottom:.6rem}
.search-msg.notfound{color:#f87171}

/* ── Selector de idioma ── */
.lang-switch{display:inline-flex;border:1px solid #334155;border-radius:.5rem;overflow:hidden}
.lang-switch button{background:#1e293b;color:#94a3b8;border:none;cursor:pointer;
                    padding:.4rem .6rem;font-size:.78rem;font-weight:700;
                    border-right:1px solid #334155;transition:background .12s,color .12s}
.lang-switch button:last-child{border-right:none}
.lang-switch button:hover{background:#243049;color:#cbd5e1}
.lang-switch button.active{background:linear-gradient(120deg,#8b5cf6,#3b82f6);color:#fff}

/* Resaltado de fondo buscado */
tr.fund-focus td{background:#8b5cf61f !important;box-shadow:inset 3px 0 0 #8b5cf6}

/* ── Disclaimer del pie, más visible ── */
.disclaimer{max-width:780px;margin:1rem auto 0;background:#78350f1f;border:1px solid #f59e0b55;
            border-radius:.55rem;padding:.7rem 1.1rem;color:#fcd34d;font-size:.8rem;
            line-height:1.55;text-align:center;font-weight:500}