/* Alquileres: estilos de toda la pantalla. */

:root {
  --tinta: #17212b;
  --fondo: #f4f5f7;
  --superficie: #ffffff;
  --borde: #e1e4e9;
  --borde-suave: #eef0f3;
  --borde-control: #cdd3db;
  --texto: #1b2430;
  --suave: #5f6b7b;
  --acento: #0f6e66;
  --acento-fuerte: #0a5750;
  --acento-tenue: #e2f1ef;
  --verde: #156a3e;
  --verde-fondo: #e2f3e8;
  --ambar: #8a5700;
  --ambar-fondo: #fcefd3;
  --rojo: #b3261e;
  --rojo-fondo: #fde8e6;
  --azul: #1f5fae;
  --azul-fondo: #e5eefb;
  --violeta: #6b3fa0;
  --violeta-fondo: #efe7fa;
  --gris: #56606e;
  --gris-fondo: #eceef1;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(23, 33, 43, .06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, p, dl, dd, ol, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
a { color: var(--acento); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Estructura ─────────────────────────────────────────────────────────── */

.app { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }

.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 22px 14px;
  background: var(--tinta);
  color: #fff;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.marca svg { width: 30px; height: 30px; flex: none; }

.menu { display: flex; flex-direction: column; gap: 4px; }
.menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  color: #c3cdd9;
  text-decoration: none;
  font-weight: 500;
}
.menu a svg { width: 18px; height: 18px; flex: none; }
.menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu a.activa { background: rgba(255, 255, 255, .13); color: #fff; }
.lateral :focus-visible { outline-color: #fff; }

.quien { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 0 4px 0 12px; }
.quien-nombre { min-width: 0; overflow: hidden; color: #c3cdd9; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.quien-salir { padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: #c3cdd9; font-weight: 500; cursor: pointer; }
.quien-salir:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ── Pantallas de entrada ───────────────────────────────────────────────── */

.acceso { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.acceso-caja { width: min(420px, 100%); padding: 32px 30px 30px; }
.acceso-logo { display: block; width: 44px; height: 44px; margin-bottom: 16px; }
.acceso-caja h1 { font-size: 23px; font-weight: 650; letter-spacing: -.015em; }
.acceso-texto { margin: 6px 0 20px; color: var(--suave); }
.acceso-caja .boton { width: 100%; margin-top: 20px; }

.columna { min-width: 0; }

.franja-demo {
  padding: 7px 16px;
  background: var(--ambar-fondo);
  border-bottom: 1px solid #f1dcae;
  color: var(--ambar);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.contenido { max-width: 1260px; padding: 30px 34px 56px; outline: none; }

.cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.cabecera h1, .bienvenida h1 { font-size: 25px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
.subtitulo { margin-top: 3px; color: var(--suave); }
.botonera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.volver {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--suave);
  font-weight: 500;
  text-decoration: none;
}
.volver:hover { color: var(--acento); }
.titulo-ficha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: 18px; }
.tarjeta-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--borde-suave);
}
.tarjeta-titulo h2 { font-size: 15px; font-weight: 650; }
.tarjeta-cuerpo { padding: 18px; }
.tarjeta-cuerpo .botonera { margin-top: 18px; }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.dos-iguales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.dos-columnas > .tarjeta, .dos-iguales > .tarjeta { margin-top: 0; }
.dos-iguales + .tarjeta { margin-top: 18px; }

.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cifra { display: block; padding: 16px 18px; color: inherit; text-decoration: none; }
.cifras > .cifra { margin-top: 0; }
a.cifra:hover { border-color: #bcc4cf; }
.cifra-nombre { color: var(--suave); font-size: 13px; font-weight: 600; }
.cifra-valor {
  margin-top: 4px;
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cifra-detalle { margin-top: 2px; color: var(--suave); font-size: 13px; }

.hueco { padding: 44px 24px; color: var(--suave); text-align: center; }
.hueco h2 { margin-bottom: 6px; color: var(--texto); font-size: 17px; font-weight: 650; }
.hueco .boton { margin-top: 16px; }

.bienvenida { max-width: 720px; padding: 34px 36px; }
.bienvenida > p { margin-top: 6px; color: var(--suave); }
.pasos { display: grid; gap: 16px; margin: 24px 0 28px; list-style: none; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; counter-increment: paso; }
.pasos li::before {
  content: counter(paso);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--acento-tenue);
  color: var(--acento);
  font-weight: 700;
}
.pasos span { grid-column: 2; color: var(--suave); }

.lista-avisos { margin: 0; padding: 0; list-style: none; }
.lista-avisos li + li { border-top: 1px solid var(--borde-suave); }
.lista-avisos a { display: flex; align-items: baseline; gap: 11px; padding: 11px 18px; color: inherit; text-decoration: none; }
.lista-avisos a:hover { background: #f8fafb; }
.lista-avisos li:last-child a { border-radius: 0 0 var(--radio) var(--radio); }
.lista-avisos .celda-principal, .lista-avisos .celda-secundaria { display: block; }

/* ── Tablas ─────────────────────────────────────────────────────────────── */

.tabla-caja { overflow-x: auto; }
.tabla-caja:last-child { border-radius: 0 0 var(--radio) var(--radio); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  padding: 11px 16px;
  border-bottom: 1px solid var(--borde);
  color: var(--suave);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tfoot td { border-top: 1px solid var(--borde); border-bottom: 0; background: #fafbfc; font-weight: 650; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr[data-ir] { cursor: pointer; }
.tabla tr[data-ir]:hover td { background: #f8fafb; }

.celda-principal { color: var(--texto); font-weight: 600; text-decoration: none; }
a.celda-principal:hover { color: var(--acento); text-decoration: underline; }
.celda-secundaria { margin-top: 1px; color: var(--suave); font-size: 13px; font-weight: 400; }
.tenue { color: var(--suave); }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--borde-suave); }
.filtros input, .filtros select {
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--borde-control);
  border-radius: 9px;
  background: #fff;
}
.filtros input { flex: 1 1 260px; min-width: 180px; }
.filtros select { flex: 0 1 auto; max-width: 100%; }

.pie-lista {
  display: flex;
  justify-content: space-between;
  gap: 6px 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--borde-suave);
  color: var(--suave);
  font-size: 14px;
}
.pie-lista strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ── Etiquetas y botones ────────────────────────────────────────────────── */

.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.etiqueta.azul { background: var(--azul-fondo); color: var(--azul); }
.etiqueta.violeta { background: var(--violeta-fondo); color: var(--violeta); }
.etiqueta.verde { background: var(--verde-fondo); color: var(--verde); }
.etiqueta.gris { background: var(--gris-fondo); color: var(--gris); }
.etiqueta.ambar { background: var(--ambar-fondo); color: var(--ambar); }
.etiqueta.rojo { background: var(--rojo-fondo); color: var(--rojo); }

/* Importes con signo: ingresos en verde, gastos en rojo. */
.ingreso { color: var(--verde); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gasto { color: var(--rojo); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.punto { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gris); }
.punto.rojo { background: var(--rojo); }
.punto.ambar { background: #d48a06; }
.punto.verde { background: #1e9a5a; }

/* Pestañas dentro de una sección:  <nav class="pestanas"><a class="activa">…</a><a>…</a></nav>  */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--borde); }
.pestanas a, .pestanas button {
  margin-bottom: -1px;
  padding: 9px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--suave);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.pestanas a:hover, .pestanas button:hover { color: var(--texto); }
.pestanas .activa { border-bottom-color: var(--acento); color: var(--acento); }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.boton:disabled { opacity: .6; cursor: default; }
.boton.principal { background: var(--acento); color: #fff; }
.boton.principal:hover:not(:disabled) { background: var(--acento-fuerte); }
.boton.secundario { background: var(--superficie); border-color: var(--borde-control); }
.boton.secundario:hover:not(:disabled) { background: #f3f5f7; }
.boton.peligro { background: var(--rojo); color: #fff; }
.boton.peligro:hover:not(:disabled) { background: #96201a; }
.boton.discreto { padding: 6px 9px; background: none; color: var(--suave); font-weight: 500; }
.boton.discreto:hover { background: var(--gris-fondo); color: var(--texto); }
.boton.discreto.rojo:hover { background: var(--rojo-fondo); color: var(--rojo); }
.boton.grande { padding: 11px 20px; font-size: 16px; }

/* ── Ficha ──────────────────────────────────────────────────────────────── */

.datos { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 9px 14px; }
.datos dt { color: var(--suave); }
.datos dd { overflow-wrap: anywhere; }
.datos .notas { white-space: pre-wrap; }
.renta-grande {
  margin-bottom: 16px;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.renta-grande small { color: var(--suave); font-size: 15px; font-weight: 500; letter-spacing: 0; }

/* ── Diálogos y formularios ─────────────────────────────────────────────── */

.modal {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(23, 33, 43, .28);
  color: var(--texto);
}
.modal.estrecho { width: min(450px, calc(100vw - 28px)); }
.modal.ancho { width: min(940px, calc(100vw - 28px)); }
.modal::backdrop { background: rgba(23, 33, 43, .48); }
.modal-caja { display: flex; flex-direction: column; max-height: calc(100vh - 28px); }
.modal-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.modal-cabecera h2 { font-size: 19px; font-weight: 650; line-height: 1.3; }
.modal-cerrar {
  margin: -4px -8px 0 0;
  padding: 2px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--suave);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.modal-cerrar:hover { background: var(--gris-fondo); color: var(--texto); }
.modal-cuerpo { padding: 14px 22px 6px; overflow-y: auto; }
.modal-nota { margin-bottom: 14px; color: var(--suave); }
.modal-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; }

.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.campo { grid-column: 1 / -1; min-width: 0; }
.campo.mitad { grid-column: auto; }
.campo > label, .campo-nombre { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.obligatorio { color: var(--rojo); }
.casilla { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; cursor: pointer; }
.casilla input { width: 17px; height: 17px; margin: 0; accent-color: var(--acento); }
.campo input:not([type="radio"]):not([type="checkbox"]), .campo select, .campo textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borde-control);
  border-radius: 9px;
  background: #fff;
}
.campo textarea { display: block; min-height: 74px; resize: vertical; }
.campo input:not([type="radio"]):focus, .campo select:focus, .campo textarea:focus, .filtros input:focus, .filtros select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}
.con-sufijo { position: relative; }
.con-sufijo input:not([type="radio"]) { padding-right: 76px; }
.con-sufijo span {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--suave);
  font-size: 14px;
  pointer-events: none;
}
.ayuda { margin-top: 4px; color: var(--suave); font-size: 13px; }
.error-campo { margin-top: 4px; color: var(--rojo); font-size: 13px; font-weight: 600; }
.con-error input:not([type="radio"]), .con-error select, .con-error textarea { border-color: var(--rojo); }
.error-general {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--rojo-fondo);
  color: var(--rojo);
  font-weight: 600;
}
p + .error-general { margin-top: 14px; }

.segmentos { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--gris-fondo); }
.segmento { position: relative; }
.segmento input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmento span { display: block; padding: 7px 20px; border-radius: 8px; color: var(--suave); font-weight: 600; }
.segmento input:checked + span { background: #fff; color: var(--texto); box-shadow: 0 1px 2px rgba(23, 33, 43, .16); }
.segmento input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 1px; }

/* ── Avisos breves ──────────────────────────────────────────────────────── */

.avisos { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: grid; gap: 8px; justify-items: end; }
.aviso {
  max-width: min(440px, calc(100vw - 44px));
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--tinta);
  box-shadow: 0 8px 24px rgba(23, 33, 43, .25);
  color: #fff;
  font-weight: 500;
  animation: entrar .18s ease-out;
}
.aviso.error { background: var(--rojo); }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .aviso { animation: none; } }

/* ── Pantallas estrechas ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .lateral {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
  }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .menu a { padding: 8px 10px; }
  .quien { margin-top: 0; padding: 0; }
  .contenido { padding: 20px 16px 44px; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-columnas, .dos-iguales { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .menu a svg { display: none; }
  .cifra-valor { font-size: 22px; }
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .campo.mitad { grid-column: 1 / -1; }
  .bienvenida { padding: 24px 20px; }
}