@import url("botica-tokens.css");

/* Archivo web: conserva contenido, tablas, enlaces y puerta de suscripción. */
body, body table, body .main, body .wrapper {
    background: var(--bg) !important; color: var(--text) !important;
    font-family: var(--botica-font) !important;
}
body *, body *::before, body *::after {
    box-shadow: none !important; text-shadow: none !important;
    background-image: none !important; backdrop-filter: none !important;
    border-color: var(--line) !important;
}
body .main { max-width: 880px !important; border-radius: 0 !important; border: 0 !important; }
body .header { background: var(--bg); padding: 40px 24px; text-align: left; }
body .logo { color: var(--text); font: 800 24px/0.95 var(--botica-font) !important; letter-spacing: var(--botica-tracking) !important; }
body .logo span { color: var(--sage); }
body h1, body h2, body h3, body .trend-title {
    color: var(--text) !important; font-family: var(--botica-font) !important;
    font-weight: 800 !important; letter-spacing: var(--botica-tracking) !important; text-transform: none;
}
body h1 { font-size: clamp(40px,6vw,64px); line-height: 0.95; }
body h2 { font-size: var(--botica-h2); line-height: 1.05; border: 0; padding-left: 0; margin: 64px 0 24px; }
body h3 { font-size: var(--botica-h3); line-height: 1.15; }
body p, body li, body .content { color: var(--text) !important; font: 400 17px/1.6 var(--botica-font); }
body a { color: var(--sage); text-underline-offset: 4px; }
body .content, body .kpi-container { padding: 24px; }
body .quincena-tag { background: var(--card) !important; color: var(--muted); padding: 8px 16px !important; border-radius: var(--botica-pill) !important; font: 500 13px/1.6 var(--botica-font); }
body .kpi-grid { border-spacing: 0; }
body .kpi-grid td { padding: 0 8px 16px; vertical-align: top; }
body .kpi-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--botica-radius); text-align: left; padding: 24px; }
body .kpi-label { font: 500 13px/1.6 var(--botica-font); color: var(--muted); }
body .kpi-value { color: var(--sage); font: 800 clamp(32px,5vw,48px)/1.05 var(--botica-font); letter-spacing: var(--botica-tracking); margin: 12px 0; overflow-wrap: anywhere; }
body .kpi-trend { font: 500 14px/1.6 var(--botica-font); }
body .trend-up { color: var(--sage); }
body .trend-down, body .trend-neutral { color: var(--amber); }
body .insight-box, body .alert-box, body .strategic-note, body .books-banner, body .sources-box {
    background: var(--card) !important; color: var(--text) !important; border-radius: var(--botica-radius); padding: 24px; text-align: left;
}
body .insight-title, body .trend-number { color: var(--amber); font-family: var(--botica-font); }
body .strategic-note { font-style: normal; border-left: 4px solid var(--sage) !important; }
body .bar-label { color: var(--text); font: 500 15px/1.6 var(--botica-font); }
body .bar-label-meta, body .signature-title { color: var(--muted); }
body .bar-bg { background: var(--line); }
body .bar-fill { background: var(--sage) !important; }
body .signature-name { color: var(--text); font: 800 20px/1.2 var(--botica-font); }
body .amazon-btn { background: none; border: 1.5px solid var(--muted) !important; color: var(--text) !important; border-radius: var(--botica-pill); padding: 14px 24px; font: 500 17px/1.6 var(--botica-font); }
body .book-img { height: 160px; max-width: 100%; object-fit: contain; }
body .footer { background: var(--card); color: var(--muted); text-align: left; padding: 40px 24px; }
body .footer p, body .footer a { color: var(--muted) !important; font-size: 14px !important; }
body .social-icon { opacity: 1; padding: 12px; }
body svg { stroke: var(--sage); }
body h2 > svg, body h3 > svg { display: none; }
body [style*="color:"] { color: var(--text) !important; }
body .sources-box *, body .footer [style*="color:"] { color: var(--muted) !important; }
body .nl-gate-overlay { background: var(--card) !important; border: 1px solid var(--line); border-radius: var(--botica-radius); color: var(--text); }
body .nl-gate-overlay h3, body .nl-gate-overlay p { color: var(--text) !important; }
body .nl-gate-form input { background: var(--bg) !important; color: var(--text) !important; border: 1.5px solid var(--muted) !important; border-radius: 16px; font: 400 17px/1.6 var(--botica-font); min-height: 48px; box-sizing: border-box; max-width: 100%; }
body .nl-gate-form input::placeholder { color: var(--muted); opacity: 1; }
body .nl-gate-form button { background: var(--red) !important; color: var(--on-red) !important; border: 0; border-radius: var(--botica-pill); padding: 14px 24px; font: 500 17px/1.6 var(--botica-font); }
body .nl-gate-note { color: var(--muted) !important; opacity: 1; }
body .nl-gate-success { color: var(--sage); }
body a:focus-visible, body button:focus-visible, body input:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
@media (max-width: 600px) {
    body .kpi-grid td { display: block; width: auto !important; padding: 0 0 16px; }
    body .nl-gate-form { flex-direction: column; }
    body .nl-gate-form input, body .nl-gate-form button { width: 100%; }
    body .nl-gate-overlay { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Fichas asimétricas: una sola familia de acento por resultado. */
body .kpi-grid td { width: 28%; --kpi-accent: var(--cream); }
body .kpi-grid td:first-child { width: 44%; --kpi-accent: var(--sage); }
body .kpi-grid td:last-child { --kpi-accent: var(--amber); }
body .kpi-grid td:first-child .kpi-card { border-radius: var(--botica-radius-feature); }
body .kpi-card .kpi-value, body .kpi-card .kpi-trend { color: var(--kpi-accent); }
body h1 > svg { display: none; }

/* Casilla de consentimiento RGPD en la puerta de suscripción */
body .consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: left; }
body .nl-gate-form .consent-check input[type="checkbox"] { margin: 3px 0 0; flex-shrink: 0; width: 18px !important; height: 18px; min-height: 0; padding: 0; border: 0 !important; accent-color: var(--sage); }
body .consent-check a { color: var(--text); text-decoration: underline; }