/* =====================================================================
   MiesApp — ESTILO B  (bloques apilados + nav flotante + squircle)
   Rediseño visual del inicio y la navegación. AISLADO a propósito: se
   carga DESPUÉS del resto, así sus reglas ganan por cascada sin tener que
   tocar los archivos base. Si algo molesta, se saca el <link> y vuelve el
   estilo anterior. Nada de sombras: todo se define con bordes.

   Motivo repetido "dos bloques apilados": un bloque de color arriba (z=2)
   y un bloque claro abajo (z=1) que asoma con margin-top negativo, como si
   el de arriba estuviera apoyado sobre el de abajo. Se usa en el ritmo
   financiero y en el dock inferior (nav + buscador/filtro).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SQUIRCLE progresivo
   Donde el navegador soporte corner-shape (iOS/Safari y Chrome modernos),
   TODO lo que ya tiene border-radius pasa a superelipse (la esquina suave
   estilo Apple). Donde no, queda el border-radius normal: nunca se rompe.
   --------------------------------------------------------------------- */
@supports (corner-shape: squircle) {
  /* TODO lo que tiene esquina redondeada usa squircle: botones, inputs y bloques. */
  button, input, select, textarea,
  .card, .hint, .hc3, .sesrow, .fsesrow, .cta-card, .chip,
  .cal-d, .tabbar, .tabbar .mi-pill,
  .notif-card, .welcome, .empty, .mov-resumen, .avat,
  .cfg-banner, .cfg-card, .cfg-banner-link, .cfg-row, .logo-prev, .rlink,
  .ritmo-hero, .ritmo-foot,
  #bottomnav.show, .bnav-item.active, #bottomnav .mi-navpill,
  #s-lista .sticky-bottom, #s-movs .sticky-bottom, #s-agenda .sticky-bottom {
    corner-shape: superellipse(4);
  }
  /* Círculos 1:1 (se mantienen redondos): botones de ícono (FAB, lupa, notif,
     config, flechas de mes, atrás, $ y avisos de ficha) + badges, íconos
     decorativos, spinner, pills y checkboxes. Los botones RECTANGULARES sí van
     squircle (por la regla de arriba). */
  .bk, .fab, .fab-search, .fab-search-ico, .mnav, .ficha-cc-btn, .ficha-next-ico,
  .cta-ico, .cta-check, .fses-check, .fses-fac, .noti-ico, .noti-check, .spin,
  .sk-ico, .bell-badge, .pill, .sheet-x, .welcome-x, .cfg-gear,
  .bnav-item, .dots i, input[type="checkbox"], input[type="radio"] {
    corner-shape: round;
  }
}

/* ---------------------------------------------------------------------
   2. CARDS: radio 16, sin sombra (ya venían sin sombra, solo el radio)
   --------------------------------------------------------------------- */
.card { border-radius: 16px; }

/* ---------------------------------------------------------------------
   3. RITMO FINANCIERO — dos bloques apilados
   #card-ritmo deja de ser una card: es solo el contenedor de los dos
   bloques que arma homeRitmo() (celeste arriba, blanco abajo).
   --------------------------------------------------------------------- */
#card-ritmo { padding: 0; background: none; border: none; }
#home-ritmo { display: block; }

