/* =========================================================
   Sistema de diseño FinanzApp — componentes compartidos
   Requiere tokens.css. Todas las clases llevan prefijo fz- para no chocar con los estilos
   actuales de cada módulo mientras migran.
   ========================================================= */

/* ---------- Utilidades ---------- */
.fz-serif {
    font-family: var(--fz-serif);
    font-optical-sizing: auto;
}

.fz-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.fz-ceja {
    font-family: var(--fz-sans);
    font-size: var(--fz-texto-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fz-suave);
    margin: 0;
}

/* ---------- Fondos de página ---------- */
/* Dashboard y Control de Gastos */
.fz-lavado {
    background:
        radial-gradient(110% 120% at 0% 0%, rgba(127, 61, 237, 0.20), transparent 58%),
        radial-gradient(70% 90% at 100% 0%, rgba(155, 107, 243, 0.14), transparent 60%),
        var(--fz-fondo);
}

/* Presupuesto: fondo oscuro de planificación (excepción aprobada) */
.fz-lavado-oscuro {
    background:
        radial-gradient(90% 120% at 15% 0%, rgba(155, 107, 243, 0.35), transparent 60%),
        linear-gradient(135deg, #111827 0%, #3b1a7a 55%, #1a1233 100%);
    color: #fff;
}

/* ---------- Íconos (sprite de components/iconos.php) ---------- */
.fz-icono {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -0.125em;
}

/* Recuadro tintado: el color lo pone quien lo usa (style="color:...; background:...") */
.fz-icono-caja {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--fz-radio-control);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--fz-violeta-50);
    color: var(--fz-violeta);
}

.fz-icono-caja .fz-icono {
    width: 1.3rem;
    height: 1.3rem;
}

/* ---------- Encabezado de página ---------- */
.fz-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--fz-esp-5);
    flex-wrap: wrap;
}

.fz-encabezado-izq {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 22rem;
}

.fz-encabezado-titulo {
    font-family: var(--fz-serif);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: var(--fz-titulo);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--fz-tinta);
    text-wrap: balance;
    margin: 0;
}

.fz-encabezado-insight {
    display: flex;
    gap: var(--fz-esp-2);
    align-items: baseline;
    color: var(--fz-tinta-2);
    font-size: var(--fz-texto-base);
    margin: 0;
}

.fz-encabezado-insight b {
    color: var(--fz-tinta);
}

.fz-punto {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--fz-positivo);
    flex-shrink: 0;
    transform: translateY(-0.1em);
}

.fz-punto--advertencia { background: var(--fz-advertencia); }
.fz-punto--alerta { background: var(--fz-alerta); }

.fz-encabezado-der {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .fz-encabezado-titulo { font-size: 1.6rem; }
}

/* ---------- Selector de mes ---------- */
.fz-mes {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.25rem;
    border-radius: var(--fz-radio-pildora);
    background: var(--fz-superficie);
    border: 1px solid var(--fz-linea);
    box-shadow: var(--fz-sombra-sm);
}

.fz-mes-boton {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--fz-suave);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--fz-transicion), color var(--fz-transicion);
}

.fz-mes-boton:hover:not(:disabled) {
    background: var(--fz-violeta-50);
    color: var(--fz-violeta);
}

.fz-mes-boton:disabled {
    opacity: 0.35;
    cursor: default;
}

.fz-mes-nombre {
    font-family: var(--fz-serif);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 1rem;
    padding-inline: 0.6rem;
    min-width: 9.5rem;
    text-align: center;
    color: var(--fz-tinta);
}

/* ---------- Botones ---------- */
.fz-btn {
    font-family: var(--fz-sans);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1;
    border-radius: var(--fz-radio-control);
    padding: 0.7rem 1.2rem;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    transition: transform var(--fz-transicion), background var(--fz-transicion), border-color var(--fz-transicion);
}

.fz-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Un solo botón primario por pantalla */
.fz-btn--primario {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d63c9 55%, #5b5590 100%);
    box-shadow: var(--fz-sombra-primario);
}

.fz-btn--primario:hover:not(:disabled) {
    transform: translateY(-1px);
}

.fz-btn--secundario {
    background: var(--fz-superficie);
    border-color: var(--fz-linea);
    color: var(--fz-tinta);
}

.fz-btn--secundario:hover:not(:disabled) {
    border-color: var(--fz-violeta);
}

.fz-btn--fantasma {
    background: transparent;
    color: var(--fz-violeta);
    padding-inline: 0.4rem;
}

.fz-btn--fantasma:hover:not(:disabled) {
    text-decoration: underline;
}

/* ---------- Píldoras de estado ---------- */
.fz-pildora {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--fz-sans);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: var(--fz-radio-pildora);
    white-space: nowrap;
}

.fz-pildora--positivo { background: rgba(30, 158, 98, 0.12); color: var(--fz-positivo); }
.fz-pildora--advertencia { background: rgba(217, 142, 26, 0.14); color: var(--fz-advertencia-texto); }
.fz-pildora--alerta { background: rgba(214, 69, 69, 0.12); color: var(--fz-alerta); }
.fz-pildora--marca { background: var(--fz-violeta-50); color: var(--fz-violeta); }
.fz-pildora--neutral { background: var(--fz-superficie-2); color: var(--fz-suave); border: 1px solid var(--fz-linea); }

/* ---------- Tarjeta ---------- */
.fz-tarjeta {
    background: var(--fz-superficie);
    border: 1px solid var(--fz-linea);
    border-radius: var(--fz-radio-tarjeta);
    box-shadow: var(--fz-sombra);
    padding: var(--fz-esp-6);
}

.fz-tarjeta-titulo {
    font-family: var(--fz-sans);
    font-size: var(--fz-texto-lg);
    font-weight: 700;
    color: var(--fz-tinta);
    margin: 0;
}

.fz-cifra {
    font-family: var(--fz-serif);
    font-optical-sizing: auto;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fz-cifra--xl { font-size: var(--fz-cifra-xl); }
.fz-cifra--md { font-size: var(--fz-cifra-md); }

/* ---------- Consejo del asistente ---------- */
.fz-consejo {
    border-radius: var(--fz-radio-md);
    padding: 1rem 1.1rem;
    background: var(--fz-violeta-50);
    border: 1px solid var(--fz-violeta-100);
    display: grid;
    gap: 0.4rem;
}

.fz-consejo .fz-ceja {
    color: var(--fz-violeta);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.fz-consejo p {
    font-size: 0.875rem;
    color: var(--fz-tinta-2);
    margin: 0;
}

.fz-consejo p b {
    color: var(--fz-tinta);
}

/* ---------- Variante para el fondo oscuro de Presupuesto ---------- */
.fz-lavado-oscuro .fz-ceja { color: rgba(255, 255, 255, 0.62); }
.fz-lavado-oscuro .fz-encabezado-titulo { color: #fff; }
.fz-lavado-oscuro .fz-encabezado-insight { color: rgba(255, 255, 255, 0.82); }
.fz-lavado-oscuro .fz-encabezado-insight b { color: #fff; }
.fz-lavado-oscuro .fz-mes { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.fz-lavado-oscuro .fz-mes-nombre { color: #fff; }
.fz-lavado-oscuro .fz-mes-boton { color: rgba(255, 255, 255, 0.75); }
.fz-lavado-oscuro .fz-mes-boton:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #fff; }
.fz-lavado-oscuro .fz-btn--secundario { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .fz-btn,
    .fz-mes-boton {
        transition: none;
    }
}