/* Billetito: tokens y componentes compartidos. Las clases históricas conservan su API. */
:root {
    --color-primary: #2463a5;
    --color-primary-dark: #173b60;
    --color-primary-light: #eaf2fb;
    --color-secondary: #368798;
    --color-success: #137d57;
    --color-warning: #986018;
    --color-danger: #b6313b;
    --color-info: #226a8e;
    --color-background: #f2f5f8;
    --color-surface: #ffffff;
    --color-surface-secondary: #eaf0f5;
    --color-text: #20364d;
    --color-text-secondary: #54697f;
    --color-border: #d3dfe9;
    --color-shadow: rgba(26, 51, 77, .07);
    --color-green: var(--color-success);
    --color-red: var(--color-primary);
    --color-coral: var(--color-primary);
    --color-peach: var(--color-info);
    --color-dark: var(--color-primary-dark);
    --bg-main: var(--color-background);
    --card-bg: var(--color-surface);
    --text-main: var(--color-text);
    --text-muted: var(--color-text-secondary);
    --border-color: var(--color-border);
    --input-bg: var(--color-surface);
}
body.billetito-platform { font-family: Poppins, "Segoe UI", sans-serif; background: var(--color-background); color: var(--color-text); }
.billetito-platform [hidden] { display: none !important; }
.billetito-platform .navbar { background: var(--color-surface) !important; border-bottom: 1px solid var(--color-border); padding: .65rem 0; box-shadow: none; }
.billetito-platform .navbar-item,.billetito-platform .navbar-brand .navbar-item,.billetito-platform .navbar-burger { color: var(--color-primary-dark) !important; }
.billetito-platform .navbar-end .navbar-item { font-size: .82rem; font-weight: 500; }
.billetito-platform .navbar-item:hover { background: var(--color-primary-light) !important; color: var(--color-primary) !important; }
.billetito-platform .brand-badge { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-border); }
.billetito-platform .brand-icon { color: var(--color-primary); }
.billetito-platform .hero-bg-glow { display: none; }
.billetito-platform #home-view { max-width: 1160px; margin: auto; }
.billetito-platform #main-content { flex: 1; }
.billetito-platform :is(h1,h2,h3,h4,.title,.seo-title,.seo-subtitle,.panel-header,.home-title) { color: var(--color-primary-dark); -webkit-text-fill-color: currentColor; background-image: none; }
.billetito-platform #main-content :is(p,.content-list,.content-list li,.custom-sublabel,.receipt-section-title,.tool-category) { color: var(--color-text-secondary) !important; }
.billetito-platform #main-content :is(.panel-container,.panel-config,.panel-receipt,.budget-panel,.standalone-result,.receipt-row,.custom-label,.content-list strong) { color: var(--color-text) !important; }
.billetito-platform #main-content :is(.panel-container,.budget-panel,.standalone-result,.menu-section,.budget-item,.seo-text-block,.tool-article,.tool-card,.home-card,.calculator-howto,.share-box,.directory-principles>div) { background: var(--color-surface) !important; border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 4px 18px var(--color-shadow); backdrop-filter: none; }
.billetito-platform #main-content .panel-config { background: var(--color-surface) !important; }
.billetito-platform #main-content .panel-receipt { background: var(--color-surface-secondary) !important; border-color: var(--color-border); }
.billetito-platform #main-content :is(.budget-panel,.panel-config,.panel-receipt) { padding: clamp(1.2rem,3vw,2rem); }
.billetito-platform #main-content .custom-label { display: block; margin: 0 0 .65rem !important; font-weight: 600; line-height: 1.5; }
.billetito-platform #main-content .custom-field { margin-bottom: 1.4rem; }
.billetito-platform #main-content form>.columns { margin-bottom: 1.25rem; }
.billetito-platform #main-content .custom-sublabel { display: block; font-size: .8rem; line-height: 1.6; }
.billetito-platform #main-content .custom-label .custom-sublabel { margin: .25rem 0 0; }
.billetito-platform #main-content .custom-label+.custom-sublabel { margin: -.3rem 0 .65rem; }
.billetito-platform #main-content :is(input,select,textarea,.custom-input-wrapper)+.custom-sublabel { margin-top: .55rem; }
.billetito-platform #main-content :is(.custom-input,.budget-input,.budget-textarea,.contact-textarea,.stepper-control,.stepper-input) { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; font-family: inherit; font-size: 1rem; }
.billetito-platform #main-content :is(.custom-input,.budget-input,select) { min-height: 48px; }
.billetito-platform #main-content :is(.custom-input,.budget-input,.budget-textarea,.contact-textarea)::placeholder { color: var(--color-text-secondary); opacity: .8; }
.billetito-platform #main-content :is(.custom-input,.budget-input,.budget-textarea,.contact-textarea):focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-light); }
.billetito-platform #main-content :is(.custom-input,.budget-input)[aria-invalid=true] { border-color: var(--color-danger) !important; }
.billetito-platform #main-content .select { margin-top: 0; }
.billetito-platform #main-content .select select option { background: var(--color-surface); color: var(--color-text); }
.billetito-platform #main-content .stepper-control { border: 1px solid var(--color-border); border-radius: 12px; }
.billetito-platform .stepper-btn { color: var(--color-primary); min-width: 42px; min-height: 44px; }
.billetito-platform .stepper-input { width: 3rem; }
.billetito-platform #main-content .receipt-row { gap: 1rem; border-color: var(--color-border); flex-wrap: wrap; }
.billetito-platform #main-content .receipt-row>span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
.billetito-platform :is(.btn-calc,.primary-button,.button.is-emerald) { background: var(--color-primary) !important; color: var(--color-surface) !important; border: 1px solid var(--color-primary); box-shadow: none; border-radius: 10px; font-weight: 600; min-height: 48px; }
.billetito-platform :is(.btn-calc,.primary-button):hover { background: var(--color-primary-dark) !important; transform: translateY(-1px); }
.billetito-platform :is(.btn-pdf,.secondary-button,.share-btn,.btn-card) { background: var(--color-surface) !important; color: var(--color-primary) !important; border: 1px solid var(--color-border) !important; box-shadow: none; border-radius: 10px; min-height: 44px; }
.billetito-platform :is(button,a,input,summary,select,textarea):focus-visible { outline: 3px solid var(--color-info); outline-offset: 3px; }
.billetito-platform button:disabled { opacity: .55; cursor: wait; }
.billetito-platform #main-content .result-box-green { background: var(--color-success) !important; color: var(--color-surface) !important; box-shadow: none !important; border-radius: 14px; padding: 1.4rem; }
.billetito-platform #main-content .result-box-green :is(.result-label,.result-value) { color: var(--color-surface) !important; }
.billetito-platform .result-value { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.billetito-platform #main-content .standalone-result .receipt-row:last-of-type { padding: 1rem; background: var(--color-success); border-radius: 10px; color: var(--color-surface) !important; }
.billetito-platform :is(.tool-card-icon,.home-card-icon) { color: var(--color-primary) !important; background: var(--color-primary-light) !important; border-color: var(--color-border); }
.billetito-platform :is(.tool-scope,.tool-filter,.calculator-tag,.home-card::before) { color: var(--color-primary); background: var(--color-primary-light); border-color: var(--color-border); }
.billetito-platform :is(.tool-filter.is-selected,.tool-filter:hover) { color: var(--color-surface); background: var(--color-primary); border-color: var(--color-primary); }
.billetito-platform .tool-filter span { color: inherit; }
.billetito-platform :is(.tool-card a,.home-directory-link,.related-tools a,.back-btn,.content-list a,.tool-article a,.seo-text-block a) { color: var(--color-primary); }
.billetito-platform .related-tools { background: var(--color-primary-light); border-color: var(--color-border); }
.billetito-platform :is(.home-tool-search,.directory-search) { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
.billetito-platform :is(.home-tool-search input,.directory-search input) { color: var(--color-text); }
.billetito-platform .home-tool-search button { background: var(--color-primary); color: var(--color-surface); }
.billetito-platform .home-tool-search input::placeholder { color: var(--color-text-secondary); }
.billetito-platform :is(.error-message,.budget-alert) { color: var(--color-danger) !important; background: transparent; }
.billetito-platform .ad-space { background: var(--color-surface-secondary); color: var(--color-text-secondary); box-shadow: none; border-color: var(--color-border); }
.billetito-platform .site-footer { background: var(--color-primary-dark); border: 0; }
.billetito-platform .site-footer :is(p,a,h3,h4,strong) { color: var(--color-surface) !important; }
.billetito-platform .site-footer .footer-links { columns: 2; column-gap: 1rem; }
.billetito-platform .footer-disclaimer { opacity: .8; }
.billetito-platform .footer-heart { color: var(--color-surface); }
.billetito-platform .share-toast { background: var(--color-primary-dark); color: var(--color-surface); }
.billetito-platform #main-content[data-initial-calc]:not([data-initial-calc=""]) .calc-view { display: block; }
.platform-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding: 4rem 0 3rem; }
.eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--color-primary); display: inline-block; line-height: 1.6; }
.status-dot { display: inline-block; width: 7px; height: 7px; background: var(--color-success); border-radius: 50%; margin-right: .5rem; }
.hero-copy h1 { font-size: clamp(3.1rem,5.8vw,5rem); line-height: 1.08; letter-spacing: -.055em; margin: 1.3rem 0 1.5rem; font-weight: 700; }
.hero-copy h1 em { color: var(--color-primary); font-style: normal; }
.hero-copy p { max-width: 420px; font-size: 1.1rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0; }
.hero-trust { display: flex; gap: 1.2rem; color: var(--color-text-secondary); font-size: .78rem; }
.hero-trust i { color: var(--color-success); }
.hero-financial { background: var(--color-surface); padding: 1.65rem; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: 0 12px 40px var(--color-shadow); position: relative; }
.demo-heading { display: flex; justify-content: space-between; gap: .5rem; font-size: .6rem; letter-spacing: .06em; color: var(--color-text-secondary); }
.demo-badge { padding: .2rem .4rem; background: var(--color-surface-secondary); border-radius: 4px; white-space: nowrap; }
.demo-balance { margin: 1.7rem 0 .7rem; display: grid; gap: .5rem; }
.demo-balance small { color: var(--color-text-secondary); }
.demo-balance strong { color: var(--color-primary-dark); font-size: clamp(1.7rem,3vw,2.65rem); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.demo-balance>span { color: var(--color-success); font-size: .75rem; }
.demo-chart svg { width: 100%; display: block; height: auto; }
.demo-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--color-border); padding-top: 1.1rem; gap: .75rem; }
.demo-metrics div { display: grid; gap: .4rem; }
.demo-metrics small { font-size: .62rem; color: var(--color-text-secondary); }
.demo-metrics strong { font-size: .85rem; }
.demo-link { display: flex; justify-content: space-between; margin-top: 1.5rem; text-decoration: none; color: var(--color-primary); font-size: .75rem; font-weight: 600; }
.platform-search { max-width: none; margin: 1rem 0 3rem; min-height: 62px; border-radius: 12px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.6rem; }
.section-heading h2 { font-size: clamp(1.4rem,2.5vw,1.9rem); letter-spacing: -.035em; margin: .5rem 0 0; }
.section-heading>a { font-size: .85rem; color: var(--color-primary); white-space: nowrap; }
.quick-section,.category-section,.featured-section { margin: 3.5rem 0; }
.quick-links { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: .8rem; }
.quick-links a { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-decoration: none; padding: 1rem .25rem; font-size: .76rem; text-align: center; }
.quick-links a>i { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: var(--color-primary); font-size: 1.3rem; transition: transform .18s; }
.quick-links a:hover>i { transform: translateY(-3px); background: var(--color-primary-light); }
.category-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 3rem; }
.category-list>a { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.category-list>a>i { color: var(--color-primary); width: 24px; }
.category-list h3 { font-size: 1rem; margin: 0; }
.category-list p { font-size: .75rem; margin: .4rem 0 0; line-height: 1.6; }
.category-list>a>span { margin-left: auto; font-size: .65rem; flex-shrink: 0; color: var(--color-text-secondary); }
.category-list>a>span i { margin-left: .5rem; }
.featured-tools { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1.2rem; }
.featured-tool { background: var(--color-surface); border: 1px solid var(--color-border); padding: 1.6rem; border-radius: 14px; display: flex; flex-direction: column; align-items: start; gap: 1rem; }
.featured-tool h3 { font-size: 1.3rem; margin: 0; }
.featured-tool p { margin: 0; font-size: .9rem; line-height: 1.7; }
.featured-tool>a { margin-top: auto; text-decoration: none; color: var(--color-primary); font-size: .9rem; font-weight: 600; }
.featured-tool.is-flagship { border-top: 4px solid var(--color-primary); background: var(--color-primary-light); }
.all-tools-details { margin: 3rem 0; }
summary { cursor: pointer; font-weight: 600; line-height: 1.5; }
.all-tools-details>summary { margin-bottom: 1.5rem; color: var(--color-primary); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; font-size: .75rem; color: var(--color-text-secondary); margin: 1.8rem auto; max-width: 1160px; }
.breadcrumbs a { text-decoration: none; color: var(--color-primary); }
.projection-page { max-width: 1160px; margin: auto; }
.page-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.page-heading h1 { font-size: clamp(2rem,4vw,2.9rem); line-height: 1.2; letter-spacing: -.04em; margin: .7rem 0; }
.page-heading p { max-width: 680px; line-height: 1.75; }
.projection-workspace { display: grid; grid-template-columns: 350px minmax(0,1fr); gap: 1.6rem; align-items: start; }
.projection-inputs h2 { font-size: 1.1rem; margin: 0; }
.projection-inputs form { margin-top: 1.5rem; }
.form-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .9rem; }
.projection-options,.transfer-options { border-top: 1px solid var(--color-border); padding-top: 1rem; margin: 1rem 0; }
.projection-options>summary,.transfer-options>summary { margin-bottom: 1.2rem; font-size: .85rem; }
.projection-output { min-width: 0; }
.primary-result { background: var(--color-success); color: var(--color-surface); border-radius: 15px; padding: 1.8rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1.3rem; }
.primary-result strong { display: block; font-size: clamp(1.8rem,3vw,2.9rem); letter-spacing: -.035em; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.primary-result>div>span { font-size: .85rem; }
.billetito-platform #main-content .primary-result p { color: var(--color-surface) !important; margin: .2rem 0; font-size: .78rem; }
.result-variation { margin-left: auto; font-weight: 600; font-size: 1.1rem; }
.result-variation small { display: block; font-size: .6rem; font-weight: 400; }
.metric-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 1.3rem 0; gap: 1rem; }
.metric-block { padding: 1rem 0; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: .5rem; }
.metric-block>span { font-size: .75rem; color: var(--color-text-secondary); }
.metric-block>strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric-block>small { color: var(--color-text-secondary); font-size: .68rem; }
.inflation-note { border-left: 3px solid var(--color-info); padding: .8rem 1rem; background: var(--color-primary-light); display: grid; gap: .5rem; border-radius: 0 8px 8px 0; }
.inflation-note span { font-size: .75rem; line-height: 1.6; }
.result-actions { margin: 1.25rem 0; align-items: center; }
.result-actions .btn-pdf { width: auto; margin: 0; font-size: .82rem; padding: .75rem 1rem; }
.result-actions .button { border: 1px solid var(--color-border); background: var(--color-surface); font-size: .82rem; color: var(--color-primary); }
.chart-panel { padding: 1.4rem; margin: 1.25rem 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; min-width: 0; }
.chart-panel h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.chart-panel p { font-size: .75rem; line-height: 1.6; }
.chart-panel svg { width: 100%; max-height: 300px; height: auto; }
.financial-chart circle:focus { outline: none; stroke: var(--color-primary-dark); stroke-width: 3px; }
.financial-table { width: 100%; border-collapse: collapse; font-size: .75rem; font-variant-numeric: tabular-nums; }
.financial-table th,.financial-table td { padding: .85rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--color-border); }
.financial-table th:first-child,.financial-table td:first-child { text-align: left; }
.financial-table th { background: var(--color-surface-secondary); font-weight: 600; }
.table-scroll { width: 100%; max-width: 100%; overflow: auto; margin-top: 1rem; }
.report-disclaimer { font-size: .75rem; line-height: 1.7; padding: 1rem; background: var(--color-surface-secondary); border-radius: 10px; }
.result-empty { padding: 3rem 2.5rem; border: 1px dashed var(--color-border); border-radius: 16px; min-height: 380px; display: flex; flex-direction: column; justify-content: center; align-items: start; }
.result-empty>i { font-size: 2.7rem; color: var(--color-primary); margin-bottom: 2rem; }
.result-empty h2 { font-size: 1.65rem; margin: 1rem 0 .5rem; letter-spacing: -.03em; }
.result-empty p { line-height: 1.8; max-width: 420px; }
.empty-steps { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; color: var(--color-text-secondary); font-size: .72rem; }
.tool-article details { border-top: 1px solid var(--color-border); padding: 1rem 0; }
.tool-article .content-list a { word-break: break-word; }
.related-platform { max-width: 1160px; margin: 3rem auto; padding: 0 1rem; }
.related-platform .tool-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.related-platform .tool-card { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); min-height: 180px; box-shadow: none; }
.related-platform .tool-card h3 { margin: 0; font-size: 1rem; }
.related-platform .tool-card p { color: var(--color-text-secondary); font-size: .82rem; }
.related-platform .tool-card a { color: var(--color-primary); font-size: .85rem; }
.result-empty-note { padding: 1rem; border: 1px dashed var(--color-border); font-size: .85rem; }
.mini-breakdown { margin: 1.5rem 0; }
.mini-breakdown .bar-track { height: 9px; background: var(--color-surface-secondary); border-radius: 4px; overflow: hidden; }
.mini-breakdown .bar-fill { height: 100%; background: var(--color-primary); }
.mini-breakdown .bar-label { display: flex; justify-content: space-between; gap: .75rem; font-size: .72rem; margin: .7rem 0 .35rem; }
@media (max-width: 1023px) {
    .billetito-platform .navbar-menu { background: var(--color-surface) !important; border-color: var(--color-border); box-shadow: 0 4px 18px var(--color-shadow); }
    .platform-hero { gap: 2rem; }
    .quick-links { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .projection-workspace { grid-template-columns: 310px minmax(0,1fr); gap: 1rem; }
}
@media (max-width: 768px) {
    .platform-hero { grid-template-columns: 1fr; padding: 2rem 0 1rem; gap: 2rem; }
    .hero-copy h1 { font-size: clamp(3.2rem,14vw,4.5rem); }
    .hero-copy p { font-size: 1rem; }
    .hero-financial { padding: 1.2rem; }
    .platform-search { margin-bottom: 2rem; }
    .category-list,.featured-tools,.projection-workspace { grid-template-columns: 1fr; }
    .section-heading { align-items: start; flex-direction: column; }
    .category-list>a>span { font-size: .6rem; }
    .page-heading { flex-direction: column; }
    .quick-section,.category-section,.featured-section { margin: 2.6rem 0; }
    .quick-links { gap: .35rem; }
    .quick-links a { font-size: .65rem; }
    .primary-result { padding: 1.2rem; }
    .result-variation { margin-left: 0; }
    .chart-panel { padding: 1rem .7rem; }
    .metric-block>strong { font-size: 1rem; }
    .related-platform .tool-grid { grid-template-columns: 1fr; }
    .result-empty { padding: 2rem 1.25rem; min-height: 0; }
    .billetito-platform #main-content .columns:not(.is-mobile)>.column { flex: 0 0 100%; width: 100%; }
    .billetito-platform .toggle-row { gap: 1rem; }
    .billetito-platform .toggle-text { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}