.ritmo-hero {
  position: relative; z-index: 2;
  background: var(--mies);
  border: 1px solid #1461cf;          /* borde celeste más oscuro = "toque" */
  border-radius: 16px;
  padding: 14px 16px 18px;
  color: #fff;
}
.ritmo-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ritmo-hero-title {
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: rgba(255, 255, 255, .78);
}
.ritmo-hero-chip {
  flex: 0 0 auto; font-size: 11.5px; color: rgba(255, 255, 255, .82);
  padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .34); border-radius: var(--rad-pill);
}
.ritmo-hero-numrow { display: flex; align-items: baseline; gap: 8px; margin-top: 11px; }
.ritmo-hero-num { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #fff; }
.ritmo-hero-sub { font-size: 12.5px; color: rgba(255, 255, 255, .74); }

.ritmo-foot {
  position: relative; z-index: 1;
  margin-top: -14px;                  /* asoma por debajo del celeste */
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;                   /* el borde de arriba lo tapa el celeste */
  border-radius: 0 0 16px 16px;       /* esquinas de arriba rectas: una sola curva */
  padding: 22px 16px 11px;
  display: flex; align-items: center; justify-content: space-between;
}
.ritmo-foot .rl { font-size: 12.5px; color: var(--muted); }
.ritmo-foot .rv { font-size: 13.5px; font-weight: 600; color: var(--text); margin-left: 4px; }

/* estado sin movimientos (mismo lugar que el número) */
.ritmo-vacio { padding: 16px; border: 1px solid var(--border); border-radius: 16px; }

/* ---------------------------------------------------------------------
   4. NAV FLOTANTE  +  DOCK apilado (nav arriba, buscador/filtro abajo)
   El nav deja de ser una barra de ancho completo: es una píldora flotante
   centrada, translúcida con blur. La lista scrollea por debajo.
   Las alturas del stack las mide js/estilob.js (variables --sb-h/--nav-h)
   para que el nav quede apoyado sobre el buscador/filtro.
   --------------------------------------------------------------------- */
:root { --nav-h: 52px; --sb-h: 0px; --dock-gap: 10px; }

#bottomnav.show {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* El nav va SIEMPRE pegado abajo y adelante (z mayor). El buscador/filtro se
     apoya sobre él, asomando por arriba (mismo motivo apilado, rotado). */
  bottom: calc(env(safe-area-inset-bottom) + var(--dock-gap));
  width: max-content;
  gap: 5px;
  padding: 5px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid #e6e6ec;
  border-radius: 20px;
  z-index: 60;                        /* adelante del buscador/filtro; bajo header(100) */
}
/* Píldora deslizante del nav (rubber) — la posiciona js/estilob.js igual que
   la de los filtros. Con .has-navpill el ítem activo suelta su fondo (lo pone
   la píldora); sin JS cae al fondo celeste del .active (fallback seguro). */
