/* =============================================================
   App chrome — cabecera, tabs, CTA, disclaimer e iconografia.
   Capa visual sobre style.css (legacy); requiere design-system.css.
   ============================================================= */

:root {
    /* En modo claro: cristal blanco translucido sobre la pagina. */
    --app-header-bg: rgba(255, 255, 255, 0.82);
    --app-header-shadow: 0 1px 0 var(--border-sutil), 0 4px 16px rgba(15, 23, 42, 0.04);
    --app-header-height: 60px;
    --app-header-blur: 14px;
    --app-header-max-width: 1400px;
    --app-header-z: 100;

    --select-compact-height: 34px;
    --btn-icon-size: 34px;
    --btn-simulate-height: 52px;
    --btn-simulate-shadow: 0 4px 24px rgba(16, 185, 129, 0.25);
    --btn-simulate-shadow-hover: 0 8px 32px rgba(16, 185, 129, 0.4);
    --btn-simulate-shadow-active: 0 2px 12px rgba(16, 185, 129, 0.2);

    --disclaimer-info-bg: rgba(59, 130, 246, 0.06);
    --disclaimer-info-border: rgba(59, 130, 246, 0.15);

    --tab-badge-size: 16px;
    --tab-active-shadow: 0 0 0 1px var(--border-activo);
}

/* Iconos base (Lucide).
   Importante: usamos display:inline-block para que los <i data-lucide>
   vacios reserven espacio ANTES de que el script de Lucide los sustituya
   por <svg>. Sin esto, los botones solo-icono colapsan a 0x0 mientras
   carga el CDN. */
.icon,
i[data-lucide] {
    display: inline-block;
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 0;
}
.icon-sm,
i[data-lucide].icon-sm { width: 14px; height: 14px; }
.icon-lg,
i[data-lucide].icon-lg { width: 20px; height: 20px; }
.icon-xl,
i[data-lucide].icon-xl { width: 24px; height: 24px; }
.icon-2xl,
i[data-lucide].icon-2xl { width: 28px; height: 28px; }

/* Iconos dentro de un flex container que usan ::before/::after no requieren ajuste */
svg.icon,
svg[data-lucide] {
    display: inline-block;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   HEADER (PROMPT 1.2)
   Aplicado sobre .site-header existente para mantener layout JS.
   ============================================================ */
.app-header.site-header {
    position: sticky;
    top: 0;
    z-index: var(--app-header-z);
    background: var(--app-header-bg);
    backdrop-filter: blur(var(--app-header-blur));
    -webkit-backdrop-filter: blur(var(--app-header-blur));
    border-bottom: var(--border-width) solid var(--border-sutil);
    box-shadow: var(--app-header-shadow);
    padding: 0;
}

body.dark-mode {
    --app-header-bg: rgba(11, 14, 22, 0.85);
    --app-header-shadow: 0 1px 0 var(--border-sutil), 0 4px 16px rgba(0, 0, 0, 0.20);
}

body.high-contrast-mode {
    --app-header-bg: #000000;
    --app-header-shadow: 0 1px 0 var(--border-activo);
}

.app-header .header-inner {
    max-width: var(--app-header-max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
    height: var(--app-header-height);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.app-header .logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    flex-shrink: 0;
    color: inherit;
}

.app-header .logo .logo-area {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.app-header .logo-mark {
    width: 28px;
    height: 28px;
    color: var(--accent);
    flex-shrink: 0;
}

.app-header .logo-text {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    line-height: 1;
}

.app-header .logo-fire {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--accent);
    letter-spacing: -0.3px;
}

.app-header .logo-sim {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 300;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.app-header .header-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    margin-left: auto;
}

.app-header .select-compact {
    background: var(--surface-2);
    border: var(--border-width) solid var(--border-sutil);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    padding: 0 var(--space-3);
    height: var(--select-compact-height);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.app-header .select-compact:hover {
    background: var(--surface-3);
    color: var(--text-primary);
}

.app-header .select-compact:focus {
    outline: none;
    border-color: var(--accent);
    color: var(--text-primary);
}

.app-header .select-compact option {
    background: var(--surface-2);
    color: var(--text-primary);
}

.app-header .btn-icon {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: var(--border-width) solid var(--border-sutil);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
    padding: 0;
}

.app-header .btn-icon:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}

.app-header .btn-icon .badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    line-height: 0;
    padding: 0;
    border: none;
}

.app-header .btn-secondary.nav-link-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--btn-icon-size);
    padding: 0 var(--space-4);
    background: transparent;
    border: var(--border-width) solid var(--border-sutil);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.app-header .btn-secondary.nav-link-btn:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}

