:root {
  --acento: #1b2d52; --acento-claro: #2f4a80; --fondo: #f2f4f8; --tarjeta: #fff; --borde: #d6dce6;
  --texto: #1a2130; --gris: #646e80; --rojo: #b3261e; --verde: #1d7a50; --linea: #edf0f5; --hover: #e5eaf2;
  --aviso: #e8eef8; --aviso-borde: #bccbe4; --alerta: #fff6e0; --alerta-borde: #f0d79a;
  --error: #fdecea; --error-borde: #f1b9b3; --sombra: 0 1px 2px rgba(0, 0, 0, .05);
  color-scheme: light;
}
html.noche {
  --acento: #8fb3ff; --acento-claro: #aec8ff; --fondo: #0e1320; --tarjeta: #171d2b; --borde: #283247;
  --texto: #e2e8f2; --gris: #939db0; --rojo: #f08a80; --verde: #6fd3a2; --linea: #212a3b; --hover: #212a3b;
  --aviso: #16223a; --aviso-borde: #2a4170; --alerta: #33290f; --alerta-borde: #5c4a1c;
  --error: #3a1a18; --error-borde: #6b2e29; --sombra: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--acento); }
/* En el teléfono la letra un poco más chica (los rem se escalan con html) */
@media (max-width: 899px) { html { font-size: 15px; } body { font-size: 15px; } }
h1 { font-size: 1.25rem; margin: 4px 0; }
h2 { font-size: 1.02rem; margin: 0 0 12px; }
.gris { color: var(--gris); } .chico { font-size: .86rem; } .rojo { color: var(--rojo); } .mas { color: var(--verde); }
.invisible { visibility: hidden; }

.barra { background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); position: sticky; top: 0; z-index: 5; }
html.noche .barra { background: #14213d; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 700; font-size: 20px; }
.marca img { height: 30px; display: block; border-radius: 8px; }
main { max-width: 860px; margin: 0 auto; padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); }

.aviso { background: var(--aviso); border: 1px solid var(--aviso-borde); padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }
.aviso-alerta { background: var(--alerta); border-color: var(--alerta-borde); }
.aviso-error { background: var(--error); border-color: var(--error-borde); }
.aviso a { font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--acento); padding: 10px 16px; border-radius: 10px; font: inherit;
  font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--acento-claro); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff;
  background-image: linear-gradient(rgba(255,255,255,.07), rgba(0,0,0,.07)); }
html.noche .btn.primario { color: #0e1320; }
.btn.peligro { color: var(--rojo); }
.btn.chico { padding: 6px 12px; font-size: .9rem; }
.btn.ancho { width: 100%; }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 16px;
  margin-bottom: 14px; box-shadow: var(--sombra); }
.login { max-width: 360px; margin: 40px auto; display: grid; gap: 14px; }
.vacio { text-align: center; color: var(--gris); padding: 40px 0; }

.grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; font-weight: 600; color: var(--gris); margin: 0; }
.campo.doble { grid-column: span 2; } .completo { grid-column: 1 / -1; }
input, select { font: inherit; font-weight: 400; color: var(--texto); background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: 10px; padding: 9px 10px; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--acento-claro); outline-offset: -1px; }
.casilla { display: flex; gap: 10px; align-items: center; padding: 6px 0; cursor: pointer; font-size: .92rem; }
.casilla input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--acento); }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } .campo.doble { grid-column: auto; } }

/* Resumen */
.cuentas-cinta { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 14px;
  padding: 2px 16px 6px; scrollbar-width: none; }
.cuentas-cinta::-webkit-scrollbar { display: none; }
.cuenta-tarjeta { flex: 0 0 min(84%, 320px); scroll-snap-align: start; aspect-ratio: 1.586; border-radius: 16px;
  padding: 14px 16px; text-decoration: none; color: #fff; position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: auto auto 1fr auto; box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  background: linear-gradient(135deg, #1b2d52, #2f5596); }
.cuenta-tarjeta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.16), transparent 55%),
              radial-gradient(90% 70% at 0% 100%, rgba(0,0,0,.18), transparent 60%); }
.cuenta-tarjeta.vacia { aspect-ratio: auto; background: var(--tarjeta); color: var(--texto); border: 1px dashed var(--borde);
  box-shadow: none; display: grid; gap: 2px; grid-template-rows: none; }
