:root {
  --fondo: #0b1220;
  --superficie: #131c2e;
  --superficie-2: #1b2740;
  --borde: #24334f;
  --texto: #e8eefc;
  --sutil: #8fa1c4;
  --acento: #1958f4;
  --acento-claro: #00bdfc;
  --verde: #16a34a;
  --amarillo: #d99e0b;
  --naranja: #ea7317;
  --rojo: #dc2626;
  --radio: 16px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --lateral-ancho: 232px;
}

/* Claro por preferencia del sistema, salvo que se fuerce oscuro desde la app. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --fondo: #f4f6fb; --superficie: #ffffff; --superficie-2: #eef2f9;
    --borde: #dde4f0; --texto: #0f1a2e; --sutil: #5b6b88;
  }
}

/* Claro forzado desde la app, sin importar el sistema. */
:root[data-tema="claro"] {
  --fondo: #f4f6fb; --superficie: #ffffff; --superficie-2: #eef2f9;
  --borde: #dde4f0; --texto: #0f1a2e; --sutil: #5b6b88;
}

/* Oscuro forzado: los valores de :root ya lo son, se declara para ganar. */
:root[data-tema="oscuro"] {
  --fondo: #0b1220; --superficie: #131c2e; --superficie-2: #1b2740;
  --borde: #24334f; --texto: #e8eefc; --sutil: #8fa1c4;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px; line-height: 1.45; overscroll-behavior-y: none;
}

.oculto { display: none !important; }
.sutil { color: var(--sutil); font-size: 13px; }
.error { color: var(--rojo); font-size: 14px; }
.negativo { color: var(--rojo); }
.positivo { color: var(--verde); }

/* ─── acceso ─── */
.acceso { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--fondo); z-index: 90; }
.acceso-caja { width: 100%; max-width: 320px; text-align: center; }
.marca { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 4px; }
#form-acceso { display: grid; gap: 12px; margin-top: 24px; }

