/*
 * Estilos de aplicación — Simulador de Coste Laboral.
 * Componentes sobre Bootstrap 5 usando los tokens de design-tokens.css (import antes que este).
 * "Calm control": cards blancas con borde 1px (sin sombra en reposo), navy/teal, datos en
 * cifras tabulares alineadas.
 */

/* Override de las variables de Bootstrap con los tokens (este fichero carga DESPUÉS de Bootstrap). */
:root {
    --bs-primary: var(--secondary);
    --bs-primary-rgb: 0, 104, 118;
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--on-surface);
    --bs-body-font-family: var(--font-body);
    --bs-border-color: var(--surface-border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-success: var(--success-green);
    --bs-warning: var(--warning-amber);
    --bs-danger: var(--error-red);
    --bs-info: var(--info-blue);
}

body {
    background: var(--surface);
    color: var(--on-surface);
    font-family: var(--font-body);
}

.font-display { font-family: var(--font-display); letter-spacing: -0.01em; }
.text-navy { color: var(--primary-container); }
.text-teal { color: var(--secondary); }
.text-muted-2 { color: var(--on-surface-variant); }

/* Cifras: lining tabular para alinear columnas de números. */
.data-mono { font-variant-numeric: tabular-nums lining-nums; font-weight: 500; letter-spacing: -0.01em; }

/* Eyebrow / labels en mayúsculas (label-md). */
.eyebrow {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

/* ---- Navbar ---- */
.app-navbar {
    background: var(--surface-container-lowest);
    border-bottom: 1px solid var(--surface-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.app-navbar .brand { font-family: var(--font-display); font-weight: 700; color: var(--primary-container); }
.app-navbar .nav-link { color: var(--on-surface-variant); font-weight: 500; }
.app-navbar .nav-link:hover { color: var(--primary-container); }
.app-navbar .nav-link.active {
    color: var(--secondary);
    border-bottom: 2px solid var(--secondary);
    font-weight: 600;
}

/* Navegación: barra horizontal en escritorio; menú desplegable en móvil (sin Bootstrap JS). */
.app-nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-toggle { display: none; border: 0; background: transparent; cursor: pointer; }

@media (max-width: 767.98px) {
    .nav-toggle { display: inline-flex; align-items: center; }
    .app-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--surface-container-lowest);
        border-bottom: 1px solid var(--surface-border);
        padding: 0.25rem var(--margin-mobile) 0.75rem;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }
    .app-nav.open { display: flex; }
    .app-nav .nav-link { padding: 0.625rem 0; }
    /* En vertical el subrayado de "active" queda raro: lo marcamos solo con color/peso. */
    .app-navbar .nav-link.active { border-bottom: 0; }
}

/* ---- Cards ---- */
.card-soft {
    background: var(--surface-container-lowest);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
}
.card-soft.lift { transition: transform .2s ease, box-shadow .2s ease; }
.card-soft.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.card-muted {
    background: var(--surface-container);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
}

/* ---- Botones ---- */
.btn-teal {
    background: var(--secondary);
    color: var(--on-secondary);
    border: 1px solid var(--secondary);
    border-radius: var(--radius-md);
    font-weight: 600;
}
.btn-teal:hover { background: var(--on-secondary-container); color: #fff; }
.btn-teal:active { transform: scale(.98); }
.btn-ghost {
    background: var(--surface-container-lowest);
    color: var(--primary-container);
    border: 1px solid var(--primary-container);
    border-radius: var(--radius-md);
    font-weight: 600;
}
.btn-ghost:hover { background: var(--surface-container); color: var(--primary-container); }

/* ---- Inputs ---- */
.field-label { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); }
.field {
    width: 100%;
    background: var(--surface-container-low);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    color: var(--on-surface);
    padding: .75rem 1rem;
}
.field:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px rgba(0, 104, 118, .12);
}
.field-lg { padding: 1rem; font-size: 24px; font-family: var(--font-display); font-weight: 600; color: var(--primary-container); }

/* ---- Selector de pagas (segmented) ---- */
.seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    background: var(--surface-container-low);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    padding: .25rem;
}
.seg-btn {
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: .65rem;
    font-weight: 600;
    color: var(--on-surface-variant);
}
.seg-btn.active { background: var(--secondary-container); color: var(--on-secondary-container); box-shadow: 0 1px 2px rgba(0,0,0,.05); }

/* ---- Configuración avanzada (colapsable) ---- */
.adv-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 0;
    padding: .5rem 1rem;
    border-radius: var(--radius-sm);
}
.adv-toggle:hover { background: var(--surface-container-low); }
.adv-toggle .chev { transition: transform .3s ease; }
.adv-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---- Cascada de coste (waterfall) ---- */
.wf-row { display: flex; align-items: center; gap: 1rem; }
.wf-label { width: 8rem; flex: none; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); }
.wf-track { flex: 1 1 auto; height: 2.5rem; background: var(--surface-container); border-radius: 999px; position: relative; overflow: hidden; }
.wf-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: width .5s cubic-bezier(.22,1,.36,1); }
.wf-fill.neto { background: var(--secondary); }
.wf-fill.irpf { background: var(--on-tertiary-container); }
.wf-fill.ss-trab { background: var(--tertiary-fixed-dim); }
.wf-fill.ss-emp { background: var(--primary-container); }
.wf-value { width: 7rem; flex: none; text-align: right; color: var(--primary-container); font-weight: 600; }

/* ---- Tarjetas de métrica ---- */
.metric { background: var(--surface-container-lowest); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); padding: 1.25rem; }
.metric .metric-value { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--primary-container); }

/* ---- Callouts de validación (§10) ---- */
.callout { display: flex; gap: 1rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--surface-container-lowest); border-left: 4px solid var(--surface-border); }
.callout.ok { border-left-color: var(--success-green); }
.callout.warn { border-left-color: var(--warning-amber); }
.callout.err { border-left-color: var(--error-red); }
.callout .material-symbols-outlined { line-height: 1.2; }
.callout.ok .material-symbols-outlined { color: var(--success-green); }
.callout.warn .material-symbols-outlined { color: var(--warning-amber); }
.callout.err .material-symbols-outlined { color: var(--error-red); }

/* ---- Resumen de parámetros ---- */
.params .row-kv { display: flex; justify-content: space-between; align-items: center; padding: .25rem 0; }
.params .row-kv .k { color: var(--on-surface-variant); }
.params .row-kv .v { color: var(--primary-container); font-weight: 600; }

/* ---- Pills de estado (comparador) ---- */
.pill { display: inline-block; padding: .15rem .55rem; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.pill.ok { background: rgba(16, 185, 129, .12); color: var(--success-green); }
.pill.warn { background: rgba(245, 158, 11, .14); color: #9a6400; }
.pill.err { background: rgba(239, 68, 68, .12); color: var(--error-red); }
.pill.ref { background: var(--surface-container); color: var(--on-surface-variant); }

#c-chart svg { display: block; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }
.hidden { display: none !important; }