#bottomnav .mi-navpill {
  position: absolute; left: 0; top: 0; z-index: 0;
  background: var(--mies);
  border-radius: 15px;
  transition: transform .34s cubic-bezier(.32, .72, 0, 1), width .34s cubic-bezier(.32, .72, 0, 1);
  will-change: transform, width;
  pointer-events: none;
}
#bottomnav .mi-navpill.mi-hide { opacity: 0; }
#bottomnav .mi-navpill.mi-noanim { transition: none; }
#bottomnav .bnav-item { position: relative; z-index: 1; }   /* por encima de la píldora */
#bottomnav.has-navpill .bnav-item.active { background: none; }
@media (prefers-reduced-motion: reduce) { #bottomnav .mi-navpill { transition: none; } }
/* Ítems: en fila, solo ícono. El activo muestra su texto y va en celeste. */
.bnav-item {
  flex: 0 0 auto;
  flex-direction: row;
  gap: 8px;
  padding: 11px 15px;
  border-radius: 15px;
  color: #b0b0bd;
}
.bnav-item .bnav-tx { display: none; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.bnav-item .ico { width: 23px; height: 23px; }
.bnav-item.active { background: var(--mies); color: #fff; padding: 11px 20px; }
.bnav-item.active .bnav-tx { display: inline; }
.bnav-item:active { opacity: 1; }    /* el squish lo pone micro.css */

/* Home: no scrollea; el contenido termina antes del nav (reservamos su alto). */
#s-home { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 22px); }

/* Con el teclado abierto NO hay home-indicator → el safe-area de abajo sobra y
   deja el nav (y el dock de búsqueda) demasiado arriba. Lo sacamos. */
html.kb-open #bottomnav.show { bottom: var(--dock-gap); }
html.kb-open .fab-dock { bottom: calc(var(--dock-gap) + var(--nav-h) + 12px); }

/* El fade de pantalla (mi-scr, opacity 0→1) desactiva el backdrop-filter mientras
   dura → la barra de búsqueda frosteada parpadea transparente y "prende" al
   terminar. En Pacientes/Caja (que tienen el dock frost) sacamos ese fade. */
#s-lista.scr.on, #s-movs.scr.on { animation: none; }

/* ---------------------------------------------------------------------
   5. BÚSQUEDA / FILTROS arriba (bajo el título) + FAB centrado
   Ya NO hay dock flotante: la búsqueda (Pacientes/Caja) y los filtros
   (Agenda) viven en una banda fija bajo el header (.hdr-tools). El nav
   queda solo abajo y la lista scrollea por debajo de él. El FAB flota
   centrado y chico, frosted, justo sobre el nav.
   --------------------------------------------------------------------- */
.scr.split { position: relative; }        /* ancla del FAB flotante */

/* Banda de herramientas bajo el header: no scrollea (vive fuera de .body-in). */
.hdr-tools {
  flex-shrink: 0;
  background: var(--bg);
  margin: 0 calc(-1 * var(--scr-x));
  padding: 2px var(--scr-x) 12px;
}
.hdr-tools .fld { margin: 0; }
.hdr-tools .fld input { height: 46px; }
.hdr-tools .tabbar { margin: 0; }

/* La banda (Agenda) va pegada al header; el selector de mes/semana ya no cancela margen. */
#s-movs .hdr, #s-agenda .hdr { margin-bottom: 0; }
#s-movs .cal-fixed-top, #s-agenda .cal-fixed-top { margin-top: 0; }

/* La lista scrollea por debajo del nav + FAB: padding = alto del nav + FAB + aire. */
#s-lista .body-in, #s-movs .body-in, #s-agenda .body-in {
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--dock-gap) + var(--nav-h) + 70px);
}

/* FAB: celeste PURO (igual color que el pill de Caja), chico, redondo, sin frost. */
.fab-dock .fab, #s-agenda .fab {
  width: 46px; height: 46px;
  background: var(--mies);
  border: none;
}
.fab-dock .fab .ico, #s-agenda .fab .ico { width: 22px; height: 22px; }

/* Agenda no tiene búsqueda → FAB solo, centrado, sobre el nav. */
#s-agenda .fab {
  position: absolute; left: 50%; right: auto; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + var(--dock-gap) + var(--nav-h) + 12px);
}
#s-agenda .fab:active { transform: translateX(-50%) scale(.93); }

/* Dock inferior (Pacientes/Caja): lupa colapsable a la izquierda + FAB a la
   derecha; juntos ocupan el ancho del nav (--dock-w). */
.fab-dock {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + var(--dock-gap) + var(--nav-h) + 12px);
  width: var(--dock-w, calc(100% - 2 * var(--scr-x)));
  /* Colapsado: lupa + FAB centrados con espacio entre ellos. Abierto: la lupa
     crece y el par pasa a ocupar el 100% del ancho (FAB queda a la derecha). */
  display: flex; align-items: center; justify-content: center; gap: 12px;
  z-index: 56;
}
.fab-dock .fab { position: static; flex: 0 0 auto; }
.fab-dock .fab:active { transform: scale(.93); }

/* Búsqueda: círculo blanco frost → se alarga a barra full-width al abrir. */
.fab-search {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: flex; align-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid #e6e6ec;
  border-radius: var(--rad-pill);
  transition: width .34s cubic-bezier(.32, .72, 0, 1);
}
.fab-search.open { width: calc(100% - 58px); }   /* deja 46 del FAB + 12 de gap */
.fab-search-ico {
  flex: 0 0 46px; width: 46px; height: 46px; padding: 0;
  border: none; background: none; cursor: pointer; color: var(--sec);
  display: flex; align-items: center; justify-content: center;
}
.fab-search-ico .ico { width: 21px; height: 21px; }
.fab-search-in {
  flex: 1 1 auto; min-width: 0;
  border: none; background: none; outline: none;
  font-family: inherit; font-size: 15px; color: var(--text);
  padding: 0 10px 0 0;
  opacity: 0; transition: opacity .18s ease;
}
.fab-search.open .fab-search-in { opacity: 1; }

