/* ---- Tema ---- */
:root {
    --fondo: #f5f6f8;
    --superficie: #ffffff;
    --texto: #1c2430;
    --tenue: #5f6b7a;
    --borde: #dde1e7;
    --primario: #0b6e4f;
    --primario-texto: #ffffff;
    --error: #b42318;
    --error-fondo: #fdecea;
    --radio: 10px;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #12161c;
        --superficie: #1b2129;
        --texto: #e6e9ee;
        --tenue: #9aa5b4;
        --borde: #2c3540;
        --primario: #3fb68b;
        --primario-texto: #0b1410;
        --error: #ff8a80;
        --error-fondo: #3a1d1b;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

a { color: var(--primario); }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }

/* ---- Layout ---- */
.barra {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}

.marca {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--texto);
    text-decoration: none;
    margin-right: auto;
}

.usuario { color: var(--tenue); font-size: 0.9rem; }

.contenido {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.formulario { max-width: 420px; }
.contenido > .formulario:only-child,
.contenido > .formulario:first-child:has(h1) { margin: 2rem auto; }

/* ---- Formularios ---- */
label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

label small { color: var(--tenue); font-weight: 400; }

label.check {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

input:not([type=checkbox]), select, textarea {
    font: inherit;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--fondo);
    color: var(--texto);
}

input:focus-visible, button:focus-visible {
    outline: 2px solid var(--primario);
    outline-offset: 1px;
}

.boton {
    font: inherit;
    font-weight: 600;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 8px;
    background: var(--primario);
    color: var(--primario-texto);
    cursor: pointer;
}

.boton:disabled { opacity: 0.6; cursor: default; }

.boton-texto {
    font: inherit;
    background: none;
    border: 0;
    color: var(--primario);
    cursor: pointer;
    padding: 0.25rem;
}

.pie { text-align: center; margin: 1rem 0 0; color: var(--tenue); }

.alerta-error {
    background: var(--error-fondo);
    color: var(--error);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
}

.validation-message { color: var(--error); font-weight: 400; font-size: 0.9rem; }
.invalid { outline: 1px solid var(--error); }

/* ---- Listas ---- */
.lista { list-style: none; margin: 0 0 1rem; padding: 0; }

.lista li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--borde);
}

.lista li:last-child { border-bottom: 0; }

.etiqueta {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--fondo);
    border: 1px solid var(--borde);
}

.tenue { color: var(--tenue); }
.cargando { color: var(--tenue); text-align: center; padding: 2rem 0; }
.vacio { text-align: center; padding: 1rem 0; margin: 0; }
.nota { font-size: 0.85rem; margin: 0.5rem 0 0; }
.clickeable { cursor: pointer; }
.clickeable:hover { background: var(--fondo); }