.cuenta-tarjeta.vacia::before { display: none; }
.ct-arriba { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.ct-banco { opacity: .95; }
.ct-tipo { font-weight: 500; font-style: italic; opacity: .85; text-transform: lowercase; }
.ct-chip { width: 34px; height: 25px; border-radius: 5px; margin-top: 10px;
  background: linear-gradient(135deg, #e9d9a6, #b89a52 55%, #e7d49b); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); position: relative; }
.ct-chip::after { content: ""; position: absolute; inset: 6px 9px; border: 1px solid rgba(0,0,0,.22); border-radius: 3px; }
.ct-saldo { align-self: center; display: grid; }
.ct-saldo b { font-size: 1.55rem; letter-spacing: .3px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ct-saldo b.ct-sin { font-size: 1.1rem; opacity: .8; }
.ct-saldo em { font-style: normal; font-size: .74rem; opacity: .85; }
.ct-abajo { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.ct-nombre { display: grid; font-size: .8rem; font-weight: 600; min-width: 0; }
.ct-nombre small { font: 600 .9rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; opacity: .9; }
.ct-red.mc { display: block; flex: none; height: 32px; width: auto; }
.ct-red.amex { flex: none; font: 800 .56rem/1.05 system-ui, sans-serif; letter-spacing: .04em; text-align: center;
  padding: 4px 5px; border: 1.5px solid currentColor; border-radius: 3px; }

.estilo-azul { background: linear-gradient(130deg, #1b1f5e 0%, #2a2577 45%, #3a2e8c 100%); }
.estilo-azul::before { background: radial-gradient(140% 60% at 30% 110%, rgba(120, 90, 220, .35), transparent 60%),
  radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.12), transparent 55%); }
.estilo-magenta { background: linear-gradient(135deg, #d21aa0 0%, #b5128f 45%, #5c1a8c 100%); }
.estilo-plata { color: #2c3138; background: linear-gradient(135deg, #e9ecef 0%, #c4c9cf 40%, #eef0f2 62%, #aeb4bb 100%); }
.estilo-plata::before { background: repeating-linear-gradient(100deg, rgba(255,255,255,.12) 0 2px, transparent 2px 5px),
  radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.5), transparent 55%); }
.estilo-plata .ct-saldo b { text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.estilo-plata .ct-red.amex { color: #1f5aa6; }
.estilo-negro { background: linear-gradient(135deg, #1c1c1f, #3a3a40); }
.estilo-dorado { color: #3b2c10; background: linear-gradient(135deg, #f1dc9c, #c9a24f 50%, #f0d98f); }
.cuenta-vista { margin-bottom: 14px; }
.cuenta-vista .cuenta-tarjeta { width: min(100%, 320px); }
.mes-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.mes-nav .btn { width: 38px; height: 38px; padding: 0; flex: none; }
.flecha-nav { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.totales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.total-caja { padding: 12px; display: grid; gap: 2px; min-width: 0; }
.total-caja small { color: var(--gris); font-size: .8rem; }
.total-caja b { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-apilada { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--linea); margin-bottom: 10px; gap: 2px; }
.barra-apilada i { background: var(--c); min-width: 3px; }
.cats-lista { list-style: none; margin: 0; padding: 0; }
.cats-lista a { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--linea);
  text-decoration: none; color: inherit; }
.cats-lista li:first-child a { border-top: 0; }
.cat-nombre { flex: 1; min-width: 0; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.cab-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cab-seccion h2 { margin-bottom: 8px; }

/* Movimientos */
.movs { list-style: none; margin: 0; padding: 0; }
.movs.tarjeta { padding: 0 14px; }
.mov { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); cursor: pointer; }
.mov:first-child { border-top: 0; }
.mov:hover .mov-texto b { color: var(--acento); }
.mov-texto { flex: 1; min-width: 0; display: grid; }
.mov-texto b, .mov-texto small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-texto b { font-weight: 600; }
.mov-texto small { color: var(--gris); font-size: .8rem; }
.mov-monto { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mov-monto.propia { color: var(--gris); font-weight: 600; }
.dia { margin-bottom: 6px; }
.dia-cab { display: flex; justify-content: space-between; font-size: .84rem; font-weight: 600; color: var(--gris); padding: 6px 4px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.filtros select { flex: 1 1 160px; width: auto; }
.buscar { flex: 1 1 100%; position: relative; }
.buscar svg { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
  fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round; }
.buscar input { padding-left: 36px; }

/* Modal */
.modal { border: 0; border-radius: 18px; padding: 18px; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  background: var(--tarjeta); color: var(--texto); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.modal::backdrop { background: rgba(10, 14, 24, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.modal-cab h2 { margin: 0; word-break: break-word; }
.modal-cab p { margin: 2px 0 0; }
.mm-monto { font-size: 1.2rem; white-space: nowrap; }
.cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.cat input { position: absolute; opacity: 0; pointer-events: none; }
.cat span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--borde);
  border-radius: 99px; font-size: .86rem; cursor: pointer; }
.cat span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cat input:checked + span { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); font-weight: 600; }
.cat input:focus-visible + span { outline: 2px solid var(--acento-claro); }
.modal-botones { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.relleno { flex: 1; }
.mm-correo { margin-top: 10px; font-size: .9rem; }
.mm-correo summary { cursor: pointer; color: var(--acento); font-weight: 600; }
pre { white-space: pre-wrap; word-break: break-word; font: .82rem/1.4 ui-monospace, Menlo, Consolas, monospace;
  background: var(--fondo); border-radius: 10px; padding: 10px; max-height: 50vh; overflow: auto; }

/* Cuentas y ajustes */
.cuenta-form .casilla { align-self: end; }
.cuenta-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.conf-gmail { margin-top: 12px; }
.conf-gmail summary { cursor: pointer; color: var(--acento); font-weight: 600; margin-bottom: 12px; }
.lista-correos, .lista-reglas { list-style: none; margin: 0; padding: 0; }
.lista-correos li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--linea); cursor: pointer; }
.lista-correos li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-correos li small { grid-column: 1; }
.lista-correos li .btn { grid-row: 1 / 3; grid-column: 2; }
.lista-reglas li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--linea); }
.lista-reglas li > span:nth-child(2) { flex: 1; font-size: .92rem; }
.segmentos { display: inline-flex; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.segmentos button { border: 0; background: none; font: inherit; color: var(--texto); padding: 8px 14px; cursor: pointer; }
.segmentos button + button { border-left: 1px solid var(--borde); }
.segmentos button.activo { background: var(--acento); color: #fff; }
html.noche .segmentos button.activo { color: #0e1320; }
.salir-form { margin: 8px 0 24px; }

/* Barra inferior (móvil) */
.barra-inferior { position: fixed; inset: auto 0 0 0; z-index: 6; display: flex; background: var(--tarjeta);
  border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); }
.barra-inferior a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px;
  font-size: .7rem; font-weight: 600; color: var(--gris); text-decoration: none; }
.barra-inferior a.activo { color: var(--acento); }
.barra-inferior svg, .sidebar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

.foto-nav { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; flex: none; }
.barra-inferior a.activo .foto-nav { box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 3.5px var(--acento); }
.sidebar nav a.activo .foto-nav { box-shadow: 0 0 0 1.5px #fff; }
html.noche .sidebar nav a.activo .foto-nav { box-shadow: 0 0 0 1.5px #0e1320; }

/* Escritorio: sidebar */
.sidebar { display: none; }
@media (min-width: 900px) {
  .con-sidebar .barra, .barra-inferior { display: none; }
  .con-sidebar .sidebar { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 230px;
    background: var(--tarjeta); border-right: 1px solid var(--borde); padding: 18px 12px; z-index: 6; }
  .con-sidebar main { margin-left: 230px; padding: 28px 40px 40px; max-width: none; }
  .con-sidebar main > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
  .sidebar .marca { color: var(--texto); padding: 0 8px 18px; border-bottom: 1px solid var(--borde); margin-bottom: 12px; }
  .sidebar nav { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
  .sidebar nav a.nav-ajustes { margin-top: auto; }
  .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    color: var(--acento); text-decoration: none; font-weight: 600; font-size: .95rem; }
  .sidebar nav a:hover { background: var(--hover); }
  .sidebar nav a.activo { background: var(--acento); color: #fff;
    background-image: linear-gradient(rgba(255,255,255,.07), rgba(0,0,0,.07)); }
  html.noche .sidebar nav a.activo { color: #0e1320; }
}
.codigo-disp { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.codigo-disp b { font: 700 1.5rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; }
.caja-filas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.caja-filas > div { display: grid; gap: 2px; min-width: 0; }
.caja-filas small { color: var(--gris); font-size: .78rem; }
.caja-filas b { font-size: 1.05rem; white-space: nowrap; }
@media (max-width: 480px) { .caja-filas { grid-template-columns: 1fr 1fr; } .caja-filas > div:last-child { grid-column: 1 / -1; } }

/* Icono del local y factura */
.ico-local { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 18%, var(--tarjeta)); color: var(--c); font-weight: 800; font-size: .86rem;
  letter-spacing: .02em; }
html.noche .ico-local { background: color-mix(in srgb, var(--c) 28%, var(--tarjeta)); color: color-mix(in srgb, var(--c) 60%, #fff); }
.ico-local.logo { background: #fff; border: 1px solid var(--borde); overflow: hidden; padding: 3px;
  display: flex; align-items: center; justify-content: center; }  /* flex: el max-height del logo sí se respeta */
html.noche .ico-local.logo { background: #fff; }  /* en noche también: el logo va en blanco */
.ico-local.logo.lleno, html.noche .ico-local.logo.lleno { background: var(--fondo); border-color: var(--fondo); padding: 0; }
/* Fondo blanco: sin el borde normal el recuadro se pierde sobre la tarjeta */
.ico-local.logo.lleno[style*="#ffffff"], html.noche .ico-local.logo.lleno[style*="#ffffff"] { border-color: var(--borde); }
.ico-local img { max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; display: block; }
.ico-local.logo.lleno img { width: 100%; height: 100%; object-fit: contain; }
.mov-der { display: grid; justify-items: end; gap: 1px; }
.mov-fac { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--gris); font-weight: 600; }
.mov-fac svg, .mmf-fila svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-factura { margin: 10px 0 4px; }
.mm-factura > .campo { margin-bottom: 6px; }
.mmf-fila { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.mmf-fila svg { width: 22px; height: 22px; color: var(--acento); flex: none; }
.mmf-fila span { display: grid; min-width: 0; }
.mmf-fila b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmf-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.mmf-botones .btn[hidden] { display: none; }
.mmf-vista { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.mmf-vista p { margin: 0 0 8px; }
.mmf-comparar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mmf-comparar .ico-local { width: 64px; height: 64px; border-radius: 14px; }
.mmf-comparar svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gris, currentColor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mmf-comparar .ico-local svg { width: 58%; height: 58%; stroke: currentColor; }
.mmf-botones label.cargando { opacity: .6; pointer-events: none; }
.mmf-cands { list-style: none; margin: 8px 0 0; padding: 0; }
.mmf-cands li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linea); }
.mmf-cands li span { flex: 1; display: grid; min-width: 0; font-size: .9rem; }
.mmf-cands li small { font-size: .78rem; }

/* Detalle del movimiento */
@keyframes det-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes det-sale { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes fondo-entra { from { opacity: 0; } }
.modal[open] { animation: det-entra .18s ease-out; }
.modal[open]::backdrop { animation: fondo-entra .18s ease-out; }
.modal.cerrando { animation: det-sale .15s ease-in forwards; }
.modal-det { padding: 20px 18px 16px; width: min(420px, calc(100vw - 24px)); position: fixed; }
.det-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.det-cab .ico-local { width: 112px; height: 72px; border-radius: 14px; font-size: 1.6rem; }
.det-cab .ico-local:not(.logo) { width: 68px; height: 68px; border-radius: 50%; }
.det-cab .ico-local.logo { padding: 8px; }
.det-cab .ico-local.logo.lleno { padding: 0; }
.det-valor { margin: 0; font-size: 1.9rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.det-nombre { margin: 12px 0 14px; display: grid; gap: 6px; justify-items: start; }
.det-nombre h2 { margin: 0; font-size: 1.15rem; line-height: 1.25; word-break: break-word; }
.det-cat { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; padding: 3px 10px;
  border-radius: 99px; color: var(--texto); background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.det-cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.det-datos { display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; margin: 0 0 16px; padding: 12px 0 0;
  border-top: 1px solid var(--borde); }
.det-datos dt { color: var(--gris); font-size: .88rem; display: flex; align-items: flex-start; gap: 7px; }
.det-datos dd { margin: 0; text-align: right; font-weight: 600; word-break: break-word; }
.det-datos dd.largo { font-weight: 400; }
.det-datos dd.gris { color: var(--gris); font-weight: 400; }
.det-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.modal .ico, .det-datos .ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.det-datos dt .ico { margin-top: 1px; opacity: .85; }
.det-pie { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--borde); }
.det-pie .btn[hidden] { display: none; }
.det-x { display: grid; position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--gris); cursor: pointer; }
.modal-det .det-cab { padding-right: 34px; }  /* espacio para la X */
.det-x:hover { background: var(--fondo); color: var(--texto); }
.det-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 420px) { .det-pie .btn { flex: 1 1 auto; } .det-pie .relleno { display: none; } }
@media (min-width: 900px) {
  .modal-det { width: min(760px, calc(100vw - 64px)); padding: 26px 28px 22px; border-radius: 20px; }
  .modal-det[open] { display: grid; grid-template-columns: 240px 1fr; column-gap: 30px;
    grid-template-areas: "cab datos" "nombre datos" "pie pie"; align-items: start; }
  .modal-det .det-cab { grid-area: cab; flex-direction: column; align-items: flex-start; gap: 18px; }
  .modal-det .det-cab .ico-local { width: 170px; height: 108px; border-radius: 16px; }
  .modal-det .det-cab .ico-local:not(.logo) { width: 96px; height: 96px; font-size: 2rem; }
  .modal-det .det-valor { font-size: 2.3rem; line-height: 1.1; }
  .modal-det .det-nombre { grid-area: nombre; margin: 14px 0 0; }
  .modal-det .det-datos { grid-area: datos; margin: 0; padding: 4px 0 4px 30px; border-top: 0;
    border-left: 1px solid var(--borde); gap: 14px 22px; }
  .modal-det .det-datos dd { text-align: left; font-size: 1.02rem; }
  .modal-det .det-pie { grid-area: pie; margin-top: 22px; padding-top: 18px; }
  .modal-det .det-pie .btn { height: 44px; padding: 0 20px; }
}

/* Modal abierto: la página de atrás no se mueve (clase la pone base.html; :has como respaldo) */
html { scrollbar-gutter: stable; }
html.modal-abierto, html:has(dialog[open]) { overflow: hidden; }
html.modal-abierto body { overflow: hidden; }
.modal { overscroll-behavior: contain; overflow-y: auto; touch-action: pan-y; }
.modal.cerrando::backdrop { animation: fondo-sale .15s ease-in forwards; }
@keyframes fondo-sale { to { opacity: 0; } }

/* Tabla de movimientos  */
:root { --ingreso-fondo: #eaf6ef; --ingreso-borde: #bfe0cc; }
html.noche { --ingreso-fondo: #15291f; --ingreso-borde: #24503a; }
.titulo-hoja { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 10px; }
.orden-tabla { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.orden-tabla .btn .ico { width: 16px; height: 16px; }
.tabla-scroll { overflow-x: auto; }
.tabla-movs { display: table; width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-movs th { text-align: left; color: var(--gris); font-weight: 600; border-bottom: 1px solid var(--borde);
  padding: 6px 8px; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; position: relative; padding-right: 18px; }
.tabla-movs th.c-logo { cursor: default; }
.tabla-movs th:hover, .tabla-movs th.orden-asc, .tabla-movs th.orden-desc { color: var(--acento); }
.tabla-movs th.orden-asc::after, .tabla-movs th.orden-desc::after { content: ""; position: absolute; right: 5px; top: 50%;
  border-left: 4px solid transparent; border-right: 4px solid transparent; }
.tabla-movs th.orden-asc::after { border-bottom: 5px solid currentColor; margin-top: -7px; }
.tabla-movs th.orden-desc::after { border-top: 5px solid currentColor; margin-top: -2px; }
.tabla-movs td { border-bottom: 1px solid var(--linea); padding: 7px 8px; vertical-align: middle; }
.tabla-movs .num { text-align: right; white-space: nowrap; }
.tabla-movs tbody tr { cursor: pointer; }
.tabla-movs tbody tr:hover td { background: var(--hover); }
.tabla-movs .fila-ingreso td { background: var(--ingreso-fondo); }
.tabla-movs .c-logo { width: 56px; padding-right: 0; }
.tabla-movs .c-fecha { white-space: nowrap; }
.tabla-movs .c-local { font-weight: 600; }
.tabla-movs .c-desc { color: var(--gris); font-size: .84rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-movs .c-cuenta { white-space: nowrap; color: var(--gris); }
.tabla-movs .c-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.tabla-movs .c-valor.propia { color: var(--gris); font-weight: 600; }
.chip-cat { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; white-space: nowrap;
  padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, transparent); }
.chip-cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
@media (max-width: 640px) {
  .orden-tabla .gris { display: none; }
  .tabla-scroll { overflow: visible; }
  .tabla-movs, .tabla-movs tbody { display: block; }
  .tabla-movs thead { display: none; }
  .tabla-movs tbody { display: grid; gap: 8px; }
  .tabla-movs tr { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 2px;
    grid-template-areas: "logo cat fecha" "logo local valor" "logo desc desc" "logo cuenta fac";
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; }
  .tabla-movs tbody tr:hover td { background: none; }
  .tabla-movs td { border: 0; padding: 0; background: none !important; min-width: 0; }
  .tabla-movs .c-logo { grid-area: logo; width: auto; align-self: start; padding-top: 2px; }
  .tabla-movs .c-logo .ico-local { width: 48px; height: 48px; border-radius: 12px; }
  .tabla-movs .c-cat { grid-area: cat; }
  .tabla-movs .c-fecha { grid-area: fecha; color: var(--gris); font-size: .82rem; text-align: right; }
  .tabla-movs .c-local { grid-area: local; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabla-movs .c-valor { grid-area: valor; font-size: 1.05rem; }
  .tabla-movs .c-desc { grid-area: desc; max-width: none; font-size: .8rem; }
  .tabla-movs .c-desc:empty { display: none; }
  .tabla-movs .c-cuenta { grid-area: cuenta; font-size: .8rem; }
  .tabla-movs .c-fac { grid-area: fac; text-align: right; }
  .tabla-movs .fila-ingreso { background: var(--ingreso-fondo); border-color: var(--ingreso-borde); }
}

/* Botón flotante: volver arriba (aparece al bajar) */
.flotantes { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 7; }
.flot { display: grid; place-items: center; border-radius: 50%; cursor: pointer; padding: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22); -webkit-tap-highlight-color: transparent; }
.flot svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flot-arriba { width: 44px; height: 44px; border: 1px solid var(--borde); color: var(--acento); background: var(--tarjeta);
  opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; transition: opacity .18s, transform .18s; }
.flot-arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
.flot-arriba svg { width: 20px; height: 20px; }
.flot:active { transform: scale(.94); }
@media (min-width: 900px) { .flotantes { right: 28px; bottom: 28px; } }

/* Interruptor (notificaciones en Ajustes) */
.fila-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; padding: 4px 0; }
.switch { position: relative; flex: none; width: 50px; height: 28px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; width: 100%; height: 100%; }
.switch .pista { position: absolute; inset: 0; border-radius: 99px; background: var(--borde); transition: background .2s; }
.switch .pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.switch input:checked + .pista { background: var(--acento); }
.switch input:checked + .pista::after { transform: translateX(22px); }
html.noche .switch input:checked + .pista::after { background: #0e1320; }
.switch input:focus-visible + .pista { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.switch input:disabled { cursor: default; }
.switch input:disabled + .pista { opacity: .55; }

/* Ajustes: tarjeta de la cuenta conectada + pestañas General | Correos | Categorías */
.perfil-correo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 4px 0 10px; }
.perfil-foto { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--acento); color: #fff; font-weight: 700; font-size: 1.5rem;
  box-shadow: 0 0 0 3px var(--tarjeta), 0 0 0 4px var(--borde); }
html.noche .perfil-foto { color: #0e1320; }
.perfil-datos { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.perfil-datos strong { font-size: 1.05rem; }
.perfil-datos .gris { overflow-wrap: anywhere; }
.perfil-estado { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--verde); font-weight: 600; }
.perfil-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.perfil-estado.error { color: var(--rojo); }
.centro { text-align: center; }
.pestanas { display: flex; gap: 4px; margin: 0 0 14px; padding: 4px; background: var(--hover); border: 1px solid var(--borde);
  border-radius: 12px; position: sticky; top: calc(40px + max(10px, env(safe-area-inset-top))); z-index: 4; }
.pestanas [role="tab"] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0;
  border: 0; background: none; font: inherit; font-weight: 600; font-size: .92rem; color: var(--gris);
  padding: 9px 6px; border-radius: 9px; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.pestanas .ico, .btn-salir-ajustes .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pestanas [role="tab"][aria-selected="true"] { background: var(--tarjeta); color: var(--acento); box-shadow: 0 1px 3px rgba(20, 26, 45, .16); }
.pestanas [role="tab"]:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 1px; }
.pestana-cuenta { background: var(--rojo); color: #fff; border-radius: 99px; font-size: .7rem; padding: 1px 6px; line-height: 1.4; }
@media (min-width: 900px) { .pestanas { top: 0; } }
@media (max-width: 640px) {
  .pestanas [role="tab"] { font-size: .85rem; gap: 5px; padding: 9px 4px; }
  .pestanas .ico { width: 16px; height: 16px; }
}
.panel-ajustes[hidden] { display: none; }
.panel-ajustes { animation: panel-entra .18s ease-out; }
@keyframes panel-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* overflow-x: clip para que el ±40 px del deslizamiento no haga parpadear la barra inferior en el celular */
.paneles-ajustes { overflow-x: clip; touch-action: pan-y; }
.panel-ajustes.entra-der { animation: entra-der .22s ease-out; }
.panel-ajustes.entra-izq { animation: entra-izq .22s ease-out; }
@keyframes entra-der { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes entra-izq { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel-ajustes, .panel-ajustes.entra-der, .panel-ajustes.entra-izq { animation: none; } }
.segmento { display: flex; background: var(--hover); border: 1px solid var(--borde); border-radius: 10px; padding: 3px; gap: 3px; }
.segmento button { flex: 1; border: 0; background: none; font: inherit; font-weight: 600; font-size: .9rem; color: var(--gris);
  padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.segmento button[aria-checked="true"] { background: var(--tarjeta); color: var(--acento); box-shadow: 0 1px 3px rgba(20, 26, 45, .18); }
.btn-salir-ajustes { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 40%, var(--borde)); }
.btn-salir-ajustes:hover { border-color: var(--rojo); background: var(--error); }
.push-pruebas { margin: 10px 0 0; }
.lista-remitentes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lista-remitentes li { font-size: .84rem; padding: 4px 10px; border: 1px solid var(--borde); border-radius: 99px; background: var(--hover); }

/* Icono dibujado en vez de iniciales (p. ej. cajero automático para los retiros) */
.ico-local.ico-svg svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.ico-local.ico-svg svg .tapa { fill: color-mix(in srgb, var(--c) 18%, var(--tarjeta)); }  /* tapa las líneas que quedan detrás */
html.noche .ico-local.ico-svg svg .tapa { fill: color-mix(in srgb, var(--c) 28%, var(--tarjeta)); }
/* Icono de depósito (círculo verde, billete blanco) */
.ico-local.ico-caja, html.noche .ico-local.ico-caja { border-radius: 50%; background: #2e9e5b; color: #fff; }
.ico-local.ico-caja svg { stroke-width: 2; }

/* Modal de edición: botones de factura a la par y pie ordenado (Eliminar | Guardar; se cierra con la X de arriba) */
#modal-mov .det-x { display: grid; top: 10px; right: 10px; }
#modal-mov .modal-cab { padding-right: 36px; }
#modal-mov .mmf-botones { display: grid; grid-template-columns: 1fr 1fr; }
#modal-mov .mmf-botones .btn { width: 100%; min-height: 42px; text-align: center; }
@media (max-width: 640px) {
  #form-mov .modal-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #form-mov .modal-botones .relleno { display: none; }
  #form-mov .modal-botones .btn { width: 100%; min-height: 46px; }
}

/* Cuentas: billetera. Tarjetas apiladas (se ve la franja de arriba de cada una); al tocar una queda sola con sus datos */
.billetera { --franja: 58px; max-width: 380px; margin: 4px auto 0; position: relative; }
.bill-item + .bill-item { margin-top: calc(var(--franja) - 100% / 1.586); }
.bill-carta { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer; border-radius: 16px; position: relative; -webkit-tap-highlight-color: transparent; }
.bill-carta .cuenta-tarjeta { width: 100%; box-shadow: 0 -2px 10px rgba(0, 0, 0, .14), 0 8px 20px rgba(0, 0, 0, .18); }
.bill-carta:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 3px; }
.bill-item { transition: transform .2s ease; }
@media (hover: hover) { .billetera:not(.abierta) .bill-item:not(:last-of-type):hover { transform: translateY(-8px); } }
.bill-oculta .cuenta-tarjeta { filter: saturate(.55) brightness(.92); }
/* en la pila, la franja visible lleva el nombre en lugar del tipo */
.bill-eti { display: none; position: absolute; top: 12px; right: 16px; color: #fff; font-size: .8rem; font-weight: 700; }
.bill-eti small { font-weight: 500; opacity: .85; margin-left: 2px; }
.estilo-dorado ~ .bill-eti, .estilo-plata ~ .bill-eti { color: #2a2a2a; }
.billetera:not(.abierta) .bill-item:not(:last-of-type) .bill-eti { display: block; }
.billetera:not(.abierta) .bill-item:not(:last-of-type) .ct-tipo { visibility: hidden; }
.billetera.abierta .bill-item:not(.sel) { display: none; }
.billetera.abierta .bill-item.sel { margin-top: 0; }
.bill-volver { margin-bottom: 12px; }
.bill-volver .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.bill-form { margin-top: 16px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 16px;
  animation: bill-despliega .28s ease both; }
.bill-form .grid { grid-template-columns: 1fr; }
.bill-form .campo.doble { grid-column: auto; }
.bill-info { margin: 0 0 12px; }
.bill-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.bill-pie .btn { min-height: 46px; }
.bill-nota { max-width: 380px; margin: 22px auto 0; }
#bill-ayuda { max-width: 380px; margin-left: auto; margin-right: auto; }
@keyframes bill-despliega { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bill-form { animation: none; } .bill-item { transition: none; } }
::view-transition-group(*) { animation-duration: .3s; }

/* Resumen: al encajar, la tarjeta respeta el margen de 16 px (sin esto el snap la pega al borde izquierdo) */
.cuentas-cinta { scroll-padding-inline: 16px; }
.cuentas-cinta::after { content: ""; flex: 0 0 6px; }  /* margen tras la última (el padding derecho se pierde al desplazar) */
@media (min-width: 900px) { .cuentas-cinta { scroll-padding-inline: 0; } .cuentas-cinta::after { display: none; } }


/* Logo completo del banco arriba a la izquierda (blanco; en tarjetas claras, gris oscuro) */
.ct-arriba { align-items: center; }
.ct-banco-logo { height: 26px; width: auto; display: block; }
.estilo-plata .ct-banco-logo, .estilo-dorado .ct-banco-logo { filter: brightness(0); opacity: .78; }

/* Foto de perfil en Ajustes: la de la cuenta de Google, con el aro de colores de Google */
.perfil-foto { position: relative; width: 76px; height: 76px; }
.perfil-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.perfil-foto.con-foto { box-shadow: none; background: none; }
.perfil-foto.con-foto::before { content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(#ea4335 0 20deg, #4285f4 70deg 110deg, #34a853 160deg 200deg,
    #fbbc04 250deg 290deg, #ea4335 340deg);  /* los colores se funden entre sí */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
.enlace-chico { background: none; border: 0; padding: 2px 0; font: inherit; font-size: .85rem; color: var(--rojo); cursor: pointer; }

/* Ajustes → Correos: facturas que llegaron al Gmail */
.lista-facturas { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-facturas li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--borde); }
.lf-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lf-datos b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-datos small { font-size: .8rem; }
.verde { color: var(--verde); }
.naranja { color: #c26a00; }
html.noche .naranja { color: #f0a54a; }

.bill-volver[hidden] { display: none; }

/* Escritorio: paneles a todo el ancho. El teléfono y la tableta (< 900 px) no cambian. */
@media (min-width: 900px) {
  h1 { font-size: 1.5rem; }
  .mes-nav { justify-content: flex-start; margin: 0; }
  .mes-nav h1 { min-width: 210px; margin: 0; text-align: center; }

  /* Resumen */
  .cuentas-cinta { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
    margin: 0; padding: 0; overflow: visible; }
  .cuenta-tarjeta { width: 100%; }
  .panel-resumen { display: grid; gap: 16px; }
  .panel-resumen > * { min-width: 0; margin-bottom: 0; }
  .total-caja { padding: 14px 16px; margin-bottom: 0; }
  .total-caja b { font-size: 1.4rem; }
  /* la tabla de Resumen es angosta: Cuenta y Detalle se ven en Movimientos */
  .sec-recientes .tabla-movs th:nth-child(5), .sec-recientes .tabla-movs th:nth-child(6),
  .sec-recientes .tabla-movs .c-cuenta, .sec-recientes .tabla-movs .c-desc { display: none; }

  /* Movimientos */
  .filtros { flex-wrap: nowrap; margin-bottom: 14px; }
  .buscar { flex: 2 1 320px; }
  .filtros select { flex: 1 1 200px; }
  main > .mes-nav { margin-bottom: 14px; }
  .tabla-movs .c-desc { max-width: 420px; }

  /* Cuentas: las tarjetas en fila; al abrir una, sus datos quedan al lado */
  .billetera { max-width: none; margin: 14px auto 0; display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .bill-item + .bill-item { margin-top: 0; }
  .billetera:not(.abierta) .bill-item:not(:last-of-type) .bill-eti { display: none; }
  .billetera:not(.abierta) .bill-item:not(:last-of-type) .ct-tipo { visibility: visible; }
  .billetera:not(.abierta) .bill-item:hover,
  .billetera:not(.abierta) .bill-item:not(:last-of-type):hover { transform: translateY(-4px); }
  .bill-volver { grid-column: 1 / -1; justify-self: start; margin-bottom: 0; }
  .billetera.abierta .bill-item.sel { grid-column: 1 / -1; display: grid; gap: 24px; align-items: start;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
  .bill-form { margin-top: 0; }
  .bill-form .grid { grid-template-columns: repeat(2, 1fr); }
  .bill-form .casilla { grid-column: 1 / -1; }
  .bill-pie { display: flex; justify-content: flex-end; }
  .bill-pie .btn { min-width: 130px; min-height: 42px; }
  .bill-nota, #bill-ayuda { max-width: none; }
  .bill-nota { margin-top: 18px; }

  /* Ajustes: el correo a la izquierda, las pestañas a la derecha */
  .ajustes-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
  .ajustes-correo { position: sticky; top: 28px; max-height: calc(100vh - 56px); overflow-y: auto; margin-bottom: 0; }
  .conf-gmail .grid { grid-template-columns: 1fr; }
  .conf-gmail .campo.doble { grid-column: auto; }
}
/* Tres columnas de tarjetas ya caben: Gastos por categoría a la derecha */
@media (min-width: 1180px) {
  .panel-resumen { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto auto auto 1fr; align-items: start;
    grid-template-areas: "cinta cinta" "mes mes" "totales cats" "recientes cats"; }
  .panel-resumen.con-caja { grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "cinta cinta" "caja caja" "mes mes" "totales cats" "recientes cats"; }
  .panel-resumen > .cuentas-cinta { grid-area: cinta; }
  .panel-resumen > .caja-comp { grid-area: caja; }
  .panel-resumen > .mes-nav { grid-area: mes; }
  .panel-resumen > .totales { grid-area: totales; }
  .panel-resumen > .sec-cats { grid-area: cats; }
  .panel-resumen > .sec-recientes { grid-area: recientes; }
}
/* Pantalla grande: la tabla muestra todas sus columnas */
@media (min-width: 1540px) {
  .panel-resumen.con-caja { grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "cinta caja" "mes mes" "totales cats" "recientes cats"; }
  .panel-resumen > .caja-comp { align-self: stretch; }
  .panel-resumen > .caja-comp .caja-filas { grid-template-columns: 1fr; gap: 0; }
  .panel-resumen > .caja-comp .caja-filas > div { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 9px 0; border-top: 1px solid var(--linea); }
  .sec-recientes .tabla-movs th:nth-child(5), .sec-recientes .tabla-movs th:nth-child(6) { display: table-cell; }
  .sec-recientes .tabla-movs .c-cuenta, .sec-recientes .tabla-movs .c-desc { display: table-cell; }
}
/* Las filas de la tabla llevan .mov (display:flex de la lista vieja): sin esto cada fila se alinea por su cuenta */
@media (min-width: 641px) {
  .tabla-movs tr.mov { display: table-row; padding: 0; border-top: 0; }
}

/* Movimientos: la tarjeta con su resumen. Teléfono: tarjeta arriba de todo y resumen debajo; desde 641 px, lado a lado */
.filtros select[name="cuenta"], .titulo-hoja { display: none; }
.mov-panel { display: grid; gap: 14px; padding: 14px; }
.mp-izq { display: grid; gap: 12px; min-width: 0; width: 100%; max-width: 340px; margin: 0 auto; }
/* "Todas": las tarjetas una detrás de otra, se asoma el borde de arriba de las de atrás */
.mp-pila { display: grid; touch-action: pan-y; }
.mp-capa { grid-area: 1 / 1; justify-self: center; align-self: start; margin-top: calc(var(--i) * 14px);
  width: calc(100% - (var(--n) - 1 - var(--i)) * 20px); }
.mp-capa .cuenta-tarjeta { display: grid; width: 100%; }
.mp-nav { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mp-nav .btn { width: 34px; height: 34px; padding: 0; flex: none; }
.mp-punto { width: 10px; height: 10px; border-radius: 99px; background: var(--borde); transition: width .15s ease; }
.mp-punto:hover { background: var(--acento-claro); }
.mp-punto.activo { width: 24px; background: var(--acento); }
.mp-der { min-width: 0; }
.mp-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mp-cab h2 { margin: 0; font-size: 1.1rem; }
.mp-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 20px; margin-bottom: 14px; }
.mp-datos > div { display: grid; gap: 1px; min-width: 0; }
.mp-datos small { color: var(--gris); font-size: .8rem; }
.mp-datos b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.mp-datos em { font-style: normal; color: var(--gris); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-cats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; font-size: .88rem; }
.mp-cats li { display: flex; align-items: center; gap: 7px; }
.mp-vacio { margin: 0; }
@media (max-width: 640px) {
  main:has(> .mov-panel), .esq:has(> .mov-panel) { display: flex; flex-direction: column; }
  main:has(> .mov-panel) > *, .esq:has(> .mov-panel) > * { min-width: 0; }
  .mov-panel { order: -1; }
  /* El resumen de la cuenta queda oculto hasta tocar "Ver resumen" (tarjetas-mov.js) */
  html:not(.mp-abierto) .mp-der { display: none; }
  .mp-ver { width: 100%; }
  .mp-ver svg { transition: transform .15s ease; }
  html.mp-abierto .mp-ver svg { transform: rotate(180deg); }
}
@media (min-width: 641px) {
  .mp-ver { display: none; }
  .mov-panel { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 32px; align-items: center; padding: 20px; }
  .mp-izq { max-width: none; margin: 0; }
  .mp-datos { gap: 14px 20px; margin-bottom: 18px; }
  .mp-datos b { font-size: 1.35rem; }
  .mp-cab { margin-bottom: 14px; }
  .mp-cab h2 { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .mp-punto { transition: none; } }

/* Esqueleto de carga (esqueleto.js) */
:root { --esq: #e5eaf2; --esq-brillo: #f4f6fa; }
html.noche { --esq: #212a3b; --esq-brillo: #2e3a52; }
html.cargando main > :not(.esq) { display: none; }
.esq-b { display: block; max-width: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--esq) 30%, var(--esq-brillo) 50%, var(--esq) 70%);
  background-size: 220% 100%; animation: esq-brillo 1.4s linear infinite; }
@keyframes esq-brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.esq .cuenta-tarjeta.esq-b { box-shadow: none; border-radius: 16px; width: 100%; }
.esq .cuenta-tarjeta.esq-b::before { display: none; }
.esq .tarjeta > .esq-b + .esq-b, .esq .caja-filas > div, .esq .total-caja, .esq .mp-datos > div { display: grid; gap: 8px; }
.esq-titulo { margin-bottom: 14px; }
.esq-filtro { flex: 1 1 160px; }
.esq-redondo { border-radius: 50%; }
.esq-centro { display: grid; justify-items: center; gap: 12px; }
.esq-cat { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--linea); }
.esq-fila { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); }
.esq-fila:first-of-type { border-top: 0; }
.esq-logo { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.esq-txt { flex: 1; min-width: 0; display: grid; gap: 7px; }
@media (max-width: 640px) { .esq-pastilla { display: none; } }
@media (prefers-reduced-motion: reduce) { .esq-b { animation: none; } }

/* Toasts (toast.js): confirmaciones arriba a la derecha. En el teléfono, debajo de la barra superior. */
#toasts { position: fixed; inset: calc(env(safe-area-inset-top) + 62px) 12px auto auto; z-index: 20; display: grid; gap: 8px;
  width: min(360px, calc(100vw - 24px)); height: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit;
  overflow: visible; pointer-events: none; }
.toast { --t: var(--verde); pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  padding: 11px 8px 11px 12px; background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde);
  border-left: 4px solid var(--t); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); font-size: .92rem;
  animation: toast-entra .22s ease-out; }
.toast-info { --t: var(--acento-claro); } .toast-error { --t: var(--rojo); }
.toast.saliendo { animation: toast-sale .18s ease-in forwards; }
.toast svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--t); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast button { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -3px 0; padding: 0; border: 0;
  border-radius: 8px; background: none; cursor: pointer; }
.toast button:hover { background: var(--hover); }
.toast button svg { width: 15px; height: 15px; stroke: var(--gris); }
@keyframes toast-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-sale { to { opacity: 0; transform: translateX(24px); } }
@media (min-width: 900px) { .con-sidebar #toasts { top: 20px; right: 24px; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.saliendo { animation: none; } }

/* Cambiar de tarjeta en Movimientos (tarjetas-mov.js): la tarjeta se desliza y el resumen se funde */
.mp-pila { view-transition-name: carta-mov; } .mp-der { view-transition-name: resumen-mov; }
::view-transition-group(carta-mov), ::view-transition-group(resumen-mov) { animation-duration: .28s; }
::view-transition-old(carta-mov), ::view-transition-new(carta-mov) { animation-duration: .28s; animation-timing-function: cubic-bezier(.3, .7, .3, 1); animation-fill-mode: both; }
html[data-carta="sig"]::view-transition-old(carta-mov) { animation-name: carta-sale-izq; }
html[data-carta="sig"]::view-transition-new(carta-mov) { animation-name: carta-entra-der; }
html[data-carta="ant"]::view-transition-old(carta-mov) { animation-name: carta-sale-der; }
html[data-carta="ant"]::view-transition-new(carta-mov) { animation-name: carta-entra-izq; }
@keyframes carta-sale-izq { to { opacity: 0; transform: translateX(-56px) scale(.96); } }
@keyframes carta-sale-der { to { opacity: 0; transform: translateX(56px) scale(.96); } }
@keyframes carta-entra-der { from { opacity: 0; transform: translateX(56px) scale(.96); } }
@keyframes carta-entra-izq { from { opacity: 0; transform: translateX(-56px) scale(.96); } }

/* Selector de días de Movimientos: resalta los días con movimientos; los demás no se pueden tocar */
.dias { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dias::-webkit-scrollbar { display: none; }
@media (hover: hover) { .dias { cursor: grab; user-select: none; } .dias.arrastrando, .dias.arrastrando * { cursor: grabbing; } }
.dia-btn { flex: 0 0 42px; display: grid; justify-items: center; gap: 1px; padding: 7px 0 6px; border-radius: 12px; border: 1px solid transparent;
  color: var(--gris); opacity: .5; text-decoration: none; }
.dia-btn small { font-size: .68rem; font-weight: 600; }
.dia-btn b { font-size: .98rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dia-btn i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.dia-btn.con-movs, .dia-todo { background: var(--tarjeta); border-color: var(--borde); color: var(--texto); opacity: 1; cursor: pointer; }
.dia-btn.con-movs i { background: var(--acento); }
.dia-todo { flex-basis: 48px; align-content: center; }
.dia-todo b { font-size: .84rem; }
a.dia-btn:hover { border-color: var(--acento-claro); }
.dia-btn.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
html.noche .dia-btn.activo { color: #0e1320; }
.dia-btn.activo i { background: currentColor; }

/* Agregar ingreso a mano */
.mes-nav:has(.mes-acc) { flex-wrap: wrap; }
.mes-acc { display: flex; gap: 8px; flex: 1 0 100%; }
.mes-nav .mes-acc .btn { flex: 1; width: auto; height: 40px; padding: 0 14px; white-space: nowrap; }
.mes-acc svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 641px) { .mes-acc { flex: 0 0 auto; margin-left: auto; } .mes-nav .mes-acc .btn { flex: none; } }
.form-ingreso { display: grid; gap: 12px; }
.form-ingreso .modal-cab { margin-bottom: 0; }
.form-ingreso .modal-botones { margin-top: 4px; }

/* Aviso de pago de la tarjeta (Resumen) */
.aviso-pago { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; margin-bottom: 14px;
  border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: 14px; background: var(--tarjeta); color: inherit; text-decoration: none; }
.aviso-pago > div { display: grid; gap: 1px; min-width: 0; }
.aviso-pago small, .aviso-pago em { color: var(--gris); font-size: .8rem; font-style: normal; }
.aviso-pago strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aviso-pago.pronto { border-left-color: #d69e2e; }
.aviso-pago.vencido { border-left-color: #d1495b; }
.aviso-pago.vencido strong { color: #d1495b; }
.aviso-pago.pagado { border-left-color: #1f8a5b; }

/* Importar estado de cuenta */
.imp-intro { margin: 2px 0 14px; }
.imp-form form { display: grid; gap: 16px; }
.imp-form small { font-weight: 400; }
.imp-zona { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 170px; padding: 24px 16px;
  text-align: center; border: 2px dashed var(--borde); border-radius: 14px; transition: border-color .15s ease, background .15s ease; }
.imp-zona input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }  /* tapa la zona: clic y soltar archivo */
.imp-zona svg { width: 34px; height: 34px; margin-bottom: 6px; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.imp-zona b { overflow-wrap: anywhere; }
.imp-zona:hover, .imp-zona.encima, .imp-zona:focus-within { border-color: var(--acento); }
.imp-zona.encima { background: color-mix(in srgb, var(--acento) 8%, transparent); }
.imp-zona.lista { border-style: solid; border-color: var(--acento); }
.imp-lado { display: grid; gap: 16px; align-content: space-between; min-width: 0; }
.imp-lado .btn { width: 100%; min-height: 44px; }
@media (min-width: 900px) {
  .imp-form { padding: 22px; }
  .imp-form form { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 28px; }
  .imp-zona { min-height: 210px; }
}
.imp-totales { margin-bottom: 14px; }
.imp-lista { list-style: none; margin: 0; padding: 0; }
.imp-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea); }
.imp-lista li:first-child { border-top: 0; }
.imp-lista li > span, .imp-marca > span { display: grid; min-width: 0; }
.imp-lista small { overflow-wrap: anywhere; }
.imp-marca { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.imp-marca input { margin-top: 4px; flex: none; }
.imp-lista select { max-width: 190px; }
@media (max-width: 640px) { .imp-lista li:has(select) { grid-template-columns: minmax(0, 1fr) auto; } .imp-lista li > .imp-marca { grid-column: 1 / -1; } .imp-lista select { max-width: 100%; min-width: 0; } }
/* Factura en el teléfono: Ver y Quitar lado a lado, logo a todo el ancho; vista previa centrada */
@media (max-width: 640px) {
  #mmf-tiene .mmf-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #mmf-tiene .mmf-botones .btn { min-width: 0; min-height: 44px; white-space: nowrap; }
  #mmf-tiene .mmf-botones #mmf-icono { grid-column: 1 / -1; order: 3; }
  #mmf-tiene .mmf-botones #mmf-quitar { order: 2; }
  .mmf-vista p { text-align: center; }
  .mmf-comparar { justify-content: center; gap: 16px; }
  .mmf-comparar .ico-local { width: 72px; height: 72px; }
}
/* Categorías del modal: botones en escritorio, desplegable en el teléfono */
.mm-cat-lista { display: none; }
@media (max-width: 640px) {
  #mm-cats { display: none; }
  .mm-cat-lista { display: block; width: 100%; min-height: 44px; margin: 6px 0 10px; padding: 8px 12px; font: inherit;
    color: var(--texto); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; }
}
/* Pantallas táctiles: sin el cuadro azul al tocar y sin seleccionar texto (los campos sí se pueden editar) */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
  a:focus, button:focus, label:focus, summary:focus, dialog:focus, [tabindex]:focus { outline: none; }
}

/* Campana de notificaciones internas: barra de arriba en el teléfono, junto a la marca en escritorio */
.campana { position: relative; width: 38px; height: 38px; margin: -4px -6px -4px 0; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.campana svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.campana-n { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 99px;
  background: #d1495b; color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.sidebar .campana { position: absolute; top: 14px; right: 12px; margin: 0; color: var(--gris); }
.sidebar .campana:hover { background: var(--fondo); color: var(--texto); }
.modal-notif { padding: 20px 18px 18px; width: min(420px, calc(100vw - 24px)); }
.modal-notif h2 { margin: 0 44px 14px 0; font-size: 1.15rem; }
.modal-notif .aviso-pago { margin-bottom: 0; }
.notif-vacia { margin: 6px 0 4px; color: var(--gris); }

/* Cuentas en el teléfono: la tarjeta de adelante se desliza a un lado y pasa al fondo de la pila (cuentas.html) */
.bill-ayuda-desliza { display: none; }
@media (max-width: 899px) {
  .bill-ayuda-desliza { display: inline; }
  main:has(.billetera) { overflow-x: clip; }  /* la tarjeta que sale no debe crear scroll de lado */
  .billetera:not(.abierta) .bill-item:last-of-type .bill-carta { touch-action: pan-y; }
}

/* detalle y Editar: entre mis cuentas en gris, como en la lista */
.modal .propia { color: var(--gris); }

/* Movimientos: la pila se ve siempre; "Todas" se distingue con este texto (en escritorio lo dice el resumen de al lado) */
.mp-todas { display: none; margin: -4px 0 0; text-align: center; color: var(--gris); font-size: .8rem; }
@media (max-width: 640px) { .mp-todas { display: block; } }
@media (max-width: 899px) { main:has(.mov-panel) { overflow-x: clip; } }