/* ---------------------------------------------------------------------
   6. FILTROS SEGMENTADOS — misma lógica (radio + squircle), en gris
   La píldora deslizante (rubber) ya existe en micro.css/js; acá solo
   ajustamos radios para que hablen el mismo idioma que el resto.
   --------------------------------------------------------------------- */
/* Contenedor = caja blanca con borde (como el resto de los box). */
.tabbar { border-radius: 16px; background: var(--bg); border: 1px solid var(--border); }
.tab { border-radius: 12px; color: var(--sec); }
/* Seleccionado = pastilla GRIS (como el selector del nav pero gris), texto blanco. */
.tabbar.has-pill .mi-pill { border-radius: 12px; background: var(--sec); box-shadow: none; }
.tabbar.has-pill .tab.sel { color: #fff; }
/* Sin píldora (fallback): el .sel toma la misma pastilla gris. */
.tabbar:not(.has-pill) .tab.sel { background: var(--sec); color: #fff; }

/* ---------------------------------------------------------------------
   6b. CALENDARIO (Agenda) — solo estético
   Día con sesiones = celeste PLENO (sin puntos ni conteo). Sábado y domingo
   en gris. El inicio en lunes y la lógica no se tocan (renderCal).
   --------------------------------------------------------------------- */
.cal-d.cal-wknd .cal-num { color: var(--muted); }
.cal-d.cal-has { background: var(--mies); border-color: var(--mies); }
.cal-d.cal-has .cal-num { color: #fff; font-weight: 700; }
/* La selección (día elegido para ver sus sesiones) gana sobre el celeste. */
.cal-d.cal-sel { background: var(--primary); border-color: var(--primary); }
.cal-d.cal-sel .cal-num { color: var(--onprimary); }

/* ---------------------------------------------------------------------
   7. Desktop: el nav flotante se apaga (manda el menú lateral). El dock
   vuelve a comportarse como antes (barra en flujo no hace falta acá).
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  #bottomnav.show { display: none; }   /* en desktop manda el menú lateral */
  #s-lista .body-in, #s-movs .body-in, #s-agenda .body-in { padding-bottom: 0; }
  #s-lista .fab, #s-movs .fab, #s-agenda .fab { bottom: 24px; }
  #s-home { padding-bottom: 20px; }
}

/* ---------------------------------------------------------------------
   8. CONFIGURACIÓN (menú como página completa #s-config)
   Banner celeste (link de reservas) + cards de perfil y acciones.
   --------------------------------------------------------------------- */
.cfg-page { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 calc(env(safe-area-inset-bottom) + 26px); }

.cfg-banner { background: var(--mies); border: 1px solid #1461cf; border-radius: 16px; padding: 15px 16px; color: #fff; }
.cfg-banner-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.cfg-banner-k { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.cfg-banner-cfg { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: none; color: #fff; cursor: pointer; }
.cfg-banner-cfg:active { transform: scale(.9); }
.cfg-banner-cfg svg { display: block; }
.cfg-banner-link { font-size: 13px; word-break: break-all; background: rgba(255,255,255,.15); border-radius: 10px; padding: 10px 12px; margin-bottom: 11px; }
.cfg-banner-empty { font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.92); margin: 0 0 11px; }
.cfg-banner-copy { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: #fff; color: var(--mies); font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 11px; border-radius: 12px; cursor: pointer; }
.cfg-banner-copy:active { transform: scale(.98); }

.cfg-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; }
.cfg-card .fld:first-of-type { margin-top: 2px; }
.cfg-sec-t { font-size: 13px; font-weight: 600; color: var(--sec); margin: 0 0 12px; }
.cfg-card .appbtn { margin-top: 4px; }

.cfg-actions { padding: 6px 8px; display: flex; flex-direction: column; }
.cfg-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 8px; border: none; background: none; font-family: inherit; font-size: 15px; color: var(--text); text-align: left; cursor: pointer; border-radius: 12px; }
.cfg-row:active { background: var(--surf); }
.cfg-row-ic { flex: 0 0 auto; display: flex; align-items: center; color: var(--sec); }
.cfg-row-tx { flex: 1; }
.cfg-row > svg:last-child { flex: 0 0 auto; color: var(--muted); }
.cfg-row-hi { color: var(--mies); font-weight: 600; }
.cfg-row-hi .cfg-row-ic { color: var(--mies); }
.cfg-sug { padding: 2px 8px 8px; }
.cfg-sug textarea { width: 100%; box-sizing: border-box; min-height: 92px; border: 1px solid var(--border2); border-radius: 12px; padding: 11px 12px; font-family: inherit; font-size: 14.5px; line-height: 1.5; resize: vertical; margin-bottom: 10px; outline: none; }
.cfg-sug textarea:focus { border-color: var(--acento); }

/* =====================================================================
   9. RADIO POR ESCALÓN DE TAMAÑO
   Misma curva squircle en todo; el RADIO crece con la prominencia del bloque
   (da dinamismo, es una escala, no valores sueltos). Va al final a propósito,
   para ganarle a los radios dispersos de los otros archivos.
     · 1 · controles/chicos (botones, inputs, filtros, chips, celdas cal): 12
     · 2 · cards (sesiones, pacientes, movs, notif, perfil, filtro-caja): 18
     · 3 · bloques grandes / hero (ritmo del home, banner, resumen Caja): 28
   ===================================================================== */
:root { --rad-ctl: 12px; --rad-card: 18px; --rad-big: 28px; }

/* Escalón 1 — controles y elementos chicos (los tabs de filtro y los inputs
   tienen su propio radio abajo). */
.appbtn, .ghostbtn, .dangerbtn, .primary, .qbtn, .bigopt,
.rlink-btn, .welcome-cta, .notif-actions button, .cfg-banner-copy,
.seg button, .chip, .cal-d, .cfg-row {
  border-radius: var(--rad-ctl);
}

/* Escalón 2 — cards */
.card, .sesrow, .fsesrow, .cta-card, .hc3, .hint,
.notif-card, .welcome, .empty, .cfg-card, .tabbar {
  border-radius: var(--rad-card);
}

/* Escalón 3 — bloques grandes / hero */
.ritmo-hero, .cfg-banner, .mov-resumen { border-radius: var(--rad-big); }
.ritmo-foot { border-radius: 0 0 var(--rad-big) var(--rad-big); }

/* =====================================================================
   10. HOME — radios afinados a ojo (referencia Photoshop escalada a CSS por
   proporción, no valores crudos). Solo el home; el resto se ajusta aparte.
     · ritmo financiero (hero + foot): 28 → 17  (achatado = radio chico)
     · bloques agenda + deudas:        18 → 32  (más altos = radio grande)
   ===================================================================== */
.ritmo-hero { border-radius: 17px; }
.ritmo-foot { border-radius: 0 0 17px 17px; margin-top: -14px; }
#card-agenda, #card-deben { border-radius: 32px; }

/* Padding horizontal de las cards del home = el del ritmo (16px), para que el
   contenido no quede pegado al borde y el ancho interior sea consistente. */
.widget { padding-left: 16px; padding-right: 16px; }

/* =====================================================================
   11. PACIENTES + FICHA
   ===================================================================== */
/* Avatar del paciente: squircle 1:1 (antes era círculo). */
.avat { border-radius: 12px; }

/* Primer paciente con aire arriba = al de abajo (no pegado al header). */
#s-lista #plist .prow:first-child { padding-top: 13px; }

/* Ficha — Cuenta corriente con el formato del ritmo financiero: celeste pleno,
   mismo radio (17) y márgenes. */
.ficha-cc-card { background: var(--mies); border-color: #1461cf; border-radius: 17px; }
.ficha-cc-card::after { display: none; }              /* sin la línea separadora */
.ficha-cc-card .ficha-cc-info .k { color: rgba(255, 255, 255, .82); }
.ficha-cc-card .ficha-cc-val { color: #fff; }         /* gana a .t-bad/.t-ok */
/* Botón "$": outline (borde + icono blanco). Botón avisos (chat): blanco pleno + icono celeste. */
.ficha-cc-card .ficha-cc-btn { background: transparent; border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; }
.ficha-cc-card .ficha-cc-btn2 { background: #fff; border: none; color: var(--mies); }

/* Bloques de cada movimiento: 53 → 42 (~14px). */
#s-ficha .cta-card { border-radius: 14px; }
/* Botón Editar: radio 14 (como los movimientos). El filtro usa el estilo nav (§12). */
#ficha-editar { border-radius: 14px; }

/* =====================================================================
   12. FILTROS con el estilo del nav (aplica a TODOS los .tabbar: ficha,
   agenda, etc.). Contenedor y pastilla CONCÉNTRICOS (radio contenedor =
   radio pastilla + padding) y padding uniforme, como el nav.
   ===================================================================== */
.tabbar { padding: 5px; border-radius: 20px; align-items: center; }
.tab { border-radius: 15px; }
.tabbar.has-pill .mi-pill { border-radius: 15px; }

/* Nav + filtros: padding vertical simétrico (que el de abajo no se vea más
   chico) — centrar el contenido y neutralizar el vertical-align del icono. */
#bottomnav.show { align-items: center; }
#bottomnav .ico, .tabbar .ico { vertical-align: middle; }

/* Inputs y selects de todos los forms: un poco más altos (radio 14 lo pone la
   regla base input/select/textarea). Fuente única. La búsqueda flotante
   (.fab-search-in) no entra acá (no es .fld). */
.fld input, .fld select { height: 52px; }

/* =====================================================================
   13. AGENDA + CAJA + botones squircle (todos)
   ===================================================================== */
/* Calendario: número centrado verticalmente (ya no hay puntos). */
.cal-d { justify-content: center; padding: 0; }

/* Botón "Agendar" (empty state) y appbtn en general: centrar el contenido
   dentro del min-height, si no el texto queda arriba y sobra padding abajo. */
.appbtn { display: flex; align-items: center; justify-content: center; }
.empty-btn { display: inline-flex; align-items: center; justify-content: center; }

/* Caja — resumen del mes: menos radio (más squircle), un poco más alto. */
.mov-resumen { padding: 12px 16px; border-radius: 14px; }

/* Caja — lista: más aire entre filas y fecha con ancho fijo (todas iguales). */
#s-movs #movs-list .mrow { padding-top: 12px; padding-bottom: 12px; }
#s-movs .mrow .mdate { width: 58px; flex: 0 0 58px; }

/* Los botones de ícono (FAB, lupa, notif, config, flechas de mes, atrás, $ y
   avisos de ficha) se mantienen CIRCULARES 1:1 (radio original 50%/pill). */

/* =====================================================================
   14. HOME — padding INTERNO de los bloques de resumen (radio 32)
   REGLA: todo bloque con radio 32 (agenda, deudas, y futuros) va con este
   padding interno. Lateral +35% (16→22); vertical +44% (~14→20).
   ===================================================================== */
#card-deben { padding: 20px 22px; }
/* Agenda: top chico porque el .hg-day del 1er grupo suma 14px (alinea la fecha
   con la 1ª fila) → 6+14 = 20, igual que Deudas y alineado con el primer ítem. */
#card-agenda { padding: 6px 22px 20px; }


/* Deudas pendientes: mismo fade inferior que agenda (indica que sigue abajo). */
#home-deben {
  -webkit-mask-image: linear-gradient(to bottom, black 88%, transparent);
  mask-image: linear-gradient(to bottom, black 88%, transparent);
}