/* Notificaciones dropdown: garantizar contraste sobre dark */
.app-header .notif-dropdown {
    background: var(--surface-1);
    border: var(--border-width) solid var(--border-sutil);
    color: var(--text-primary);
}

/* Header compacto en movil: moneda + idioma visibles; solo ocultamos texto del blog */
@media (max-width: 768px) {
    .app-header .header-inner {
        gap: var(--space-2);
        padding: 0 var(--space-3);
        flex-wrap: nowrap;
    }
    .app-header .logo-sim {
        display: none;
    }
    .app-header .btn-secondary.nav-link-btn span {
        display: none;
    }
}

/* ============================================================
   SECTION TABS (PROMPT 1.5)
   Aplicado sobre .sidebar-tabs existente.
   ============================================================ */
.section-tabs.sidebar-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--surface-1);
    padding: var(--space-1);
    border: var(--border-width) solid var(--border-sutil);
    border-bottom: var(--border-width) solid var(--border-sutil);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    overflow-x: visible;
}

.section-tab.tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: none;
    border-bottom: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 500;
    opacity: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    position: relative;
    min-height: 36px;
}

.section-tab.tab-btn:hover {
    color: var(--text-secondary);
    background: var(--surface-2);
    opacity: 1;
}

.section-tab.tab-btn.active {
    background: var(--surface-3);
    color: var(--text-primary);
    border-bottom-color: transparent;
    box-shadow: var(--tab-active-shadow);
    opacity: 1;
}

.section-tab .tab-badge {
    flex-shrink: 0;
    background: var(--accent);
    color: var(--accent-fg);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    min-width: var(--tab-badge-size);
    height: var(--tab-badge-size);
    padding: 0 5px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--space-1);
    line-height: 1;
    box-sizing: border-box;
}

.section-tab .tab-badge[data-count="0"] {
    display: none;
}

.section-tabs.sidebar-tabs {
    overflow: hidden;
}

.section-tab.tab-btn {
    min-width: 0;
    overflow: hidden;
}

.section-tab.tab-btn > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .section-tab.tab-btn > span:not(.tab-badge) {
        display: none;
    }
    .section-tab.tab-btn {
        padding: var(--space-3);
    }
}

/* ============================================================
   CTA SIMULAR + LOADER (PROMPT 1.3)
   Aplicado sobre .btn-run#btnRun existente.
   ============================================================ */
.btn-run.btn-simulate {
    width: 100%;
    height: var(--btn-simulate-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    border: none;
    border-radius: var(--radius-md);
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    box-shadow: var(--btn-simulate-shadow);
    padding: 0 var(--space-5);
}

.btn-run.btn-simulate:hover {
    transform: translateY(-2px);
    box-shadow: var(--btn-simulate-shadow-hover);
}

.btn-run.btn-simulate:active {
    transform: translateY(0);
    box-shadow: var(--btn-simulate-shadow-active);
}

.btn-run.btn-simulate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-run.btn-simulate::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transform: translateX(-100%);
    transition: transform 0.4s;
    pointer-events: none;
}

.btn-run.btn-simulate:hover::after {
    transform: translateX(100%);
}

.btn-run.btn-simulate .btn-simulate-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-run.btn-simulate .btn-simulate-loader {
    display: none;
    align-items: center;
    gap: var(--space-2);
}

