:root{ --blue:#0966C3; --blue-deep:#07529C; --blue-soft:#EBF0FA; --navy:#032444; --white:#FFFFFF; --rust:#E07A3E; --ink:#101826; --ink-soft:#5B6B7C; --line:#E2E8F0; --bg:#F7F9FC; --good:#1E8E5A; --bad:#D14343; --radius:14px; --shadow:0 1px 2px rgba(3,36,68,.04), 0 8px 24px rgba(3,36,68,.06); --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:var(--font-display); margin:0; letter-spacing:-0.01em;} a{color:inherit;} button{font-family:inherit; cursor:pointer;} ::selection{background:var(--blue-soft);} /* ---------- NAV ---------- */ .nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:14px 28px; background:var(--bg); border-bottom:1px solid var(--line); } .nav-brand{display:flex; align-items:center; gap:10px; font-weight:700; font-family:var(--font-display); font-size:16px;} .nav-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);flex-shrink:0;} /* ---------- HERO / UPLOAD ---------- */ .hero{ max-width:920px; margin:0 auto; padding:64px 24px 40px; text-align:center; } .eyebrow{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--blue-deep); background:var(--blue-soft); padding:6px 12px; border-radius:100px; margin-bottom:22px; } .eyebrow::before{content:'🔒'; font-size:11px;} .hero h1{font-size:clamp(32px,4.5vw,46px); line-height:1.08; margin-bottom:16px;} .hero p.sub{color:var(--ink-soft); font-size:17px; max-width:560px; margin:0 auto 36px;} .dropzone{ border:2px dashed #C7D3E6; border-radius:20px; background:var(--white); padding:48px 28px; cursor:pointer; transition:border-color .15s, background .15s, transform .1s; box-shadow:var(--shadow); } .dropzone:hover, .dropzone.drag{border-color:var(--blue); background:var(--blue-soft);} .dropzone .icon{font-size:34px; margin-bottom:10px;} .dropzone h3{font-size:18px; margin-bottom:6px;} .dropzone p{color:var(--ink-soft); font-size:13.5px; margin:0;} .dropzone input{display:none;} .formats{margin-top:16px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;} .formats span{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); background:var(--bg); border:1px solid var(--line); padding:3px 9px; border-radius:6px;} .file-status{display:none; align-items:center; gap:10px; justify-content:center; margin-top:18px; font-size:14px; color:var(--good); font-weight:600;} .file-status.show{display:flex;} /* ---------- SHARED FIELD STYLES (usados en el selector de años) ---------- */ .field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em;} .field select, .field input[type=number]{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; font-family:var(--font-body); font-size:14px; background:var(--bg); color:var(--ink); } .field select:focus, .field input:focus{outline:2px solid var(--blue); outline-offset:1px; background:var(--white);} .field .hint{font-size:12px; color:var(--ink-soft); margin-top:5px;} .btn{ padding:11px 20px; border-radius:9px; border:none; font-weight:600; font-size:14px; transition:.15s; } .btn-primary{background:var(--blue); color:#fff;} .btn-primary:hover{background:var(--blue-deep);} .btn-ghost{background:none; color:var(--ink-soft); border:1px solid var(--line);} .btn-ghost:hover{border-color:var(--blue); color:var(--blue);} /* ---------- DASHBOARD ---------- */ .dash{display:none; max-width:1180px; margin:0 auto; padding:36px 24px 48px; scroll-margin-top:64px;} .dash.show{display:block;} .dash-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px;} .dash-head h2{font-size:22px;} .dash-head .reset{font-size:13px; color:var(--ink-soft); text-decoration:underline; cursor:pointer; background:none; border:none; padding:0;} .year-picker{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:20px; display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; } .year-picker .field{min-width:160px;} .year-picker .field label{margin-bottom:6px;} .year-picker select{ width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:var(--bg); font-size:14px; font-weight:600; } .year-picker .vs{font-family:var(--font-mono); color:var(--ink-soft); font-size:13px; margin-top:34px;} .single-year-note{color:var(--ink-soft); font-size:13px; font-style:italic; padding-bottom:8px;} /* ---------- DATE FORMAT BADGE ---------- */ .dateformat-badge{margin-bottom:14px;} .dateformat-chip{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--blue-soft); border:1px solid #D4E1F5; border-radius:10px; padding:9px 14px; font-size:13px; color:var(--blue-deep); } .dateformat-chip.warn{background:#FBEFE7; border-color:#F0D3BA; color:#9A5219;} .dateformat-chip .dateformat-text strong{font-weight:700;} .dateformat-chip .dateformat-edit{ margin-left:auto; background:none; border:1px solid currentColor; color:inherit; font-size:12px; font-weight:600; padding:5px 10px; border-radius:7px; opacity:.85; } .dateformat-chip .dateformat-edit:hover{opacity:1;} .dv-merge-alert{ display:flex; gap:12px; align-items:flex-start; border-radius:12px; padding:14px 16px; margin-bottom:14px; font-size:13.5px; line-height:1.5; } .dv-merge-alert .dv-merge-icon{ font-size:20px; line-height:1; flex-shrink:0; } .dv-merge-alert strong{ font-weight:700; } .dv-merge-alert.dv-merge-info{ background:var(--blue-soft); border:1.5px solid #B9D2F2; color:var(--blue-deep); } .dv-merge-alert.dv-merge-warn{ background:#FDECEC; border:1.5px solid #F3B9B9; color:#96271A; margin-top:8px; } .dateformat-options{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;} .dateformat-options button{ background:var(--white); border:1px solid var(--line); color:var(--ink); font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:8px; transition:.15s; } .dateformat-options button:hover{border-color:var(--blue); color:var(--blue);} .dateformat-options button.active{background:var(--blue); border-color:var(--blue); color:#fff;} .kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:26px;} .kpi{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px 20px; box-shadow:var(--shadow); min-width:0;} .kpi .label{font-size:12px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px;} .kpi .value{font-family:var(--font-mono); font-size:21px; font-weight:600; color:var(--navy); line-height:1.25; word-break:break-word;} .kpi .value[data-tip]{cursor:help; position:relative; width:fit-content;} .kpi .value[data-tip]::after{ content:attr(data-tip); position:absolute; left:0; bottom:100%; margin-bottom:9px; background:var(--navy); color:#fff; font-family:var(--font-mono); font-weight:600; font-size:11.5px; padding:6px 10px; border-radius:7px; white-space:nowrap; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .15s, transform .15s; z-index:6; } .kpi .value[data-tip]::before{ content:''; position:absolute; left:14px; bottom:100%; margin-bottom:4px; border:5px solid transparent; border-top-color:var(--navy); opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .15s, transform .15s; z-index:6; } .kpi .value[data-tip]:hover::after, .kpi .value[data-tip]:hover::before{opacity:1; visibility:visible; transform:translateY(0);} .kpi .value.accent{color:var(--blue);} .kpi .value.good{color:var(--good);} .kpi .value.bad{color:var(--bad);} .chart-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px 18px; margin-bottom:32px; box-shadow:var(--shadow); } .chart-card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px;} .chart-card-head h3{font-size:15px;} .goal-input{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);} .goal-input input{width:110px; padding:6px 9px; border:1px solid var(--line); border-radius:7px; font-family:var(--font-mono); font-size:13px;} .chart-wrap{position:relative; height:440px;} .chart-subtitle{font-size:12.5px; color:var(--ink-soft); margin:-12px 0 18px;} /* ---------- CATEGORÍAS / TENDENCIAS / MARGEN ---------- */ .section-note{font-size:12.5px; color:var(--ink-soft); margin:0 0 18px;} .cat-controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px;} .cat-controls select{ padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); font-size:13.5px; font-weight:600; font-family:var(--font-body); color:var(--ink); } .toggle-group{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; width:fit-content;} .toggle-group button{background:var(--white); border:none; padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink-soft); transition:.15s;} .toggle-group button + button{border-left:1px solid var(--line);} .toggle-group button.active{background:var(--blue); color:#fff;} .trend-tabs{margin-bottom:18px;} .cat-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:center;} .rank-list{display:flex; flex-direction:column; gap:11px;} .rank-item{display:grid; grid-template-columns:112px 1fr 88px; align-items:center; gap:10px;} .rank-item .rank-label{font-size:13px; color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .rank-item .rank-track{background:var(--blue-soft); border-radius:6px; height:20px; overflow:hidden;} .rank-item .rank-fill{background:var(--blue); height:100%; border-radius:6px;} .rank-item.bottom .rank-fill{background:var(--bad);} .rank-item .rank-value{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px;} .rank-delta{font-family:var(--font-mono); font-size:10.5px; font-weight:700; white-space:nowrap;} .rank-delta.good{color:var(--good);} .rank-delta.bad{color:var(--bad);} .rank-pareto{font-family:var(--font-mono); font-size:9.5px; font-weight:700; color:var(--blue); background:var(--blue-soft); border-radius:5px; padding:1px 5px; margin-left:7px; vertical-align:1px;} .rank-goal-row{display:flex; justify-content:flex-end; align-items:center; gap:6px; font-size:11px; color:var(--ink-soft); margin:3px 0 8px;} .cat-goal-input{width:82px; padding:4px 7px; border:1px solid var(--line); border-radius:6px; font-family:var(--font-mono); font-size:11px; text-align:right;} .multiyear-wrap{position:relative; height:320px;} /* ---- Premium paywall (bloqueo + venta por suscripción) ---- */ .dv-upfront-unlock-btn{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(90deg,var(--blue),var(--blue-deep)); color:#fff; border:none; border-radius:999px; padding:9px 18px; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 2px 10px rgba(9,102,195,.35); transition:transform .15s, box-shadow .15s; } .dv-upfront-unlock-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(9,102,195,.45); } .dv-locked-wrap{ position:relative; } .dv-locked{ filter:blur(7px); pointer-events:none; user-select:none; } .dv-paywall-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; } .dv-paywall-box{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 22px; max-width:340px; text-align:center; box-shadow:0 8px 30px rgba(9,102,195,.16); } .dv-paywall-box h3{ font-size:16px; font-weight:700; color:var(--blue-deep); margin:0 0 8px; } .dv-paywall-box p{ font-size:13px; color:var(--ink-soft); margin:0 0 14px; line-height:1.5; } .dv-plan-toggle{ display:flex; gap:8px; justify-content:center; margin:0 0 14px; flex-wrap:wrap; } .dv-plan-pill{ font-size:11px; font-weight:600; padding:5px 12px; border-radius:999px; white-space:nowrap; } .dv-plan-pill-free{ background:var(--blue-soft); color:var(--ink-soft); border:1px solid var(--line); } .dv-plan-pill-paid{ background:var(--blue-deep); color:#fff; } .dv-price{ font-size:26px; font-weight:700; color:var(--blue-deep); margin:0 0 16px; } .dv-unlock-btn{ background:var(--blue-deep); color:#fff; border:none; border-radius:8px; padding:10px 26px; font-size:14px; font-weight:600; cursor:pointer; } .dv-unlock-btn:hover{ background:var(--blue); } .dv-modal-backdrop{ position:fixed; inset:0; background:rgba(9,20,36,.55); display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; z-index:1000; } .dv-modal{ background:#fff; border-radius:14px; padding:26px 22px; max-width:400px; width:100%; position:relative; max-height:90vh; overflow-y:auto; box-sizing:border-box; } .dv-modal h3{ font-size:16px; font-weight:700; color:var(--blue-deep); margin:0 0 6px; } .dv-modal-sub{ font-size:13px; color:var(--ink-soft); margin:0 0 10px; } .dv-modal-close{ position:absolute; top:12px; right:14px; background:none; border:none; font-size:22px; line-height:1; color:var(--ink-soft); cursor:pointer; } .dv-pay-methods{ list-style:none; margin:0 0 16px; padding:0; font-size:13px; color:var(--ink); } .dv-pay-methods li{ padding:6px 10px; background:var(--blue-soft); border-radius:6px; margin-bottom:6px; } .dv-modal-label{ display:block; font-size:12px; color:var(--ink-soft); margin:12px 0 4px; } .dv-modal-input{ width:100%; box-sizing:border-box; padding:9px 10px; border:1px solid var(--line); border-radius:6px; font-size:13px; margin-bottom:8px; } .dv-modal-btn{ width:100%; background:var(--blue-deep); color:#fff; border:none; border-radius:8px; padding:10px; font-size:13px; font-weight:600; cursor:pointer; margin-top:2px; } .dv-modal-btn-secondary{ background:#fff; color:var(--blue-deep); border:1.5px solid var(--blue); } .dv-modal-hint{ font-size:11px; color:var(--ink-soft); margin:8px 0 0; line-height:1.4; } .dv-modal-divider{ border:none; border-top:1px solid var(--line); margin:18px 0; } .dv-modal-error{ color:#B3401E; font-size:12px; margin:8px 0 0; } .dv-admin-fab{ width:44px; height:44px; border-radius:50%; border:none; background:var(--blue-deep); color:#fff; font-size:18px; cursor:pointer; box-shadow:0 2px 8px rgba(3,36,68,.25); } .dv-admin-panel{ background:#fff; border-radius:12px; box-shadow:0 8px 30px rgba(3,36,68,.2); padding:16px; } .donut-wrap{position:relative; height:260px;} .trend-wrap{position:relative; height:320px;} .scatter-wrap{position:relative; height:340px;} @media (max-width:760px){ .cat-grid{grid-template-columns:1fr; gap:24px;} } /* ---------- FOOTER ---------- */ footer{padding:28px 24px 40px; border-top:1px solid var(--line);} .brand-mark{ text-align:center; pointer-events:none; } .brand-mark .brand-sig{ display:flex; align-items:center; justify-content:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.03em; color:rgba(16,24,38,0.55); } .brand-mark .brand-icon{width:14px; height:14px; border-radius:50%; flex-shrink:0;} .brand-mark .brand-sig a{ color:rgba(16,24,38,0.8); pointer-events:auto; text-decoration:none; border-bottom:1px solid rgba(16,24,38,0.35); } .brand-mark .brand-sig a:hover{color:#101826; border-bottom-color:#101826;} .brand-mark .claude-star{color:var(--rust); font-size:14px; display:inline-block;} .brand-mark .brand-inspired{ margin-top:1px; font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:rgba(16,24,38,0.35); } .brand-mark .brand-inspired a{ color:rgba(16,24,38,0.5); pointer-events:auto; text-decoration:none; border-bottom:1px solid rgba(16,24,38,0.2); } .brand-mark .brand-inspired a:hover{color:rgba(16,24,38,0.8);} .legal-links{display:flex; justify-content:center; gap:16px; margin-bottom:14px; font-size:12px;} .legal-links a{color:var(--ink-soft); text-decoration:none;} .legal-links a:hover{color:var(--blue); text-decoration:underline;} @media (max-width:760px){ .kpis{grid-template-columns:1fr 1fr;} .chart-wrap{height:380px;} } @media (max-width:480px){ .kpis{grid-template-columns:1fr;} .chart-wrap{height:340px;} }