:root { --verde: #0b7a4b; --rojo: #c0392b; }
@media (prefers-color-scheme: dark) { :root { --verde: #4cc38a; --rojo: #ff7b6e; } }
.monto-ingreso { color: var(--verde); white-space: nowrap; }
.monto-gasto { color: var(--rojo); white-space: nowrap; }

/* ---- Hogar: cabecera y pestañas ---- */
.hogar-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}
.hogar-cabecera strong { margin-left: 0.4rem; font-size: 1.15rem; }

.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.tabs a {
    padding: 0.6rem 0.9rem;
    color: var(--tenue);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.tabs a.active { color: var(--texto); border-bottom-color: var(--primario); font-weight: 600; }

/* ---- Selector de mes y filtros ---- */
.selector-mes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.selector-mes strong { min-width: 10rem; text-align: center; }

.boton-icono {
    font: inherit;
    font-size: 1.4rem;
    line-height: 1;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto);
    cursor: pointer;
}

.filtros { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.filtros .selector-mes { margin: 0; }
.filtros select { width: auto; min-width: 12rem; }

/* ---- KPIs ---- */
.kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.kpi {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.kpi span { font-size: 0.85rem; }
.kpi strong { font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; }

.totales-mes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 0.5rem; }

/* ---- Barras por categoría ---- */
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.barra-texto { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.95rem; margin-bottom: 0.25rem; }
.barra-fondo { height: 0.5rem; background: var(--fondo); border-radius: 999px; overflow: hidden; }
.barra-relleno { height: 100%; background: var(--rojo); border-radius: 999px; }

/* ---- Movimientos ---- */
.dia {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tenue);
    margin-top: 1rem;
}
.lista.movimientos li { justify-content: space-between; padding: 0.6rem 0.25rem; }
.mov-texto { display: flex; flex-direction: column; min-width: 0; }
.mov-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov-meta { font-size: 0.85rem; }
.mov-fin { margin-left: auto; }

.titulo-con-accion { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

/* ---- Formularios en grilla ---- */
.grid-2, .grid-3 { display: grid; gap: 0 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.toggle { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1rem; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.toggle button { font: inherit; padding: 0.6rem; border: 0; background: var(--fondo); color: var(--tenue); cursor: pointer; }
.toggle button.activo { color: #fff; font-weight: 600; }
.toggle button.activo.gasto { background: var(--rojo); }
.toggle button.activo.ingreso { background: var(--verde); }

.acciones { display: flex; gap: 0.75rem; }
.acciones .boton { flex: 1; }

.boton-secundario {
    font: inherit;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--texto);
    cursor: pointer;
}

.boton-agregar { margin-bottom: 1rem; }
.enlace-boton { display: inline-block; text-align: center; text-decoration: none; width: auto; }
.peligro { color: var(--rojo); }

/* ---- Cuentas ---- */
.cuentas { list-style: none; margin: 0; padding: 0; }
.cuentas .tarjeta { margin-bottom: 0.75rem; }
.cuentas .archivada { opacity: 0.6; }
.cuenta-encabezado { display: flex; justify-content: space-between; gap: 1rem; }
.cuenta-saldo { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.cuenta-saldo strong { font-size: 1.15rem; }
.cuenta-saldo span { font-size: 0.85rem; }
.linea-credito { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--borde); }
.linea-credito .barra-texto { font-size: 0.85rem; flex-wrap: wrap; }
.linea-credito .alerta-error { margin: 0.5rem 0 0; }

/* ---- Transferencias, avisos y fijos ---- */
.toggle.tres { grid-template-columns: repeat(3, 1fr); }
.toggle button:disabled { opacity: 0.4; cursor: default; }
.toggle button.activo.transferencia { background: var(--tenue); }
.monto-transferencia { color: var(--tenue); white-space: nowrap; }
.aviso { background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 0.6rem 0.75rem; }
.titulo-seccion { margin: 1.5rem 0 0.75rem; }
.lista li.inactivo { opacity: 0.6; }
.pendientes { border-color: var(--primario); }
.pendiente { justify-content: space-between; flex-wrap: wrap; }
.pendiente-acciones { display: flex; align-items: center; gap: 0.5rem; }
.monto-pendiente { width: 8.5rem !important; padding: 0.4rem 0.5rem !important; }
.boton-chico { width: auto; padding: 0.45rem 0.8rem; font-size: 0.9rem; }
.boton.ingreso { background: var(--verde); }
.variacion { font-size: 0.8rem; margin-top: -0.15rem; margin-bottom: 0.25rem; }

/* ---- Gráfico de evolución (azul/naranjo validados para daltonismo) ---- */
:root { --serie-ingresos: #2a78d6; --serie-gastos: #eb6834; }
@media (prefers-color-scheme: dark) { :root { --serie-ingresos: #3987e5; --serie-gastos: #d95926; } }
.grafico-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.leyenda { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--tenue); }
.leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.muestra { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; }
.muestra.serie-ingresos { background: var(--serie-ingresos); }
.muestra.serie-gastos { background: var(--serie-gastos); }
.lectura { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.9rem; margin-bottom: 0.25rem; }
.lectura span { color: var(--tenue); }
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico path.serie-ingresos { fill: var(--serie-ingresos); }
.grafico path.serie-gastos { fill: var(--serie-gastos); }
.grafico path.atenuada { opacity: 0.45; }
.grafico .grilla { stroke: var(--borde); stroke-width: 1; }
.grafico .base { stroke: var(--tenue); stroke-width: 1; }
.grafico .eje { fill: var(--tenue); font-size: 11px; }
.grafico .eje-activo { fill: var(--texto); font-weight: 600; }
.grafico .zona { fill: transparent; cursor: pointer; outline: none; }
.grafico .zona:focus-visible { stroke: var(--primario); stroke-width: 2; }
.tabla-evolucion { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabla-evolucion th, .tabla-evolucion td { text-align: right; padding: 0.4rem 0.25rem; border-bottom: 1px solid var(--borde); }
.tabla-evolucion th:first-child, .tabla-evolucion td:first-child { text-align: left; }
.tabla-evolucion th { color: var(--tenue); font-weight: 500; }

/* ---- Créditos ---- */
.barra-relleno.pagado { background: var(--verde); }
.etiqueta.peligro { color: var(--rojo); border-color: var(--rojo); }
.acciones-credito { margin-top: 0.75rem; justify-content: flex-start; flex-wrap: wrap; }
.detalle-credito { margin-top: 0.5rem; }
.lista.cuotas li { gap: 0.75rem; padding: 0.55rem 0.25rem; }
.lista.cuotas li.pagada { opacity: 0.65; }
.lista.cuotas .mov-texto { flex: 1; }
.cuota-monto { white-space: nowrap; }
.cuota-accion { min-width: 4.5rem; text-align: right; }
.lista.cuotas li.form-pago { display: block; opacity: 1; background: var(--fondo); border-radius: 8px; padding: 0.75rem; }

/* ---- Miembros e invitaciones ---- */
.invitar { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.invitar label { flex: 1; min-width: 14rem; margin-bottom: 0; }
.invitar .boton { width: auto; }
.enlace-invitacion { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.enlace-invitacion input { font-family: ui-monospace, monospace; font-size: 0.85rem; }
.enlace-invitacion .acciones > * { flex: 1; }
.miembro { justify-content: space-between; flex-wrap: wrap; }
.miembro-acciones { display: flex; align-items: center; gap: 0.5rem; }
.miembro-acciones select { width: auto; }

/* ---- Celular ---- */
@media (max-width: 560px) {
    .kpis { grid-template-columns: 1fr 1fr; }
    .kpis .kpi:last-child { grid-column: span 2; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .filtros select { width: 100%; }
    .tarjeta { padding: 1rem; }
}

/* ---- Blazor ---- */
#blazor-error-ui {
    background: lightyellow;
    color: #1c2430;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after { content: "Ocurrió un error."; }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--borde);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--primario);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Cargando"); }