.btn-run.btn-simulate.is-loading {
    background: var(--surface-2);
    color: var(--text-secondary);
    box-shadow: none;
    cursor: wait;
    transform: none;
}

.btn-run.btn-simulate.is-loading > .icon,
.btn-run.btn-simulate.is-loading .btn-simulate-text {
    display: none;
}

.btn-run.btn-simulate.is-loading .btn-simulate-loader {
    display: inline-flex;
}

.loader-spinner {
    width: 16px;
    height: 16px;
    border: var(--border-width-lg) solid var(--border-activo);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   DISCLAIMER (PROMPT 1.4)
   ============================================================ */
.disclaimer-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--disclaimer-info-bg);
    border: var(--border-width) solid var(--disclaimer-info-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.disclaimer-banner .icon {
    color: var(--info);
    margin-top: 1px;
    flex-shrink: 0;
}

.disclaimer-banner p {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.disclaimer-banner .disclaimer-expand {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 0 var(--space-1);
    margin-left: var(--space-1);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.disclaimer-banner .disclaimer-expand:hover {
    color: var(--text-primary);
}

.disclaimer-full {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border-radius: var(--radius-md);
    margin-top: calc(var(--space-2) * -1 + var(--space-2));
    margin-bottom: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.6;
}

.disclaimer-full p {
    margin: 0;
}

/* ============================================================
   INFO TOOLTIP TRIGGERS (?)
   Sustituye el caracter "?" por un icono "info" sin tocar JS.
   ============================================================ */
.info-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 1;
    color: transparent !important;
    font-size: 0 !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: help;
    vertical-align: middle;
    position: relative;
}

.info-icon::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5675' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

.info-icon:hover::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}

/* Convencion de iconos inline en botones legacy ------------- */
.btn-small,
.btn-run,
.btn-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.btn-small .icon,
.btn-run .icon,
.btn-theme .icon {
    flex-shrink: 0;
}

/* btn-xs auxiliar (usado en disclaimer toggle) */
.btn-xs {
    font-size: var(--text-xs);
    padding: 0 var(--space-2);
    height: auto;
    line-height: 1.4;
}

/* ------------------------------------------------------------
   Inyeccion de iconos via ::before en botones cuyo texto es
   reemplazado por safeSetText (innerText) y por tanto eliminaria
   los <i data-lucide> si los pusieramos dentro del DOM.
   Estos botones tienen el atributo id="i18n-*" en si mismos.
   ------------------------------------------------------------ */
button.btn-add[id^="i18n-btn_add"]::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: var(--space-2);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Algunos btn-add tienen color de texto distinto al blanco (e.g. fondo
   amarillo). Si el padre define `color` propio, usamos currentColor para
   adaptar el icono al color del texto. */
button.btn-add[id="i18n-btn_add_tramo"]::before,
button.btn-add[id="i18n-btn_add_gp"]::before,
button.btn-add[id="i18n-btn_add_phase_u2"]::before,
button.btn-add[id="i18n-btn_add_extra_u2"]::before,
button.btn-add[id="i18n-btn_add_inmueble"]::before,
button.btn-add[id="i18n-btn_add_deuda"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}

button.btn-add[id^="i18n-btn_add"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* FIRE variant buttons — icono delante del texto */
#btnCoastFire,
#btnBaristaFire,
#btnFlamingoFire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

/* Section titles que tenian un emoji como primer <span> --
   ahora envuelto en <span class="section-icon"> que recibimos del HTML.
   Mantenemos compat con el layout flex existente. */
.section-title .section-icon {
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-2);
    color: var(--text-secondary);
}

.section-title .section-icon.text-danger { color: var(--danger); }
.section-title .section-icon.text-warning { color: var(--warning); }
.section-title .section-icon.text-info { color: var(--info); }

/* Notif badge dot (header) — sobrescribe el badge numerico legacy */
#btnNotifications .badge-dot[style*="display: none"] {
    display: none !important;
}

/* Pre-results hint (sustituir el span ▶ por un icono lucide) */
.pre-results-hint .icon {
    color: var(--accent);
}