/* Tipografía corporativa: PP Mori. Book para el texto y SemiBold para todas las negritas (600 y 700) */
@font-face { font-family: "PP Mori"; src: url("fuentes/PPMori-Book.woff2") format("woff2"); font-weight: 100 500; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("fuentes/PPMori-SemiBold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }

:root {
  --fuente: "PP Mori", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bg: #f5f6f8;
  --card: #ffffff;
  --tinta: #4d4d4d; /* el gris oscuro del logo: todo lo oscuro de la plataforma */
  --text: var(--tinta);
  --muted: #6b7280;
  --line: #e5e7eb;
  --primary: var(--tinta); /* color de acción (botones, seleccionados, foco) */
  --pos: #15803d;
  --neg: #b91c1c;
  --radius: 10px;
  --cab-alto: 3.3rem; /* alto del menú flotante (app.js lo ajusta al real) */
  --cab-top: .75rem; /* separación del menú flotante con el borde de arriba */
  --cab-hueco: calc(var(--cab-alto) + 3.1rem); /* lo que tapan el menú y el reloj arriba, con su margen */
  --cristal: rgba(255, 255, 255, .6);
  --cristal-borde: rgba(255, 255, 255, .75);
  --cristal-blur: blur(14px) saturate(1.6);
  --ancho: min(1240px, calc(100% - 1.5rem)); /* ancho del menú flotante y del contenido de las páginas */
  --cristal-modulo: rgba(255, 255, 255, .72); /* módulos con texto largo (tablas, formularios): algo más opacos */
  font-size: 17px; /* letra algo más grande: pensada para leer cómodo */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fuente);
  /* El mismo color que el fondo del barrio, que cambia con la hora (lo pone la escena 3D) */
  background: var(--fondo-escena, var(--bg));
  transition: background-color 2s;
  color: var(--text);
  line-height: 1.45;
}
[hidden] { display: none !important; }
h1, h2 { margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; }
h2 small { color: var(--muted); font-weight: 400; font-size: .85rem; }
button, input, select { font: inherit; color: inherit; }

/* ---------- cabecera: menú flotante de cristal ---------- */
.topbar {
  position: fixed; top: var(--cab-top); left: 0; right: 0; z-index: 20;
  width: var(--ancho); margin: 0 auto;
  display: flex; align-items: center; gap: .4rem 1rem; flex-wrap: wrap;
  padding: .45rem .7rem .45rem 1.4rem;
  border: 1px solid var(--cristal-borde); border-radius: 999px; /* extremos en media circunferencia */
  background: var(--cristal); color: var(--text);
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06);
}
.brand { font-weight: 700; font-size: 1.15rem; }
/* Logo de la marca, a la izquierda del menú, separado del selector de propiedad por una raya fina */
.marca { flex: none; display: flex; align-items: center; padding-right: 1rem; border-right: 1px solid rgba(77, 77, 77, .12); }
.marca img { display: block; height: 1.7rem; width: auto; }
/* Selector de propiedad: jerarquía principal del menú. En pantallas medianas se quita el nombre de usuario (sale en el saludo) */
@media (max-width: 1480px) { .propiedad-sel { max-width: 9rem !important; } .cuenta-user { display: none; } }
.propiedad-sel { display: flex; align-items: center; gap: .35rem; font-weight: 700; flex: none; max-width: 13rem; }
.propiedad-icono { flex: none; width: 1.5em; text-align: center; }
[data-icono-propiedad] img { display: block; width: 1.5em; height: 1.5em; object-fit: contain; border-radius: 5px; }
.logo-editor { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.logo-muestra { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; font-size: 1.8rem; background: #f3f4f6; border-radius: 12px; }
.logo-muestra img { width: 2.8rem; height: 2.8rem; }
.ajustes-icono [data-icono-propiedad] img { width: 1.25em; height: 1.25em; }
/* Las pestañas y la cuenta: en pantallas grandes, directamente en la barra; en el móvil, en el menú desplegable */
.menu-panel { display: contents; }
/* Pantallas medianas: pestañas algo más juntas para que quepan en una línea */
@media (min-width: 1141px) and (max-width: 1480px) {
  .topbar { column-gap: .6rem; }
  .marca { padding-right: .6rem; }
  .marca img { height: 1.35rem; }
  .tabs .tab { padding: .4rem .45rem; font-size: .92rem; } /* .tabs delante: la regla general de .tab va más abajo */
  .propiedad-sel { max-width: 9.5rem !important; }
  .cuenta { padding-left: .6rem; }
}
.menu-btn { display: none; }
.propiedad-sel select:disabled { opacity: 1; color: inherit; cursor: default; }
/* Flecha propia, bien separada del borde redondo (la del navegador quedaba pegada y se cortaba) */
.propiedad-sel select {
  appearance: none; -webkit-appearance: none;
  min-width: 0; max-width: 100%; border: 0; border-radius: 999px; padding: .4rem 2.1rem .4rem .85rem;
  font-weight: 700; cursor: pointer; text-overflow: ellipsis;
  background: rgba(77, 77, 77, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234d4d4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center;
}
.propiedad-sel select:hover { background-color: rgba(77, 77, 77, .1); }
.tabs { display: flex; gap: .1rem; flex: 1; flex-wrap: wrap; }
.tab {
  background: none; border: 0; color: var(--tinta); cursor: pointer;
  padding: .42rem .62rem; border-radius: 999px; white-space: nowrap;
}
.tab:hover { background: rgba(77, 77, 77, .06); color: var(--tinta); }
.tab.active { background: var(--tinta); color: #fff; font-weight: 600; }
.cuenta { display: flex; align-items: center; gap: .9rem; font-size: .9rem; }
.cuenta { padding: 0 .5rem 0 1rem; border-left: 1px solid rgba(77, 77, 77, .12); } /* separada de las pestañas con la misma raya que el logo */
.cuenta-btn { background: none; border: 0; padding: 0; color: var(--tinta); cursor: pointer; white-space: nowrap; }
.cuenta-btn:hover { color: var(--tinta); text-decoration: underline; }
.logout { color: var(--tinta); text-decoration: none; }
/* Reloj pequeño, fijo arriba a la derecha de la pantalla, justo debajo del menú */
.reloj {
  position: fixed; z-index: 19; top: calc(var(--cab-top) + var(--cab-alto) + .4rem); right: .75rem;
  display: flex; gap: .4rem; align-items: baseline; padding: .12rem .55rem; font-size: .72rem; line-height: 1.4;
  color: var(--muted); white-space: nowrap; pointer-events: none;
  background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: 99px;
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur);
}
.reloj b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.logout:hover { color: var(--tinta); }
.form-error { margin: 0; padding: .5rem .75rem; border-radius: 8px; background: #fef2f2; color: var(--neg); font-size: .9rem; }

/* El contenido mide lo mismo que el menú flotante: sus bordes coinciden */
main { width: var(--ancho); margin: 0 auto; padding: var(--cab-hueco) 0 1.5rem; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; margin-bottom: 1rem;
  scroll-margin-top: var(--cab-hueco); /* que el menú flotante no tape el título al saltar a la tarjeta */
}
.help { color: var(--muted); margin-top: 0; }
.empty { color: var(--muted); text-align: center; padding: 1rem; }

/* ---------- botones / formularios ---------- */
.btn {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: .5rem 1rem; cursor: pointer;
}
.btn:hover { background: #f3f4f6; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { opacity: .88; }
.btn.small { padding: .2rem .6rem; font-size: .85rem; }
/* Acción secundaria con aspecto de enlace (p. ej. "+ Añadir movimiento") */
.btn-link {
  border: 0; background: none; padding: .25rem .4rem; border-radius: 6px;
  color: var(--primary); font-size: .9rem; cursor: pointer;
}
.btn-link:hover { background: rgba(77, 77, 77, .06); text-decoration: underline; }
.btn.danger { color: var(--neg); }
.btn.danger[data-armed] { background: var(--neg); color: #fff; border-color: var(--neg); }

input, select {
  border: 1px solid #d1d5db; border-radius: 8px; padding: .45rem .6rem; background: #fff;
}
input:focus, select:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

.filters { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filters label { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); gap: .2rem; }
.filters label.grow { flex: 1; min-width: 12rem; }
.filters select, .filters input { color: var(--text); font-size: 1rem; }
.filters .periodo-texto { align-self: flex-end; padding-bottom: .55rem; color: var(--muted); }
.filters .btn-pdf { align-self: flex-end; margin: 0 0 .35rem auto; }
.table-filters { margin: .5rem 0 .75rem; padding: .75rem; background: #f9fafb; border-radius: 8px; align-items: flex-end; }
.table-filters .btn { margin-bottom: .1rem; }

/* ---------- selector Gastos/Ingresos del gráfico ---------- */
.seg { display: flex; flex-wrap: wrap; gap: .35rem; }
.seg button {
  border: 1px solid var(--line); background: #fff; border-radius: 99px;
  padding: .35rem .85rem; cursor: pointer; font-size: .92rem;
}
.seg button:hover { border-color: var(--primary); }
.seg button.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.chart-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.chart-total { margin: .75rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line); text-align: right; color: var(--muted); }
.chart-total strong { color: var(--text); }
.bar-row.selected { background: rgba(77, 77, 77, .05); outline: 1px solid #d1d5db; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; }
.kpi > span { display: block; color: var(--muted); font-size: .85rem; }
.kpi strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* ---------- barras por categoría ---------- */
.bars { display: flex; flex-direction: column; gap: .35rem; }
.bar-row {
  display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 7rem 3rem; align-items: center; gap: .75rem;
  background: none; border: 0; padding: .25rem .35rem; border-radius: 6px; text-align: left; cursor: pointer;
}
.bar-row:hover { background: #f3f4f6; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: .8rem; background: #f3f4f6; border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 99px; min-width: 3px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bar-pct { text-align: right; color: var(--muted); font-size: .85rem; }
.bar-track { position: relative; overflow: visible; }
.bar-prevision { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--tinta); border-radius: 1px; }
.bar-hasta { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; opacity: .22; }
.bar-fill { position: relative; }
.bar-exceso { position: absolute; top: 0; bottom: 0; border-radius: 0 99px 99px 0; box-shadow: -1.5px 0 0 #fff, 0 1px 4px rgba(185, 28, 28, .45);
  background: repeating-linear-gradient(135deg, #b91c1c 0 5px, #ef4444 5px 9px); }
.bar-row.pasada .bar-label { color: var(--neg); font-weight: 600; }
.bar-row.pasada .bar-label::after { content: ' ▲'; font-size: .7rem; }
.bar-exceso-txt { display: block; font-size: .75rem; font-weight: 700; color: var(--neg); }
.bar-row.pasada .bar-value { color: var(--neg); }
.bar-de { display: block; font-size: .75rem; font-weight: 400; color: var(--muted); }
.bar-row.pasada .bar-de { color: var(--neg); }
.chart-total .pos { color: var(--pos); } .chart-total .neg { color: var(--neg); }

/* ---------- tablas ---------- */
.table-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.num { font-weight: 600; }
td.fecha { white-space: nowrap; color: var(--muted); }
table.mov tbody tr:hover { background: #fafafa; }

/* Categoría de cada movimiento: sin borde, solo cuadradito de color, texto y flecha */
.cat-pick { --c: transparent; display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; }
.cat-dot { width: .8rem; height: .8rem; border-radius: 3px; background: var(--c); flex: none; }
.cat-pick.unset .cat-dot { background: none; border: 1.5px dashed #d97706; }
.cat-select {
  appearance: none; -webkit-appearance: none;
  border: 0; background-color: transparent; border-radius: 6px;
  padding: .25rem 1.4rem .25rem .3rem; max-width: 14rem; text-overflow: ellipsis; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .35rem center;
}
.cat-select:hover { background-color: #f3f4f6; }
.cat-select:focus { outline: 2px solid var(--primary); outline-offset: 0; }
.cat-pick.unset .cat-select { color: #b45309; }

.nota { margin-top: .15rem; }
.nota button { background: none; border: 0; padding: 0; cursor: pointer; font-size: .85rem; text-align: left; }
.nota-add { color: #9ca3af; opacity: 0; }
tr:hover .nota-add, .nota-add:focus { opacity: 1; }
.nota-text { color: var(--muted); font-style: italic; }
.nota input { width: 100%; font-size: .9rem; padding: .25rem .4rem; }

/* ---------- añadir movimiento (ventana emergente) ---------- */
.modal {
  border: 0; border-radius: 14px; padding: 0; width: min(34rem, calc(100vw - 2rem));
  box-shadow: 0 20px 50px rgba(0,0,0,.25); color: var(--text);
}
.modal::backdrop { background: rgba(77, 77, 77, .5); }
.nuevo-mov { padding: 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { margin: 0; font-size: 1.15rem; }
.modal-close { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .25rem; }
.modal-close:hover { color: var(--text); }
.nuevo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .75rem; }
.nuevo-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }
.nuevo-grid input, .nuevo-grid select { color: var(--text); font-size: 1rem; width: 100%; }
.nuevo-grid .span2 { grid-column: 1 / -1; }
.badge {
  display: inline-block; margin-left: .45rem; padding: .05rem .45rem; border-radius: 99px;
  background: #fef3c7; color: #92400e; font-size: .72rem; font-weight: 600; vertical-align: middle;
}
td .borrar-mov { display: block; margin: .3rem 0 0 auto; }

/* ---------- importar ---------- */
.drop {
  position: relative; border: 2px dashed #cbd5e1; border-radius: var(--radius);
  padding: 2rem 1rem; text-align: center; color: var(--muted); margin-bottom: 1rem;
}
.drop.over { border-color: var(--primary); background: rgba(77, 77, 77, .04); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop p { margin: 0; }
#archivo-nombre { display: block; margin-top: .5rem; color: var(--text); font-weight: 600; }
.result { margin-top: 1rem; padding: 1rem; border-radius: var(--radius); }
.result.ok { background: #f0fdf4; border: 1px solid #bbf7d0; }
.result.err { background: #fef2f2; border: 1px solid #fecaca; color: var(--neg); }
.result p { margin: .35rem 0 .75rem; }

/* ---------- categorías ---------- */
.inline-form { display: flex; gap: .5rem .75rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.25rem; }
.inline-form .field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }
.inline-form .field.grow { flex: 1; min-width: 12rem; }
.inline-form .field select, .inline-form .field input { color: var(--text); font-size: 1rem; }
.inline-form input[type=color] { width: 3rem; height: 2.4rem; padding: .15rem; }
.form-actions { display: flex; gap: .5rem; }
.cat-tree { display: flex; flex-direction: column; gap: .75rem; }
.cat-group { border: 1px solid var(--line); border-radius: var(--radius); padding: .25rem .75rem; }
.cat-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; }
.cat-row small { color: var(--muted); }
.cat-row.madre { font-size: 1.02rem; }
.cat-subs { list-style: none; margin: 0 0 .35rem 1.6rem; padding: 0; border-left: 2px solid var(--line); }
.cat-subs .cat-row { padding-left: .75rem; border-top: 1px solid #f3f4f6; }
.cat-subs .cat-row[draggable] { cursor: grab; }
.cat-subs .cat-row.dragging { opacity: .4; }
.grip { color: #c0c4cc; font-size: .8rem; letter-spacing: -2px; user-select: none; }
.cat-group.drop-target { border-color: var(--primary); background: rgba(77, 77, 77, .04); box-shadow: 0 0 0 2px #d1d5db; }
.cat-row.editing { padding-top: .35rem; padding-bottom: .35rem; }
.cat-edit { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex: 1; }
.cat-edit input[name=nombre] { flex: 1; min-width: 10rem; font-size: 1rem; }
.cat-edit input[type=color] { width: 2.6rem; height: 2.2rem; padding: .1rem; }
.cat-edit select { font-size: .95rem; max-width: 14rem; }
.cat-edit-label { color: var(--muted); font-size: .88rem; }
.cat-row.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: #fef3c7; } to { background: transparent; } }
.cat-nosubs { margin: 0 0 .5rem 1.6rem; color: #b45309; font-size: .88rem; }
.opt-madre { font-weight: 700; }
/* Fijo / Variable en cada subcategoría */
.tipo-select { font-size: .85rem; padding: .2rem .4rem; border-radius: 99px; background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.tipo-select.fijo { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.prevision { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--muted); }
.prevision-input { width: 7.5rem; font-size: .85rem; padding: .2rem .45rem; text-align: right; font-variant-numeric: tabular-nums; }
.prevision-input::placeholder { text-align: left; }

/* ---------- fijos y variables dentro de la tarjeta Gastos ---------- */
.kpi-fv { margin-top: .6rem; display: flex; flex-direction: column; gap: .15rem; }
.kpi-fv-barra { display: flex; gap: 2px; height: 6px; margin-bottom: .35rem; }
.kpi-fv-barra span { display: block; min-width: 3px; height: 100%; }
.kpi-fv-barra span:first-child { border-radius: 3px 0 0 3px; }
.kpi-fv-barra span:last-child { border-radius: 0 3px 3px 0; }
.kpi-fv-barra span:only-child { border-radius: 3px; }
.kpi-fv-row { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--text); cursor: default; border-radius: 4px; }
.kpi-fv-row:hover { background: #f3f4f6; }
.kpi-fv-row small { color: var(--muted); min-width: 2.2rem; text-align: right; }
.kpi-fv-row.sin { color: var(--muted); }
.kpi-fv-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.kpi-fv-row.sin .kpi-fv-val { font-weight: 400; }
.fv-key { width: .6rem; height: .6rem; border-radius: 2px; flex: none; }

/* ---------- "Ver más" de la tabla ---------- */
.ver-mas { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-top: 1rem; }
.ver-mas small { color: var(--muted); }

/* ---------- evolución mensual (líneas) ---------- */
.evol-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0; font-size: .88rem; color: var(--muted); }
.evol-key { display: inline-flex; align-items: center; gap: .35rem; }
.evol-swatch { display: inline-block; width: 1rem; height: 3px; border-radius: 2px; vertical-align: middle; }
.evol { width: 100%; overflow: hidden; }
.evol svg { display: block; max-width: 100%; height: auto; }
.evol-grid { stroke: #eef0f2; stroke-width: 1; }
.evol-base { stroke: #d1d5db; stroke-width: 1; }
.evol-label { fill: var(--muted); font-size: 12px; }
.evol-cruz { stroke: #9ca3af; stroke-width: 1; }
.evol-dot { stroke: #fff; stroke-width: 2; transition: r .1s; }
.evol-dot.activo { r: 6; }
.evol-tabla { margin-top: .5rem; font-size: .9rem; }
.evol-tabla summary { cursor: pointer; color: var(--muted); }
.evol-table th, .evol-table td { padding: .35rem .4rem; font-size: .85rem; }

/* ---------- popup del gráfico ---------- */
.chart-tooltip {
  position: fixed; z-index: 40; pointer-events: none;
  min-width: 15rem; max-width: 22rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: .65rem .8rem; font-size: .92rem;
}
.tt-head { display: flex; align-items: center; gap: .5rem; padding-bottom: .45rem; margin-bottom: .35rem; border-bottom: 1px solid var(--line); }
.tt-row { display: grid; grid-template-columns: 1fr auto 2.6rem; gap: .6rem; padding: .15rem 0; }
.tt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.tt-pct { color: var(--muted); text-align: right; font-size: .85rem; }
.tt-empty { color: var(--muted); }
.tt-hint { margin-top: .45rem; color: var(--muted); font-size: .78rem; }
.tt-prevision { margin: -.1rem 0 .4rem; font-size: .82rem; color: var(--pos); }
.tt-prevision.pasada, .tt-val .tt-pasada { color: var(--neg); }
.tt-val small { font-weight: 400; color: var(--muted); }
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.cat-list li small { color: var(--muted); }
.usuarios-list li.editing { padding: .4rem 0; }
.usuarios-list .cat-edit input[name=password] { flex: 1; min-width: 12rem; font-size: 1rem; }
.badge.admin { background: #f3f4f6; color: var(--primary); margin-left: .45rem; }
.grow { flex: 1; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.dot { width: 1rem; height: 1rem; border-radius: 50%; flex: none; }
.chip { --c: #999; border-left: 4px solid var(--c); background: #f3f4f6; padding: .1rem .5rem; border-radius: 6px; font-size: .85rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--tinta); color: #fff; padding: .7rem 1.1rem; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); z-index: 50; max-width: 90vw;
}
.toast.error { background: var(--neg); }

/* ---------- login / instalación: mismo aire que dentro (cristal, negro en vez de azul) ---------- */
body.auth {
  display: grid; place-items: center; min-height: 100vh; padding: 1rem;
  background: radial-gradient(ellipse at 20% 0%, #fff 0, transparent 55%), radial-gradient(ellipse at 90% 100%, #e7e9ee 0, transparent 60%), #eef0f3;
}
.auth-card {
  width: 100%; max-width: 380px; padding: 2rem;
  background: var(--cristal-modulo); border: 1px solid var(--cristal-borde); border-radius: 18px;
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06);
}
.auth-logo { display: flex; justify-content: center; margin: .25rem 0 1.6rem; }
.auth-logo img { display: block; height: 2.6rem; width: auto; }
.auth-card h1 { font-size: 1.25rem; }
.auth-card form { display: flex; flex-direction: column; gap: .9rem; }
.auth-card label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
/* Registro y datos de facturación: dos campos por fila y una tarjeta algo más ancha */
.auth-card:has(.auth-fila) { max-width: 480px; }
.auth-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 440px) { .auth-fila { grid-template-columns: 1fr; } }
.auth-card small { font-size: .78rem; color: var(--muted); }
.auth-check { flex-direction: row !important; align-items: flex-start; gap: .55rem !important; line-height: 1.4; }
.auth-check input { width: auto; margin-top: .2rem; accent-color: var(--tinta); }
.auth-card form .btn + .btn { margin-top: -.4rem; }
/* Código de 6 cifras: grande y espaciado */
.auth-card input.codigo { font-size: 1.8rem; letter-spacing: .5em; text-align: center; padding: .6rem .5rem .6rem 1rem; font-variant-numeric: tabular-nums; }
.reenviar { margin: 0; }
.reenviar .btn-link { padding: 0; font-size: inherit; text-decoration: underline; color: var(--text); }
/* Fuerza de la contraseña */
.fuerza { margin-top: -.4rem; font-size: .78rem; color: var(--muted); }
.fuerza i { display: block; height: 4px; margin-bottom: .3rem; border-radius: 99px; background: #e5e7eb; position: relative; overflow: hidden; }
.fuerza i::after { content: ''; position: absolute; inset: 0; width: 0; border-radius: 99px; background: #dc2626; transition: width .25s, background .25s; }
.fuerza[data-nivel="0"] i::after { width: 10%; }
.fuerza[data-nivel="1"] i::after { width: 30%; background: #ea580c; }
.fuerza[data-nivel="2"] i::after { width: 55%; background: #ca8a04; }
.fuerza[data-nivel="3"] i::after { width: 80%; background: #16a34a; }
.fuerza[data-nivel="4"] i::after { width: 100%; background: #15803d; }
/* «Mostrar» dentro del campo de contraseña */
.con-ver { position: relative; display: block; }
.con-ver input { width: 100%; padding-right: 4.6rem !important; }
.ver-clave { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); padding: .25rem .55rem; border: 0; border-radius: 8px; background: rgba(77, 77, 77, .07); color: var(--text); font-size: .78rem; cursor: pointer; }
.ver-clave:hover { background: rgba(77, 77, 77, .14); }
/* Nota de seguridad al pie de las pantallas de cuenta */
.seguro { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .76rem; color: var(--muted); text-align: center; }
.seguro svg { flex: none; color: #15803d; }
.auth-enlaces { font-size: .85rem; margin: 1rem 0 0; text-align: center; line-height: 1.8; }
.auth-enlaces a { white-space: nowrap; } /* si no caben, cada enlace baja entero */
.auth-card select, .auth-card input { padding: .6rem .7rem; border: 1px solid #d1d5db; border-radius: 10px; font: inherit; color: var(--text); background: #fff; }
.auth-card .btn { border-radius: 11px; padding: .6rem 1rem; }
body.auth .btn.primary { font-weight: 600; }
body.auth .btn-link:hover { background: rgba(77, 77, 77, .06); }
body.auth a:not(.btn) { color: var(--text); text-underline-offset: 3px; }
body.auth a:not(.btn):hover { text-decoration-thickness: 2px; }
.campo-oculto { position: absolute; left: -9999px; }
.auth-card .ok { color: var(--pos); }
.auth-card .err { color: var(--neg); }

/* ---------- móvil ---------- */
.mov tfoot td { border-top: 2px solid var(--line); padding-top: .65rem; padding-bottom: .65rem; background: #f9fafb; }
.mov tfoot td.num { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.mov tfoot small { color: var(--muted); margin-left: .5rem; }

/* Traspasos internos entre cuentas propias */
table.mov tr.traspaso td { color: var(--muted); }
table.mov tr.traspaso td.num { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.badge.traspaso { border: 0; cursor: pointer; background: #e0e7ff; color: #3730a3; font-family: inherit; }
.badge.traspaso:hover { background: #c7d2fe; }
.traspasos-card { border: 1px solid #c7d2fe; background: #f8faff; }
.traspasos-list { list-style: none; margin: 0; padding: 0; }
.traspasos-list li { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding: .6rem 0; border-top: 1px solid var(--line); }
.tr-par { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; flex-wrap: wrap; }
.tr-lado { display: flex; flex-direction: column; gap: .1rem; min-width: 10rem; flex: 1; }
.tr-lado small { color: var(--muted); }
.tr-concepto { overflow-wrap: anywhere; }
.tr-flecha { color: var(--muted); font-size: 1.2rem; }
.tr-acciones { display: flex; gap: .5rem; }

/* Documentos adjuntos */
a.btn { text-decoration: none; color: var(--text); display: inline-block; }
.mov-extras { display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap; }
.mov-extras .nota { flex: 0 1 auto; }
.doc-btn { background: none; border: 0; padding: 0; cursor: pointer; font-size: .85rem; color: #9ca3af; opacity: 0; white-space: nowrap; }
tr:hover .doc-btn, .doc-btn:focus { opacity: 1; }
.doc-btn.has { opacity: 1; color: var(--primary); font-weight: 600; }
.doc-btn:hover { color: var(--primary); text-decoration: underline; }
@media (hover: none) { .doc-btn, .nota-add { opacity: 1; } } /* en el móvil no hay "pasar el ratón" */
.modal-docs { width: min(40rem, calc(100vw - 2rem)); }
/* Inicio: movimientos de un sitio de la casa */
.modal-sitio { width: min(34rem, calc(100vw - 2rem)); }
.modal-sitio h3 { display: flex; align-items: center; gap: .5rem; }
.sitio-punto { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.sitio-resumen { margin: -.4rem 0 0; color: var(--muted); display: flex; flex-direction: column; gap: .5rem; }
.sitio-subs { display: flex; flex-wrap: wrap; gap: .35rem; }
.sitio-movs { list-style: none; margin: 0; padding: 0; max-height: min(55vh, 28rem); overflow-y: auto; overscroll-behavior: contain; }
.sitio-movs li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; padding: .5rem .1rem; border-top: 1px solid var(--line); }
.sitio-movs li.empty { display: block; color: var(--muted); }
.sitio-fecha { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.sitio-concepto { min-width: 0; }
.sitio-concepto b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitio-concepto small { color: var(--muted); }
.sitio-importe { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.docs-mov { margin: 0; color: var(--muted); }
.docs-files { list-style: none; margin: 0; padding: 0; }
.docs-files li { display: flex; align-items: center; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.docs-files li.empty { justify-content: center; color: var(--muted); border: 0; }
.doc-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.doc-info small { color: var(--muted); }
.doc-link { color: var(--text); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.doc-link:hover { color: var(--primary); text-decoration: underline; }
.docs-drop { margin: 0; padding: 1.25rem 1rem; }
.docs-drop small { display: block; margin-top: .25rem; }
.docs-drop.subiendo { opacity: .6; pointer-events: none; }
.docs-lista { display: flex; flex-direction: column; gap: 1rem; }
.docs-grupo { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; }
.docs-grupo h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.05rem; }
.docs-grupo h3 small { color: var(--muted); font-weight: 400; }
.docs-concepto { padding: .5rem 0 .25rem 1.5rem; border-top: 1px solid #f3f4f6; }
.docs-concepto-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.docs-concepto-head small { color: var(--muted); }
.docs-concepto ul { list-style: none; margin: .25rem 0 0; padding: 0; }
.docs-concepto li { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; flex-wrap: wrap; }
.docs-fecha { color: var(--muted); font-size: .9rem; min-width: 5.6rem; }
.docs-importe { min-width: 6rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.docs-subir { margin: 0 0 1rem; }
.docs-sueltos { border-color: #fcd34d; background: #fffbeb; }
.docs-sueltos > ul { list-style: none; margin: 0; padding: 0; }
.docs-sueltos > ul > li { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; padding: .55rem 0; border-top: 1px solid #fde68a; }
.docs-sueltos > ul > li.abierto { padding-bottom: .9rem; }
.enl-panel { flex: 1 1 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; display: flex; flex-direction: column; gap: .4rem; }
.enl-panel > strong { font-size: .9rem; }
.enl-lista { list-style: none; margin: 0; padding: 0; }
.enl-lista li { display: flex; align-items: center; gap: .75rem; padding: .4rem 0; border-top: 1px solid #f3f4f6; flex-wrap: wrap; }
.enl-lista li.empty { color: var(--muted); font-size: .9rem; border: 0; }
.enl-concepto { flex: 1; min-width: 10rem; }
.enl-concepto small { color: var(--muted); }
.enl-buscar { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.enl-buscar input { font-size: 1rem; color: var(--text); padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; }
.docs-mas { background: none; border: 0; padding: .15rem 0 .35rem; cursor: pointer; color: var(--primary); font-size: .88rem; }
.docs-mas:hover { text-decoration: underline; }
.doc-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.chk { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.chk small { font-weight: 400; }
.chk.ok { color: var(--pos); }
.chk.ko { color: #c2410c; white-space: normal; }
.chk.na { color: var(--muted); font-weight: 400; }
.chk-btn { background: none; border: 1px solid var(--line); border-radius: 99px; padding: .05rem .5rem; cursor: pointer; }
.chk-btn:hover { border-color: var(--primary); color: var(--primary); }
.docs-files .chk { margin-top: .15rem; }
.docs-drop.subiendo p::after { content: ' · comprobando y subiendo…'; }

/* ---------- integraciones ---------- */
.plugins { display: flex; flex-direction: column; gap: 1rem; }
.plugin { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.plugin.on { border-color: #d1d5db; }
.plugin-head { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.1rem; }
.plugin.on .plugin-head { background: #f8fbff; }
.plugin-icon { font-size: 1.6rem; line-height: 1; background: #f3f4f6; border-radius: 12px; padding: .55rem; }
.plugin-titulo { flex: 1; min-width: 0; }
.plugin-titulo h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.plugin-titulo p { margin: .2rem 0 0; color: var(--muted); font-size: .92rem; }
.pill { font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: #f3f4f6; color: var(--muted); }
.pill.ok { background: #dcfce7; color: var(--pos); }
.pill.ko { background: #ffedd5; color: #c2410c; }
/* Ajustes → Casa de Inicio: interruptor para activar o desactivar la casa 3D */
.casa-activar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .75rem .9rem; margin-bottom: 1rem;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .7); }
.casa-activar small { display: block; color: var(--muted); margin-top: .15rem; }
.switch { position: relative; flex: none; width: 3rem; height: 1.7rem; cursor: pointer; margin-top: .15rem; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #d1d5db; transition: background .15s; }
.switch span::after { content: ''; position: absolute; top: .2rem; left: .2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(1.3rem); }
.switch input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.plugin-body { padding: 1rem 1.1rem 1.1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .8rem; }
.plugin-body > .help { margin: 0; }
.plugin-pasos { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.plugin-body > .btn { align-self: flex-start; }
.plugin-cuenta { margin: 0; }
.plugin-error { margin: 0; padding: .6rem .8rem; border-radius: 8px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.plugin-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.plugin-kpis > div { background: var(--bg); border-radius: 8px; padding: .55rem .75rem; display: flex; flex-direction: column; }
.plugin-kpis span { font-size: .8rem; color: var(--muted); }
.plugin-kpis strong { font-size: 1.15rem; }
.plugin-kpis small { color: var(--muted); }
.plugin-kpis .btn-link { align-self: flex-start; font-size: 1.1rem; font-weight: 700; padding: 0; }
.plugin-body .form-actions { flex-wrap: wrap; }
.plugin-historial ul { list-style: none; margin: .3rem 0 0; padding: 0; }
.plugin-historial li { display: flex; gap: .75rem; align-items: baseline; padding: .4rem 0; border-top: 1px solid #f3f4f6; font-size: .92rem; }
.plugin-historial li .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plugin-historial small { color: var(--muted); white-space: nowrap; }
.plugin-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0; padding: .4rem 1rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.plugin-form legend { font-weight: 700; padding: 0 .4rem; display: flex; align-items: center; gap: .45rem; }
.paso { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: .8rem; }
.plugin-fila { display: flex; gap: .6rem .9rem; flex-wrap: wrap; align-items: flex-end; }
.plugin-form .field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); flex: 1 1 12rem; min-width: 0; }
.plugin-form .field input, .plugin-form .field select { color: var(--text); font-size: 1rem; width: 100%; }
.plugin-form .field small { color: var(--muted); }
.plugin-avanzado summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
.plugin-avanzado[open] summary { margin-bottom: .5rem; }
.plugin-ayuda { background: #f3f4f6; border-radius: 8px; padding: .6rem .9rem; font-size: .92rem; }
.plugin-ayuda p { margin: 0; }
.plugin-ayuda ol { margin: .35rem 0 0; padding-left: 1.2rem; }
.plugin-prueba { margin: 0; font-size: .92rem; color: var(--muted); }
.plugin-prueba.ok { color: var(--pos); font-weight: 600; }
.plugin-prueba.ko { color: var(--neg); }
.plugin-radios { display: flex; flex-direction: column; gap: .35rem; }
.plugin-radios > input { margin: 0 0 .4rem 1.7rem; width: calc(100% - 1.7rem); color: var(--text); }
.plugin-radio { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
.plugin-radio input { margin-top: .3rem; }
.plugin-radio span { display: flex; flex-direction: column; }
.plugin-radio small { color: var(--muted); }
.plugin-check { display: flex; align-items: center; gap: .4rem; }
.doc-procedencia { display: block; color: var(--muted); }

@media (max-width: 640px) {
  .marca { padding-right: .55rem; }
  .marca img { height: 1.35rem; }
  :root { --cab-top: .5rem; --cab-hueco: calc(var(--cab-alto) + 2.9rem); --ancho: calc(100% - 1rem); }
  .cuenta { gap: .6rem; }
  .cuenta-user { display: none; }
  .reloj { right: .5rem; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:first-child { grid-column: 1 / -1; } /* Gastos, con el reparto fijos/variables, a todo el ancho */
  .kpi strong { font-size: 1.15rem; }
  .bar-row { grid-template-columns: 1fr 6rem; }
  .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .bar-pct { display: none; }
  .cat-select { max-width: 10rem; }
  /* Árbol de categorías: el nombre ocupa su línea y los botones bajan debajo */
  .cat-row { flex-wrap: wrap; gap: .4rem .5rem; }
  .cat-row > .grow { flex: 1 1 75%; }
  .cat-row > .grip { display: none; }
  .cat-subs { margin-left: .6rem; }
  .cat-edit input[name=nombre] { min-width: 0; flex-basis: 100%; }
  .usuarios-list li { flex-wrap: wrap; }
  .docs-concepto { padding-left: .25rem; }
  .docs-concepto li { gap: .3rem .75rem; padding: .6rem 0; border-top: 1px dashed #f3f4f6; }
  .docs-concepto li .doc-info { flex: 1 1 100%; order: -1; }
  .docs-importe { min-width: 0; text-align: left; margin-right: auto; }
  .usuarios-list .cat-edit input[name] { min-width: 0; flex-basis: 100%; }
  th:first-child, td.fecha { font-size: .8rem; }
  .plugin-head { padding: .85rem; gap: .65rem; }
  .plugin-icon { font-size: 1.3rem; padding: .4rem; }
  .plugin-body { padding: .85rem; }
  .plugin-kpis { grid-template-columns: 1fr 1fr; }
  .plugin-kpis > div:last-child { grid-column: 1 / -1; }
  .plugin-form fieldset { padding: .4rem .7rem .8rem; }
}

/* ---------- importar: cómo se ha entendido el extracto ---------- */
.analisis { margin: 1rem 0; padding: 1rem; border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: var(--radius); }
.analisis.revisar { border-color: #fed7aa; background: #fff7ed; }
.analisis-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.analisis-resumen { margin: .5rem 0; }
.analisis-avisos { margin: .25rem 0 .5rem; padding-left: 1.2rem; color: #9a3412; font-size: .9rem; }
.map-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.map-chip { background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: .1rem .6rem; font-size: .85rem; }
.map-chip small { color: var(--muted); }
.analisis-tabla { background: var(--card); font-size: .9rem; }
.analisis-tabla caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: .8rem; padding-top: .3rem; }
.map-editor { margin-top: .75rem; }
.map-editor summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem .9rem; margin: .75rem 0 .5rem; }
.map-grid .field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); min-width: 0; }
.map-grid select { color: var(--text); font-size: .95rem; max-width: 100%; }
.map-ancho { grid-column: 1 / -1; }
.map-modo { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; color: var(--text); font-size: .95rem; }
.map-check { font-size: .9rem; color: var(--text); }

/* ---------- ajustes: menú lateral + sección ---------- */
.ajustes { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.ajustes-menu { display: flex; flex-direction: column; gap: .25rem; position: sticky; top: var(--cab-hueco); }
.ajustes-item { display: flex; gap: .6rem; align-items: center; text-align: left; padding: .6rem .75rem; border: 1px solid transparent;
  border-radius: var(--radius); background: none; cursor: pointer; color: var(--text); font: inherit; }
/* Cada apartado es una etiqueta de cristal, para que no se confunda con el pueblo de fondo */
.ajustes-item {
  background: var(--cristal-modulo); border-color: var(--cristal-borde); border-radius: 12px;
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06); transition: background .15s, border-color .15s, box-shadow .15s;
}
.ajustes-item:hover { background: rgba(255, 255, 255, .9); border-color: var(--line); }
.ajustes-item.active { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(77, 77, 77, .08), 0 4px 14px rgba(15, 23, 42, .08); }
.ajustes-item b { display: block; }
.ajustes-item small { display: block; color: var(--muted); font-size: .8rem; }
.ajustes-icono { font-size: 1.3rem; }
.ajustes-contenido { min-width: 0; }
.ajustes-contenido .card { margin-top: 0; }
@media (max-width: 760px) {
  .ajustes { grid-template-columns: minmax(0, 1fr); }
  .ajustes-menu { position: static; flex-direction: row; overflow-x: auto; padding-bottom: .25rem; }
  .ajustes-item { flex: 0 0 auto; padding: .45rem .7rem; }
  .ajustes-item small { display: none; }
}

/* reglas */
.regla-form { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; margin-bottom: 1rem; background: #f9fafb; }
.regla-linea { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.regla-linea input { flex: 1; min-width: 10rem; }
.regla-linea select { max-width: 100%; }
.regla-vista { margin: .25rem 0 .5rem; font-size: .9rem; }
.reglas-list li { flex-wrap: wrap; }
.regla-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; min-width: 0; overflow-wrap: anywhere; }
.regla-texto small { color: var(--muted); }
.regla-flecha { color: var(--muted); }

/* usuarios y roles */
.badge.rol { background: #eef2ff; color: #3730a3; }
.roles-lista { display: flex; flex-direction: column; gap: .9rem; }
.rol { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; }
.rol.admin { background: #f9fafb; }
.rol-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.rol-cab input { flex: 1; min-width: 12rem; font-weight: 600; }
.permisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem .9rem; margin-bottom: .75rem; }
.permiso { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.permiso input { margin-top: .2rem; }
.permiso b { display: block; font-size: .92rem; }
.permiso small { display: block; color: var(--muted); font-size: .8rem; }
.permiso.fijo { cursor: default; opacity: .8; }
.muted { color: var(--muted); }

/* ---------- integración: cuentas del banco ---------- */
.paso-guia { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding: 0; margin: 0 0 1rem; font-size: .88rem; color: var(--muted); }
.paso-guia li { display: flex; align-items: center; gap: .35rem; }
.paso-guia li span { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--line); font-size: .78rem; }
.paso-guia li.actual { color: var(--text); font-weight: 600; }
.paso-guia li.actual span { background: var(--primary); border-color: var(--primary); color: #fff; }
.paso-guia li.hecho span { background: #dcfce7; border-color: #bbf7d0; color: var(--pos); }
.banco-instr { padding-left: 1.2rem; line-height: 1.55; }
.banco-instr li { margin-bottom: .45rem; }
.banco-instr ul { padding-left: 1.1rem; margin: .3rem 0; }
.copiable { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; max-width: 100%; }
.copiable code { background: #f3f4f6; border: 1px solid var(--line); border-radius: 6px; padding: .1rem .4rem; overflow-wrap: anywhere; }
.bancos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; margin: .75rem 0; max-height: 26rem; overflow-y: auto; }
.banco-opcion { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.banco-opcion:hover { border-color: var(--primary); background: rgba(77, 77, 77, .04); }
.banco-opcion img, .banco-sin-logo { width: 28px; height: 28px; object-fit: contain; flex: 0 0 28px; }
.banco-logo { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: .4rem; }
.banco-cuenta { display: flex; gap: .6rem; align-items: center; cursor: pointer; }
.banco-cuenta small { display: block; color: var(--muted); }
.banco-cuentas li { flex-wrap: wrap; }
.banco-cuentas li.apagada { opacity: .55; }
.banco-paso .field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); min-width: 0; }
.banco-paso .field input, .banco-paso .field select { color: var(--text); font-size: 1rem; max-width: 100%; }
.banco-paso .plugin-fila { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: flex-end; }
.banco-paso .field.grow { flex: 1; min-width: 12rem; }

/* ---------- inicio: resumen del mes con la escena 3D ---------- */
.inicio-mes { display: flex; align-items: center; gap: .6rem; }
.inicio-mes h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; min-width: 9ch; text-align: center; }
.inicio-kpis { display: flex; flex-wrap: wrap; gap: .6rem; }
.inicio-kpis .kpi { min-width: 9.5rem; padding: .6rem .9rem; }
.inicio-kpis .kpi small { display: block; font-size: .75rem; margin-top: .15rem; }
.escena-card { padding: 0; overflow: hidden; position: relative; }
.escena { position: relative; height: min(68vh, 640px); min-height: 360px; background: #f6f7f7; }
.escena canvas {
  /* Los bordes de la maqueta se funden con el fondo, como una ilustración */
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 58%, transparent 100%);
  touch-action: none;
}
.escena-cargando { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); text-align: center; padding: 1rem; }
.escena-botones { position: absolute; top: .75rem; right: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.escena-botones .btn { background: rgba(255,255,255,.92); }
.escena-ayuda { margin: 0; padding: .5rem 1rem .75rem; font-size: .8rem; }

/* Etiquetas sobre los objetos: tarjeta blanca + línea fina hasta el objeto */
.et-wrap, .persona-wrap { pointer-events: none; }
/* El nombre sobre cada persona de la propiedad: pequeño, para que mande el gasto */
.persona-nombre { display: block; max-width: 8rem; padding: .08rem .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 99px; background: rgba(255, 255, 255, .88); box-shadow: 0 1px 4px rgba(15, 23, 42, .14); font: 600 .66rem/1.3 var(--fuente); color: var(--tinta); }
.persona-nombre.yo { background: var(--tinta); color: #fff; }
.et {
  --alto: 28px;
  position: absolute; left: 0; top: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - var(--alto)));
  display: flex; flex-direction: column; align-items: flex-start; gap: .05rem;
  padding: .32rem .6rem .36rem; border: 1px solid var(--cristal-borde); border-left: 3px solid var(--c, #6b7280); border-radius: 10px;
  background: var(--cristal); box-shadow: 0 6px 18px rgba(15,23,42,.10);
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur);
  font: 500 .74rem/1.15 var(--fuente); color: #475569; white-space: nowrap;
  cursor: pointer; pointer-events: auto; transition: box-shadow .15s; /* sin transición en transform: se mide al recolocarlas */
}
.et b { font-size: .9rem; font-weight: 700; color: var(--tinta); letter-spacing: -.01em; }
.et::after { content: ''; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%; width: 1px; height: var(--alto); background: #94a3b8; }
.et-punto { position: absolute; left: calc(50% - 3px - var(--dx, 0px)); top: calc(100% + var(--alto) - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--c, #6b7280); box-shadow: 0 0 0 2px #fff; }
.et:hover, .et.on { box-shadow: 0 8px 24px rgba(15,23,42,.18); border-color: var(--c); transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - var(--alto) - 3px)); z-index: 5; }
/* Etiqueta colocada debajo de su objeto (cuando encima no hay hueco) */
.et.abajo { transform: translate(calc(-50% + var(--dx, 0px)), var(--alto)); }
.et.abajo::after { top: auto; bottom: 100%; }
.et.abajo .et-punto { top: auto; bottom: calc(100% + var(--alto) - 3px); }
.et.abajo:hover, .et.abajo.on { transform: translate(calc(-50% + var(--dx, 0px)), calc(var(--alto) + 3px)); }
.et.compacta { flex-direction: row; align-items: center; gap: .3rem; padding: .22rem .45rem; font-size: .8rem; }
.et.compacta b { font-size: .8rem; }
/* Con previsión: «84 € de 120 €» y una barrita de lo gastado (roja si se pasa) */
.et-de { font-size: .7rem; font-weight: 500; color: #64748b; }
.et-de.pasada { color: var(--neg); }
.et-barra { position: relative; display: block; align-self: stretch; min-width: 4.5rem; height: 4px; margin-top: .18rem; border-radius: 99px; overflow: hidden; }
.et-barra::before { content: ''; position: absolute; inset: 0; background: var(--c, #6b7280); opacity: .22; }
.et-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--c, #6b7280); }
.et-barra.pasada { overflow: visible; }
.et-barra.pasada i { background: repeating-linear-gradient(135deg, #b91c1c 0 4px, #ef4444 4px 7px); }
.et-exceso { display: block; font-size: .7rem; font-weight: 700; color: var(--neg); }
/* El próximo pago de esa categoría (pagos que se repiten, 30 días) */
.et-prox { display: block; font-size: .7rem; font-weight: 500; color: #2a78d6; white-space: nowrap; }

@media (max-width: 640px) {
  .inicio-mes h1 { font-size: 1.3rem; }
  .inicio-kpis { width: 100%; }
  .inicio-kpis .kpi { flex: 1; min-width: 0; padding: .5rem .6rem; }
  .inicio-kpis .kpi strong { font-size: .92rem; white-space: nowrap; letter-spacing: -.02em; }
  .inicio-kpis .kpi > span { font-size: .78rem; }
  .escena { height: 105vw; max-height: 60vh; min-height: 300px; }
}

/* Diálogo: qué subcategoría va en cada objeto */
.escena-mapa { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; margin: .5rem 0 1rem; }
.escena-mapa fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .75rem; margin: 0; }
.escena-mapa legend { display: flex; align-items: center; gap: .4rem; font-weight: 600; padding: 0 .3rem; }
.escena-mapa .dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.escena-mapa-fila { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .25rem 0; font-size: .92rem; }
.escena-mapa-fila select { max-width: 60%; }


/* ---------- ajustes: casa de Inicio (qué categorías van en cada sitio) ---------- */
.casa-modo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .75rem; color: var(--muted); }
.casa-escena-caja { position: relative; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.casa-escena { height: min(62vh, 560px); min-height: 340px; }
.casa-escena .et b { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; font-weight: 600; }
.casa-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.casa-sitio { border: 1px solid var(--line); border-radius: var(--radius); padding: .65rem .75rem; display: flex; flex-direction: column; gap: .5rem;
  background: var(--card); transition: border-color .15s, box-shadow .15s; }
.casa-sitio.on { border-color: var(--primary); box-shadow: 0 0 0 3px #e5e7eb; }
.casa-sitio-cab { display: flex; gap: .6rem; align-items: center; cursor: pointer; }
.casa-sitio-cab small { display: block; color: var(--muted); font-size: .8rem; }
.casa-chips { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.6rem; align-items: center; }
.casa-chip { display: inline-flex; align-items: center; gap: .25rem; }
.casa-chip.auto { border-style: dashed; background: #f9fafb; }
.casa-quitar { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 .1rem; }
.casa-quitar:hover { color: var(--neg); }
.casa-sitio select { width: 100%; font-size: .88rem; color: var(--muted); }


/* ---------- el pueblo en 3D, fijo de fondo en todas las páginas ---------- */
.fondo-3d { position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh; transition: opacity .5s; }
.fondo-3d canvas {
  touch-action: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 72% at 50% 56%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 72% at 50% 56%, #000 60%, transparent 100%);
}
main { position: relative; z-index: 1; }
/* Fuera de Inicio: solo el pueblo, más suave, y no se puede tocar */
body:not(.vista-inicio) .fondo-3d { opacity: .72; pointer-events: none; }
body.sin-3d .fondo-3d { display: none; }

/* Módulos de cristal sobre el pueblo */
.card, .kpi {
  background: var(--cristal-modulo); border-color: var(--cristal-borde);
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
}
.card { border-radius: 16px; }

/* ---------- transición entre páginas ---------- */
/* El menú se queda quieto y la pestaña activa se desliza; el contenido no se funde entero: sus piezas se recogen
   y se despliegan escalonadas (showView en app.js), así que la página nueva se ve desde el primer momento */
.topbar { view-transition-name: menu; }
.tab.active { view-transition-name: pestana; }
::view-transition-group(pestana) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html.cambiando::view-transition-old(root) { animation: none; opacity: 0; }
html.cambiando::view-transition-new(root) { animation: none; }
@keyframes vista-entra { from { opacity: 0; transform: translateY(12px); } }
/* Entrar y salir: la tarjeta de entrar crece hasta ser el menú (y al salir, al revés) y el logo vuela de una a otro.
   transicion.js decide cuándo y pone html.vt-cuenta mientras dura */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
body.auth .auth-card { view-transition-name: menu; }
.auth-logo img, .marca img { view-transition-name: marca; }
html.vt-cuenta .tab.active { view-transition-name: none; } /* que la pestaña activa llegue con el menú, no volando sola */
html.vt-cuenta::view-transition-group(menu) {
  animation-duration: .75s; animation-timing-function: cubic-bezier(.65, 0, .25, 1);
  background: rgba(255, 255, 255, .72); border-radius: 28px; /* entre la tarjeta (18px) y la píldora del menú */
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06);
}
html.vt-cuenta::view-transition-image-pair(menu) { overflow: hidden; border-radius: 28px; }
html.vt-cuenta::view-transition-old(menu),
html.vt-cuenta::view-transition-new(menu) { height: 100%; object-fit: none; object-position: center; }
html.vt-cuenta::view-transition-old(menu) { animation: desaparece .2s ease-in both; }
html.vt-cuenta::view-transition-new(menu) { animation: aparece .3s ease-out .5s both; }
html.vt-cuenta::view-transition-group(marca) { animation-duration: .75s; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
html.vt-cuenta::view-transition-new(root) { animation: aparece .5s ease-out .35s both; }
html.vt-cuenta::view-transition-old(root) { animation: desaparece .5s ease both; }
@keyframes aparece { from { opacity: 0; } }
@keyframes desaparece { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fondo-3d { transition: none; }
}

/* ---------- varios movimientos a la vez ---------- */
.mov-sel { width: 2rem; }
.mov-sel input { width: 1.05rem; height: 1.05rem; margin: 0; vertical-align: middle; cursor: pointer; }
table.mov tbody tr.elegido, table.mov tbody tr.elegido:hover { background: #eef2ff; }
.mov-lote {
  position: sticky; top: calc(var(--cab-alto) + 1.5rem); z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .6rem;
  margin-bottom: .6rem; padding: .55rem .75rem; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px;
}
.mov-lote select { min-width: 0; max-width: 100%; padding: .3rem .4rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; }

/* ---------- tipo de cada documento ---------- */
.docs-tipo-subida { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; font-size: .85rem; color: var(--muted); max-width: 20rem; }
.docs-tipo-subida select { color: var(--text); font-size: 1rem; }
.doc-tipo { align-self: flex-start; max-width: 100%; margin: .1rem 0; padding: .05rem .25rem; font-size: .8rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); cursor: pointer; }
.doc-tipo-fijo { font-size: .8rem; color: var(--muted); }

/* ---------- Inicio: sin scroll; todo fijo sobre la escena, a todo el ancho de la pantalla ---------- */
:root {
  --inicio-borde: clamp(1rem, 3vw, 2.5rem);
  /* Ancho fijo del pie de Inicio y de Tin: no depende de lo que haya dentro, así no cambia al llegar los datos */
  --inicio-ancho: min(46rem, calc(100% - 2 * var(--inicio-borde)));
}
/* Abajo y centrado, en tres filas: el saludo, los totales y el selector de mes. El reparto por sitios está en
   las etiquetas de la casa. Lo que no es un módulo o un botón deja pasar el ratón a la escena. */
body.vista-inicio { overflow: hidden; }
body.vista-inicio main, body.vista-inicio #view-inicio { pointer-events: none; }
#view-inicio .escena-cargando { position: fixed; inset: 0; pointer-events: none; }
.inicio-pie {
  /* Centrado y siempre del mismo ancho que Tin (--inicio-ancho), tenga lo que tenga dentro */
  position: fixed; bottom: calc(.75rem + var(--tt-alto, 0px) + .5rem); left: var(--inicio-borde); right: var(--inicio-borde); z-index: 3;
  width: var(--inicio-ancho); max-width: calc(100% - 2 * var(--inicio-borde)); margin: 0 auto;
  display: flex; flex-direction: column; align-items: stretch; gap: .5rem; pointer-events: none; text-align: center;
}
.inicio-saludo > span, .inicio-kpis .kpi, .inicio-mes, .inicio-sin .btn-link { pointer-events: auto; }
.inicio-saludo { margin: 0; }
.inicio-saludo > span, .inicio-mes, body.vista-inicio .inicio-kpis .kpi {
  background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: 14px;
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
.inicio-saludo > span { display: block; padding: .45rem .85rem; font-size: .95rem; }
/* En horizontal, para tapar poco la escena: arriba una fila fina (saludo, mes, avisos) y abajo una sola fila con
   los tres totales y los dos resúmenes. En pantallas medianas los resúmenes bajan debajo de los totales. */
.inicio-cabeza { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; }
.inicio-cabeza .inicio-saludo > span { padding: .35rem .8rem; font-size: .88rem; }
.inicio-cabeza .inicio-mes { padding: .25rem .9rem; }
.inicio-cabeza .inicio-mes h1 { font-size: 1rem; min-width: 0; }
.inicio-cabeza .inicio-proximo { padding: .35rem .8rem; font-size: .82rem; }
.inicio-datos { display: flex; gap: .5rem; align-items: stretch; }
.inicio-datos .inicio-kpis { flex: 3 1 auto; }
.inicio-datos .inicio-resumenes { flex: 2 1 27rem; }
.inicio-datos .inicio-resumenes[hidden] { display: none; }
.inicio-resumen small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) {
  .inicio-datos { flex-direction: column; }
  .inicio-datos .inicio-resumenes { flex: none; }
}
@media (max-width: 640px) {
  /* En el móvil, lo justo: el saludo sin la segunda frase, el mes junto al aviso y la comparación sin «que hace un mes» */
  .inicio-cabeza { gap: .35rem; }
  .inicio-kpis .kpi-resto { display: none; }
  .inicio-asistente { padding: .5rem .6rem; gap: .5rem; }
  .inicio-asistente-cara { width: 1.7rem; height: 1.7rem; font-size: .85rem; }
  .inicio-asistente .inicio-saludo > span { font-size: .85rem; }
  .inicio-cabeza .inicio-mes-fila { flex-wrap: nowrap; gap: .35rem; }
  .inicio-cabeza .inicio-mes { flex: none; }
  .inicio-cabeza .inicio-sin .btn-link { white-space: nowrap; font-size: .75rem; }
  .inicio-datos { gap: .4rem; }
}
.inicio-saludo:empty { display: none; }
.inicio-kpis { flex-wrap: nowrap; gap: .5rem; }
.inicio-kpis .kpi { flex: 1; text-align: left; }
@media (min-width: 641px) { .inicio-kpis .kpi small { white-space: nowrap; } }
.inicio-mes-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.inicio-mes { flex: 1; justify-content: center; padding: .35rem .8rem; gap: .35rem; }
.inicio-mes h1 { font-size: 1.15rem; }
.inicio-sin:empty { display: none; }
.inicio-sin .btn-link {
  background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: 99px; padding: .3rem .7rem;
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur); font-size: .8rem;
}
@media (max-width: 640px) {
  :root { --inicio-borde: .5rem; }
  .inicio-pie { bottom: calc(.5rem + var(--tt-alto, 0px) + .4rem); gap: .4rem; }
  .inicio-mes h1 { font-size: 1.05rem; }
}
body.sin-3d #view-inicio .escena-cargando { position: fixed; inset: auto 0 auto 0; top: 40vh; }

/* Viaje entre propiedades: lo de encima se aparta para ver el camino y al llegar se funde con la página nueva */
body.viajando main { opacity: 0; transition: opacity .25s; pointer-events: none; }
body.viajando .fondo-3d { opacity: 1; }
/* Al llegar de otra propiedad: la foto del viaje debajo de la escena, y el resto va apareciendo */
.foto-llegada {
  position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 72% at 50% 56%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 72% at 50% 56%, #000 60%, transparent 100%);
}
html.llegando .escena-cargando { display: none; }
.titulo-llegada { display: none; }
.titulo-viaje, html.llegando .titulo-llegada {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 50; margin: 0; padding: 1rem; pointer-events: none;
  text-align: center; font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--text, #1b1f24);
  text-shadow: 0 0 18px #fff, 0 0 40px #fff, 0 0 80px #fff;
}
/* Aparece un segundo antes de llegar; al llegar sigue un segundo (la página nueva empieza con él ya visible) y se va en .5 s */
.titulo-viaje { animation: titulo-entra .4s ease both; }
html.llegando .titulo-llegada { animation: titulo-sale 1.5s ease both; }
@keyframes titulo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes titulo-sale { 0%, 67% { opacity: 1; } 100% { opacity: 0; } }
html.llegando .inicio-pie { transition: opacity .5s; }
html.llegando .inicio-pie:not(.listo), html.llegando:not(.titulo-fuera) .inicio-pie { opacity: 0; pointer-events: none; }
html.llegando:not(.titulo-fuera) .et, html.llegando:not(.titulo-fuera) .persona-nombre { opacity: 0; pointer-events: none; }
html.llegando.titulo-fuera .et, html.llegando.titulo-fuera .persona-nombre { animation: et-aparece .5s both; }
@keyframes et-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.viajando main { transition: none; } }

/* Móvil, tablet y portátil pequeño (con siete pestañas no caben): el menú en una sola línea (logo, propiedad y botón); las pestañas y la cuenta, en un desplegable */
@media (max-width: 1140px) {
  .topbar { flex-wrap: nowrap; gap: .5rem; padding: .4rem .4rem .4rem 1rem; }
  .propiedad-sel { flex: 1; max-width: none !important; min-width: 0; }
  .propiedad-sel select { flex: 1; }
  .menu-btn {
    display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem;
    background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--tinta);
  }
  .menu-btn:hover { background: rgba(77, 77, 77, .06); }
  /* Tres rayas que forman una cruz al abrir */
  .menu-btn span, .menu-btn span::before, .menu-btn span::after {
    display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, background-color .2s;
  }
  .menu-btn span { position: relative; }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
  .menu-btn span::before { transform: translateY(-6px); }
  .menu-btn span::after { transform: translateY(6px); }
  .menu-abierto .menu-btn span { background: transparent; }
  .menu-abierto .menu-btn span::before { transform: rotate(45deg); }
  .menu-abierto .menu-btn span::after { transform: rotate(-45deg); }
  /* Colgado de la barra, para que abrirlo no cambie su alto ni mueva la escena */
  .menu-panel {
    display: none; position: absolute; top: calc(100% + .4rem); left: 0; right: 0;
    flex-direction: column; gap: .25rem; padding: .5rem;
    max-height: calc(100dvh - var(--cab-alto) - 1.5rem); overflow-y: auto;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  }
  .menu-abierto .menu-panel { display: flex; }
  /* En tablet: el desplegable a la derecha (no a todo el ancho) y el selector con su ancho, sin estirarse */
  @media (min-width: 641px) {
    .menu-panel { left: auto; width: 19rem; }
    .propiedad-sel { flex: none; max-width: 15rem !important; }
    .propiedad-sel select { flex: none; }
    .menu-btn { margin-left: auto; }
  }
  .tabs { flex-direction: column; flex: none; gap: .15rem; }
  .tab { width: 100%; text-align: left; padding: .7rem .8rem; font-size: 1.02rem; }
  .cuenta { justify-content: space-between; padding: .7rem .8rem .35rem; border-left: 0; border-top: 1px solid var(--line); }
  @media (prefers-reduced-motion: reduce) { .menu-btn span, .menu-btn span::before, .menu-btn span::after { transition: none; } }
}

/* Móvil */
@media (max-width: 640px) {
  /* Ningún desplegable de opciones largas puede ensanchar la página */
  .ajustes, .ajustes > *, .inline-form, .inline-form .field { min-width: 0; max-width: 100%; }
  .inline-form select, .inline-form input { max-width: 100%; width: 100%; }
  /* Movimientos: cada fila, una ficha (fecha e importe arriba; debajo, concepto y categoría), sin desplazar de lado */
  table.mov, table.mov thead, table.mov tbody, table.mov tfoot { display: block; }
  table.mov thead tr, table.mov tbody tr { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto; column-gap: .35rem; padding: .6rem .25rem; border-bottom: 1px solid var(--line); }
  table.mov tbody tr:not(:has(.mov-sel)) { grid-template-columns: 0 minmax(0, 1fr) auto; }
  table.mov thead tr:not(:has(.mov-sel)) { display: none; }
  table.mov td, table.mov th { padding: 0; border: 0; }
  table.mov thead th:not(.mov-sel) { display: none; }
  table.mov thead th.mov-sel { grid-column: 1 / -1; width: auto; font-weight: 500; text-transform: none; letter-spacing: 0; }
  table.mov thead th.mov-sel::after { content: "Elegir todos los que se ven"; margin-left: .55rem; font-size: .85rem; color: var(--muted); }
  table.mov td.mov-sel { grid-column: 1; grid-row: 1 / span 3; width: auto; }
  table.mov td.fecha { grid-column: 2; grid-row: 1; font-size: .8rem; }
  table.mov td.num:not(tfoot td) { grid-column: 3; grid-row: 1; }
  table.mov td.concepto { grid-column: 2 / -1; grid-row: 2; overflow-wrap: anywhere; margin: .15rem 0; }
  table.mov tbody td:nth-last-child(2) { grid-column: 2 / -1; grid-row: 3; }
  table.mov .cat-select { max-width: 100%; }
  table.mov tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .6rem .25rem; background: #f9fafb; }
  table.mov tfoot td { background: none; border: 0; padding: 0; }
  table.mov tfoot small { display: block; margin-left: 0; }
  .mov-lote { top: calc(var(--cab-alto) + .75rem); }
  .mov-lote select { flex: 1 1 100%; order: 3; }
}

/* ---------- aviso de los movimientos de ejemplo ---------- */
.aviso-ejemplos {
  position: fixed; top: calc(var(--cab-top) + var(--cab-alto) + .4rem); left: max(.5rem, calc((100% - var(--ancho)) / 2)); z-index: 15;
  display: flex; align-items: center; gap: .6rem; padding: .15rem .25rem .15rem .7rem;
  border-radius: 99px; background: #fef3c7; border: 1px solid #fcd34d; color: #78350f; font-size: .82rem; white-space: nowrap;
}
.reloj { z-index: 15; }
@media (max-width: 640px) { .aviso-ejemplos { top: calc(var(--cab-top) + var(--cab-alto) + 2.1rem); } }

/* ---------- bienvenida: las preguntas para crear un espacio ---------- */
body.bienvenida { min-height: 100vh; background: linear-gradient(160deg, #f8fafc 0%, #eef2ff 100%); }
.bv { max-width: 42rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.bv-arriba { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; font-size: .9rem; }
.bv-arriba a { color: var(--muted); text-decoration: none; }
.bv-progreso { flex: 1; height: 6px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.bv-progreso i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--primary); transition: width .35s; }
.bv-contenido { animation: vista-entra .34s cubic-bezier(.2, .8, .2, 1) both; }
.bv h1 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 5vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; }
.bv-antes { margin: 0 0 .4rem; font-weight: 600; color: var(--primary); }
.bv-texto { margin: 0 0 1.5rem; color: #475569; font-size: 1.05rem; }
.bv-tarjetas { display: grid; gap: .65rem; }
.bv-tarjeta {
  display: flex; align-items: center; gap: .9rem; width: 100%; padding: .9rem 1rem; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.bv-tarjeta:hover, .bv-tarjeta:focus-visible { border-color: var(--primary); box-shadow: 0 8px 22px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.bv-tarjeta.on { border-color: var(--primary); }
.bv-icono { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; font-size: 1.5rem; background: #f1f5f9; border-radius: 11px; }
.bv-tarjeta-texto { display: flex; flex-direction: column; gap: .1rem; }
.bv-tarjeta-texto b { font-size: 1.05rem; }
.bv-tarjeta-texto small { color: var(--muted); font-size: .88rem; }
.bv-entrada { width: 100%; padding: .85rem 1rem; font-size: 1.2rem; background: #fff; border: 1.5px solid #cbd5e1; border-radius: 12px; }
.bv-entrada.pequena { padding: .55rem .75rem; font-size: 1rem; flex: 1; min-width: 0; }
.bv-entrada:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.bv-grupos { display: grid; gap: 1rem; }
.bv-grupo h3 { margin: 0 0 .4rem; font-size: .92rem; color: var(--tinta); }
.bv-chips, .bv-propias { display: flex; flex-wrap: wrap; gap: .4rem; }
.bv-propias { margin-top: .6rem; }
.bv-chip { padding: .38rem .75rem; font-size: .9rem; color: #94a3b8; background: #fff; border: 1.5px dashed #cbd5e1; border-radius: 99px; cursor: pointer; text-decoration: line-through; }
.bv-chip.on { color: var(--tinta); background: color-mix(in srgb, var(--c, var(--primary)) 12%, #fff); border: 1.5px solid var(--c, var(--primary)); text-decoration: none; }
.bv-grupo h3 small { font-weight: 400; color: var(--muted); }
.bv-chip.fija { display: inline-block; cursor: default; }
.bv-chip-mas { padding: .38rem .7rem; font-size: .9rem; color: var(--primary); background: none; border: 1.5px dashed #d1d5db; border-radius: 99px; cursor: pointer; }
.bv-chip-mas:hover { background: rgba(77, 77, 77, .05); }
.bv-chip-entrada { width: 11rem; max-width: 100%; padding: .34rem .7rem; font-size: .9rem; background: #fff; border: 1.5px solid var(--primary); border-radius: 99px; }
.bv-quitar { margin-left: .5rem; padding: 0; font-size: .8rem; font-weight: 400; color: var(--muted); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.bv-anadir-cat { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid #e2e8f0; }
.bv-anadir-cat label { display: block; margin-bottom: .35rem; font-size: .92rem; font-weight: 600; color: var(--tinta); }
.bv-anadir { display: flex; gap: .5rem; }
.bv-nota { margin: .8rem 0 0; color: var(--muted); font-size: .85rem; }
.bv-botones { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.75rem; }
.bv-botones .primary { margin-left: auto; padding-inline: 1.5rem; }
.bv-creando { padding-top: 3rem; text-align: center; }
.bv-sencillo { display: flex; flex-direction: column; gap: .8rem; }
.bv .err { color: var(--neg); }

/* ---------- visita guiada ---------- */
.guia { position: fixed; inset: 0; z-index: 1000; background: rgba(77, 77, 77, .5); }
.guia.con-foco { background: transparent; }
.guia-foco { position: fixed; border-radius: 12px; box-shadow: 0 0 0 200vmax rgba(77, 77, 77, .5); transition: left .25s, top .25s, width .25s, height .25s; pointer-events: none; }
.guia-carta { position: fixed; width: min(24rem, calc(100vw - 1rem)); padding: 1.1rem 1.2rem 1rem; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .3); }
.guia-carta.centrada { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.guia-cuenta { color: var(--muted); }
.guia-carta h2 { margin: .15rem 0 .4rem; font-size: 1.2rem; letter-spacing: -.01em; }
.guia-carta p { margin: 0; color: #475569; font-size: .95rem; line-height: 1.5; }
.guia-botones { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin-top: 1rem; }
.guia-botones .btn-link { margin-right: auto; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .guia-foco, .bv-progreso i { transition: none; } .bv-contenido { animation: none; } }

/* ---------- asistente con IA: botón flotante, chat, sugerencias, plan de ahorro y objetivo ---------- */

.ia-chat { width: min(36rem, calc(100vw - 1.5rem)); }
.ia-chat-caja { display: flex; flex-direction: column; gap: .7rem; padding: 1.25rem; height: min(46rem, calc(100dvh - 3rem)); }
.ia-chat-head-btns { display: flex; align-items: center; gap: .5rem; }
.ia-chat-msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .6rem; padding: .2rem; }
.ia-msg { max-width: 88%; padding: .6rem .85rem; border-radius: 14px; overflow-wrap: anywhere; }
.ia-msg p { margin: 0 0 .5rem; }
.ia-msg ul { margin: 0 0 .5rem; padding-left: 1.2rem; }
.ia-msg > :last-child { margin-bottom: 0; }
.ia-msg-yo { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.ia-msg-ia { align-self: flex-start; background: #f3f4f6; border-bottom-left-radius: 4px; }
.ia-msg-error { color: var(--neg); background: #fef2f2; }
.ia-msg-accion { margin-top: .6rem; }
.ia-pensando { display: inline-flex; gap: .25rem; padding: .85rem 1rem; }
.ia-pensando span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--muted); animation: ia-punto 1.2s infinite ease-in-out; }
.ia-pensando span:nth-child(2) { animation-delay: .15s; }
.ia-pensando span:nth-child(3) { animation-delay: .3s; }
@keyframes ia-punto { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.ia-chat-ideas { display: flex; flex-wrap: wrap; gap: .4rem; }
.ia-chat-form { display: flex; gap: .5rem; align-items: flex-end; }
.ia-chat-form textarea { flex: 1; resize: none; min-height: 2.6rem; max-height: 10rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 12px; font: inherit; color: var(--text); }
.ia-chat-aviso { color: var(--muted); font-size: .78rem; }

.ia-acciones { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ia-sug-card { border-color: #e9d5ff; background: #fcfaff; }
.ia-sug-card .help { margin: 0; }
/* En la tabla, junto al desplegable de los movimientos sin categoría */
.ia-hueco { display: inline-flex; align-items: center; gap: .1rem; margin-left: .35rem; vertical-align: middle; }
.ia-hueco:empty { display: none; }
.ia-sug-chip {
  --c: #999; border: 1px dashed var(--c); background: #faf5ff; color: var(--text); border-radius: 99px;
  padding: .05rem .55rem; font-size: .8rem; cursor: pointer; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis;
}
.ia-sug-chip:hover { background: #f3e8ff; border-style: solid; }
.ia-sug-chip.ia-conf-baja { opacity: .75; }
.ia-sug-no { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .2rem; }
.ia-sug-no:hover { color: var(--neg); }

.ia-cargando { animation: ia-latido 1.6s infinite ease-in-out; }
@keyframes ia-latido { 50% { opacity: .45; } }

/* ---- Previsión → Objetivos (app.js: pintarObjetivos) ---- */
.obj-card .plan-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.obj-card .plan-cab h2 { margin: 0; }
.plan-ayuda { margin: .6rem 0 0; color: var(--muted); font-size: .92rem; }
.obj-intro { margin: 0 0 .2rem; }
.obj-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .6rem; margin-top: .5rem; }
.obj-tipo { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: .8rem .9rem; cursor: pointer; font: inherit; color: var(--tinta); transition: border-color .15s, box-shadow .15s; }
.obj-tipo:hover, .obj-tipo:focus-visible { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta) inset; }
.obj-tipo b { display: block; font-size: 1rem; margin-bottom: .2rem; }
.obj-tipo small { color: var(--muted); font-size: .82rem; line-height: 1.35; display: block; }
.obj-tipo .ej { margin-top: .4rem; font-style: italic; }

.plan-frase { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.plan-frase input, .plan-frase select { font: inherit; font-size: 1.1rem; font-weight: 600; color: var(--tinta); border: 0; border-bottom: 2px solid var(--tinta); background: transparent; padding: .1rem .2rem; border-radius: 0; }
.plan-frase input { width: 7.5rem; text-align: right; }
.plan-frase input[type=date] { width: auto; text-align: left; }
.plan-frase input.obj-pct { width: 3.2rem; }
.plan-frase .btn { font-size: 1rem; margin-left: .3rem; }
.obj-cats { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.obj-cat { border: 1px solid var(--line); border-radius: 99px; padding: .25rem .7rem; font: inherit; font-size: .85rem; background: #fff; color: var(--tinta); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.obj-cat i { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.obj-cat.sel { background: var(--tinta); color: #fff; border-color: var(--tinta); }

.plan-resp { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.plan-titular { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.25; }
.plan-titular b { white-space: nowrap; }
.plan-sub { margin: .3rem 0 0; color: var(--muted); }
.obj-nota { font-size: .85rem; }
.obj-aviso { color: #a16207; font-size: .88rem; }
.plan-balanza { margin: 1rem 0 .4rem; display: grid; gap: .45rem; }
.plan-bfila { display: grid; grid-template-columns: 7.5rem 1fr 6rem; align-items: center; gap: .6rem; font-size: .88rem; }
.plan-bfila > span:first-child { color: var(--muted); }
.plan-pista { position: relative; height: 1.1rem; border-radius: 6px; background: rgba(77,77,77,.06); overflow: hidden; }
.plan-pista i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.plan-bfila b { text-align: right; font-variant-numeric: tabular-nums; }
.plan-falta i.falta { background: repeating-linear-gradient(135deg, var(--neg) 0 4px, rgba(185,28,28,.35) 4px 8px); }
.plan-sec { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 1.4rem 0 .5rem; }
.plan-sec h3 { margin: 0; font-size: 1rem; }
.plan-sec small { color: var(--muted); }
.plan-lista { display: flex; flex-direction: column; }
.plan-fila, .plan-cab-lista { display: grid; grid-template-columns: minmax(7rem, 13rem) 1fr 6rem 6.5rem; align-items: center; gap: .75rem; }
.plan-fila { padding: .45rem .35rem; border-top: 1px solid var(--line); }
.plan-fila:first-child { border-top: 0; }
.plan-fila .nom { font-weight: 600; min-width: 0; }
.plan-fila .nom small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.plan-fila .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.plan-fila .lim { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; font-variant-numeric: tabular-nums; }
.plan-fila .lim input { width: 4.8rem; text-align: right; font: inherit; font-weight: 600; padding: .2rem .35rem; border: 1px solid var(--line); border-radius: 8px; }
.plan-fila .bar-track { height: .7rem; }
.plan-fila .recorte { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(77,77,77,.35) 0 3px, rgba(77,77,77,.12) 3px 6px); border-radius: 0 99px 99px 0; }
.plan-fila.fijo { opacity: .6; }
.plan-cab-lista { padding: 0 .35rem .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.plan-cab-lista span:nth-child(3), .plan-cab-lista span:nth-child(4) { text-align: right; }
.plan-suma { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; padding: .7rem .8rem; border-radius: 12px; background: rgba(21,128,61,.08); }
.plan-suma.mal { background: rgba(185,28,28,.07); }
.plan-suma > span:last-child { color: var(--muted); font-size: .88rem; }
.plan-acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.plan-ia { margin: .8rem 0 0; padding: .7rem .9rem; border-radius: 12px; background: rgba(77,77,77,.05); font-size: .9rem; }
.obj-consejos { margin: .5rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.obj-check { display: flex; gap: .5rem; align-items: flex-start; margin-top: .9rem; font-size: .92rem; }
.obj-check input { margin-top: .2rem; }

.obj-lista { display: flex; flex-direction: column; margin-top: .2rem; }
.obj { padding: .9rem .2rem; border-top: 1px solid var(--line); }
.obj:first-child { border-top: 0; padding-top: .2rem; }
.obj-fila1 { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.obj-nom { font-weight: 650; font-size: 1.02rem; }
.obj-nom small { font-weight: 400; color: var(--muted); margin-left: .4rem; font-size: .85rem; }
.obj-cifra { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta); }
.plan-progreso { margin: .5rem 0 .35rem; height: .7rem; border-radius: 99px; background: rgba(77,77,77,.07); position: relative; }
.plan-progreso i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--pos); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.plan-progreso em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--tinta); border-radius: 1px; }
.obj-pie { display: flex; justify-content: space-between; gap: .3rem .8rem; flex-wrap: wrap; font-size: .84rem; color: var(--muted); }
.obj-pie.sin-barra { margin-top: .35rem; }
.obj-acciones { display: flex; gap: .9rem; justify-content: flex-end; margin-top: .25rem; font-size: .84rem; }
.plan-chip { display: inline-block; padding: .15rem .6rem; border-radius: 99px; font-size: .8rem; font-weight: 600; background: #dcfce7; color: var(--pos); white-space: nowrap; }
.plan-chip.aviso { background: #fef3c7; color: #a16207; }
.plan-chip.mal { background: #fee2e2; color: var(--neg); }
.obj-racha { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: .3rem; }
.obj-racha i { width: .55rem; height: .55rem; border-radius: 2px; background: var(--pos); display: inline-block; }
.obj-racha i.ko { background: var(--neg); }
.obj-racha i.hoy { background: none; outline: 1px dashed #b5bac2; outline-offset: -1px; }
@media (max-width: 640px) {
  .plan-frase { font-size: 1.1rem; }
  .plan-fila, .plan-cab-lista { grid-template-columns: 1fr 6.5rem; }
  .plan-fila .bar-track, .plan-fila .num, .plan-cab-lista span:nth-child(2), .plan-cab-lista span:nth-child(3) { display: none; }
  .plan-bfila { grid-template-columns: 5.5rem 1fr 4.5rem; }
}
@media (prefers-reduced-motion: reduce) { .ia-pensando span, .ia-cargando { animation: none; } .plan-progreso i { transition: none; } }

/* ---------- panel del propietario (admin.php) ---------- */
a.cuenta-btn { text-decoration: none; }
body.panel { background: var(--bg); }
.panel-top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap;
  padding: .6rem max(1rem, calc((100% - 1240px) / 2)); background: var(--card); border-bottom: 1px solid var(--line);
}
.panel-top .marca img { height: 1.5rem; }
.panel-nombre { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.panel-nav { display: flex; gap: .1rem; flex: 1; flex-wrap: wrap; }
.panel-nav .tab { text-decoration: none; font-size: .92rem; }
.panel-main { width: var(--ancho); margin: 0 auto; padding: 1.5rem 0 3rem; }
.panel-main h1 { font-size: 1.5rem; }
.panel-main a { color: var(--tinta); }
.panel .kpi small { display: block; margin-top: .2rem; color: var(--muted); font-size: .8rem; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.panel-grid > .card { margin: 0; }
.panel-grafico { margin: 0; }
.panel-grafico figcaption { font-weight: 600; margin-bottom: .5rem; }
.panel-grafico figcaption small { color: var(--muted); font-weight: 400; margin-left: .4rem; }
.panel-grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.panel-grafico .barra path { fill: var(--tinta); opacity: .78; }
.panel-grafico .barra:hover path { opacity: 1; }
.panel-grafico .eje { stroke: var(--line); }
.panel-grafico text { fill: var(--muted); font-size: 12px; }
.panel-grafico details { margin-top: .4rem; font-size: .85rem; }
.panel-grafico summary { cursor: pointer; color: var(--muted); }
.panel-barrita { height: 4px; margin-top: .3rem; border-radius: 99px; background: #f3f4f6; overflow: hidden; }
.panel-barrita span { display: block; height: 100%; border-radius: inherit; background: var(--tinta); opacity: .55; }
.panel-datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0; }
.panel-datos dt { color: var(--muted); }
.panel-datos dd { margin: 0; overflow-wrap: anywhere; }
.panel-periodo { margin-bottom: 1rem; }
.panel-periodo a { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: .35rem .85rem; font-size: .92rem; text-decoration: none; }
.panel-periodo a:hover { border-color: var(--primary); }
.panel-periodo a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.panel-pags { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .8rem; }
.panel .table-head .btn-link { text-decoration: none; }
@media (max-width: 640px) { .panel-datos { grid-template-columns: 1fr; } .panel-datos dt { margin-top: .4rem; } }
.panel-salir { margin: 0; }
.panel-codigo { margin: .6rem 0 0; padding: .6rem .8rem; border-radius: 8px; background: #f3f4f6; font-size: .85rem; overflow-x: auto; user-select: all; }
/* ---------- borrar mi cuenta (Mi perfil) ---------- */
.baja { margin-top: .8rem; padding: 1rem; border: 1px solid #fecaca; border-radius: var(--radius); background: #fffbfb; display: flex; flex-direction: column; gap: .8rem; }
.baja-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.baja-lista .baja-bloquea { color: var(--neg); }
.baja textarea { width: 100%; font: inherit; color: var(--text); padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.baja .form-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.baja-modo { align-self: flex-start; }
.baja-explica { margin: 0; }

/* ---------- Mi perfil: apartados en acordeón (<details>) ---------- */
#ajustes-perfil { display: flex; flex-direction: column; gap: .6rem; }
#ajustes-perfil[hidden] { display: none; }
.acordeon { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.acordeon[open] { border-color: #d1d5db; }
.acordeon > summary {
  display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; cursor: pointer; list-style: none; user-select: none;
}
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::after { content: '›'; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--muted); transform: rotate(90deg); transition: transform .2s; }
.acordeon[open] > summary::after { transform: rotate(-90deg); }
.acordeon > summary:hover { background: rgba(77, 77, 77, .04); }
.acordeon > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.acordeon > summary b { display: block; }
.acordeon > summary small { display: block; color: var(--muted); font-size: .8rem; }
.acordeon-icono { font-size: 1.3rem; }
.acordeon-cuerpo { padding: 0 1rem 1rem; border-top: 1px solid var(--line); }
.acordeon-cuerpo > :first-child { margin-top: .9rem; }
.acordeon-cuerpo h3 { margin: 1.1rem 0 .4rem; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .acordeon > summary::after { transition: none; } }
/* La tarjeta de Mi perfil no se ve: cada apartado es su propio módulo de cristal */
#ajustes-perfil.card { background: none; border: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.acordeon {
  border-color: var(--cristal-borde); border-radius: 16px; background: var(--cristal-modulo);
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur); box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
}
.acordeon[open] { border-color: var(--line); }

/* ---------- Previsión: pagos que se repiten ---------- */
.prev-resumen { padding: 1.4rem 1.5rem; }
.prev-antetitulo { margin: 0 0 .2rem; font-size: .85rem; color: var(--muted); }
.prev-grande { margin: 0; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em; }
.prev-grande b { white-space: nowrap; }
.prev-sub { margin: .35rem 0 0; color: var(--muted); }
.prev-resumen > .btn { margin-top: 1rem; }
.prev-cifras { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.prev-cifras > div { flex: 1 1 14rem; display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(77, 77, 77, .05); }
.prev-cifras span { font-size: .85rem; color: var(--muted); }
.prev-cifras strong { font-size: 1.35rem; }
.prev-cifras small { font-size: .78rem; color: var(--muted); }
.card h2 small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.prev-grupo { margin: 1rem 0 .3rem; font-size: .9rem; color: var(--muted); font-weight: 600; }
.prev-lista { display: flex; flex-direction: column; }
.prev-fila {
  display: flex; align-items: center; gap: .8rem; width: 100%; padding: .7rem .4rem; border: 0; border-top: 1px solid var(--line);
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 0;
}
.prev-lista > .prev-fila:first-child { border-top: 0; }
.prev-fila:hover { background: rgba(77, 77, 77, .04); }
.prev-dia {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3rem; height: 3rem;
  border-radius: 12px; background: rgba(77, 77, 77, .07); font-size: .72rem; text-transform: uppercase; line-height: 1;
}
.prev-dia b { font-size: 1.15rem; margin-bottom: .1rem; }
.prev-icono { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(77, 77, 77, .07); font-size: 1.05rem; }
.prev-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; overflow-wrap: anywhere; }
.prev-nombre small { font-weight: 400; color: var(--muted); font-size: .82rem; }
.prev-importe { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; font-variant-numeric: tabular-nums; }
.prev-importe.pos { color: var(--pos); }
.prev-importe small { font-weight: 400; font-size: .75rem; color: var(--muted); }
.prev-fila.tarde .prev-dia { background: #fef3c7; color: #92400e; }
.prev-fila.tarde .prev-nombre small { color: #92400e; }
.prev-sugerencias { display: flex; flex-direction: column; gap: .6rem; }
.prev-sug { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(77, 77, 77, .05); }
.prev-sug p { flex: 1 1 18rem; margin: 0; }
.prev-sug small { display: block; margin-top: .15rem; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.prev-sug-botones { display: flex; flex-wrap: wrap; gap: .4rem; }
/* La ventana: preguntas sencillas, una debajo de otra */
.rec-form label { display: flex; flex-direction: column; gap: .3rem; }
.rec-pregunta { display: flex; flex-direction: column; gap: .35rem; }
.rec-pregunta > span { font-size: .9rem; }
.rec-form .seg button { padding: .45rem .9rem; }
.rec-form .help { margin: -.5rem 0 0; font-size: .82rem; }
.rec-cobros { padding: .7rem .9rem; border-radius: 12px; background: rgba(77, 77, 77, .05); font-size: .85rem; }
.rec-cobros p { margin: 0 0 .4rem; }
.rec-cobros ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.rec-cobros li { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: .5rem; }
.rec-cobros li span:nth-child(2) { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-quitar { margin-left: auto; }
/* En la tabla de movimientos */
.rec-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .85rem; color: #9ca3af; opacity: 0; white-space: nowrap; }
tr:hover .rec-btn, .rec-btn:focus { opacity: 1; }
.rec-btn.has { opacity: 1; color: var(--primary); font-weight: 600; }
/* En Inicio, debajo del mes */
.inicio-proximo {
  pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .4rem .9rem;
  border: 1px solid var(--cristal-borde); border-radius: 99px; background: var(--cristal);
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur); box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  font: inherit; font-size: .85rem; color: var(--text); cursor: pointer;
}
.inicio-proximo span { color: var(--muted); }
.inicio-proximo i { font-style: normal; color: var(--muted); margin-left: .2rem; }
.inicio-proximo[hidden] { display: none; }
/* En Inicio, abajo: resumen de la previsión del mes y de los objetivos (dos tarjetas que llevan a Previsión) */
.inicio-resumenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.inicio-resumen {
  pointer-events: auto; display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .55rem .8rem .6rem;
  border: 1px solid var(--cristal-borde); border-radius: 14px; background: var(--cristal);
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur); box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.inicio-resumen[data-modo="estado"]:hover { background: rgba(255, 255, 255, .8); }
.inicio-resumen[data-modo="elegir"] { cursor: default; }
.inicio-obj-tipos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.inicio-obj-tipos .btn { padding: .25rem .6rem; font-size: .8rem; border-radius: 99px; background: rgba(255, 255, 255, .85); }
/* El asistente, debajo de todo: te habla (el saludo) y se le pregunta ahí mismo. En Inicio sustituye al botón «Pregunta». */
.inicio-asistente {
  pointer-events: auto; display: flex; align-items: flex-start; gap: .65rem; margin: 0; padding: .6rem .8rem;
  border: 1px solid var(--cristal-borde); border-radius: 16px; background: var(--cristal);
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur); box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  text-align: left;
}
.inicio-asistente-cara {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--tinta); color: #fff; font-size: .95rem;
}
.inicio-asistente-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.inicio-asistente .inicio-saludo > span {
  display: inline-block; padding: .4rem .75rem; border-radius: 4px 14px 14px 14px; background: #fff;
  border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: .92rem;
}
.inicio-asistente-fila { display: flex; gap: .4rem; }
.inicio-asistente-fila input {
  flex: 1; min-width: 0; padding: .45rem .75rem; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, .9);
}
.inicio-asistente-fila .btn { border-radius: 99px; }
.inicio-resumen[hidden] { display: none; }
.inicio-resumen-tit { font-size: .75rem; color: var(--muted); }
.inicio-resumen strong { font-size: .98rem; line-height: 1.25; }
.inicio-resumen strong span { font-weight: 400; color: var(--muted); font-size: .85rem; }
.inicio-resumen small { font-size: .76rem; color: var(--muted); line-height: 1.3; }
.inicio-resumen small.neg { color: var(--neg); }
.inicio-barra { position: relative; display: block; height: 6px; margin: .2rem 0 .1rem; border-radius: 99px; background: rgba(0, 0, 0, .08); }
.inicio-barra i { display: block; height: 100%; max-width: 100%; border-radius: 99px; background: var(--tinta); }
.inicio-barra.pasada i { background: var(--neg); }
/* La rayita: dónde deberías ir a estas alturas del mes */
.inicio-barra em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--muted); }
@media (max-width: 640px) {
  .inicio-resumenes { grid-template-columns: 1fr; gap: .4rem; }
  .inicio-resumen { padding: .45rem .6rem; }
  .inicio-resumen strong { font-size: .85rem; }
  .inicio-resumen small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .7rem; }
}
.rec-form label[hidden] { display: none; }

/* ---------- Previsión: cómo vendrá el próximo mes / 3 meses / año ---------- */
.prev-futuro .table-head { align-items: center; }
.prev-futuro .prev-cifras { margin-top: .4rem; }
.prev-queda { background: rgba(21, 128, 61, .07) !important; }
.prev-queda strong.neg { color: var(--neg); }
.prev-aviso { margin: .7rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: #fff7ed; color: #9a3412; font-size: .92rem; }
.prev-desglose { margin-top: .9rem; }
.prev-desglose > summary { cursor: pointer; color: var(--muted); font-size: .92rem; }
.prev-desglose-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: .4rem 1.5rem; }
.prev-mini { list-style: none; margin: 0; padding: 0; }
.prev-mini li { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.prev-mini li:first-child { border-top: 0; }
.prev-mini li > span { min-width: 0; flex: 1; }
.prev-mini small { display: block; color: var(--muted); font-size: .78rem; }
.prev-mini b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.prev-barra { display: block; height: 4px; margin-top: .3rem; border-radius: 99px; opacity: .75; }

/* ---------- Añadir un pago que se repite: ayuda para encontrarlo en los movimientos ---------- */
.rec-ayuda { display: flex; flex-direction: column; gap: .4rem; margin-top: -.3rem; }
.rec-ayuda-titulo { margin: 0; font-size: .85rem; color: var(--muted); }
.rec-ayuda-titulo:empty { display: none; }
.rec-resultados { display: flex; flex-direction: column; max-height: 15rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.rec-resultados:empty { display: none; }
.rec-resultados > .help { margin: 0; padding: .6rem .75rem; }
.rec-resultado {
  display: flex; align-items: center; gap: .8rem; padding: .5rem .75rem; border: 0; border-top: 1px solid var(--line);
  background: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.rec-resultado:first-child { border-top: 0; }
.rec-resultado:hover, .rec-resultado:focus-visible { background: rgba(77, 77, 77, .05); outline: none; }
.rec-res-nombre { flex: 1; min-width: 0; }
.rec-res-nombre small { display: block; color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-res-importe { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-elegido { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; padding: .55rem .75rem; border-radius: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.rec-elegido small { display: block; color: var(--muted); font-size: .8rem; }
.rec-elegido .btn-link { flex: none; }
/* Por categoría, con tus límites */
.prev-cats small.prev-limite { color: var(--pos); }
.prev-cats small.prev-limite.pasa { color: var(--neg); }
.prev-poner-limite { display: inline-block; margin-top: .15rem; padding: 0; font-size: .82rem; }
.prev-limites-todos { margin: 0 0 .5rem; }

/* ---------- Previsión: «¿Cómo vendrá…?» en visual ---------- */
.prev-titular { margin: .2rem 0 0; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.15; letter-spacing: -.01em; }
.prev-titular b { white-space: nowrap; }
.prev-futuro .prev-sub { margin-top: .15rem; }
/* La balanza: entra (verde) y sale (comprometido + habitual) en la misma escala */
.prev-balanza { display: flex; flex-direction: column; gap: .45rem; margin: 1.1rem 0 .6rem; }
.prev-bal-fila { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .6rem; }
.prev-bal-txt { font-size: .85rem; color: var(--muted); }
.prev-bal-pista { display: flex; gap: 2px; height: 1.6rem; border-radius: 8px; background: rgba(77, 77, 77, .06); overflow: hidden; }
.prev-bal-pista i { display: block; height: 100%; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.prev-bal-pista i:last-child { border-radius: 0 6px 6px 0; }
.prev-bal-entra { background: var(--pos); border-radius: 0 6px 6px 0; }
.prev-bal-fijo { background: var(--tinta); }
.prev-bal-habitual { background: #a8a8a8; }
.prev-bal-num { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 5.5rem; text-align: right; }
.prev-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0; font-size: .88rem; }
.prev-leyenda > span { display: inline-flex; align-items: center; gap: .35rem; }
.prev-leyenda small { color: var(--muted); }
.prev-punto { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; }
.prev-punto.fijo { background: var(--tinta); }
.prev-punto.habitual { background: #a8a8a8; }
/* En qué se irá: una barra por categoría con su límite */
.prev-cats-graf { margin-top: 1.4rem; }
.prev-cats-graf .prev-grupo small { font-weight: 400; }
.prev-cats-lista { list-style: none; margin: .4rem 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.prev-cat { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto; align-items: center; gap: .7rem; }
.prev-cat-nombre { min-width: 0; font-size: .92rem; line-height: 1.2; }
.prev-cat-nombre small { display: block; font-size: .76rem; }
.prev-cat-pista { position: relative; display: flex; height: .9rem; border-radius: 6px; background: rgba(77, 77, 77, .06); }
.prev-cat-pista i { display: block; height: 100%; }
.prev-cat-pista i:first-child { border-radius: 6px 0 0 6px; }
.prev-cat-habitual { opacity: .45; }
.prev-cat-exceso { background: repeating-linear-gradient(135deg, var(--neg) 0 3px, rgba(185, 28, 28, .35) 3px 6px); border-radius: 0 6px 6px 0; }
.prev-cat-limite { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; margin-left: -1px; background: var(--tinta); border-radius: 1px; }
.prev-cat-num { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 4rem; text-align: right; }
.prev-cat.pasa .prev-cat-num { color: var(--neg); }
.prev-leyenda-cats { font-size: .78rem; color: var(--muted); }
.prev-muestra { display: inline-block; width: .9rem; height: .55rem; border-radius: 2px; }
.prev-muestra.fijo { background: var(--tinta); }
.prev-muestra.habitual { background: var(--tinta); opacity: .45; }
.prev-muestra.limite { width: 2px; height: .8rem; background: var(--tinta); }
.prev-muestra.exceso { background: repeating-linear-gradient(135deg, var(--neg) 0 3px, rgba(185, 28, 28, .35) 3px 6px); }
@media (max-width: 640px) {
  .prev-cat { grid-template-columns: 1fr auto; }
  .prev-cat-pista { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .prev-bal-pista i { transition: none; } }

/* ---------- Previsión: como Movimientos (tarjetas, gráfico por categoría) y listas con categoría ---------- */
.prev-futuro { margin-bottom: 0; }
.prev-kpi-nota { display: block; margin-top: .45rem; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.bar-row.prev-bar { cursor: default; }
/* Próximos pagos y la lista completa: Fecha (o icono) · Pago · Categoría · Importe */
.prev-cab { display: flex; gap: .8rem; padding: 0 .4rem .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.prev-cab span:nth-child(1) { width: 3rem; flex: none; }
.prev-cab span:nth-child(2) { flex: 1; }
.prev-cab span:nth-child(3) { width: 11rem; flex: none; }
.prev-cab span:nth-child(4) { min-width: 6rem; flex: none; text-align: right; }
.prev-lista .prev-fila:first-of-type { border-top: 0; }
.prev-cat-col { flex: none; width: 11rem; display: flex; align-items: center; gap: .45rem; font-size: .9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prev-cat-punto { flex: none; width: .6rem; height: .6rem; border-radius: 3px; }
.prev-fila .prev-importe { min-width: 6rem; }
@media (max-width: 640px) {
  .prev-cab { display: none; }
  .prev-cat-col { width: auto; max-width: 7rem; font-size: .8rem; }
}
/* «Pagos que se repiten», plegada: el título con la flecha despliega la lista */
.prev-plegar-titulo { margin: 0; }
.prev-plegar {
  display: inline-flex; align-items: center; gap: .5rem; padding: .15rem .3rem .15rem 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; border-radius: 8px;
}
.prev-plegar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prev-flecha { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(77, 77, 77, .07); font-size: 1.1rem; line-height: 1; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.prev-plegable.abierta .prev-flecha { transform: rotate(90deg); }
.prev-plegable .help { margin-bottom: 0; }
.prev-plegable.abierta .help { margin-bottom: .6rem; }
@media (prefers-reduced-motion: reduce) { .prev-flecha { transition: none; } }

.inicio-cabeza:has(> .inicio-sin:empty) { display: none; }

/* ========== Tin, el asistente (IA): todo lo suyo va en oscuro con letra clara, y con su cabecita low-poly ========== */
:root {
  --tt-fondo: #1c212b;      /* fondo de lo que hace o dice Tin */
  --tt-fondo-2: #2a303c;    /* sus burbujas, campos y botones */
  --tt-borde: #3a4150;
  --tt-texto: #f1f3f6;
  --tt-suave: #a9b1c0;
  --tt-acento: #7dd3c0;     /* el verde menta de su cabeza */
}
.tt-cara {
  display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.25em;
  /* --tt-imagen: la foto del modelo 3D (app.js); hasta que llega, el dibujo plano */
  background: var(--tt-imagen, url(tintin.svg)) center / contain no-repeat;
}
/* Con la cabeza 3D montada dentro, el canvas ocupa el hueco y la imagen de fondo sobra */
.tt-cara.tt-3d { background-image: none; }
.tt-lienzo { display: block; width: 100%; height: 100%; }
.tt-nombre { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--tt-acento); }

/* Bloques de Tin: tarjetas, ventana del chat, comentarios */
.tt-oscuro { background: var(--tt-fondo); color: var(--tt-texto); border-color: var(--tt-borde); }
.tt-oscuro h2, .tt-oscuro h3 { color: var(--tt-texto); }
.tt-oscuro .help, .tt-oscuro small { color: var(--tt-suave); }
.tt-oscuro .btn { background: var(--tt-fondo-2); border-color: var(--tt-borde); color: var(--tt-texto); }
.tt-oscuro .btn:hover { background: #343b49; }
.tt-oscuro .btn.primary { background: var(--tt-acento); border-color: var(--tt-acento); color: #10302a; }
.tt-oscuro .btn-link { color: var(--tt-acento); }
.tt-oscuro .btn-link:hover { background: rgba(125, 211, 192, .12); }
.tt-oscuro .modal-close { color: var(--tt-suave); }
.ia-sug-card.tt-oscuro { background: var(--tt-fondo); border-color: var(--tt-borde); }
.ia-sug-card.tt-oscuro h2 { display: flex; align-items: center; gap: .45rem; }
.ia-sug-card.tt-oscuro .tt-cara { width: 1.5em; height: 1.5em; }

/* Botones que llaman a Tin, fuera de sus bloques */
.tt-btn { background: var(--tt-fondo); border-color: var(--tt-fondo); color: var(--tt-texto); }
.tt-btn:hover { background: #2a303c; }

/* Botón flotante */


/* La ventana del chat */
dialog.ia-chat.tt-oscuro { background: var(--tt-fondo); color: var(--tt-texto); border: 1px solid var(--tt-borde); }
.ia-chat.tt-oscuro .modal-head h3 { display: flex; align-items: center; gap: .5rem; }
.ia-chat.tt-oscuro .modal-head .tt-cara { width: 2.4rem; height: 2.4rem; }
.ia-chat.tt-oscuro .ia-msg-ia { background: var(--tt-fondo-2); color: var(--tt-texto); }
.ia-chat.tt-oscuro .ia-msg-ia a { color: var(--tt-acento); }
.ia-chat.tt-oscuro .ia-msg-yo { background: var(--tt-acento); color: #10302a; }
.ia-chat.tt-oscuro .ia-msg-error { background: #3b2226; color: #fca5a5; }
.ia-chat.tt-oscuro .ia-pensando span { background: var(--tt-suave); }
.ia-chat.tt-oscuro .ia-chat-form textarea { background: var(--tt-fondo-2); border-color: var(--tt-borde); color: var(--tt-texto); }
.ia-chat.tt-oscuro .ia-chat-form textarea::placeholder { color: var(--tt-suave); }
.ia-chat.tt-oscuro .ia-chat-aviso { color: var(--tt-suave); }
.ia-chat.tt-oscuro table th, .ia-chat.tt-oscuro table td { border-color: var(--tt-borde); }

/* Sus sugerencias en la tabla de movimientos */
.ia-sug-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--tt-fondo); color: var(--tt-texto); border: 1px solid var(--tt-fondo); padding: .05rem .55rem .05rem .3rem; }
.ia-sug-chip:hover { background: #2a303c; border-color: var(--c); }
.ia-sug-chip .tt-cara { width: 1.1em; height: 1.1em; }

/* Sus comentarios en los objetivos y el icono en Ajustes */
.plan-ia.tt-oscuro { background: var(--tt-fondo); color: var(--tt-texto); }
.plan-ia.tt-oscuro b { color: var(--tt-acento); }
.plugin-icon.tt-icono { background: var(--tt-fondo); display: grid; place-items: center; }
.plugin-icon.tt-icono .tt-cara { width: 1.7rem; height: 1.7rem; }

/* En Inicio: la franja de Tin, oscura, debajo de todo */
.inicio-asistente { background: rgba(28, 33, 43, .9); border-color: rgba(255, 255, 255, .08); color: var(--tt-texto); box-shadow: 0 10px 30px rgba(15, 23, 42, .22); }
.inicio-asistente .inicio-asistente-cara { width: 3.1rem; height: 3.1rem; border-radius: 0; background-color: transparent; }
.inicio-asistente .inicio-asistente-cuerpo { gap: .35rem; }
.inicio-asistente .inicio-saludo > span { background: var(--tt-fondo-2); color: var(--tt-texto); }
.inicio-asistente .inicio-saludo b { color: #fff; }
.inicio-asistente-fila input { background: var(--tt-fondo-2); border-color: var(--tt-borde); color: var(--tt-texto); }
.inicio-asistente-fila input::placeholder { color: var(--tt-suave); }
.inicio-asistente-fila input:focus { outline: 2px solid var(--tt-acento); outline-offset: -1px; }
.inicio-asistente-fila .btn.primary { background: var(--tt-acento); border-color: var(--tt-acento); color: #10302a; }
@media (max-width: 640px) { .inicio-asistente .inicio-asistente-cara { width: 2.6rem; height: 2.6rem; } }

/* ---------- Tin en todas las pantallas: fijo, centrado abajo y por encima del contenido ---------- */
.tintin {
  position: fixed; z-index: 45; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: var(--inicio-ancho); margin: 0;
  view-transition-name: tintin;   /* al cambiar de pantalla se transforma de desplegado a recogido (y al revés) */
}
.tintin .inicio-asistente { position: relative; }
.tintin-pista { display: none; margin: 0; }
.tintin-pista > span { display: inline-block; padding: .4rem .75rem; border-radius: 4px 14px 14px 14px; background: var(--tt-fondo-2); font-size: .92rem; }
.tintin-recoger { display: none; position: absolute; top: .4rem; right: .5rem; border: 0; background: none; color: var(--tt-suave); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.tintin-recoger:hover { color: #fff; }
.tintin .inicio-asistente { border-radius: 1.75rem; }
/* Recogido: un círculo oscuro con su cabeza, de 3,5rem × 3,5rem justos (radio 1,75rem: el mismo de la caja de la transición, así no
   hay salto al terminar). Es un bloque (flex) para que el formulario mida lo mismo que él. Al pasar el ratón sale el
   mensaje, deslizándose. */
.tintin-pastilla {
  display: none; box-sizing: border-box; align-items: center; height: 3.5rem; min-width: 3.5rem; margin: 0 auto; padding: 0 calc(.3rem - 1px);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.75rem; background: rgba(28, 33, 43, .94); color: var(--tt-texto);
  -webkit-backdrop-filter: var(--cristal-blur); backdrop-filter: var(--cristal-blur);
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 30px rgba(15, 23, 42, .25); transition: transform .15s;
}
.tintin-pastilla:hover { transform: translateY(-2px); }
.tintin-pastilla:focus-visible { outline: 2px solid var(--tt-acento); outline-offset: 3px; }
.tintin-pastilla .tt-cara { width: 2.9rem; height: 2.9rem; }
.tintin-pastilla-txt {
  display: inline-block; max-width: 0; opacity: 0; overflow: hidden; padding: 0;
  transition: max-width .4s cubic-bezier(.3, 1.2, .45, 1), opacity .25s, padding .4s cubic-bezier(.3, 1.2, .45, 1);
}
.tintin-pastilla:hover .tintin-pastilla-txt, .tintin-pastilla:focus-visible .tintin-pastilla-txt { max-width: 12rem; opacity: 1; padding: 0 .9rem 0 .45rem; }

/* Estados: recogido (solo el círculo) o desplegado. Fuera de Inicio, desplegado lleva la pista en vez del saludo del mes */
.tintin.recogido { width: fit-content; }
.tintin.recogido .inicio-asistente { display: none; }
.tintin.recogido .tintin-pastilla { display: flex; }
body:not(.vista-inicio) .tintin .inicio-saludo { display: none; }
body:not(.vista-inicio) .tintin .tintin-pista, body:not(.vista-inicio) .tintin .tintin-recoger { display: block; }
body:not(.vista-inicio) .tintin.sin-ia { display: none; }
/* Al entrar en Inicio, los totales esperan a que Tin se despliegue y luego suben */
.inicio-pie { transition: opacity .45s ease-out, transform .45s cubic-bezier(.3, 1.2, .45, 1); }
body.tt-entrando .inicio-pie { opacity: 0; transform: translateY(14px); }
/* Que el final de cada pantalla no quede debajo de Tin */
body:not(.vista-inicio) main { padding-bottom: 6rem; }

/* La transición de Tin entre pantallas: es la misma caja oscura, que se estira o se encoge sin desaparecer
   (el fondo va en el grupo de la transición); solo su contenido se funde: el de antes se va rápido y el nuevo
   aparece al final, cada uno a su tamaño real, sin deformarse. */
::view-transition-group(tintin) {
  animation-duration: .5s; animation-timing-function: cubic-bezier(.3, 1.2, .45, 1);
  background: rgba(28, 33, 43, .94); border-radius: 1.75rem; overflow: clip; box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
}
::view-transition-old(tintin), ::view-transition-new(tintin) { height: 100%; width: 100%; object-fit: none; object-position: center; }
::view-transition-old(tintin) { animation: tt-sale .16s ease-in both; }
::view-transition-new(tintin) { animation: tt-entra .22s ease-out .28s both; }
@keyframes tt-sale { to { opacity: 0; } }
@keyframes tt-entra { from { opacity: 0; } }
/* La cabeza de Tin también es la misma: viaja de su sitio en la pastilla a su sitio en la franja (y al revés)
   cambiando de tamaño, por encima de la caja y sin fundirse. Solo se ve una de las dos cabezas a la vez. */
.tintin-pastilla .tt-cara, .tintin .inicio-asistente-cara { view-transition-name: tintin-cara; }
::view-transition-group(tintin-cara) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, 1.2, .45, 1); }
::view-transition-old(tintin-cara) { display: none; }
::view-transition-new(tintin-cara) { animation: none; height: 100%; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(tintin), ::view-transition-old(tintin), ::view-transition-new(tintin), ::view-transition-group(tintin-cara) { animation: none; }
}

/* ---------- Tin se convierte en el chat: la ventana es la misma caja (view-transition-name: tintin) y la cabeza la misma ---------- */
dialog.ia-chat.tt-oscuro { border-radius: 1.75rem; }   /* las mismas esquinas que la caja de Tin: sin salto al terminar */
html.tt-chat .tintin { visibility: hidden; view-transition-name: none; }
html.tt-chat .tintin .tt-cara { view-transition-name: none; }
html.tt-chat dialog.ia-chat { view-transition-name: tintin; }
html.tt-chat #dlg-ia-chat .modal-head .tt-cara { view-transition-name: tintin-cara; }

/* Ajustes → Mi perfil → Tin: elegir chico o chica (cada una con su foto, en oscuro como todo lo de Tin) */
.acordeon-icono.tt-icono { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tt-fondo); display: grid; place-items: center; flex: none; }
.acordeon-icono.tt-icono .tt-cara { width: 1.5rem; height: 1.5rem; }
.tin-aspectos { display: flex; gap: .75rem; flex-wrap: wrap; }
.tin-aspecto {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 7.5rem; padding: .8rem 1rem .7rem;
  border-radius: 1.25rem; border: 2px solid transparent; background: var(--tt-fondo); color: var(--tt-texto);
  font: inherit; font-weight: 600; cursor: pointer; transition: border-color .15s, transform .15s;
}
.tin-aspecto:hover { transform: translateY(-1px); }
.tin-aspecto.active { border-color: var(--tt-acento, #7dd3c0); }
.tin-aspecto:focus-visible { outline: 2px solid var(--tt-acento, #7dd3c0); outline-offset: 2px; }
.tin-aspecto-cara { width: 4.5rem; height: 4.5rem; background: url(tintin.svg) center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .tin-aspecto { transition: none; } .tin-aspecto:hover { transform: none; } }

/* Ajustes → Mi perfil → Sonidos */
.sonidos-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.sonidos-fila > span:first-child { display: grid; gap: .15rem; }
.sonidos-fila small.help { margin: 0; }