input, select, textarea {
  width: 100%; padding: 12px 14px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 12px;
  font-size: 16px; font-family: inherit;
}
textarea { background: var(--superficie-2); resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

.boton-principal {
  width: 100%; padding: 13px; border: 0; border-radius: 12px;
  background: var(--acento); color: #fff; font-size: 16px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.boton-principal:active { transform: scale(0.985); }
.boton-secundario {
  padding: 10px 14px; background: var(--superficie-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 12px;
  font-size: 15px; font-family: inherit; cursor: pointer;
}
.boton-texto { background: none; border: 0; color: var(--sutil); font-size: 15px; font-family: inherit; padding: 10px; cursor: pointer; }
.enlace { background: none; border: 0; color: var(--acento); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 0; }
.enlace-peligro { color: var(--rojo); }

/* ─── estructura responsiva ─── */
#app { display: flex; min-height: 100vh; }

.lateral { display: none; }

.contenido {
  flex: 1; min-width: 0;
  /* Espacio para que el botón flotante no tape el último renglón. */
  padding: 0 16px calc(140px + var(--seguro-abajo));
  max-width: 640px; margin: 0 auto;
}

.cabecera { display: flex; align-items: flex-end; justify-content: space-between; padding: 22px 0 14px; }
h1 { font-size: 27px; margin: 0; letter-spacing: -0.6px; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }
.fila-titulo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 8px 24px -20px rgb(0 0 0 / .45);
}
.rejilla { display: block; }
.campos-fila { display: grid; gap: 12px; margin-bottom: 12px; }

@media (min-width: 900px) {
  .contenido { max-width: none; padding: 0 32px 48px; }

  .lateral {
    display: flex; flex-direction: column; gap: 6px;
    width: var(--lateral-ancho); flex: 0 0 var(--lateral-ancho);
    padding: 22px 14px; border-right: 1px solid var(--borde);
    background: var(--superficie); position: sticky; top: 0; height: 100vh;
  }
  .lateral-marca { font-size: 19px; font-weight: 700; padding: 0 10px 18px; letter-spacing: -0.4px; }
  .lateral-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .nav-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px 12px; border: 0; border-radius: 10px; cursor: pointer;
    background: none; color: var(--sutil); font-family: inherit; font-size: 15px; text-align: left;
  }
  .nav-item i { font-style: normal; width: 20px; height: 20px; display: inline-flex; }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-item:hover { background: var(--superficie-2); color: var(--texto); }
  .nav-item.activo { background: var(--acento); color: #fff; }
  .boton-captura-lateral {
    width: 100%; padding: 11px; border: 0; border-radius: 12px;
    background: var(--acento); color: #fff; font-size: 15px; font-weight: 600;
    font-family: inherit; cursor: pointer;
  }

  .rejilla { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
  .campos-fila { grid-template-columns: repeat(3, 1fr); align-items: end; }
  .cabecera { padding: 30px 0 18px; }
  h1 { font-size: 32px; }
}

@media (min-width: 1400px) {
  .contenido { max-width: 1240px; margin: 0 auto; }
}

/* ─── semáforo ─── */
.semaforo {
  display: flex; align-items: center; gap: 16px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 20px; margin-bottom: 14px;
}
.semaforo-luz { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px; background: var(--sutil); transition: background .3s; }
.semaforo.verde .semaforo-luz { background: var(--verde); box-shadow: 0 0 0 6px rgb(22 163 74 / .15); }
.semaforo.amarillo .semaforo-luz { background: var(--amarillo); box-shadow: 0 0 0 6px rgb(217 158 11 / .15); }
.semaforo.rojo .semaforo-luz { background: var(--rojo); box-shadow: 0 0 0 6px rgb(220 38 38 / .15); }
.monto-grande { font-size: 30px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.semaforo.rojo .monto-grande { color: var(--rojo); }

/* ─── alertas ─── */
.alerta {
  border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 10px;
  border: 1px solid; line-height: 1.45;
}
.alerta-roja { background: rgb(220 38 38 / .12); border-color: rgb(220 38 38 / .35); }
.alerta-naranja { background: rgb(234 115 23 / .12); border-color: rgb(234 115 23 / .35); }
.alerta-verde { background: rgb(22 163 74 / .12); border-color: rgb(22 163 74 / .35); }
.alerta-titulo { font-weight: 700; display: block; margin-bottom: 2px; }

/* ─── listas ─── */
.lista > * { padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lista > *:last-child { border-bottom: 0; padding-bottom: 0; }
.renglon { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.renglon-izq { min-width: 0; flex: 1; }
.renglon-titulo { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renglon-monto { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.acciones { display: flex; gap: 10px; flex: 0 0 auto; }

/* ─── barras ─── */
.barra { height: 6px; background: var(--superficie-2); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.barra-relleno { height: 100%; background: var(--acento); border-radius: 99px; transition: width .3s; }
.barra-relleno.medio { background: var(--amarillo); }
.barra-relleno.alto { background: var(--naranja); }
.barra-relleno.critico { background: var(--rojo); }
.lista-topes > * { padding: 10px 0; }

/* ─── tiras de totales ─── */
.tiras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 900px) { .tiras { grid-template-columns: repeat(4, 1fr); } }
.tira {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .15);
}
.tira-valor { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }

/* ─── tarjetas de crédito ─── */
.credito { padding: 14px 0; border-bottom: 1px solid var(--borde); }
.credito:last-child { border-bottom: 0; padding-bottom: 0; }
.credito-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.credito-punto { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.credito-nombre { font-weight: 600; flex: 1; }
.credito-pct { font-variant-numeric: tabular-nums; font-weight: 700; }
.credito-datos { display: flex; justify-content: space-between; font-size: 13px; color: var(--sutil); margin-top: 6px; gap: 8px; flex-wrap: wrap; }
.insignia-nivel { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .4px; }
.nivel-critico { background: var(--rojo); color: #fff; }
.nivel-alto { background: var(--naranja); color: #fff; }
.nivel-medio { background: var(--amarillo); color: #000; }
.nivel-bajo { background: var(--verde); color: #fff; }

/* ─── simulador ─── */
.campo { display: block; margin-bottom: 12px; }
.campo > span { display: block; font-size: 13px; color: var(--sutil); margin-bottom: 6px; }
.opcion { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin-bottom: 12px; }
.opcion.mejor { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.opcion-cabeza { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; }
.opcion-nombre { font-size: 18px; font-weight: 700; }
.insignia { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--acento); color: #fff; padding: 3px 8px; border-radius: 99px; }
.float-dias { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dato { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; gap: 12px; }
.dato span:first-child { color: var(--sutil); }
.veredicto { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); font-size: 14px; line-height: 1.5; }
.etiqueta-gris { display: inline-block; font-size: 11px; background: var(--superficie-2); color: var(--sutil); padding: 2px 7px; border-radius: 99px; margin-left: 6px; }

/* ─── gráfica ─── */
.grafica { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 8px; }
.barra-q { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; }
.seg { border-radius: 2px 2px 0 0; min-height: 2px; }
.seg-msi { background: var(--acento); }
.seg-sus { background: var(--acento-claro); }
.seg-fij { background: var(--sutil); }
.grafica-etiquetas { display: flex; gap: 3px; margin-top: 6px; }
.grafica-etiquetas > div { flex: 1; font-size: 9px; color: var(--sutil); text-align: center; overflow: hidden; }
.leyenda-punto { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }

/* ─── pestañas de ajustes ─── */
.pestanas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 99px;
  background: var(--superficie-2); border: 1px solid var(--borde);
  color: var(--sutil); font-size: 14px; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.pestana.activa { background: var(--acento); border-color: var(--acento); color: #fff; }

/* ─── navegación móvil ─── */
.navegacion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--superficie); border-top: 1px solid var(--borde);
  padding-bottom: var(--seguro-abajo);
}
.nav-boton {
  flex: 1; background: none; border: 0; color: var(--sutil);
  font-size: 10px; font-family: inherit; padding: 8px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.nav-boton span { display: block; height: 20px; }
.nav-boton svg { width: 20px; height: 20px; }
.nav-boton.activo { color: var(--acento); }

/* ─── captura ─── */
.fab {
  position: fixed; right: 18px; z-index: 45; bottom: calc(74px + var(--seguro-abajo));
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--acento); color: #fff; font-size: 29px; line-height: 1;
  box-shadow: 0 6px 20px rgb(25 88 244 / .4); cursor: pointer;
}
.fab:active { transform: scale(0.94); }

.hoja { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.hoja-fondo { position: absolute; inset: 0; background: rgb(0 0 0 / .55); }
.hoja-caja {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto;
  background: var(--superficie); border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(16px + var(--seguro-abajo));
  animation: subir .22s ease-out; max-height: 92vh; overflow-y: auto;
}
.hoja-caja-form { padding-bottom: 24px; }
@media (min-width: 900px) {
  .hoja { align-items: center; }
  .hoja-caja { border-radius: 20px; max-height: 86vh; padding-bottom: 20px; animation: aparecer-caja .18s ease-out; }
  .hoja-agarre { display: none; }
}
@keyframes subir { from { transform: translateY(100%); } }
@keyframes aparecer-caja { from { opacity: 0; transform: scale(.97); } }
.hoja-agarre { width: 38px; height: 4px; background: var(--borde); border-radius: 99px; margin: 0 auto 14px; }

.captura-monto { font-size: 42px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -1.5px; padding: 4px 0 12px; }
.captura-dictado { display: flex; gap: 8px; margin-bottom: 12px; }
.captura-dictado input { flex: 1; }
.boton-dictado { flex: 0 0 50px; border: 0; border-radius: 12px; background: var(--acento); color: #fff; font-size: 19px; cursor: pointer; }
.propuesta { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.propuesta-dudosa { border-color: var(--amarillo); }
.propuesta button { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 8px 14px; background: var(--acento); color: #fff; font-family: inherit; font-size: 14px; cursor: pointer; }

.captura-medio, .captura-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.captura-medio::-webkit-scrollbar, .captura-chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 10px 15px; border-radius: 99px;
  background: var(--superficie-2); border: 1px solid var(--borde);
  color: var(--texto); font-size: 15px; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.chip:active, .chip.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.chip-medio { font-size: 13px; padding: 7px 13px; }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tecla {
  padding: 16px; font-size: 23px; font-weight: 500; font-family: inherit;
  background: var(--superficie-2); border: 1px solid var(--borde);
  color: var(--texto); border-radius: 14px; cursor: pointer;
}
.tecla:active { background: var(--acento); color: #fff; }
.captura-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

/* ─── formulario genérico ─── */
#form-generico { display: grid; gap: 12px; margin-top: 10px; }
#form-generico .fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-acciones { display: flex; gap: 10px; margin-top: 6px; }
.form-acciones .boton-principal { flex: 1; }
.casilla { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.casilla input { width: 20px; height: 20px; flex: 0 0 20px; }

/* ─── brindis ─── */
.brindis {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(130px + var(--seguro-abajo)); z-index: 70;
  background: var(--texto); color: var(--fondo);
  padding: 11px 18px; border-radius: 99px; font-size: 14px; font-weight: 600;
  animation: aparecer .2s;
}
@media (min-width: 900px) { .brindis { bottom: 30px; } }
@keyframes aparecer { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ─── overrides de escritorio (al final para que ganen por orden) ─── */
@media (min-width: 900px) {
  .navegacion { display: none; }
  .fab { display: none; }
  .lateral { display: flex; }
}

/* ─── pantalla del mes ─── */
.mes-nav { display: flex; gap: 6px; }
#mes-hoy { width: auto; padding: 0 12px; font-size: 13px; }

.resumen-mes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (min-width: 900px) { .resumen-mes { grid-template-columns: repeat(3, 1fr); } }
.resumen-caja {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 15px;
}
.resumen-caja.destacada { grid-column: 1 / -1; }
@media (min-width: 900px) { .resumen-caja.destacada { grid-column: auto; } }
.resumen-caja.buena { border-color: rgb(22 163 74 / .45); background: rgb(22 163 74 / .08); }
.resumen-caja.mala { border-color: rgb(220 38 38 / .45); background: rgb(220 38 38 / .08); }
.resumen-valor { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.7px; }
.resumen-caja.buena .resumen-valor { color: var(--verde); }
.resumen-caja.mala .resumen-valor { color: var(--rojo); }

.pago {
  border: 1px solid var(--borde); border-radius: 14px;
  padding: 13px; margin-bottom: 10px; background: var(--superficie-2);
}
.pago:last-child { margin-bottom: 0; }
.pago-cabeza { display: flex; align-items: center; gap: 10px; }
.pago-nombre { font-weight: 700; font-size: 16px; flex: 1; }
.pago-total { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pago-fecha { font-size: 13px; color: var(--sutil); margin-top: 2px; }
.pago-urgente { color: var(--naranja); font-weight: 600; }
.pago-desglose { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--sutil); margin-top: 8px; }
.pago-detalle { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); display: none; }
.pago.abierto .pago-detalle { display: block; }
.pago-linea { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; gap: 10px; }
.pago-linea span:first-child { color: var(--sutil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pago-ver { background: none; border: 0; color: var(--acento); font-size: 12px; font-family: inherit; cursor: pointer; padding: 6px 0 0; }

.mes-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mes-fila-nombre { font-size: 14px; }

/* ─── proyección ─── */
.proy-dia { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 8px; background: var(--superficie-2); }
.proy-dia.proy-negativo { border-color: rgb(220 38 38 / .5); background: rgb(220 38 38 / .08); }
.proy-dia-cabeza { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; }
.proy-evento { display: flex; justify-content: space-between; font-size: 13px; color: var(--sutil); padding: 3px 0 0; gap: 10px; }
.proy-evento span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btn-proyectar { align-self: end; }

/* saldo editable en el renglón */
.saldo-inline { width: 118px; padding: 8px 10px; text-align: right; font-variant-numeric: tabular-nums; }

/* ─── cajitas agrupadas ─── */
.grupo-cuentas { margin-bottom: 18px; }
.grupo-cuentas:last-child { margin-bottom: 0; }
.grupo-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); margin-bottom: 4px; }
.grupo-nombre { font-weight: 700; font-size: 15px; }
.cuenta-fila { display: flex; align-items: center; gap: 10px; padding: 11px 0 11px 10px; border-bottom: 1px solid var(--borde); border-left: 3px solid var(--tinte); }
.cuenta-fila:last-child { border-bottom: 0; }
.cuenta-icono { font-size: 20px; flex: 0 0 24px; text-align: center; }
.etiqueta-tinte { display: inline-block; font-size: 11px; background: var(--tinte); color: #fff; padding: 2px 8px; border-radius: 99px; margin-left: 6px; vertical-align: middle; }

/* ─── selectores de estilo en el formulario ─── */
.rejilla-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.pastilla-emoji { padding: 8px 0; font-size: 19px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; }
.pastilla-emoji.activo { background: var(--acento); border-color: var(--acento); }
.rejilla-color { display: flex; gap: 8px; flex-wrap: wrap; }
.pastilla-color { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.pastilla-color.activo { border-color: var(--texto); box-shadow: 0 0 0 2px var(--fondo) inset; }
.campo-sufijo { display: flex; align-items: center; gap: 8px; }
.campo-sufijo input { flex: 1; }
.campo-sufijo span { color: var(--sutil); font-size: 14px; white-space: nowrap; }

/* ─── selector de tema y pie de versión ─── */
.selector-tema { display: flex; gap: 6px; }
.selector-tema button {
  flex: 1; padding: 10px; border-radius: 10px; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borde);
  color: var(--sutil); font-family: inherit; font-size: 14px;
}
.selector-tema button.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.pie-version { text-align: center; padding: 18px 0 4px; font-size: 12px; color: var(--sutil); }
.aviso-version {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(130px + var(--seguro-abajo)); z-index: 75;
  background: var(--acento); color: #fff; padding: 10px 16px;
  border-radius: 99px; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 0; font-family: inherit; box-shadow: 0 4px 16px rgb(25 88 244 / .4);
}
@media (min-width: 900px) { .aviso-version { bottom: 30px; } }

/* ─── el día ─── */
.hero-dia {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 160% at 0% 0%, rgb(0 189 252 / .22), transparent 55%),
    linear-gradient(140deg, #14295e 0%, #1958f4 115%);
  border: 1px solid rgb(255 255 255 / .10);
  border-radius: 22px; padding: 26px 22px; margin-bottom: 12px;
  color: #fff;
  box-shadow: 0 12px 34px -16px rgb(25 88 244 / .55);
}
:root[data-tema="claro"] .hero-dia { box-shadow: 0 14px 34px -18px rgb(25 88 244 / .45); }
.hero-etiqueta { font-size: 13px; font-weight: 600; letter-spacing: .3px; opacity: .85; text-transform: uppercase; }
.hero-monto {
  font-size: 46px; font-weight: 800; letter-spacing: -1.8px;
  font-variant-numeric: tabular-nums; margin: 6px 0 4px; line-height: 1;
}
.hero-sub { font-size: 13px; opacity: .8; }
.tiras-dia { grid-template-columns: 1fr 1fr; }
.vacio-dia { text-align: center; padding: 10px 0 4px; }

/* ═══════════════════════════════════════════════════════════════
   PASE DE DISEÑO v13 — fuera el look genérico.
   Tipografía con carácter, profundidad real y detalle fintech.
   Va al final a propósito: gana por cascada sobre lo anterior.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --fondo: #070c18;
  --superficie: #0d1526;
  --superficie-2: #141f38;
  --borde: rgb(148 163 197 / .13);
  --sutil: #7e91b8;
  --radio: 20px;
  --f-texto: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-numeros: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
}
:root[data-tema="claro"] {
  --fondo: #f2f5fb; --superficie: #ffffff; --superficie-2: #e9eef8;
  --borde: rgb(15 26 46 / .09); --sutil: #5b6b88;
}

body {
  font-family: var(--f-texto);
  /* Resplandor sutil de fondo: profundidad sin ruido */
  background:
    radial-gradient(60% 40% at 85% -5%, rgb(25 88 244 / .10), transparent 60%),
    radial-gradient(45% 30% at 0% 0%, rgb(0 189 252 / .05), transparent 55%),
    var(--fondo);
  background-attachment: fixed;
}

/* Los números son la voz de la app: fuente de display, no del sistema */
h1, .monto-grande, .hero-monto, .tira-valor, .resumen-valor, .float-dias,
.pago-total, .captura-monto, .semana-total {
  font-family: var(--f-numeros);
}
h1 { font-weight: 700; letter-spacing: -0.8px; }

/* Títulos de tarjeta como micro-etiquetas — firma visual, no h2 genéricos */
h2 {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.3px; color: var(--sutil);
}

/* Tarjetas: menos borde, más luz */
.tarjeta, .tira, .opcion, .semaforo {
  border: 1px solid var(--borde);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .03),
    0 1px 2px rgb(0 0 0 / .25),
    0 12px 32px -24px rgb(0 0 0 / .6);
}
:root[data-tema="claro"] .tarjeta,
:root[data-tema="claro"] .tira,
:root[data-tema="claro"] .opcion {
  box-shadow: 0 1px 2px rgb(15 26 46 / .05), 0 10px 28px -22px rgb(15 26 46 / .18);
}

/* El héroe del día: gradiente hondo + aro decorativo */
.hero-dia {
  border-radius: 24px; padding: 28px 24px;
  background:
    radial-gradient(140% 180% at 100% 120%, rgb(0 189 252 / .28), transparent 55%),
    radial-gradient(100% 140% at 0% 0%, rgb(84 130 255 / .35), transparent 60%),
    linear-gradient(150deg, #0e1f4d 0%, #1958f4 130%);
}
.hero-dia::after {
  content: ''; position: absolute; right: -70px; top: -70px;
  width: 210px; height: 210px; border-radius: 50%;
  border: 26px solid rgb(255 255 255 / .06);
}
.hero-monto { font-size: 52px; font-weight: 700; letter-spacing: -2.2px; }
.hero-etiqueta { font-size: 11px; letter-spacing: 1.6px; }

/* Centavos chicos — el detalle al centavo, con jerarquía */
.centavos { font-size: .48em; font-weight: 600; opacity: .75; letter-spacing: 0; vertical-align: 6%; }

/* Botones con gradiente y presencia */
.boton-principal, .fab, .boton-captura-lateral, .boton-dictado {
  background: linear-gradient(135deg, #1958f4, #3f7cff);
  box-shadow: 0 6px 18px -8px rgb(25 88 244 / .55);
}
.boton-principal:active, .fab:active { transform: scale(.97); }

/* Navegación móvil: el activo se marca con pastilla, no solo color */
.navegacion { background: rgb(13 21 38 / .92); backdrop-filter: blur(18px); }
:root[data-tema="claro"] .navegacion { background: rgb(255 255 255 / .92); }
.nav-boton { position: relative; padding-top: 10px; }
.nav-boton.activo::before {
  content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, #1958f4, #00bdfc);
}

/* Renglones: respiración y hover en escritorio */
.lista > * { padding: 12px 0; }
@media (min-width: 900px) {
  .renglon:hover .renglon-titulo { color: var(--acento-claro); transition: color .15s; }
  .nav-item { transition: background .15s, color .15s; }
  .tarjeta { transition: border-color .2s; }
  .tarjeta:hover { border-color: rgb(148 163 197 / .22); }
}

/* La respuesta de la IA como burbuja con acento */
.burbuja-ia {
  margin-top: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.55;
  background: linear-gradient(135deg, rgb(25 88 244 / .14), rgb(0 189 252 / .07));
  border: 1px solid rgb(25 88 244 / .3); border-radius: 4px 14px 14px 14px;
}
.semana-total { font-size: 27px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.tarjeta-detectadas { border-color: rgb(0 189 252 / .35); }

/* Tiras con la cifra como protagonista */
.tira-valor { font-size: 23px; letter-spacing: -0.8px; }
.resumen-valor { font-size: 27px; }

/* Formularios y chips más pulidos */
input, select, textarea { border-radius: 13px; }
.chip { font-weight: 600; }
.hoja-caja { border: 1px solid var(--borde); border-bottom: 0; }
@media (min-width: 900px) { .hoja-caja { border-bottom: 1px solid var(--borde); } }

/* ─── interruptor día / noche (siempre a la vista) ─── */
.interruptor-tema {
  position: fixed; z-index: 55;
  top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde);
  box-shadow: 0 2px 10px rgb(0 0 0 / .25);
  backdrop-filter: blur(12px);
  transition: transform .18s, background .2s, color .2s;
}
.interruptor-tema:active { transform: scale(.9) rotate(-18deg); }
.interruptor-tema svg { width: 20px; height: 20px; }

/* Se muestra el icono del modo AL QUE vas a cambiar, no el actual. */
.interruptor-tema .icono-sol { display: none; }
.interruptor-tema .icono-luna { display: block; }
.interruptor-tema.es-noche .icono-sol { display: block; color: #ffc94d; }
.interruptor-tema.es-noche .icono-luna { display: none; }

@media (min-width: 900px) {
  .interruptor-tema { top: 22px; right: 32px; }
}
/* En móvil el botón vive junto al título: se le abre espacio a la cabecera. */
@media (max-width: 899px) {
  .cabecera { padding-right: 52px; }
}

/* ─── pagos: ventana de ciclo, cargo real, ya pagado ─── */
.pago-ventana {
  font-size: 12px; color: var(--sutil); padding: 8px 10px; margin-bottom: 8px;
  background: rgb(148 163 197 / .08); border-radius: 9px; line-height: 1.5;
}
.etiqueta-real {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  background: var(--verde); color: #fff; padding: 1px 6px; border-radius: 99px; margin-left: 5px;
}
.etiqueta-pagado {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  color: var(--verde); text-align: right; margin-top: 2px;
}
.pago-hecho { opacity: .55; }
.pago-hecho .pago-total { text-decoration: line-through; text-decoration-thickness: 2px; }


/* ─── quincena (el ritual) ─── */
.quincena { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); }
.quincena-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.quincena-monto { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.quincena-lista .renglon { padding: 8px 0; border-bottom: 1px solid var(--borde); }
.quincena-lista .renglon:last-child { border-bottom: 0; }
.quincena-sobra { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--borde); flex-wrap: wrap; }
.quincena-sobra .valor { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tachado { text-decoration: line-through; opacity: .55; }
.etiqueta-ok { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgb(22 163 74 / .15); color: var(--verde); margin-left: 6px; }
.boton-chico { border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); border-radius: 10px; padding: 7px 12px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.boton-chico.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton-chico.peligro { color: var(--rojo); }
.explica { font-size: 13px; color: var(--sutil); margin-top: 6px; line-height: 1.4; }
.explica b { color: var(--texto); }

/* ─── conciliación / MSI / reset ─── */
textarea { min-height: 140px; resize: vertical; font-family: inherit; }
.lista-msi .renglon { padding: 9px 0; border-bottom: 1px solid var(--borde); }
.lista-msi .renglon:last-child { border-bottom: 0; }
.progreso-msi { height: 4px; background: var(--superficie-2); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.progreso-msi > div { height: 100%; background: var(--acento); }
.zona-peligro { border-color: rgb(220 38 38 / .45); }
.zona-peligro h2 { color: var(--rojo); }
.opcion-reset { display: block; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.opcion-reset:has(input:checked) { border-color: var(--rojo); background: rgb(220 38 38 / .08); }
.opcion-reset input { width: auto; margin-right: 8px; }
.pasos { padding-left: 18px; margin: 8px 0; font-size: 14px; line-height: 1.5; }
.pasos li { margin-bottom: 6px; }
code.token { display: block; word-break: break-all; background: var(--superficie-2); padding: 10px; border-radius: 10px; font-size: 13px; user-select: all; }
.ciclo-linea { font-size: 12px; color: var(--sutil); margin-top: 6px; }
.ciclo-linea.alerta-texto { color: var(--naranja); font-weight: 600; }
.chip.chip-cuenta { border-style: dashed; }

/* ═══════════════════════════════════════════════════════════════════════
   v19 — LA MISMA DIRECCIÓN, MÁS LEJOS
   Se conserva todo lo de arriba (gradiente hondo, profundidad, Space
   Grotesk, pastilla del nav). Aquí se le sube: color de marca por tarjeta,
   más contraste de escala, y las piezas nuevas (curva, gestos, carga)
   dibujadas en ese mismo idioma — con luz y volumen, no planas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El nombre nunca se corta: antes decía "Pagar Mercado ..." ── */
.renglon-titulo, .pago-linea span:first-child, .proy-evento span:first-child {
  white-space: normal; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ── Más contraste de escala: la cifra manda, la etiqueta se hace chica ── */
.hero-monto { font-size: 54px; letter-spacing: -2.6px; }
@media (min-width: 900px) { .hero-monto { font-size: 66px; letter-spacing: -3.4px; } }
.hero-etiqueta { font-size: 10px; letter-spacing: 1.8px; opacity: .78; }
.tira-valor { font-size: 25px; letter-spacing: -1px; }
.resumen-valor { font-size: 29px; letter-spacing: -1.4px; }
.pago-total { font-size: 21px; letter-spacing: -.7px; }
.quincena-monto { font-size: 30px; letter-spacing: -1.4px; }

/* ── La curva del saldo, dentro del héroe ──
   Va sobre el gradiente azul, así que aquí el acento se vuelve luz. */
.hero-chispa { margin-top: 16px; }
.hero-chispa .grafica-svg { overflow: visible; }
.hero-chispa {
  --acento: #ffffff;
  --mal: #ffb4ad;
  --superficie: transparent;
  --borde: rgb(255 255 255 / .18);
  --sutil: rgb(255 255 255 / .6);
}
.hero-chispa .g-linea { stroke-width: 2.5; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35)); }
.hero-nota { font-size: 13px; opacity: .85; margin-top: 8px; }
.hero-nota b { opacity: 1; font-weight: 700; }

/* ── Gráficas ── */
.grafica-envoltura { position: relative; }
.grafica-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.g-rejilla { stroke: var(--borde); stroke-width: 1; }
.g-base { stroke: rgb(220 38 38 / .5); stroke-width: 1; }
.g-eje { fill: var(--sutil); font-size: 10px; font-weight: 600; font-family: var(--f-numeros); }
.g-linea { fill: none; stroke: var(--acento); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.g-linea-mal { stroke: var(--rojo); }
.g-punto { stroke: var(--superficie); stroke-width: 2.5; }
.g-cursor { stroke: var(--sutil); stroke-width: 1; }
.grafica-caja { margin: 0 -4px; }

.globo {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--superficie-2); border: 1px solid var(--acento);
  border-radius: 12px; padding: 9px 12px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / .6); white-space: nowrap;
  transform: translate(-50%, -100%); margin-top: -10px;
}
.globo b { font-family: var(--f-numeros); font-size: 15px; font-weight: 700; }

.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--sutil); font-weight: 600; margin-top: 12px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; font-style: normal; }
.seg-otr { background: var(--amarillo); }
.seg-vacio { height: 3px; background: var(--borde); border-radius: 2px; }

/* ── Color de marca por tarjeta: el tinte tiñe todo el bloque ── */
.pago { position: relative; padding-left: 14px; }
.pago::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 99px; background: var(--tinte, var(--acento));
  box-shadow: 0 0 12px -2px var(--tinte, var(--acento));
}
.pago-nombre { font-size: 17px; }
.credito { position: relative; }
.credito-punto { box-shadow: 0 0 10px -1px currentColor; }
.insignia-nivel {
  font-family: var(--f-numeros); font-size: 13px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px; background: var(--superficie-2); color: var(--sutil);
}
.insignia-nivel.nivel-medio { color: var(--acento-claro); }
.insignia-nivel.nivel-alto { background: rgb(234 115 23 / .16); color: var(--naranja); }
.insignia-nivel.nivel-critico { background: rgb(220 38 38 / .18); color: var(--rojo); }

/* ── Entra y sale, cada cifra en lo suyo ── */
.resumen-par { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--f-numeros); }
.resumen-par .entra { font-size: 21px; font-weight: 700; color: var(--verde); letter-spacing: -.7px; }
.resumen-par .sale { font-size: 21px; font-weight: 700; color: var(--rojo); letter-spacing: -.7px; }

/* ── Deslizar para borrar ── */
.deslizable { position: relative; overflow: hidden; touch-action: pan-y; border-radius: 12px; }
.deslizable > .renglon,
.deslizable > .reg-fila { background: var(--superficie); transition: transform .22s cubic-bezier(.2,.9,.3,1); position: relative; z-index: 1; }
.deslizable.arrastrando > .renglon,
.deslizable.arrastrando > .reg-fila { transition: none; }
.deslizar-fondo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 18px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .5px; z-index: 0;
  background: linear-gradient(90deg, rgb(220 38 38 / .5), var(--rojo));
  opacity: 0;  /* solo aparece mientras se arrastra */
}

/* ── Carga ── */
.esqueleto {
  background: linear-gradient(90deg, var(--superficie-2) 25%, var(--borde) 50%, var(--superficie-2) 75%);
  background-size: 200% 100%; animation: brillo 1.4s linear infinite;
  border-radius: 10px; color: transparent !important;
}
@keyframes brillo { to { background-position: -200% 0; } }
.esqueleto-linea { height: 14px; margin: 8px 0; }
.refrescando { opacity: .45; transition: opacity .18s; }

.jalar-aviso {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 30;
  transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%;
  background: var(--superficie-2); border: 1px solid var(--acento);
  display: grid; place-items: center; color: var(--acento-claro);
  box-shadow: 0 4px 16px -4px rgb(25 88 244 / .5);
  opacity: 0; pointer-events: none;
}
.jalar-aviso svg { width: 16px; height: 16px; }
.jalar-aviso.girando svg { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Cabecera que se encoge y botón que se aparta ── */
.cabecera { position: sticky; top: 0; z-index: 20; background: linear-gradient(var(--fondo) 68%, transparent); }
@media (min-width: 900px) { .cabecera { position: static; background: none; } }
.cabecera.encogida .cabecera-fecha { display: none; }
.fab { transition: transform .18s cubic-bezier(.2,.9,.3,1), opacity .18s; }
.fab.escondido { transform: translateY(100px) scale(.8); opacity: 0; pointer-events: none; }
@media (max-width: 899px) {
  .quincena-lista .renglon:has(.boton-chico),
  #dia-proximos .renglon:has(.boton-chico) { padding-right: 56px; }
}

/* ── Captura: las categorías completas, en rejilla ── */
.captura-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.captura-chips .chip {
  border-radius: 14px; padding: 12px 4px; font-size: 12px; text-align: center;
  white-space: normal; line-height: 1.25; min-height: 50px;
  display: flex; align-items: center; justify-content: center;
}
.captura-monto { font-family: var(--f-numeros); }
.captura-monto.vacio { color: var(--sutil); }

/* ── Atajos de navegación en móvil ── */
.atajos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
@media (min-width: 900px) { .solo-movil { display: none; } }

/* ── Movimiento entre vistas ── */
.vista { animation: entrar .24s cubic-bezier(.2,.9,.3,1); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .vista, .esqueleto { animation: none; }
  * { transition-duration: .01ms !important; }
}


/* ─── registros: el historial de lo que gastas ─── */
.reg-dia { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.reg-dia:last-child { border-bottom: 0; padding-bottom: 0; }
.reg-dia-cabeza {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px;
}
.reg-dia-fecha { font-size: 12px; font-weight: 700; color: var(--sutil); text-transform: capitalize; }
.reg-dia-total { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sutil); }
.reg-fila { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.reg-medio {
  font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 2px 7px;
  border-radius: 99px; background: var(--superficie-2); color: var(--sutil);
  white-space: nowrap; flex: 0 0 auto;
}
.reg-medio.es-tarjeta { color: #fff; }
.reg-vacio { text-align: center; padding: 22px 0; color: var(--sutil); font-size: 14px; }
.reg-cat { padding: 9px 0; border-bottom: 1px solid var(--borde); }
.reg-cat:last-child { border-bottom: 0; }
#reg-buscar { font-size: 15px; }

/* ─── estados de cuenta y calendario (fase 1) ─── */
.chip-estado { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-left: 6px; vertical-align: middle; }
.chip-abierto { background: var(--superficie-2); color: var(--sutil); }
.chip-cortado { background: rgb(234 115 23 / .15); color: #c2570c; }
.chip-pagado_parcial { background: rgb(234 115 23 / .15); color: #c2570c; }
.chip-pagado { background: rgb(22 163 74 / .15); color: var(--verde); }
.chip-vencido { background: rgb(220 38 38 / .15); color: var(--rojo); }
.pago-falta { font-size: 12px; font-weight: 600; color: var(--sutil); margin-top: 2px; }
.cal-grupo { margin-bottom: 18px; }
.cal-grupo-titulo { font-weight: 700; margin: 0 0 8px 4px; }
.cal-grupo-titulo .sutil { font-weight: 500; }
.cal-renglon { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.cal-renglon:last-child { border-bottom: 0; }
.cal-cifras { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.cal-cifras b { font-weight: 700; }
.cal-desglose { font-size: 12px; color: var(--sutil); margin-top: 4px; }
.cal-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cal-rango { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 4px; }
.cal-rango .campo { margin: 0; }
.comparar-banco { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; font-variant-numeric: tabular-nums; margin: 8px 0; }
.comparar-banco .total { font-weight: 700; border-top: 1px solid var(--borde); padding-top: 4px; }
/* Botones del mes (‹ Hoy ›) y enlaces con forma de botón: se veían sin estilo. */
.icono-boton { border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); border-radius: 10px; min-width: 36px; height: 36px; padding: 0 10px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
a.boton-chico { display: inline-block; text-decoration: none; }

/* ── Colores de las series de las gráficas ──
   Se perdieron al revertir el pase de diseño del 10-sep (las barras de "Lo que
   viene" salían sin color). Paleta validada con el verificador de la skill
   dataviz: separación para daltonismo y contraste contra la superficie, en
   oscuro y en claro. Orden fijo: nunca se reparte por posición.
   Significado fijo: --s1 patrimonio / MSI, --s2 deuda / suscripciones,
   --s3 tu dinero / fijos, --s4 compras. */
:root {
  --bien: #2ea043; --mal: #e5534b;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
}
:root[data-tema="claro"] {
  --bien: #16803c; --mal: #c93c34;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --bien: #16803c; --mal: #c93c34;
    --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  }
}

/* ── Métricas ── */
.g-etiqueta { font-size: 11px; fill: var(--texto); }
.barras-mes { display: flex; align-items: flex-end; gap: 4px; padding-top: 6px; }
.barra-mes { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 2px;
  height: 100%; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; min-width: 0; }
.barra-mes .seg { display: block; border-radius: 4px 4px 1px 1px; }
.barra-mes .seg + .seg { border-radius: 1px; }
.barra-mes:hover .seg, .barra-mes:focus-visible .seg { filter: brightness(1.15); }
.barra-valor { font-size: 9px; color: var(--sutil); text-align: center; font-family: var(--f-numeros); margin-bottom: 2px; white-space: nowrap; overflow: hidden; }
.barras-mes-etiquetas { display: flex; gap: 4px; margin-top: 6px; }
.barras-mes-etiquetas > div { flex: 1; font-size: 10px; color: var(--sutil); text-align: center; overflow: hidden; white-space: nowrap; }
.metricas-tiras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.metricas-tiras .tira { cursor: pointer; }
.cat-fila { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: 10px; align-items: center; padding: 8px 0; cursor: pointer; }
.cat-barra { position: relative; height: 14px; background: var(--superficie-2); border-radius: 4px; }
.cat-relleno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--s1); }
.cat-relleno.pasado { background: var(--s2); }
.cat-marca { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--texto); opacity: .75; }
.cat-marca.tope { background: var(--mal); opacity: 1; }
.cat-num { font-family: var(--f-numeros); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   FASE 3c — el teléfono primero (Z Fold 7 cerrado y abierto).
   Mismo idioma visual: degradado, profundidad, Space Grotesk.
   ═══════════════════════════════════════════════════════════════ */

/* ── Áreas seguras: la muesca, la barra de gestos y los bordes del Fold ── */
.contenido { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.cabecera { padding-top: calc(22px + env(safe-area-inset-top, 0px)); }

/* ── El menú como cajón en el teléfono ── */
@media (max-width: 899px) {
  .lateral {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; z-index: 70; top: 0; bottom: 0; left: 0;
    width: min(86vw, 312px); overflow-y: auto;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 12px calc(20px + var(--seguro-abajo)) max(12px, env(safe-area-inset-left, 0px));
    background: linear-gradient(180deg, rgb(25 88 244 / .10), transparent 38%), var(--superficie);
    border-right: 1px solid var(--borde);
    box-shadow: 18px 0 48px -18px rgb(0 0 0 / .65);
    transform: translateX(-104%); transition: transform .26s cubic-bezier(.2,.9,.3,1);
  }
  .lateral.abierta { transform: none; }
  .lateral.arrastrando { transition: none; }
  .lateral-marca { font-size: 21px; font-weight: 800; letter-spacing: -.5px; padding: 4px 12px 16px; }
  .lateral-nav { display: flex; flex-direction: column; gap: 2px; }
  .nav-item {
    display: flex; align-items: center; gap: 13px; width: 100%; min-height: 46px;
    padding: 10px 12px; border: 0; border-radius: 12px; cursor: pointer;
    background: none; color: var(--texto); font-family: inherit; font-size: 15.5px; font-weight: 600; text-align: left;
  }
  .nav-item i { font-style: normal; width: 21px; height: 21px; display: inline-flex; color: var(--sutil); }
  .nav-item svg { width: 21px; height: 21px; }
  .nav-item.activo { background: linear-gradient(135deg, #1958f4, #3f7cff); color: #fff; box-shadow: 0 8px 20px -10px rgb(25 88 244 / .7); }
  .nav-item.activo i { color: #fff; }
  .boton-captura-lateral { display: none; }
  .velo-menu {
    position: fixed; inset: 0; z-index: 65; background: rgb(3 7 16 / .55);
    backdrop-filter: blur(2px); animation: aparecer .2s ease-out;
  }
  .boton-menu {
    position: fixed; z-index: 55; top: calc(14px + env(safe-area-inset-top, 0px)); left: max(14px, env(safe-area-inset-left, 0px));
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
    box-shadow: 0 6px 18px -10px rgb(0 0 0 / .6);
  }
  .boton-menu svg { width: 21px; height: 21px; }
  /* El título se corre para dejarle lugar al botón del menú. */
  .cabecera { padding-left: 54px; }
  /* El + vive en la barra de abajo: el flotante sobra. */
  .fab { display: none; }
}
@keyframes aparecer { from { opacity: 0; } }
.nav-grupo { font-size: 11px; font-weight: 700; color: var(--sutil); padding: 14px 12px 4px; }

/* ── Barra de abajo: Inicio, Calendario, + y Asistente ── */
.navegacion { align-items: stretch; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.nav-boton { font-size: 11px; font-weight: 600; min-height: 58px; }
.nav-captura {
  flex: 0 0 76px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.nav-captura span {
  width: 54px; height: 54px; margin-top: -22px; border-radius: 18px; display: grid; place-items: center;
  font-size: 30px; font-weight: 500; line-height: 1; color: #fff;
  background: linear-gradient(135deg, #1958f4, #3f7cff);
  box-shadow: 0 10px 24px -8px rgb(25 88 244 / .75), inset 0 1px 0 rgb(255 255 255 / .25);
  transition: transform .15s;
}
.nav-captura:active span { transform: scale(.94); }
@media (min-width: 900px) { .boton-menu, .velo-menu, .nav-captura { display: none !important; } }

/* ── Inicio: los tres números ── */
button.tira { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
button.tira:active { transform: scale(.985); }
#dia-bajo.negativo { color: var(--mal); }

/* ── Colores con significado fijo: nunca se comparten ── */
:root { --c-propio: var(--s3); --c-deuda: var(--s2); --c-credito: #8e97ad; }
:root[data-tema="claro"] { --c-credito: #6b7489; }
.monto-propio { color: var(--c-propio); }
.monto-deuda { color: var(--c-deuda); }
.monto-credito { color: var(--c-credito); }
.marca-propio, .marca-deuda, .marca-credito { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.marca-propio { background: var(--c-propio); }
.marca-deuda { background: var(--c-deuda); }
.marca-credito { background: var(--c-credito); }

/* ── Z Fold 7 abierto (y tabletas): dos columnas sin la barra lateral ── */
@media (min-width: 600px) and (max-width: 899px) {
  .contenido { max-width: 880px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .tiras { grid-template-columns: repeat(3, 1fr); }
  .tiras-dia { grid-template-columns: 1fr 1fr; }
  .metricas-tiras { grid-template-columns: repeat(3, 1fr); }
  .hoja-caja { max-width: 620px; }
  .asis-mensajes { max-height: 66vh; }
}
#caja-quincena, #caja-tarjetas, #caja-cuentas { scroll-margin-top: calc(96px + env(safe-area-inset-top, 0px)); }

/* ═══════════════════════════════════════════════════════════════
   ASISTENTE — conversación a pantalla completa, con el mismo idioma:
   degradado azul, profundidad y cifras en Space Grotesk.
   ═══════════════════════════════════════════════════════════════ */
#vista-asistente { display: flex; flex-direction: column; min-height: calc(100dvh - 40px); }
#vista-asistente.oculto { display: none; }
.asis-cabecera { align-items: center; }
.asis-identidad { display: flex; align-items: center; gap: 12px; }
.asis-identidad h1 { margin: 0; }
.asis-acciones { display: flex; gap: 8px; }
/* El asistente se reconoce por su chispa: el mismo degradado de la marca. */
.asis-orbe {
  width: 40px; height: 40px; border-radius: 13px; flex: 0 0 40px; position: relative; display: grid; place-items: center;
  background: linear-gradient(145deg, #3f7cff 0%, #1958f4 45%, #5b2be0 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 22px -8px rgb(25 88 244 / .9);
}
.asis-orbe::before {
  content: ''; width: 52%; height: 52%;
  background: #fff; opacity: .95;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 4.6 2.4 7.4 10 10-7.6 2.6-9.4 5.4-10 10-.6-4.6-2.4-7.4-10-10 7.6-2.6 9.4-5.4 10-10z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 4.6 2.4 7.4 10 10-7.6 2.6-9.4 5.4-10 10-.6-4.6-2.4-7.4-10-10 7.6-2.6 9.4-5.4 10-10z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.asis-orbe::after {
  content: ''; position: absolute; inset: -5px; border-radius: 17px; display: none;
  border: 1.5px solid rgb(0 189 252 / .45); animation: orbe 1.1s ease-in-out infinite;
}
@keyframes orbe { 50% { transform: scale(1.1); opacity: .25; } }
.asis-orbe.chico { width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 4px 12px -4px rgb(25 88 244 / .8); }
.asis-orbe.pensando::after { display: block; inset: -4px; border-radius: 12px; }

.asis-mensajes {
  flex: 1; display: flex; flex-direction: column; gap: 16px;
  padding: 8px 0 calc(150px + var(--seguro-abajo)); max-width: 760px; width: 100%; margin: 0 auto;
}

/* Bienvenida */
.asis-bienvenida { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 4px 6px; }
.asis-bienvenida .asis-orbe { width: 64px; height: 64px; flex-basis: 64px; border-radius: 20px; margin-bottom: 16px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 18px 40px -12px rgb(25 88 244 / .9); }
.asis-bienvenida h2 { font-size: 22px; font-weight: 800; letter-spacing: -.6px; margin: 0 0 6px; text-transform: none; color: var(--texto); }
.asis-bienvenida p { margin: 0 0 18px; color: var(--sutil); font-size: 14px; max-width: 420px; }
.asis-sugerencias { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.asis-sugerencia {
  text-align: left; padding: 13px 14px; border-radius: 16px; cursor: pointer; font-family: inherit; color: var(--texto);
  background: linear-gradient(135deg, rgb(25 88 244 / .10), rgb(0 189 252 / .04)), var(--superficie);
  border: 1px solid rgb(25 88 244 / .22); box-shadow: 0 10px 24px -20px rgb(0 0 0 / .8);
  transition: transform .15s, border-color .15s;
}
.asis-sugerencia:active { transform: scale(.98); }
.asis-sugerencia:hover { border-color: rgb(63 124 255 / .55); }
.asis-sugerencia b { display: block; font-size: 14px; margin-bottom: 2px; }
.asis-sugerencia span { font-size: 12px; color: var(--sutil); }

/* Mensajes */
.asis-yo {
  align-self: flex-end; max-width: 82%; padding: 10px 15px; border-radius: 20px 20px 6px 20px;
  background: linear-gradient(135deg, #1958f4, #3f7cff); color: #fff; white-space: pre-wrap; line-height: 1.45;
  box-shadow: 0 10px 22px -12px rgb(25 88 244 / .8);
}
.asis-turno { display: flex; gap: 10px; align-items: flex-start; }
.asis-turno .asis-orbe { margin-top: 2px; }
.asis-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.asis-ia {
  padding: 12px 15px; border-radius: 6px 20px 20px 20px; line-height: 1.55; font-size: 15px;
  background: linear-gradient(135deg, rgb(25 88 244 / .09), rgb(0 189 252 / .03)), var(--superficie);
  border: 1px solid rgb(63 124 255 / .22);
}
.asis-ia ul, .asis-ia ol { margin: 6px 0; padding-left: 20px; }
.asis-ia li { margin: 3px 0; }
.asis-ia p { margin: 0 0 6px; }
.asis-ia p:last-child { margin-bottom: 0; }
.asis-ia .cifra { font-family: var(--f-numeros); font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
.asis-ia h4 { font-size: 14px; margin: 8px 0 4px; }
.asis-cursor::after { content: '▍'; margin-left: 1px; color: var(--acento-claro); animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.asis-paso { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sutil); padding: 6px 0; }
.asis-puntos { display: inline-flex; gap: 3px; }
.asis-puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--acento-claro); animation: punto 1.2s infinite ease-in-out; }
.asis-puntos i:nth-child(2) { animation-delay: .15s; } .asis-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.asis-fuentes { font-size: 11.5px; color: var(--sutil); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.asis-fuentes span { padding: 3px 9px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borde); }
.asis-nota { align-self: center; font-size: 12.5px; color: var(--sutil); text-align: center; max-width: 520px; }
.asis-error { align-self: stretch; }

/* Propuestas: lo que la IA quiere cambiar */
.asis-propuesta {
  border-radius: 18px; padding: 14px 15px; background: var(--superficie);
  border: 1px solid rgb(63 124 255 / .45);
  box-shadow: 0 14px 30px -20px rgb(25 88 244 / .9), 0 0 0 4px rgb(25 88 244 / .06);
}
.asis-propuesta.aplicada { border-color: rgb(46 160 67 / .5); box-shadow: none; }
.asis-propuesta.cancelada, .asis-propuesta.fallida { border-color: var(--borde); box-shadow: none; opacity: .8; }
.asis-prop-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.asis-prop-etiqueta { font-size: 11px; font-weight: 700; color: var(--acento-claro); display: inline-flex; align-items: center; gap: 6px; }
.asis-prop-estado { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--superficie-2); color: var(--sutil); }
.asis-propuesta.aplicada .asis-prop-estado { background: rgb(46 160 67 / .15); color: var(--bien); }
.asis-prop-texto { font-weight: 650; font-size: 15px; line-height: 1.4; }
.asis-prop-cambios { margin: 10px 0 2px; border-top: 1px solid var(--borde); }
.asis-prop-cambios > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.asis-prop-cambios .monto { font-family: var(--f-numeros); font-weight: 700; white-space: nowrap; }
.asis-prop-lectura { font-size: 12.5px; color: var(--sutil); margin-top: 8px; }
.asis-prop-botones { display: flex; gap: 8px; margin-top: 12px; }
.asis-prop-botones button { flex: 1; min-height: 44px; border-radius: 14px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.asis-si { border: 0; color: #fff; background: linear-gradient(135deg, #1958f4, #3f7cff); box-shadow: 0 8px 18px -10px rgb(25 88 244 / .8); }
.asis-no { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); }
.asis-prop-resultado { font-size: 13px; color: var(--sutil); margin-top: 8px; }

/* Compositor: fijo abajo, sobre la barra de navegación */
.asis-compositor {
  position: fixed; z-index: 35; left: 0; right: 0; bottom: calc(58px + var(--seguro-abajo));
  padding: 10px max(12px, env(safe-area-inset-left, 0px)) 8px max(12px, env(safe-area-inset-right, 0px));
  background: linear-gradient(transparent, var(--fondo) 28%);
}
.asis-caja {
  max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 6px; padding: 6px;
  background: var(--superficie); border: 1px solid rgb(63 124 255 / .3); border-radius: 26px;
  box-shadow: 0 16px 36px -18px rgb(0 0 0 / .9), 0 0 0 4px rgb(25 88 244 / .05);
}
.asis-caja:focus-within { border-color: rgb(63 124 255 / .7); }
.asis-caja textarea {
  flex: 1; resize: none; border: 0; outline: 0; background: none; color: var(--texto);
  font: inherit; font-size: 16px; line-height: 1.4; padding: 10px 4px; min-height: 44px; max-height: 150px;
}
.asis-clip, .asis-enviar { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; }
.asis-clip { color: var(--sutil); background: none; }
.asis-clip:hover { color: var(--texto); background: var(--superficie-2); }
.asis-clip svg, .asis-enviar svg { width: 21px; height: 21px; }
.asis-enviar { color: #fff; background: linear-gradient(135deg, #1958f4, #3f7cff); box-shadow: 0 8px 18px -8px rgb(25 88 244 / .9); transition: opacity .15s, transform .15s; }
.asis-enviar:disabled { opacity: .35; box-shadow: none; cursor: default; }
.asis-enviar:not(:disabled):active { transform: scale(.94); }
.asis-pie { max-width: 760px; margin: 6px auto 0; text-align: center; font-size: 11px; }
.asis-adjunto { max-width: 760px; margin: 0 auto 8px; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; font-size: 13px; }
.asis-adjunto img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.asis-adjunto .quitar { margin-left: auto; background: none; border: 0; color: var(--sutil); font-size: 18px; cursor: pointer; }
/* Mientras escribes en el teléfono, la barra de abajo se quita para dar espacio al teclado. */
body.escribiendo .navegacion { display: none; }
body.escribiendo .asis-compositor { bottom: var(--seguro-abajo); }

@media (min-width: 900px) {
  #vista-asistente { min-height: 100dvh; }
  .asis-compositor { position: sticky; bottom: 0; left: auto; right: auto; padding: 12px 0 18px; margin-top: auto; }
  .asis-mensajes { padding-bottom: 20px; }
}
@media (max-width: 340px) { .asis-sugerencias { grid-template-columns: 1fr; } }

/* Historial de conversaciones */
.asis-conv { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 0; cursor: pointer; }
.asis-conv.activa .renglon-titulo { color: var(--acento-claro); }

.asis-accion {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; cursor: pointer;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
}
.asis-accion svg { width: 19px; height: 19px; }
.asis-accion.primaria { color: #fff; border: 0; background: linear-gradient(135deg, #1958f4, #3f7cff); box-shadow: 0 8px 18px -10px rgb(25 88 244 / .8); }
@media (max-width: 899px) {
  /* En el teléfono: título limpio, y los botones antes del de tema. */
  .asis-identidad .asis-orbe, #asis-modelo { display: none; }
  .asis-cabecera { padding-right: 0; }
  .asis-acciones { margin-right: 52px; }
  .asis-pie { display: none; }
  .asis-sugerencia { padding: 11px 12px; }
  .asis-sugerencia b { font-size: 13.5px; }
  .asis-sugerencia span { font-size: 11.5px; }
  .asis-bienvenida { padding-top: 8px; }
}
/* Lo último que llega nunca queda debajo de la caja para escribir. */
.asis-mensajes > * { scroll-margin-bottom: calc(170px + var(--seguro-abajo)); }
@media (min-width: 900px) { .asis-mensajes > * { scroll-margin-bottom: 120px; } }

/* ═══════════════════════════════════════════════════════════════
   v33 — ORDEN Y JERARQUÍA
   El mismo idioma (degradado hondo, profundidad, Space Grotesk). Aquí:
   lo importante primero y grande, lo pagado se ve pagado (no tachado),
   una acción principal y las demás detrás de "···", y los mismos
   espacios y etiquetas en todas las pantallas.
   ═══════════════════════════════════════════════════════════════ */

:root { --enlace: #7ea6ff; --aviso: #f0a23b; }
:root[data-tema="claro"] { --enlace: #1958f4; --aviso: #b8650a; }
@media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) { --enlace: #1958f4; --aviso: #b8650a; } }

/* Enlaces legibles sobre el fondo oscuro (el azul de marca se perdía). */
.enlace, .pago-ver { color: var(--enlace); }

/* Un solo ritmo de espacios. */
.tarjeta { padding: 18px; margin-bottom: 16px; }
.fila-titulo { margin-bottom: 14px; }
.atajos { margin: -2px 0 16px; }
.etiqueta-min {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--sutil); margin-bottom: 3px;
}

/* ── "···": las acciones que no son la principal ── */
.boton-mas {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; padding: 0 0 6px;
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde);
  font-family: var(--f-numeros); font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1;
}
.boton-mas:active { transform: scale(.94); }
.hoja-acciones { display: flex; flex-direction: column; gap: 8px; }
.accion-hoja {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px;
  text-align: left; cursor: pointer; font-family: inherit; font-size: 15.5px; font-weight: 700; color: var(--texto);
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 16px;
}
.accion-hoja:active { transform: scale(.985); }
.accion-hoja small { display: block; font-size: 12.5px; font-weight: 500; color: var(--sutil); margin-top: 2px; }
.accion-texto { flex: 1; min-width: 0; }
.accion-flecha { color: var(--sutil); font-size: 20px; }
.accion-hoja.peligro { color: var(--mal); }

/* ── Tarjetas de crédito (Cuentas): cuánto debes, cuánto pagas y cuándo ── */
.credito { padding: 18px 0; }
.credito:first-child { padding-top: 4px; }
.credito-cabeza { gap: 10px; margin-bottom: 12px; }
.credito-nombre { font-size: 17px; font-weight: 700; }
.credito-principal { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.credito-deuda { font-family: var(--f-numeros); font-size: 32px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.1; }
.credito .barra { height: 7px; margin: 10px 0 14px; }
.credito .barra-relleno { background: var(--tinte); box-shadow: 0 0 12px -2px var(--tinte); }
.credito .barra-relleno.alto, .credito .barra-relleno.critico { background: var(--naranja); box-shadow: none; }
.credito-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini {
  display: flex; flex-direction: column; padding: 12px; border-radius: 14px;
  background: var(--superficie-2); border: 1px solid var(--borde);
}
.mini .sutil { font-size: 12px; line-height: 1.35; }
.mini-valor { font-family: var(--f-numeros); font-size: 19px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 2px; }
.mini.urge { border-color: color-mix(in srgb, var(--aviso) 55%, transparent); background: color-mix(in srgb, var(--aviso) 9%, var(--superficie-2)); }
.mini.urge .sutil { color: var(--aviso); font-weight: 600; }
.mini.al-dia .mini-valor { color: var(--bien); }
.mini .boton-chico { margin-top: 10px; width: 100%; min-height: 36px; }
.credito-toggle {
  background: none; border: 0; padding: 12px 0 0; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; color: var(--enlace);
}
.credito-detalle { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); }
.credito.abierta .credito-detalle { display: block; }
.credito-detalle small { font-size: 11px; opacity: .8; }

/* ── Saldos de cuentas: con formato; tocar para corregir ── */
.saldo-boton {
  font-family: var(--f-numeros); font-size: 16px; font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
  padding: 7px 11px; border-radius: 11px; background: transparent; border: 1px dashed transparent;
}
.saldo-boton:hover, .saldo-boton:focus-visible { border-color: var(--borde); background: var(--superficie-2); }
.saldo-boton .centavos { font-size: .62em; }
.cuenta-fila .boton-mas { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; font-size: 16px; }

/* ── Mi mes: lo pagado se ve pagado, no tachado ── */
.pago-hecho { opacity: 1; }
.pago-hecho .pago-total { text-decoration: none; color: var(--sutil); }
.pago-hecho .pago-fecha { color: var(--bien); }
.etiqueta-pagado { color: var(--bien); }
.pago-vacio { opacity: .62; padding-top: 10px; padding-bottom: 10px; }
.pago-vacio .pago-desglose { display: none; }
.pago-vacio .pago-total { font-size: 16px; color: var(--sutil); }
.pago-urge { border-color: color-mix(in srgb, var(--aviso) 45%, var(--borde)); }
.pago-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.pago-chips .chip-estado { margin-left: 0; }
.pago-chips:empty { display: none; }

/* Me queda: el número del mes, con el degradado de la marca. */
.resumen-caja.destacada {
  position: relative; overflow: hidden; border: 0; color: #fff; padding: 18px;
  background:
    radial-gradient(120% 160% at 100% 120%, rgb(0 189 252 / .26), transparent 55%),
    linear-gradient(150deg, #0e1f4d 0%, #1958f4 140%);
  box-shadow: 0 16px 34px -20px rgb(25 88 244 / .8);
}
.resumen-caja.destacada.mala { background: linear-gradient(150deg, #3b0d12 0%, #c2332b 140%); box-shadow: 0 16px 34px -20px rgb(220 38 38 / .7); }
.resumen-caja.destacada .sutil { color: rgb(255 255 255 / .75); }
.resumen-caja.destacada .resumen-valor { color: #fff; font-size: 34px; letter-spacing: -1.6px; }
.resumen-caja:not(.destacada) .resumen-valor { font-size: 23px; }

/* Mi mes en el teléfono: las flechas del mes en su propio renglón. */
@media (max-width: 899px) {
  #vista-mes .cabecera { flex-wrap: wrap; row-gap: 10px; }
  #vista-mes .mes-nav { width: 100%; }
  #vista-mes #mes-hoy { flex: 1; }
}

/* ── La quincena: lo hecho con palomita ── */
.renglon.hecho { opacity: .62; }
.renglon.hecho .renglon-monto { color: var(--sutil); font-weight: 600; }
.palomita {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--bien);
}

/* ── "Algo no cuadra": un aviso que se toca, con cada renglón ── */
.aviso-cuadre {
  display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; margin-bottom: 16px; border-radius: 18px; font-family: inherit; color: var(--texto);
  background: linear-gradient(135deg, color-mix(in srgb, var(--aviso) 14%, transparent), transparent 70%), var(--superficie);
  border: 1px solid color-mix(in srgb, var(--aviso) 40%, transparent);
}
.aviso-cuadre.grave { --aviso: var(--mal); }
.aviso-cuadre:active { transform: scale(.99); }
.aviso-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; font-size: 15px; }
.aviso-cabeza b { flex: 1; }
.aviso-icono {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #111; background: var(--aviso);
}
.aviso-ver { font-size: 13px; font-weight: 700; color: var(--enlace); }
.aviso-renglon { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--sutil); padding-left: 36px; }
.aviso-renglon b { color: var(--texto); font-family: var(--f-numeros); white-space: nowrap; }
/* El crédito disponible va solo al final, a lo ancho: no es dinero tuyo. */
#totales .tira:last-child { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════════════════════════
   REGISTROS — el corazón: periodo, agrupación y la ficha completa
   ═══════════════════════════════════════════════════════════════ */

/* Control segmentado: una sola pastilla que se mueve entre opciones. */
.segmentado {
  display: flex; gap: 3px; padding: 3px; border-radius: 14px;
  background: var(--superficie-2); border: 1px solid var(--borde);
}
.segmentado button {
  flex: 1; min-height: 36px; padding: 0 10px; border: 0; border-radius: 11px; cursor: pointer;
  background: none; color: var(--sutil); font-family: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.segmentado button.activo {
  color: #fff; background: linear-gradient(135deg, #1958f4, #3f7cff);
  box-shadow: 0 6px 14px -8px rgb(25 88 244 / .8);
}
.segmentado.chico button { min-height: 32px; font-size: 12.5px; }

.reg-controles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.reg-controles .mes-nav { display: flex; gap: 6px; }
.reg-controles #reg-hoy { flex: 1; }
@media (min-width: 900px) { .reg-controles { flex-direction: row; align-items: center; } .reg-controles .segmentado { flex: 1; max-width: 460px; } }
.reg-ver { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.reg-ver .segmentado { flex: 1; }
.tira-grande { grid-column: 1 / -1; }
.tira-grande .tira-valor { font-size: 32px; letter-spacing: -1.4px; }
#reg-filtros { display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
#reg-filtros::-webkit-scrollbar { display: none; }
#reg-filtros .chip { flex: 0 0 auto; }

/* Un registro: ícono de categoría, qué fue, de dónde, y sus marcas. */
.reg-fila { align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.reg-icono {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-size: 18px; font-weight: 800; color: var(--texto);
  background: color-mix(in srgb, var(--cat, var(--acento)) 20%, var(--superficie-2));
  border: 1px solid color-mix(in srgb, var(--cat, var(--acento)) 30%, transparent);
}
.reg-sub { font-size: 12.5px; line-height: 1.4; margin-top: 1px; overflow-wrap: anywhere; }
.reg-banco { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; letter-spacing: -.2px; }
.reg-marcas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.marca-reg {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: var(--superficie-2); color: var(--sutil); border: 1px solid var(--borde);
}
.marca-reg.aviso { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 40%, transparent); }
.marca-reg.bien { color: var(--bien); border-color: color-mix(in srgb, var(--bien) 40%, transparent); }
.reg-der { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.reg-der .renglon-monto { font-family: var(--f-numeros); font-size: 15.5px; font-weight: 700; }
.reg-fila.liberado .renglon-titulo, .reg-fila.liberado .renglon-monto { text-decoration: line-through; opacity: .55; }
.reg-grupo { margin-bottom: 18px; }
.reg-grupo:last-child { margin-bottom: 0; }
.reg-grupo-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 4px 0 10px; border-bottom: 2px solid var(--borde); }
.reg-grupo-cabeza b { font-family: var(--f-numeros); font-size: 16px; }
.reg-grupo .reg-dia-fecha { text-transform: none; }
button.reg-cat { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--borde); color: inherit; font-family: inherit; cursor: pointer; }
#reg-msi .renglon { align-items: flex-start; cursor: pointer; }

/* La ficha */
.ficha-monto { text-align: center; margin: 2px 0 14px; }
.ficha-monto input {
  width: 100%; text-align: center; border: 0; background: none; padding: 4px 0;
  font-family: var(--f-numeros); font-size: 40px; font-weight: 700; letter-spacing: -1.8px; color: var(--texto);
}
.ficha-monto input:focus { outline: 0; background: var(--superficie-2); border-radius: 14px; }
.ficha-avisos { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; font-size: 13.5px;
  background: color-mix(in srgb, var(--bien) 10%, var(--superficie-2)); border: 1px solid color-mix(in srgb, var(--bien) 30%, transparent); }
.ficha-seccion { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sutil); margin: 18px 0 10px; }
.campos-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campos-dos .campo { min-width: 0; }
.campo-con-boton { display: flex; gap: 8px; align-items: center; }
.campo-con-boton input { flex: 1; min-width: 0; }
.ficha-acciones { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.ficha-acciones .boton-principal { flex: 1; }
.ficha-acciones .boton-mas { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
.parte { display: grid; grid-template-columns: 110px 1fr; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.parte .pt-concepto { grid-column: 1 / -1; }
.captura-tipo { margin: 4px 0 6px; }
.reg-icono svg { width: 19px; height: 19px; color: color-mix(in srgb, var(--cat, var(--acento)) 75%, var(--texto)); }
.reg-dia-fecha { text-transform: none; }
.reg-dia-fecha::first-letter { text-transform: uppercase; }
#reg-tiras .tira:nth-child(4) { grid-column: 1 / -1; }
/* Captura: la puerta a la ficha completa */
.captura-detalles {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 4px 0 10px;
  padding: 12px 14px; border-radius: 16px; cursor: pointer; text-align: left; font-family: inherit; color: var(--texto);
  background: linear-gradient(135deg, rgb(25 88 244 / .14), rgb(0 189 252 / .05)), var(--superficie-2);
  border: 1px solid rgb(63 124 255 / .35);
}
.captura-detalles b { display: block; font-size: 15px; }
.captura-detalles small { display: block; font-size: 12px; color: var(--sutil); margin-top: 2px; }
.captura-detalles > span:last-child { font-size: 22px; color: var(--enlace); }
.captura-siempre { font-size: 13px; color: var(--sutil); gap: 7px; }
.captura-siempre input { width: 18px; height: 18px; flex-basis: 18px; }

/* ═══════════════════════════════════════════════════════════════
   PRESUPUESTOS, CATEGORÍAS Y LA BURBUJA DEL ASISTENTE
   ═══════════════════════════════════════════════════════════════ */

/* El asistente vive en una burbuja: a un toque desde cualquier pantalla. */
.burbuja-asistente {
  position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(84px + var(--seguro-abajo));
  width: 56px; height: 56px; border-radius: 20px; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: none;
  filter: drop-shadow(0 12px 22px rgb(25 88 244 / .45));
  transition: transform .18s cubic-bezier(.2,.9,.3,1), opacity .18s;
}
.burbuja-asistente .asis-orbe { width: 56px; height: 56px; flex-basis: 56px; border-radius: 20px; }
.burbuja-asistente .asis-orbe::before { width: 46%; height: 46%; }
.burbuja-asistente:active { transform: scale(.92); }
.burbuja-asistente::after {
  content: ''; position: absolute; inset: -4px; border-radius: 24px; border: 1.5px solid rgb(0 189 252 / .35);
  animation: orbe 2.6s ease-in-out infinite; pointer-events: none;
}
body.en-asistente .burbuja-asistente, body.escribiendo .burbuja-asistente { opacity: 0; pointer-events: none; transform: scale(.6); }
@media (min-width: 900px) { .burbuja-asistente { bottom: 28px; right: 28px; } }
@media (prefers-reduced-motion: reduce) { .burbuja-asistente::after { animation: none; } }

/* Barra de abajo con cinco lugares. */
.navegacion .nav-boton { min-width: 0; }

/* ── Presupuestos ── */
.pres-heroe {
  position: relative; overflow: hidden; border-radius: 24px; padding: 22px 20px; margin-bottom: 16px; color: #fff;
  background:
    radial-gradient(140% 180% at 100% 120%, rgb(0 189 252 / .26), transparent 55%),
    radial-gradient(100% 140% at 0% 0%, rgb(84 130 255 / .32), transparent 60%),
    linear-gradient(150deg, #0e1f4d 0%, #1958f4 130%);
  box-shadow: 0 18px 40px -24px rgb(25 88 244 / .9);
}
.pres-heroe::after { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; border: 22px solid rgb(255 255 255 / .06); }
.pres-heroe-monto { font-family: var(--f-numeros); font-size: 44px; font-weight: 700; letter-spacing: -2px; line-height: 1.1; margin: 4px 0 6px; }
.pres-heroe-sub { font-size: 13.5px; opacity: .88; }
.pres-heroe .pres-barra { background: rgb(255 255 255 / .18); margin-top: 14px; }
.pres-heroe .pres-barra > div { background: #fff; box-shadow: none; }

.pres { cursor: pointer; }
.pres-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pres-nombre { font-size: 17px; font-weight: 700; }
.pres-cifras { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pres-disponible { font-family: var(--f-numeros); font-size: 30px; font-weight: 700; letter-spacing: -1.3px; line-height: 1.1; color: var(--c-propio); }
.pres-disponible.negativo { color: var(--mal); }
.pres-barra { height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; margin: 12px 0 8px; }
.pres-barra > div { height: 100%; border-radius: 99px; background: var(--cat, var(--acento)); box-shadow: 0 0 12px -2px var(--cat, var(--acento)); transition: width .4s; }
.pres-barra.justo > div { background: var(--aviso); }
.pres-barra.pasado > div { background: var(--mal); }
.pres-pie { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--sutil); }
.pres-pie b { color: var(--texto); }
.pres-quincenas { margin-top: 6px; font-size: 12px; }
.pres-vacio { text-align: center; padding: 26px 20px; }
.pres-vacio h3 { margin: 12px 0 8px; font-size: 18px; letter-spacing: -.3px; }
.pres-vacio p { margin: 0 auto 16px; max-width: 420px; line-height: 1.5; }
.pres-vacio .boton-chico { margin: 4px; }
.pres-vacio-icono { width: 64px; height: 64px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #3f7cff, #1958f4 55%, #5b2be0); box-shadow: 0 14px 30px -12px rgb(25 88 244 / .9); }
.pres-vacio-icono svg { width: 30px; height: 30px; }

/* Elegir ícono, color y categorías */
.rejilla-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px; }
.icono-opcion {
  aspect-ratio: 1; border-radius: 12px; cursor: pointer; display: grid; place-items: center; padding: 0;
  background: var(--superficie-2); border: 1px solid var(--borde); color: color-mix(in srgb, var(--cat) 75%, var(--texto));
}
.icono-opcion svg { width: 20px; height: 20px; }
.icono-opcion.activo { background: color-mix(in srgb, var(--cat) 22%, var(--superficie-2)); border-color: var(--cat); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat) 40%, transparent); }
.chips-elegir { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.activo { color: #fff; background: linear-gradient(135deg, #1958f4, #3f7cff); border-color: transparent; }
.reg-icono.grande { width: 64px; height: 64px; flex-basis: 64px; border-radius: 20px; }
.reg-icono.grande svg { width: 30px; height: 30px; }
.reg-icono .svg-propio { width: 20px; height: 20px; }
.reg-icono.grande .svg-propio { width: 30px; height: 30px; }
.cat-previa { display: flex; justify-content: center; margin-bottom: 14px; }

/* Categorías: principales con sus subcategorías */
.cat-bloque { padding: 6px 0 10px; border-bottom: 1px solid var(--borde); }
.cat-bloque:last-child { border-bottom: 0; }
.cat-fila-edit { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.cat-fila-edit.sub { padding-left: 26px; position: relative; }
.cat-fila-edit.sub::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 50%; width: 10px; border-left: 2px solid var(--borde); border-bottom: 2px solid var(--borde); border-bottom-left-radius: 6px; }
.cat-fila-edit.sub .reg-icono { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
.cat-fila-edit.inactiva { opacity: .5; }
.icono-boton.chico { min-width: 32px; height: 32px; padding: 0; font-size: 14px; }
.icono-boton:disabled { opacity: .3; cursor: default; }
.cat-agregar-sub { margin: 2px 0 0 26px; font-size: 12.5px; }
.regla { padding: 8px 0; }
.reglas-aprendidas { margin-top: 12px; }
.reglas-aprendidas summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--enlace); padding: 6px 0; }

/* Captura: cada categoría con su ícono */
.captura-chips .chip-cat { flex-direction: column; gap: 5px; }
.chip-icono { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: color-mix(in srgb, var(--cat) 22%, transparent); color: color-mix(in srgb, var(--cat) 80%, var(--texto)); }
.chip-icono svg { width: 16px; height: 16px; }
.chip-icono .svg-propio { width: 16px; height: 16px; }

/* Cuentas: lo apartado para presupuestos y lo libre */
.cuenta-apartado { margin-top: 3px; }
.cuenta-apartado b { color: var(--texto); }
.reg-controles .mes-nav .icono-boton:nth-child(2) { flex: 1; }

/* ── Inicio: presupuestos de un vistazo y "lo de hoy" vacío ── */
.pres-mini, .pres-invita {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--borde); color: var(--texto); font-family: inherit;
}
.pres-mini:last-child { border-bottom: 0; }
.pres-mini-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pres-mini-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.pres-mini-fila span { font-family: var(--f-numeros); font-weight: 700; color: var(--c-propio); }
.pres-mini-fila span.negativo { color: var(--mal); }
.pres-mini .pres-barra { height: 6px; margin: 0; display: block; }
.pres-mini .pres-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--cat, var(--acento)); }
.pres-mini .pres-barra.justo > span { background: var(--aviso); }
.pres-mini .pres-barra.pasado > span { background: var(--mal); }
.pres-mini .sutil { font-size: 12px; }
.pres-invita { border: 1px dashed rgb(63 124 255 / .4); border-radius: 16px; padding: 12px 14px; }
.pres-invita small { display: block; color: var(--sutil); font-size: 12.5px; margin-top: 2px; }
.pres-invita > span:last-child { color: var(--enlace); font-size: 20px; margin-left: auto; }
.vacio-dia { display: flex; align-items: center; gap: 12px; padding: 6px 0; text-align: left; }
.vacio-dia .sutil { margin-top: 2px; }
.vacio-icono { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--enlace);
  background: rgb(63 124 255 / .12); border: 1px solid rgb(63 124 255 / .25); }
.vacio-icono svg { width: 20px; height: 20px; }

/* ── Estadísticas ── */
.est-heroe .pres-heroe-sub b { color: #fff; }
.chip-cambio { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap; font-family: var(--f-numeros); }
.chip-cambio.sube { color: var(--mal); background: color-mix(in srgb, var(--mal) 14%, transparent); }
.chip-cambio.baja { color: var(--bien); background: color-mix(in srgb, var(--bien) 14%, transparent); }
.chip-cambio.nuevo { color: var(--sutil); background: var(--superficie-2); font-family: inherit; font-weight: 700; }
.est-notas { display: flex; flex-direction: column; gap: 10px; }
.est-nota { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; }
.est-nota > span { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: rgb(63 124 255 / .14); color: var(--enlace); }
.est-nota.sube > span, .est-nota.presupuesto > span { background: color-mix(in srgb, var(--mal) 16%, transparent); color: var(--mal); }
.est-nota.baja > span { background: color-mix(in srgb, var(--bien) 16%, transparent); color: var(--bien); }
.est-cat, .est-comercio { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--borde); color: var(--texto); font-family: inherit; cursor: pointer; }
.est-cat:last-child, .est-comercio:last-child { border-bottom: 0; }
.est-comercio { cursor: default; }
.est-cat-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.est-cat-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.est-cat-fila > span { font-family: var(--f-numeros); font-weight: 700; white-space: nowrap; }
.est-cat-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.est-cat-pie .sutil { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-barra { display: block; height: 6px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.est-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--cat, var(--acento)); }
.est-comercio .est-barra > span { background: linear-gradient(90deg, #1958f4, #3f7cff); }
.est-pos { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  font-family: var(--f-numeros); background: var(--superficie-2); color: var(--sutil); }
.est-dia { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.est-dia > span:first-child { color: var(--sutil); font-weight: 700; text-transform: capitalize; }
.est-dia .est-barra { height: 10px; }
.est-dia .est-barra > span { background: linear-gradient(90deg, #1958f4, #00bdfc); }
.est-dia b { font-family: var(--f-numeros); font-size: 13.5px; min-width: 84px; text-align: right; }
.est-etiqueta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-top: 4px; }
.est-etiqueta b { font-family: var(--f-numeros); }
#est-grafica .barras-mes { gap: 2px; } #est-grafica .barras-mes-etiquetas { gap: 2px; } #est-grafica .barras-mes-etiquetas > div { overflow: visible; }

/* ═══════════════════════════════════════════════════════════════
   v40 — A LA ALTURA DE LAS APPS TOP
   Barra flotante de cristal (como Monzo), accesos rápidos (como Phantom),
   saludo, entrada suave de las tarjetas y respuesta al toque en todo.
   Mismo idioma: degradado hondo, profundidad y Space Grotesk.
   ═══════════════════════════════════════════════════════════════ */

/* ── La barra de abajo flota: pastilla de cristal ── */
@media (max-width: 899px) {
  .navegacion {
    left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(8px + var(--seguro-abajo)); padding: 0 4px;
    border: 1px solid rgb(148 163 197 / .16); border-radius: 26px;
    background: rgb(13 21 38 / .78); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .75), inset 0 1px 0 rgb(255 255 255 / .05);
  }
  :root[data-tema="claro"] .navegacion { background: rgb(255 255 255 / .82); border-color: rgb(15 26 46 / .08); box-shadow: 0 16px 36px -18px rgb(15 26 46 / .35); }
  .nav-boton { min-height: 60px; padding-top: 9px; font-size: 10.5px; }
  .nav-boton.activo::before { display: none; }
  .nav-boton > span {
    width: 44px; height: 28px; border-radius: 99px; display: grid; place-items: center; transition: background .2s, color .2s;
  }
  .nav-boton.activo { color: var(--texto); }
  .nav-boton.activo > span { background: linear-gradient(135deg, rgb(25 88 244 / .9), rgb(63 124 255 / .9)); color: #fff; box-shadow: 0 6px 14px -6px rgb(25 88 244 / .9); }
  .nav-captura span { margin-top: -18px; box-shadow: 0 12px 26px -8px rgb(25 88 244 / .85), 0 0 0 5px var(--fondo), inset 0 1px 0 rgb(255 255 255 / .25); }
  .burbuja-asistente { bottom: calc(86px + var(--seguro-abajo)); }
  .asis-compositor { bottom: calc(76px + var(--seguro-abajo)); }
  .contenido { padding-bottom: calc(150px + var(--seguro-abajo)); }
  .brindis { bottom: calc(90px + var(--seguro-abajo)); }
}

/* ── Saludo ── */
#dia-saludo { font-size: 25px; letter-spacing: -.7px; line-height: 1.15; }

/* ── Accesos rápidos ── */
.acciones-rapidas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 16px; }
.acciones-rapidas button {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; cursor: pointer;
  border-radius: 18px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .03), 0 10px 24px -20px rgb(0 0 0 / .7);
  transition: transform .15s, border-color .15s;
}
.acciones-rapidas button:active { transform: scale(.95); }
.acciones-rapidas span {
  width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #3f7cff, #1958f4 60%, #1440c4);
  box-shadow: 0 8px 18px -8px rgb(25 88 244 / .9), inset 0 1px 0 rgb(255 255 255 / .25);
}
.acciones-rapidas button:nth-child(2) span { background: linear-gradient(145deg, #ff8a4c, #d95926); box-shadow: 0 8px 18px -8px rgb(217 89 38 / .8), inset 0 1px 0 rgb(255 255 255 / .25); }
.acciones-rapidas button:nth-child(3) span { background: linear-gradient(145deg, #2dd4bf, #0e9f86); box-shadow: 0 8px 18px -8px rgb(14 159 134 / .8), inset 0 1px 0 rgb(255 255 255 / .25); }
.acciones-rapidas button:nth-child(4) span { background: linear-gradient(145deg, #a78bfa, #6d4be0); box-shadow: 0 8px 18px -8px rgb(109 75 224 / .8), inset 0 1px 0 rgb(255 255 255 / .25); }
.acciones-rapidas svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .acciones-rapidas { max-width: 640px; } }

/* ── Presupuestos: a cuánto por día ── */
.pres-ritmo { margin-top: 8px; padding: 8px 10px; border-radius: 11px; font-size: 13px; color: var(--sutil);
  background: color-mix(in srgb, var(--cat, var(--acento)) 9%, var(--superficie-2)); }
.pres-ritmo b { color: var(--texto); }

/* ── Las tarjetas entran suave, una tras otra ── */
@keyframes subir { from { opacity: 0; transform: translateY(10px); } }
.vista:not(.oculto) > .tarjeta, .vista:not(.oculto) .col-principal > .tarjeta, .vista:not(.oculto) .col-lateral > .tarjeta,
.vista:not(.oculto) > .tiras, .vista:not(.oculto) > .acciones-rapidas, .vista:not(.oculto) #pres-lista > .tarjeta {
  animation: subir .38s cubic-bezier(.2,.9,.3,1) both;
}
.vista:not(.oculto) > :nth-child(3) { animation-delay: .03s; }
.vista:not(.oculto) > :nth-child(4), .vista:not(.oculto) .col-principal > :nth-child(2) { animation-delay: .06s; }
.vista:not(.oculto) > :nth-child(5), .vista:not(.oculto) .col-principal > :nth-child(3), .vista:not(.oculto) .col-lateral > :nth-child(2) { animation-delay: .09s; }
.vista:not(.oculto) > :nth-child(n+6), .vista:not(.oculto) .col-lateral > :nth-child(n+3) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .vista .tarjeta, .vista .tiras, .acciones-rapidas { animation: none !important; } }

/* ── Respuesta al toque en todo lo que se toca ── */
.reg-fila, .pres-mini, .est-cat, .pago, .cal-renglon, .cuenta-fila, .renglon[data-ir] { transition: background .15s; border-radius: 12px; }
.reg-fila:active, .pres-mini:active, .est-cat:active, .renglon[data-ir]:active { background: rgb(148 163 197 / .07); }
.tira { transition: transform .15s; }
button.tira:active, .pres:active { transform: scale(.985); }

/* ── Tiras con brillo arriba: se sienten tarjetas, no cajas ── */
.tira { position: relative; overflow: hidden; border-radius: 18px; }
.tira::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .12), transparent); }
:root[data-tema="claro"] .tira::before { display: none; }

/* ── Encabezados: título grande y limpio ── */
h1 { font-size: 29px; }
.cabecera-fecha { font-size: 12.5px; letter-spacing: .1px; }
.cal-rango .campo, .campos-dos .campo { min-width: 0; }
.cal-rango input, .campos-dos input, .campos-dos select { min-width: 0; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   v41 — SOBRIO, COMO LAS APPS DE BANCO DE VERDAD (Revolut, Monzo)
   Claro por omisión y noche opcional. Fondos lisos, tarjetas lisas, cero
   degradados, brillos ni cristal. Un solo acento para lo interactivo; los
   botones principales en tinta (negro de día, blanco de noche). Títulos en
   letra normal. Se quedan Space Grotesk en las cifras y los colores con
   significado: verde tu dinero, naranja deuda, gris crédito.
   Va al final: manda sobre todas las capas anteriores.
   ═══════════════════════════════════════════════════════════════════════ */

:root, :root[data-tema="claro"] {
  --fondo: #f3f4f6; --superficie: #ffffff; --superficie-2: #f1f2f5; --borde: #e6e8ec;
  --texto: #0f1115; --sutil: #6b7280; --acento: #2457f5; --acento-claro: #2457f5; --enlace: #2457f5;
  --tinta: #0f1115; --tinta-texto: #ffffff; --realce: #e8eefe;
  --c-propio: #0e9f5a; --c-deuda: #d9480f; --c-credito: #7b8190;
  --bien: #0e9f5a; --mal: #d92d20; --aviso: #b54708; --verde: #0e9f5a; --rojo: #d92d20; --naranja: #d9480f; --amarillo: #b54708;
  --sombra: 0 1px 2px rgb(16 24 40 / .05), 0 1px 3px rgb(16 24 40 / .04);
  --radio: 20px;
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --fondo: #0b0c0f; --superficie: #16181d; --superficie-2: #1f2228; --borde: #272b33;
  --texto: #f2f3f5; --sutil: #9aa1ad; --acento: #6e97ff; --acento-claro: #6e97ff; --enlace: #86a8ff;
  --tinta: #f2f3f5; --tinta-texto: #0b0c0f; --realce: #1c2640;
  --c-propio: #34c77b; --c-deuda: #ff8a4c; --c-credito: #8e95a3;
  --bien: #34c77b; --mal: #ff6b5e; --aviso: #f5a524; --verde: #34c77b; --rojo: #ff6b5e; --naranja: #ff8a4c; --amarillo: #f5a524;
  --sombra: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --fondo: #0b0c0f; --superficie: #16181d; --superficie-2: #1f2228; --borde: #272b33;
    --texto: #f2f3f5; --sutil: #9aa1ad; --acento: #6e97ff; --acento-claro: #6e97ff; --enlace: #86a8ff;
    --tinta: #f2f3f5; --tinta-texto: #0b0c0f; --realce: #1c2640;
    --c-propio: #34c77b; --c-deuda: #ff8a4c; --c-credito: #8e95a3;
    --bien: #34c77b; --mal: #ff6b5e; --aviso: #f5a524; --sombra: none;
  }
}

body { background: var(--fondo); background-attachment: scroll; color: var(--texto); }

/* ── Superficies lisas ── */
.tarjeta, .tira, .opcion, .semaforo, .resumen-caja, .pago, .mini, .grupo-cuentas .cuenta-fila,
.acciones-rapidas button, .aviso-cuadre, .asis-propuesta, .asis-sugerencia, .asis-caja, .hoja-caja {
  box-shadow: var(--sombra) !important;
}
.tarjeta, .tira, .resumen-caja, .semaforo, .opcion { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
:root:not([data-tema="oscuro"]) .tarjeta, :root:not([data-tema="oscuro"]) .tira, :root:not([data-tema="oscuro"]) .resumen-caja { border-color: transparent; }
.tira::before { display: none; }
.pago, .mini { background: var(--superficie-2); border: 1px solid transparent; }
.hoja-caja { background: var(--superficie); }

/* ── Títulos: letra normal, nada de MAYÚSCULAS espaciadas ── */
h1 { font-size: 28px; letter-spacing: -.6px; }
#dia-saludo { font-size: 24px; }
h2, .ficha-seccion { text-transform: none; letter-spacing: 0; font-size: 15.5px; font-weight: 700; color: var(--texto); }
.ficha-seccion { font-size: 14px; color: var(--sutil); margin: 20px 0 10px; }
.etiqueta-min, .hero-etiqueta { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--sutil); opacity: 1; }
.cabecera { background: linear-gradient(var(--fondo) 70%, transparent); }

/* ── El héroe del día: tarjeta lisa, la cifra manda ── */
.hero-dia, .pres-heroe, .resumen-caja.destacada, .resumen-caja.destacada.mala {
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
  box-shadow: var(--sombra) !important; border-radius: 24px;
}
:root:not([data-tema="oscuro"]) .hero-dia, :root:not([data-tema="oscuro"]) .pres-heroe, :root:not([data-tema="oscuro"]) .resumen-caja.destacada { border-color: transparent; }
.hero-dia::after, .pres-heroe::after { display: none; }
.hero-monto, .pres-heroe-monto { color: var(--texto); }
.hero-nota, .hero-sub, .pres-heroe-sub { color: var(--sutil); opacity: 1; }
.hero-nota b, .pres-heroe-sub b, .est-heroe .pres-heroe-sub b { color: var(--texto); }
.resumen-caja.destacada .sutil { color: var(--sutil); }
.resumen-caja.destacada .resumen-valor { color: var(--c-propio); }
.resumen-caja.destacada.mala .resumen-valor { color: var(--mal); }
.hero-chispa { --acento: var(--enlace); --mal: var(--rojo); --superficie: transparent; --borde: var(--superficie-2); }
.hero-chispa .g-linea { filter: none; stroke-width: 2; }
.pres-heroe .pres-barra { background: var(--superficie-2); }
.pres-heroe .pres-barra > div { background: var(--texto); }

/* ── Botones: tinta, sin degradados ni resplandor ── */
.boton-principal, .fab, .boton-captura-lateral, .boton-dictado, .asis-si, .asis-enviar, .asis-accion.primaria,
.boton-chico.primario, .nav-captura span {
  background: var(--tinta) !important; color: var(--tinta-texto) !important; border-color: var(--tinta) !important;
  box-shadow: none !important;
}
.boton-principal { border-radius: 14px; font-weight: 700; }
.boton-secundario, .boton-chico, .icono-boton, .boton-mas { background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto); box-shadow: none; }
.enlace, .pago-ver, .credito-toggle, .aviso-ver { color: var(--enlace); }
.chip { background: var(--superficie-2); border: 1px solid transparent; color: var(--texto); }
.chip.activo, .chip-medio.activo { background: var(--tinta); color: var(--tinta-texto); border-color: var(--tinta); }

/* Control segmentado estilo iOS: la opción elegida es una pastilla blanca. */
.segmentado { background: var(--superficie-2); border: 0; }
.segmentado button.activo { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgb(16 24 40 / .12), 0 1px 2px rgb(16 24 40 / .06); }
:root[data-tema="oscuro"] .segmentado button.activo { background: #343943; box-shadow: none; }

/* ── Accesos rápidos: círculos grises con ícono, como Revolut ── */
.acciones-rapidas button { background: none; border: 0; box-shadow: none !important; padding: 4px 0; font-weight: 600; color: var(--texto); }
.acciones-rapidas span, .acciones-rapidas button:nth-child(n) span {
  width: 52px; height: 52px; border-radius: 50%; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); box-shadow: var(--sombra);
}
:root[data-tema="oscuro"] .acciones-rapidas span { background: var(--superficie-2); }

/* ── Barra de abajo: lisa y fija, como las apps de banco ── */
@media (max-width: 899px) {
  .navegacion {
    left: 0; right: 0; bottom: 0; border-radius: 0; padding: 0 0 var(--seguro-abajo);
    background: var(--superficie) !important; border: 0; border-top: 1px solid var(--borde);
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none !important;
  }
  .nav-boton { min-height: 58px; padding-top: 8px; color: var(--sutil); }
  .nav-boton > span { width: auto; height: 24px; background: none !important; box-shadow: none !important; color: inherit !important; }
  .nav-boton.activo { color: var(--texto); font-weight: 700; }
  .nav-captura span { width: 50px; height: 50px; margin-top: -14px; border-radius: 50%; font-size: 28px; box-shadow: 0 0 0 4px var(--superficie) !important; }
  .burbuja-asistente { bottom: calc(76px + var(--seguro-abajo)); }
  .asis-compositor { bottom: calc(58px + var(--seguro-abajo)); }
  .brindis { bottom: calc(80px + var(--seguro-abajo)); }
}
.nav-boton.activo::before { display: none; }

/* ── El asistente: un círculo sencillo, sin aro animado ── */
.burbuja-asistente { width: 52px; height: 52px; border-radius: 50%; filter: none; }
.burbuja-asistente::after { display: none; }
.burbuja-asistente .asis-orbe { width: 52px; height: 52px; flex-basis: 52px; border-radius: 50%;
  background: var(--tinta); box-shadow: 0 6px 16px -6px rgb(16 24 40 / .35); }
.burbuja-asistente .asis-orbe::before { background: var(--tinta-texto); }
.asis-orbe { background: var(--tinta); box-shadow: none; }
.asis-orbe::before { background: var(--tinta-texto); }
.asis-yo { background: var(--tinta); color: var(--tinta-texto); box-shadow: none; }
.asis-ia { background: var(--superficie); border: 1px solid var(--borde); }
.asis-sugerencia { background: var(--superficie); border: 1px solid var(--borde); }
.asis-caja { background: var(--superficie); border: 1px solid var(--borde); }
.asis-compositor { background: linear-gradient(transparent, var(--fondo) 30%); }
.asis-propuesta { border: 1px solid var(--borde); }
.burbuja-ia { background: var(--superficie-2); border-color: var(--borde); }

/* ── Menú lateral y botones de arriba ── */
.lateral { background: var(--superficie) !important; }
.nav-item.activo { background: var(--superficie-2) !important; color: var(--texto) !important; box-shadow: none !important; }
.nav-item.activo i { color: var(--texto) !important; }
.boton-menu, .interruptor-tema { background: var(--superficie); border: 1px solid var(--borde); box-shadow: none; }

/* ── Barras y gráficas: color plano, sin resplandor ── */
.credito .barra-relleno, .pres-barra > div, .pres-mini .pres-barra > span { box-shadow: none; }
.barra { background: var(--superficie-2); }
.est-comercio .est-barra > span, .est-dia .est-barra > span { background: var(--acento); }
.credito-punto { box-shadow: none; }
.pago::before { box-shadow: none; }

/* ── Avisos: tarjeta lisa con su marca de color a la izquierda ── */
.aviso-cuadre { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--aviso); }
.aviso-cuadre.grave { border-left-color: var(--mal); }
.aviso-icono { color: #fff; }
.alerta-roja { background: color-mix(in srgb, var(--mal) 8%, var(--superficie)); border-color: color-mix(in srgb, var(--mal) 30%, transparent); }
.alerta-naranja { background: color-mix(in srgb, var(--aviso) 8%, var(--superficie)); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }
.alerta-verde { background: color-mix(in srgb, var(--bien) 8%, var(--superficie)); border-color: color-mix(in srgb, var(--bien) 30%, transparent); }

/* ── Íconos de categoría: fondo tenue, sin borde ── */
.reg-icono { border: 0; background: color-mix(in srgb, var(--cat, var(--acento)) 14%, var(--superficie)); }
.reg-icono svg { color: var(--cat, var(--acento)); }
.pres-vacio-icono, .vacio-icono { background: var(--realce); color: var(--acento); border: 0; box-shadow: none; }
.pres-invita { border-color: var(--borde); }

/* ── Formularios ── */
input, select, textarea { background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); }
:root[data-tema="oscuro"] input, :root[data-tema="oscuro"] select, :root[data-tema="oscuro"] textarea { background: var(--superficie-2); }
.captura-detalles { background: var(--superficie-2); border: 1px solid var(--borde); }

/* ── Sin coreografía: las pantallas aparecen, no bailan ── */
.vista:not(.oculto) > .tarjeta, .vista:not(.oculto) .col-principal > .tarjeta, .vista:not(.oculto) .col-lateral > .tarjeta,
.vista:not(.oculto) > .tiras, .vista:not(.oculto) > .acciones-rapidas, .vista:not(.oculto) #pres-lista > .tarjeta { animation: none; }
.vista { animation: aparecer .15s ease-out; }
/* El menú cerrado no deja su sombra asomada en la orilla. */
@media (max-width: 899px) { .lateral:not(.abierta) { box-shadow: none; } }

/* ═══════════════════════════════════════════════════════════════
   v42 — LO IMPORTANTE SE VE DE UN VISTAZO
   Base sobria, pero el estado grita: verde vas bien, ámbar vas justo,
   rojo aguas. En el héroe, el próximo pago, el punto más bajo, los
   presupuestos y lo que toca pagar de cada tarjeta.
   ═══════════════════════════════════════════════════════════════ */
.estado-verde { --estado: var(--bien); }
.estado-amarillo { --estado: var(--aviso); }
.estado-rojo { --estado: var(--mal); }

.pastilla-estado {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 99px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1px; white-space: nowrap; vertical-align: middle;
  background: var(--estado, var(--acento)); color: #fff;
}
.pastilla-estado:empty { display: none; }
.pastilla-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.pastilla-estado.chica { font-size: 11px; padding: 2px 8px; }
.pastilla-estado.chica::before { display: none; }
:root[data-tema="oscuro"] .pastilla-estado { color: #0b0c0f; }

.hero-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hero-dia[class*="estado-"] {
  background: color-mix(in srgb, var(--estado) 7%, var(--superficie)) !important;
  border: 1.5px solid color-mix(in srgb, var(--estado) 35%, transparent) !important;
}
.hero-dia.estado-verde .hero-monto { color: var(--c-propio); }
.hero-dia.estado-amarillo .hero-monto, .hero-dia.estado-rojo .hero-monto { color: var(--estado); }
.texto-estado { display: block; color: var(--estado); margin-bottom: 4px; font-weight: 700; }
.hero-dia[class*="estado-"] .hero-chispa { --acento: var(--estado); }

.tira[class*="estado-"] {
  background: color-mix(in srgb, var(--estado) 7%, var(--superficie)) !important;
  border: 1.5px solid color-mix(in srgb, var(--estado) 30%, transparent) !important;
}
.tira.estado-rojo .tira-valor, .tira.estado-amarillo .tira-valor { color: var(--estado); }
.tira.estado-verde .tira-valor { color: var(--c-propio); }
.tira .pastilla-estado.chica { margin-right: 4px; }

.pres[class*="estado-"] { border-left: 4px solid var(--estado) !important; }
.pres.estado-verde .pres-disponible { color: var(--c-propio); }
.pres.estado-rojo .pres-disponible { color: var(--mal); }

.mini.urge { --estado: var(--aviso); background: color-mix(in srgb, var(--estado) 10%, var(--superficie-2)); border: 1.5px solid color-mix(in srgb, var(--estado) 40%, transparent); }
.mini.urge.muy { --estado: var(--mal); }
.mini.urge .mini-valor, .mini.urge .sutil { color: var(--estado); }
.insignia-nivel.nivel-alto { background: color-mix(in srgb, var(--aviso) 16%, transparent); color: var(--aviso); }
.insignia-nivel.nivel-critico { background: var(--mal); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   v43 — EN COMPU NO SE ESTIRA
   Contenido centrado con ancho máximo y columnas: nada ocupa 1,200 px
   de ancho solo porque cabe.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .contenido { max-width: 1160px; margin: 0 auto; padding: 0 40px 56px; }
  .vista { max-width: 1080px; margin: 0 auto; }
  /* Pantallas de una sola columna: más angostas, como un documento. */
  #vista-presupuestos, #vista-categorias, #vista-calendario, #vista-personas, #vista-simulador,
  #vista-asistente, #vista-ajustes { max-width: 820px; }

  /* Inicio: el héroe a la izquierda; accesos, próximo pago y punto más bajo a la derecha. */
  #vista-dia { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 18px; align-items: start; }
  #vista-dia > * { grid-column: 1 / -1; }
  #vista-dia > .hero-dia { grid-column: 1; grid-row: 2 / span 2; margin-bottom: 16px; align-self: stretch; }
  #vista-dia > .acciones-rapidas { grid-column: 2; grid-row: 2; margin: 0 0 14px; max-width: none; }
  #vista-dia > .tiras-dia { grid-column: 2; grid-row: 3; grid-template-columns: 1fr; margin-bottom: 16px; }
  #vista-dia .acciones-rapidas button { background: var(--superficie); border-radius: 18px; padding: 14px 4px 12px; box-shadow: var(--sombra) !important; }
  :root:not([data-tema="oscuro"]) #vista-dia .acciones-rapidas span { background: var(--superficie-2); border: 0; box-shadow: none; }
  .hero-dia { display: flex; flex-direction: column; }
  .hero-dia .hero-chispa { margin-top: auto; padding-top: 16px; }

  /* Cuentas: los cinco totales en una fila. */
  #totales.tiras { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #totales .tira:last-child { grid-column: auto; }
  #totales .tira-valor { font-size: 22px; }

  /* Registros y estadísticas: tiras en una fila. */
  #reg-tiras.tiras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #reg-tiras .tira-grande, #reg-tiras .tira:nth-child(4) { grid-column: auto; }
  #est-cuerpo .tiras { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Presupuestos: dos por renglón. */
  #pres-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #pres-lista > .tarjeta { margin: 0; }
  #pres-lista > .pres-vacio { grid-column: 1 / -1; }
  #btn-nuevo-presupuesto { max-width: 320px; margin-top: 16px !important; }

  /* Estadísticas: las tarjetas largas a dos columnas. */
  #est-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-items: start; }
  #est-cuerpo > .pres-heroe, #est-cuerpo > .tiras { grid-column: 1 / -1; }

  /* Botones que no tienen por qué medir todo el ancho. */
  .form-acciones .boton-principal, .hoja-caja .boton-principal { max-width: 420px; }
  .hoja-caja { max-width: 560px; }
}
@media (min-width: 1400px) { .contenido { max-width: 1240px; } }
.revisar-aviso { display: flex; gap: 8px; margin-top: 10px; } .revisar-aviso input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px; }
.mini-renglones { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12px; color: var(--sutil); margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.opciones-gasto { display: grid; gap: 8px; margin-bottom: 14px; }
.opcion-gasto { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--superficie-2); border: 1.5px solid transparent; color: var(--texto); font-family: inherit; font-size: 14.5px; text-align: left; }
.opcion-gasto span { color: var(--sutil); font-size: 13px; font-family: var(--f-numeros); }
.opcion-gasto.activo { border-color: var(--tinta); background: var(--superficie); }
.gn-resultado { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--realce); font-size: 14px; line-height: 1.5; }

/* ── evidencia: fotos y PDF del gasto (v45) ── */
.adjuntos-lista { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 8px; }
.adjunto { display: flex; align-items: center; gap: 10px; }
.adjunto img, .adjunto-pdf { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; border: 1px solid var(--borde); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--sutil); background: var(--superficie-2); }
.adjunto-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.adjunto-texto span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjuntos-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.adjuntos-botones label.boton-chico { cursor: pointer; }

/* ── presupuestos semanales y avisos de la app (v45) ── */
.pres-semana-lista:empty { display: none; }
.pres-semana-lista .fila-titulo { margin: 4px 2px 10px; }
.pres-semana-lista { margin-bottom: 18px; }
.pres-semana .pres-disponible { color: var(--texto); }
.pres-de { font-family: var(--f-texto, inherit); font-size: 14px; letter-spacing: 0; font-weight: 500; }
.pres-barra.pres-barra-estado { position: relative; overflow: visible; }
.pres-barra.pres-barra-estado > div, .pres-mini .pres-barra.pres-barra-estado > span { background: var(--estado, var(--acento)); box-shadow: none; }
.pres-barra.pres-barra-estado > i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--texto); opacity: .45; border-radius: 1px; }
.pres-mini[class*="estado-"] .pres-mini-fila span { color: var(--texto); }
.pres-mini[class*="estado-"] .pres-mini-fila b { display: inline-flex; align-items: center; gap: 6px; }
.aviso-app {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--estado, var(--acento)) 8%, var(--superficie));
  border: 1.5px solid color-mix(in srgb, var(--estado, var(--acento)) 35%, transparent);
}
.aviso-app-texto { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; flex: 1 1 220px; }
.aviso-app-texto span { color: var(--sutil); font-size: 13px; }
.aviso-app-botones { display: flex; align-items: center; gap: 12px; }

/* ── salida de los meses sin intereses (v45) ── */
.salida-heroe[class*="estado-"] { background: color-mix(in srgb, var(--estado) 6%, var(--superficie)); border: 1.5px solid color-mix(in srgb, var(--estado) 30%, transparent); }
.salida-heroe-monto { font-family: var(--f-numeros); font-size: 36px; font-weight: 700; letter-spacing: -1.4px; margin: 6px 0 4px; }
.salida-limite { margin-top: 14px; max-width: 420px; }
.salida-veredicto { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--estado) 7%, var(--superficie)); border: 1.5px solid color-mix(in srgb, var(--estado) 30%, transparent); }
.salida-pasa { font-size: 13.5px; font-weight: 600; color: var(--mal); }
.salida-lista { display: flex; flex-direction: column; }
.salida-mes { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.salida-mes:last-child { border-bottom: 0; }
.salida-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.salida-total { font-family: var(--f-numeros); }
.salida-mes.estado-rojo .salida-total { color: var(--mal); }
.salida-barra { position: relative; display: flex; height: 8px; margin: 8px 0 6px; border-radius: 99px; background: var(--superficie-2); }
.salida-barra > span { display: block; height: 100%; background: var(--estado, var(--acento)); }
.salida-barra > span:first-child { border-radius: 99px 0 0 99px; }
.salida-barra > span:last-of-type { border-radius: 0 99px 99px 0; }
.salida-barra > span:only-of-type { border-radius: 99px; }
.salida-barra > span.simulada { background: repeating-linear-gradient(45deg, var(--mal) 0 4px, color-mix(in srgb, var(--mal) 55%, transparent) 4px 8px); }
.salida-barra > i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--texto); opacity: .5; border-radius: 1px; }
.salida-detalle { font-size: 12.5px; }
.salida-termina { font-size: 13px; margin-top: 4px; }
.salida-libera { font-size: 13px; margin-top: 2px; color: var(--bien); }
.salida-libera b { color: inherit; }

/* ── resumen de quincena (v45) ── */
#rq-lista { margin-bottom: 14px; overflow-x: auto; flex-wrap: nowrap; }
#rq-lista button { white-space: nowrap; }
.rq-cifras { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 8px; }
.rq-num { font-family: var(--f-numeros); font-size: 30px; font-weight: 700; letter-spacing: -1.2px; }
.rq-num.positivo { color: var(--bien); }
.rq-aviso { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); font-size: 13.5px; }
.rq-cambio { font-size: 12.5px; font-weight: 700; }
.rq-cambio.sube { color: var(--mal); }
.rq-cambio.baja { color: var(--bien); }
.rq-contra { font-size: 12px; font-weight: 500; text-align: right; }
.rq-sin { font-size: 12px; }
.renglon[class*="estado-"] .pastilla-estado { vertical-align: 1px; }

/* ── hilo del dinero y registro de la app (v46) ── */
.hilo { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; font-size: 13.5px; }
.hilo-paso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hilo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.abono-hilo { align-items: flex-start; }
.renglon-boton { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--borde); cursor: pointer; font: inherit; color: inherit; }
#rg-filtro { margin-bottom: 14px; }
.rg-resumen { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--estado) 7%, var(--superficie)); border: 1.5px solid color-mix(in srgb, var(--estado) 30%, transparent); }
.rg-evento.visto { opacity: .6; }
.rg-detalle summary { cursor: pointer; font-size: 12.5px; color: var(--sutil); margin-top: 4px; }
.rg-detalle pre { font-size: 11.5px; white-space: pre-wrap; word-break: break-word; background: var(--superficie-2); padding: 8px 10px; border-radius: 8px; margin: 6px 0 0; }

/* ── Mi mes: el dinero de verdad (v47) ── */
.mes-real { margin-bottom: 14px; }
.mes-real-monto { font-family: var(--f-numeros); font-size: 34px; font-weight: 700; letter-spacing: -1.3px; margin: 4px 0 10px; }
.mes-real-cuenta { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; font-size: 14px; }
.mes-real-cuenta span { color: var(--sutil); }
.mes-real-cuenta b { font-family: var(--f-numeros); text-align: right; }
.resumen-papel { grid-column: 1 / -1; font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════════════
   v49 — ARREGLOS DE DISEÑO (26-sep)
   ═══════════════════════════════════════════════════════════════ */
/* La gráfica del héroe heredaba un gris casi blanco del diseño viejo: su
   etiqueta no se leía sobre el fondo claro. Y deja lugar para la etiqueta del mínimo. */
.hero-chispa { --sutil: inherit; padding-bottom: 14px; }

/* La burbuja del asistente se quita de en medio al bajar por una lista. */
.burbuja-asistente.escondida { opacity: 0; pointer-events: none; transform: translateY(24px) scale(.85); }

/* Un ajuste de saldo no es un gasto: renglón gris, sin categoría. */
.reg-ajuste .renglon-titulo, .reg-ajuste .renglon-monto { color: var(--sutil); font-weight: 500; }
.reg-ajuste .reg-icono { --cat: var(--sutil); background: var(--superficie-2); color: var(--sutil); }

/* El saludo en el teléfono: un renglón, para que el dinero suba. */
@media (max-width: 520px) {
  #dia-saludo { font-size: 22px; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* La deuda en tinta: el color se reserva para lo que pide atención (por pagar,
   vencido, utilización alta). El puntito y la barra dicen de qué tarjeta es. */
.monto-deuda, .credito-deuda { color: var(--texto); }
.insignia-nivel.nivel-alto { background: color-mix(in srgb, var(--aviso) 16%, var(--superficie)); color: var(--aviso); }
.insignia-nivel.nivel-critico { background: color-mix(in srgb, var(--mal) 14%, var(--superficie)); color: var(--mal); }
.quincena-verdad { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--aviso) 9%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--aviso) 30%, transparent); font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }
.quincena-detalle > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--enlace, var(--acento)); padding: 6px 0; list-style: none; }
.quincena-detalle > summary::-webkit-details-marker { display: none; }
.quincena-detalle > summary::after { content: ' ›'; }
.quincena-detalle[open] > summary::after { content: ' ⌄'; }