/*
 * Gastos Casa Icho Cruz — estilos.
 * Vidrio (glassmorphism) sobre fondo con manchas de color; marca violeta con degradé a magenta, sin verdes.
 * Claro por defecto; el oscuro se activa con data-theme="dark". Mobile first, corte a escritorio en 760px.
 * Objetivos táctiles de 44px como mínimo. Si el navegador no tiene backdrop-filter, el vidrio pasa a sólido.
 */
:root {
  --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fondo: #f4f1fb;
  --mancha-1: rgba(160, 128, 255, .70);   /* lila */
  --mancha-2: rgba(255, 150, 200, .60);   /* rosa */
  --mancha-3: rgba(130, 165, 255, .60);   /* celeste lavanda */
  --mancha-4: rgba(255, 185, 150, .55);   /* durazno */

  --vidrio: rgba(255, 255, 255, .58);
  --vidrio-fuerte: rgba(255, 255, 255, .78);
  --vidrio-solido: #ffffff;
  --vidrio-borde: rgba(255, 255, 255, .85);
  --desenfoque: blur(20px) saturate(170%);
  --superficie: #ffffff;
  --superficie-2: rgba(92, 70, 190, .07);
  --campo: rgba(255, 255, 255, .82);

  --texto: #1b1730;
  --texto-suave: #575170;
  --borde: rgba(83, 64, 168, .16);
  --borde-fuerte: rgba(83, 64, 168, .30);

  --marca: #5b36e6;                     /* texto y enlaces */
  --marca-texto: #ffffff;
  --marca-suave: rgba(109, 74, 255, .12);
  --marca-degrade: linear-gradient(135deg, #6d4aff 0%, #9b3df0 55%, #c43b8f 100%);
  --barra-degrade: linear-gradient(90deg, #7b5cff, #b04de0 60%, #ff7a9a);
  --acento: #ff8a6b;                    /* durazno/coral, solo decorativo */

  --positivo: #1d57c4;                  /* le deben */
  --positivo-suave: rgba(29, 87, 196, .10);
  --positivo-degrade: linear-gradient(90deg, #5b8cff, #1d57c4);
  --negativo: #c2304f;                  /* debe */
  --negativo-suave: rgba(214, 51, 92, .10);
  --negativo-degrade: linear-gradient(90deg, #c2304f, #ff7d8f);
  --info-suave: rgba(109, 74, 255, .09);

  --foco: #4b2bd6;
  --sombra: 0 1px 2px rgba(60, 40, 140, .05), 0 10px 30px -8px rgba(76, 52, 170, .20);
  --sombra-marca: 0 8px 22px -6px rgba(109, 74, 255, .55);
  --brillo: inset 0 1px 0 rgba(255, 255, 255, .9);

  --radio: 22px;
  --radio-chico: 14px;
  --alto-nav: 68px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --fondo: #0e0b1c;
  --mancha-1: rgba(110, 72, 255, .55);
  --mancha-2: rgba(200, 50, 150, .40);
  --mancha-3: rgba(50, 80, 220, .45);
  --mancha-4: rgba(255, 120, 110, .14);

  --vidrio: rgba(34, 27, 62, .55);
  --vidrio-fuerte: rgba(38, 30, 70, .82);
  --vidrio-solido: #1d1834;
  --vidrio-borde: rgba(255, 255, 255, .10);
  --superficie: #1d1834;
  --superficie-2: rgba(255, 255, 255, .07);
  --campo: rgba(16, 12, 34, .55);

  --texto: #f2effc;
  --texto-suave: #b9b2d4;
  --borde: rgba(255, 255, 255, .11);
  --borde-fuerte: rgba(255, 255, 255, .22);

  --marca: #b3a1ff;
  --marca-suave: rgba(140, 110, 255, .20);
  --acento: #ff9c80;

  --positivo: #93b4ff;
  --positivo-suave: rgba(110, 150, 255, .16);
  --positivo-degrade: linear-gradient(90deg, #3d6cf0, #93b4ff);
  --negativo: #ff92a8;
  --negativo-suave: rgba(255, 100, 135, .15);
  --negativo-degrade: linear-gradient(90deg, #ff92a8, #e0476a);
  --info-suave: rgba(140, 110, 255, .14);

  --foco: #c4b6ff;
  --sombra: 0 14px 34px -12px rgba(0, 0, 0, .55);
  --sombra-marca: 0 10px 26px -6px rgba(140, 80, 255, .55);
  --brillo: inset 0 1px 0 rgba(255, 255, 255, .07);
  color-scheme: dark;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-theme="dark"] { --vidrio: var(--vidrio-solido); --vidrio-fuerte: var(--vidrio-solido); }
}
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme="dark"] { --vidrio: var(--vidrio-solido); --vidrio-fuerte: var(--vidrio-solido); --desenfoque: none; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; background: var(--fondo); }
body {
  margin: 0; background: transparent; color: var(--texto); min-height: 100vh;
  font: 17px/1.5 var(--fuente); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
/* Manchas de color difusas, fijas detrás de todo */
body::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 8% 6%, var(--mancha-1), transparent 70%),
    radial-gradient(34vmax 34vmax at 96% 18%, var(--mancha-2), transparent 70%),
    radial-gradient(40vmax 40vmax at 82% 92%, var(--mancha-3), transparent 70%),
    radial-gradient(30vmax 30vmax at 12% 78%, var(--mancha-4), transparent 70%),
    var(--fondo);
}
a { color: var(--marca); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: 1.2rem; font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 .6rem; }
strong { font-weight: 700; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--superficie); padding: .6rem 1rem; border-radius: var(--radio-chico); box-shadow: var(--sombra); }
.saltar:focus { top: 8px; }
.suave { color: var(--texto-suave); }
.chico { font-size: .9rem; }
.centrado { text-align: center; }
[hidden] { display: none !important; }

.icono { width: 24px; height: 24px; flex: none; }
.icono-chico { width: 16px; height: 16px; }

/* ---------- Vidrio ---------- */
.tarjeta, .cifra, .grupo-mes, .monto-bloque, .filtros[open], .persona-boton, .cat-opcion, .persona-opcion, .chip, .chip-boton,
.boton-secundario, .ver-clave, .segmentado, .alerta, .vacio-icono, .tema-boton {
  background: var(--vidrio);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
}
.tarjeta, .cifra, .grupo-mes, .monto-bloque, .filtros[open] { box-shadow: var(--sombra), var(--brillo); }

/* ---------- Encabezado y navegación ---------- */
.barra { position: sticky; top: 0; z-index: 10; }
/* El vidrio va en un pseudo-elemento: un backdrop-filter en .barra rompería la barra fija de abajo (que vive adentro) */
.barra::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--vidrio-fuerte); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border-bottom: 1px solid var(--borde);
}
.barra-in { max-width: 1040px; margin: 0 auto; padding: .55rem 16px; display: flex; align-items: center; gap: 1rem; min-height: 62px; }
.marca { display: flex; align-items: center; gap: .6rem; color: var(--texto); text-decoration: none; font-weight: 800; font-size: 1.1rem; margin-right: auto; min-height: 44px; }
.marca img { border-radius: 10px; box-shadow: 0 4px 12px -3px rgba(109, 74, 255, .5); }
.tema-boton { color: var(--texto); border-radius: 999px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: var(--brillo); }
.tema-boton:hover { color: var(--marca); }
.tema-boton .icono { width: 20px; height: 20px; }
.icono-sol { display: none; }
:root[data-theme="dark"] .icono-sol { display: block; }
:root[data-theme="dark"] .icono-luna { display: none; }

/* Celular: barra inferior fija de vidrio con el botón "Cargar" redondo y elevado en el centro */
.nav-app {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  background: var(--vidrio-fuerte); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border-top: 1px solid var(--vidrio-borde); border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 30px -12px rgba(76, 52, 170, .28);
  padding: 0 2px var(--seguro-abajo); min-height: var(--alto-nav);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--alto-nav); padding: 6px 0; text-decoration: none; color: var(--texto-suave);
  font-size: .72rem; font-weight: 700; text-align: center; letter-spacing: -.01em; white-space: nowrap; position: relative;
}
.nav-item .nav-icono { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 999px; transition: background-color .2s; }
.nav-item[aria-current="page"] { color: var(--marca); }
.nav-item[aria-current="page"] .nav-icono { background: var(--marca-suave); }
.nav-cargar { color: var(--texto); }
.nav-cargar .nav-icono {
  width: 60px; height: 60px; border-radius: 50%; background: var(--marca-degrade); color: var(--marca-texto);
  margin-top: -30px; box-shadow: var(--sombra-marca), 0 0 0 5px var(--fondo); transition: transform .2s;
}
.nav-cargar[aria-current="page"] .nav-icono { background: var(--marca-degrade); }
.nav-cargar:active .nav-icono { transform: scale(.94); }
.nav-cargar .icono { width: 28px; height: 28px; stroke-width: 2.4; }
body.con-nav { padding-bottom: calc(var(--alto-nav) + var(--seguro-abajo) + 12px); }
/* En el formulario de carga la barra se oculta: abajo queda fijo el botón Guardar */
body.pagina-form .nav-app { display: none; }
body.pagina-form { padding-bottom: 0; }

@media (min-width: 760px) {
  .nav-app {
    position: static; display: flex; gap: .25rem; align-items: center; background: none; border: 0; border-radius: 0;
    box-shadow: none; padding: 0; min-height: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.pagina-form .nav-app { display: flex; }
  .nav-item { flex-direction: row; gap: .4rem; min-height: 44px; padding: .4rem .9rem; border-radius: 999px; font-size: .95rem; letter-spacing: 0; }
  .nav-item:hover { color: var(--texto); background: var(--superficie-2); }
  .nav-item .nav-icono, .nav-item[aria-current="page"] .nav-icono { width: auto; height: auto; background: none; }
  .nav-item .icono { width: 20px; height: 20px; }
  .nav-item[aria-current="page"] { background: var(--marca-suave); color: var(--marca); }
  .nav-cargar, .nav-cargar:hover, .nav-cargar[aria-current="page"] {
    order: 9; background: var(--marca-degrade); color: var(--marca-texto); margin-left: .5rem; box-shadow: var(--sombra-marca); padding-right: 1.1rem;
  }
  .nav-cargar .nav-icono, .nav-cargar[aria-current="page"] .nav-icono { width: auto; height: auto; margin: 0; background: none; box-shadow: none; color: inherit; }
  .nav-cargar .icono { width: 20px; height: 20px; }
  body.con-nav { padding-bottom: 0; }
}

/* ---------- Estructura ---------- */
.contenedor { max-width: 1040px; margin: 0 auto; padding: 1.2rem 16px 2rem; }
.angosto { max-width: 560px; }
.medio { max-width: 760px; }
.pagina-cab { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pagina-cab h1 { margin: 0; margin-right: auto; }
.volver { display: inline-flex; align-items: center; gap: .2rem; min-height: 44px; padding-right: .5rem; text-decoration: none; font-weight: 700; width: 100%; }
@media (max-width: 759px) { .solo-escritorio { display: none !important; } }

.tarjeta { border-radius: var(--radio); padding: 1.2rem; margin-bottom: 1rem; }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
.tarjeta-cab h2 { margin: 0; }
.enlace-chico { font-size: .9rem; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Avisos ---------- */
.alerta { display: flex; gap: .7rem; align-items: flex-start; border-radius: var(--radio-chico); padding: .9rem 1rem; margin-bottom: 1rem; color: var(--texto); box-shadow: var(--sombra); border-left-width: 4px; }
.alerta-icono { margin-top: 1px; }
.alerta-cuerpo { flex: 1; min-width: 0; }
.alerta-acciones { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .3rem; }
.alerta-accion { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.alerta-exito { background-image: linear-gradient(var(--positivo-suave), var(--positivo-suave)); border-left-color: var(--positivo); }
.alerta-exito .alerta-icono { color: var(--positivo); }
.alerta-error { background-image: linear-gradient(var(--negativo-suave), var(--negativo-suave)); border-left-color: var(--negativo); }
.alerta-error .alerta-icono { color: var(--negativo); }
.alerta-info { background-image: linear-gradient(var(--info-suave), var(--info-suave)); border-left-color: var(--marca); }
.alerta-info .alerta-icono { color: var(--marca); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--marca-degrade); color: var(--marca-texto); border: 1px solid transparent; border-radius: var(--radio-chico);
  padding: .6rem 1.15rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; min-height: 48px; text-align: center;
  box-shadow: var(--sombra-marca); transition: transform .15s, box-shadow .15s, filter .15s;
}
.boton:hover { filter: brightness(1.06) saturate(1.05); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .6; cursor: progress; }
.boton-secundario { background: var(--vidrio); border-color: var(--vidrio-borde); color: var(--texto); box-shadow: var(--sombra), var(--brillo); }
.boton-secundario .icono { color: var(--marca); }
.boton-secundario:hover { filter: none; border-color: var(--borde-fuerte); }
.boton-peligro { background: transparent; color: var(--negativo); border: 2px solid currentColor; box-shadow: none; }
.boton-peligro:hover { background: var(--negativo-suave); filter: none; }
.boton-grande { min-height: 56px; font-size: 1.08rem; padding: .7rem 1.3rem; border-radius: 18px; }
.boton-chico { min-height: 44px; padding: .35rem .95rem; font-size: .95rem; }
.ancho { width: 100%; }
.boton-texto { background: none; border: 0; color: var(--marca); font: inherit; font-weight: 700; cursor: pointer; min-height: 44px; padding: 0 .25rem; }
.botonera { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .75rem; }
.chip, .chip-boton {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .3rem 1.05rem; border-radius: 999px;
  color: var(--texto); text-decoration: none; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; box-shadow: var(--brillo);
}
.chip:hover, .chip-boton:hover { border-color: var(--borde-fuerte); }
.chip.activo, .chip-boton[aria-pressed="true"] { background: var(--marca-degrade); color: var(--marca-texto); border-color: transparent; box-shadow: var(--sombra-marca); }
.chip-quitar { background: var(--marca-suave); border-color: transparent; color: var(--marca); }
.chip-quitar .icono { opacity: .8; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 1rem; }
.campo > label, .rotulo { display: block; font-weight: 700; margin-bottom: .35rem; }
input[type=text], input[type=password], input[type=date], input[type=tel], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--texto); background: var(--campo); border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico); padding: .6rem .85rem; min-height: 48px; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--texto-suave); opacity: .8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; }
input[type=file] { font: inherit; font-size: .95rem; max-width: 100%; color: var(--texto-suave); }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 700; color: var(--marca); background: var(--marca-suave); border: 0; border-radius: 999px;
  min-height: 44px; padding: .4rem 1rem; margin-right: .7rem; cursor: pointer;
}
textarea { resize: vertical; }
.ayuda { color: var(--texto-suave); font-size: .9rem; margin: .3rem 0 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.grupo { margin: 0 0 1.5rem; }
.grupo > legend, .grupo > .rotulo { font-weight: 800; font-size: 1.05rem; margin-bottom: .55rem; padding: 0; }

/* Interruptor de dos opciones (gasto / transferencia) */
.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 18px; box-shadow: var(--brillo); }
.segmentado label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: .4rem .5rem; font-size: .95rem; border-radius: 13px; cursor: pointer; font-weight: 700; color: var(--texto-suave); line-height: 1.2; transition: background-color .2s, color .2s; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label:has(input:checked) { background: var(--marca-degrade); color: var(--marca-texto); box-shadow: var(--sombra-marca); }
.segmentado label:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.segmentado + .ayuda { margin-top: .5rem; }

/* Monto protagonista */
.monto-bloque { position: relative; overflow: hidden; text-align: center; margin: 0 0 1.5rem; padding: 1.1rem 1rem 1rem; border-radius: var(--radio); }
.monto-bloque::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, var(--marca-suave), transparent 70%);
}
.monto-rotulo { display: block; font-weight: 700; color: var(--texto-suave); margin-bottom: .2rem; }
.monto-campo { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.monto-signo { font-size: 2.2rem; font-weight: 800; color: var(--marca); }
.monto-campo input {
  font-size: 2.8rem; font-weight: 800; letter-spacing: -.03em; text-align: center; border: 0; background: transparent; width: auto; max-width: min(13ch, 100%); field-sizing: content; min-width: 3ch;
  min-height: 68px; padding: 0; font-variant-numeric: tabular-nums; border-bottom: 2px solid var(--borde-fuerte); border-radius: 0; box-shadow: none;
}
.monto-campo input:focus { outline: none; border-bottom-color: var(--marca); box-shadow: 0 2px 0 0 var(--marca); }
.monto-campo input:focus-visible { outline: none; }
.monto-ayuda { min-height: 1.4em; margin: .4rem 0 0; font-size: .95rem; font-weight: 600; color: var(--negativo); }

/* Grilla de categorías (radios con ícono) */
.categorias-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.cat-opcion {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center;
  min-height: 92px; padding: .65rem .2rem; border-radius: 18px; cursor: pointer; font-size: .8rem; font-weight: 700; line-height: 1.15;
  box-shadow: var(--brillo); transition: border-color .15s, background-color .15s, transform .15s;
}
.cat-opcion:hover { border-color: var(--borde-fuerte); }
.cat-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.cat-opcion:has(input:checked) { border: 2px solid var(--marca); background: var(--vidrio-fuerte); box-shadow: 0 0 0 4px var(--marca-suave), var(--brillo); }
.cat-opcion:has(input:checked)::after {
  content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--marca-degrade); color: var(--marca-texto);
}
.cat-opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.cat-nombre { overflow-wrap: break-word; hyphens: auto; max-width: 100%; }

/* Personas (radios o checkboxes con avatar) */
.personas-elegir { display: flex; flex-wrap: wrap; gap: .5rem; }
.persona-opcion {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: .3rem 1rem .3rem .35rem;
  border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--texto); text-decoration: none; box-shadow: var(--brillo);
  transition: border-color .15s, background-color .15s;
}
.persona-opcion:hover { border-color: var(--borde-fuerte); }
.persona-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.persona-opcion:has(input:checked), .persona-opcion.elegida { border: 2px solid var(--marca); background: var(--vidrio-fuerte); box-shadow: 0 0 0 3px var(--marca-suave); }
.persona-opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.multiple .persona-opcion:has(input:checked)::after {
  content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: .75rem; font-weight: 800; background: var(--marca-degrade); color: var(--marca-texto);
}
.persona-opcion.no-disponible { opacity: .4; cursor: not-allowed; }
.compacto .persona-opcion { min-height: 44px; padding-right: .8rem; font-size: .95rem; }
.compacto .avatar { width: 30px; height: 30px; font-size: .85rem; }

/* Avatares: un tono por persona (fondo suave + inicial oscura, AA) */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  font-weight: 800; font-size: 1rem; background: var(--superficie-2); color: var(--texto);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7);
}
.avatar-grande { width: 60px; height: 60px; font-size: 1.5rem; }
.avatar-fran     { background: linear-gradient(135deg, #ece5ff, #d9ccff); color: #4a2bc0; }
.avatar-josefina { background: linear-gradient(135deg, #ffe6f1, #ffc9df); color: #9c1f5a; }
.avatar-guido    { background: linear-gradient(135deg, #e3eeff, #c6dafd); color: #1b4ea8; }
.avatar-miriam   { background: linear-gradient(135deg, #fff0d6, #ffdca6); color: #7d4700; }
.avatar-graciela { background: linear-gradient(135deg, #ffe7de, #ffcbb9); color: #9c3417; }
:root[data-theme="dark"] .avatar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .avatar-fran     { background: linear-gradient(135deg, #5a43c9, #3a2a8a); color: #ece6ff; }
:root[data-theme="dark"] .avatar-josefina { background: linear-gradient(135deg, #a3326c, #6b1f47); color: #ffe3ef; }
:root[data-theme="dark"] .avatar-guido    { background: linear-gradient(135deg, #2f5fc0, #1e3d80); color: #e1ecff; }
:root[data-theme="dark"] .avatar-miriam   { background: linear-gradient(135deg, #a36a14, #6c430b); color: #fff0d4; }
:root[data-theme="dark"] .avatar-graciela { background: linear-gradient(135deg, #b4482a, #76301c); color: #ffe5dc; }

.reparto-fila { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.reparto { margin: 0; font-weight: 600; color: var(--texto-suave); }
.fecha-fila { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fecha-fila input[type=date] { flex: 1 1 160px; width: auto; }

.desplegable > summary { cursor: pointer; font-weight: 700; color: var(--marca); min-height: 44px; display: flex; align-items: center; gap: .5rem; list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 0 0 .2rem; transition: transform .15s; }
.desplegable[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.desplegable[open] > summary { margin-bottom: .6rem; }

/* Botón Guardar fijo abajo en el celular */
.accion-fija {
  position: sticky; bottom: 0; z-index: 15; margin: 1rem -16px 0; padding: .8rem 16px calc(.8rem + var(--seguro-abajo));
  background: var(--vidrio-fuerte); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border-top: 1px solid var(--vidrio-borde); border-radius: 24px 24px 0 0; box-shadow: 0 -8px 30px -12px rgba(76, 52, 170, .28);
}
.accion-fija-resumen { text-align: center; font-weight: 700; font-size: .95rem; margin: 0 0 .5rem; min-height: 1.4em; }
.accion-fija-resumen:empty { display: none; }
@media (min-width: 760px) {
  .accion-fija { position: static; margin: 1rem 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.zona-borrar { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--borde); }

/* ---------- Íconos de categoría (movimientos, grilla de carga, ajustes) ---------- */
.mov-icono {
  width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: var(--superficie-2); color: var(--texto); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.mov-icono .icono { width: 22px; height: 22px; }
.cat-impuestos      { --c-fondo: #ece5ff; --c-tinta: #5332c9; }
.cat-luz            { --c-fondo: #fff1c4; --c-tinta: #835400; }
.cat-agua           { --c-fondo: #dde9ff; --c-tinta: #1d55bf; }
.cat-gas            { --c-fondo: #ffe2d2; --c-tinta: #ad420c; }
.cat-cable          { --c-fondo: #d8eefb; --c-tinta: #0b5f85; }
.cat-mantenimiento  { --c-fondo: #e9e6f4; --c-tinta: #47406a; }
.cat-limpieza       { --c-fondo: #ffe1ef; --c-tinta: #a82467; }
.cat-otros          { --c-fondo: #f5e6dd; --c-tinta: #84492c; }
.cat-reintegro      { --c-fondo: #e2e6ff; --c-tinta: #3442b5; }
:root[data-theme="dark"] .cat-impuestos      { --c-fondo: rgba(140, 110, 255, .24); --c-tinta: #cbbcff; }
:root[data-theme="dark"] .cat-luz            { --c-fondo: rgba(255, 200, 70, .20);  --c-tinta: #ffd77a; }
:root[data-theme="dark"] .cat-agua           { --c-fondo: rgba(90, 140, 255, .24);  --c-tinta: #a9c6ff; }
:root[data-theme="dark"] .cat-gas            { --c-fondo: rgba(255, 130, 70, .22);  --c-tinta: #ffb48c; }
:root[data-theme="dark"] .cat-cable          { --c-fondo: rgba(70, 170, 230, .22);  --c-tinta: #9fd8f7; }
:root[data-theme="dark"] .cat-mantenimiento  { --c-fondo: rgba(190, 180, 230, .18); --c-tinta: #d6d0ef; }
:root[data-theme="dark"] .cat-limpieza       { --c-fondo: rgba(255, 100, 170, .22); --c-tinta: #ffb1d5; }
:root[data-theme="dark"] .cat-otros          { --c-fondo: rgba(230, 150, 110, .20); --c-tinta: #f2c3a8; }
:root[data-theme="dark"] .cat-reintegro      { --c-fondo: rgba(110, 125, 255, .24); --c-tinta: #b8c1ff; }
.mov-icono[class*="cat-"] { background: var(--c-fondo); color: var(--c-tinta); }
:root[data-theme="dark"] .mov-icono { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* ---------- Inicio ---------- */
.inicio-grilla { display: grid; gap: 0 1.1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .inicio-grilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }

.bienvenida { text-align: center; padding: 1.8rem 1.2rem; }
.bienvenida-icono { display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; background: var(--marca-degrade); color: var(--marca-texto); margin-bottom: .8rem; box-shadow: var(--sombra-marca); }
.pasos { text-align: left; margin: 1rem auto 1.4rem; padding: 0; max-width: 30rem; list-style: none; counter-reset: paso; }
.pasos li { position: relative; padding: .2rem 0 .2rem 2.6rem; margin-bottom: .6rem; counter-increment: paso; min-height: 32px; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: var(--marca-suave); color: var(--marca);
}

/* Tarjeta principal: "Hola, Fran" con el monto bien grande */
.resumen-yo { position: relative; overflow: hidden; isolation: isolate; padding: 1.25rem 1.25rem 1.1rem; }
.resumen-yo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 70% at 100% 0%, var(--tinte-1, var(--marca-suave)), transparent 70%),
    radial-gradient(70% 60% at 0% 100%, var(--tinte-2, rgba(255, 138, 107, .12)), transparent 70%);
}
.resumen-yo.estado-debe { --tinte-1: rgba(214, 51, 92, .16); --tinte-2: rgba(255, 150, 110, .14); }
.resumen-yo.estado-le-deben { --tinte-1: rgba(60, 110, 255, .17); --tinte-2: rgba(140, 100, 255, .12); }
.resumen-yo-cab { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.resumen-yo-cab h2 { margin: 0; margin-right: auto; }
.resumen-yo-rotulo { margin: .9rem 0 0; color: var(--texto-suave); font-weight: 700; font-size: .95rem; }
.resumen-yo-monto {
  font-size: clamp(2.1rem, 10vw, 2.9rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: .15rem 0 0;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.resumen-yo.estado-debe .resumen-yo-rotulo, .resumen-yo.estado-debe .resumen-yo-monto { color: var(--negativo); }
.resumen-yo.estado-le-deben .resumen-yo-rotulo, .resumen-yo.estado-le-deben .resumen-yo-monto { color: var(--positivo); }
.resumen-yo.estado-al-dia .resumen-yo-monto { font-size: 1.9rem; margin-top: .9rem; }
.tareas { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.tarea {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .7rem .75rem .7rem .9rem; border-radius: 16px; background: var(--vidrio-fuerte); border: 1px solid var(--borde);
}
.tarea p { margin: 0; flex: 1 1 12rem; }
.tarea form, .pago form { margin: 0; }
.tarea .boton { min-height: 44px; }
.tarea strong, .pago-texto strong { white-space: nowrap; }
.tarea .boton-secundario, .pago .boton-secundario { background: var(--marca-suave); border-color: transparent; color: var(--marca); box-shadow: none; }
.tarea .boton-secundario:hover, .pago .boton-secundario:hover { border-color: var(--marca); }

.quien-sos h2 { font-size: 1.3rem; }
.personas-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .55rem; margin-top: .7rem; }
.persona-boton {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: .8rem .3rem; min-height: 104px;
  border-radius: 18px; text-decoration: none; color: var(--texto); font-weight: 700; box-shadow: var(--brillo);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.persona-boton:hover { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); transform: translateY(-2px); }

.acciones-rapidas { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: 1rem; }
@media (min-width: 440px) { .acciones-rapidas { grid-template-columns: 1fr 1fr; } }
.acciones-rapidas .boton { line-height: 1.2; }

.todo-ok { display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 700; }
.todo-ok .icono { color: var(--marca-texto); background: var(--marca-degrade); border-radius: 50%; padding: 5px; width: 32px; height: 32px; }
.liquidacion { list-style: none; margin: 0; padding: 0; }
.pago { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--borde); }
.pago-quienes { display: flex; align-items: center; gap: 2px; }
.pago-flecha { width: 18px; height: 18px; color: var(--texto-suave); }
.pago-texto { margin: 0; }
.pago-monto { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pago form { grid-column: 1 / -1; }
.pago form .boton { width: 100%; }
@media (min-width: 520px) { .pago { grid-template-columns: auto minmax(0, 1fr) auto; } .pago form { grid-column: auto; } }

.saldos { list-style: none; margin: 0; padding: 0; }
.saldo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem .7rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--borde); }
.saldo:first-child { border-top: 0; }
.saldo-nombre { font-weight: 700; }
.saldo-estado { text-align: right; font-variant-numeric: tabular-nums; font-size: .95rem; }
.saldo-estado strong { font-weight: 800; }
.saldo.estado-debe .saldo-estado { color: var(--negativo); }
.saldo.estado-le-deben .saldo-estado { color: var(--positivo); }
.saldo.estado-al-dia .saldo-estado { color: var(--texto-suave); }
.saldo-barra { grid-column: 2 / -1; height: 8px; border-radius: 4px; background: var(--superficie-2); position: relative; overflow: hidden; }
.saldo-barra::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--borde-fuerte); }
.saldo-barra span { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--texto-suave); }
.estado-debe .saldo-barra span { background: var(--negativo-degrade); }
.estado-le-deben .saldo-barra span { background: var(--positivo-degrade); }
.saldo-cuentas { padding-left: 1.1rem; margin: 0; }
.saldo-cuentas li { margin-bottom: .3rem; }

.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.cifra { border-radius: var(--radio); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .1rem; position: relative; overflow: hidden; }
.cifra-valor { font-size: clamp(1.1rem, 5.4vw, 1.45rem); font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra-etiqueta { color: var(--texto-suave); font-size: .88rem; font-weight: 600; }

.categorias { list-style: none; margin: 0; padding: 0; }
.categoria a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .75rem; align-items: center; padding: .5rem .25rem; color: var(--texto); text-decoration: none; min-height: 56px; border-radius: var(--radio-chico); }
.categoria a:hover { background: var(--superficie-2); }
.categoria .mov-icono { grid-row: span 2; }
.categoria-nombre { font-weight: 600; }
.categoria-monto { font-weight: 800; font-variant-numeric: tabular-nums; }
.categoria-riel { grid-column: 2 / -1; height: 8px; background: var(--superficie-2); border-radius: 4px; overflow: hidden; }
.categoria-riel span { display: block; height: 100%; background: var(--barra-degrade); border-radius: 4px; }

/* ---------- Movimientos ---------- */
.movs { list-style: none; margin: 0; padding: 0; }
.mov + .mov { border-top: 1px solid var(--borde); }
.mov-fila { display: flex; align-items: center; gap: .8rem; padding: .7rem .35rem; min-height: 66px; color: var(--texto); text-decoration: none; border-radius: var(--radio-chico); transition: background-color .15s; }
a.mov-fila:hover { background: var(--superficie-2); }
.mov-resaltado .mov-fila { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
.mov-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mov-titulo { font-weight: 700; overflow-wrap: anywhere; }
.mov-linea { font-size: .92rem; overflow-wrap: anywhere; }
.mov-extra { font-size: .85rem; color: var(--texto-suave); display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.mov-lado { text-align: right; display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.mov-monto { font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mov-cu { font-size: .8rem; color: var(--texto-suave); white-space: nowrap; }
.mov-reintegro .mov-monto { color: var(--texto-suave); }
.mov-reintegro .mov-titulo { font-weight: 600; }

.grupo-mes { border-radius: var(--radio); padding: .4rem .7rem .35rem; margin-bottom: 1rem; }
.grupo-mes-cab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .2rem 1rem; padding: .7rem .35rem .5rem; border-bottom: 1px solid var(--borde); }
.grupo-mes-cab h2 { margin: 0; font-size: 1.1rem; }
.grupo-mes-total { font-size: .92rem; color: var(--texto-suave); }
.grupo-mes-total strong { color: var(--texto); font-weight: 800; font-variant-numeric: tabular-nums; }
.lista-resumen { color: var(--texto-suave); margin: .2rem 0 .8rem; }
.lista-resumen strong { color: var(--texto); font-weight: 800; }
.descarga { text-align: center; margin-top: 1.4rem; }

.buscador { margin-bottom: .8rem; }
.buscador-fila { position: relative; display: flex; gap: .5rem; }
.buscador-icono { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; display: flex; z-index: 1; }
.buscador-icono .icono { width: 20px; height: 20px; }
.buscador-fila input { padding-left: 2.7rem; flex: 1; min-width: 0; border-radius: 999px; }
.buscador-fila .boton { flex: none; border-radius: 999px; }
.filtros { margin-top: .5rem; }
.filtros > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 700; color: var(--texto); list-style: none; }
.filtros > summary::-webkit-details-marker { display: none; }
.filtros > summary .icono { width: 20px; height: 20px; color: var(--marca); }
.contador { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--marca-degrade); color: var(--marca-texto); font-size: .8rem; font-weight: 800; padding: 0 6px; }
.filtros[open] { border-radius: var(--radio); padding: .3rem 1rem 1rem; }
.filtros-campos { display: grid; gap: .2rem .75rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: .5rem; }
.filtros-campos .campo { margin-bottom: .6rem; }
.filtros-campos .campo:nth-child(3) { grid-column: 1 / -1; }
.filtros-campos label { font-size: .9rem; }
@media (min-width: 760px) { .filtros-campos { grid-template-columns: repeat(5, minmax(0, 1fr)); } .filtros-campos .campo:nth-child(3) { grid-column: auto; } }
.periodos, .filtros-activos { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }

.vacio { text-align: center; color: var(--texto); padding: 2rem 1rem; }
.vacio-icono { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; color: var(--marca); margin-bottom: .7rem; box-shadow: var(--sombra), var(--brillo); }
.vacio .boton { margin-top: .6rem; }

/* ---------- Ajustes ---------- */
.reparto-lista { display: grid; gap: .1rem; }
.reparto-cat { border-top: 1px solid var(--borde); }
.reparto-cat > summary { display: flex; align-items: center; gap: .7rem; min-height: 60px; padding: .45rem 0; cursor: pointer; font-weight: 700; list-style: none; }
.reparto-cat > summary::-webkit-details-marker { display: none; }
.reparto-cat > summary .mov-icono { width: 40px; height: 40px; border-radius: 12px; }
.reparto-cat > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave); transform: rotate(45deg); margin: -4px .3rem 0 0; flex: none; }
.reparto-cat[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.reparto-cat > .personas-elegir { padding: .2rem 0 1rem; }
.reparto-cat-nombre { margin-right: auto; min-width: 0; }
.reparto-cat-estado:not(.solo-algunos) { white-space: nowrap; }
.reparto-cat-estado { font-size: .82rem; font-weight: 700; color: var(--texto-suave); text-align: right; max-width: 45%; }
.reparto-cat-estado.solo-algunos { color: var(--marca); background: var(--marca-suave); padding: .2rem .65rem; border-radius: 12px; }
.salir { margin-top: 1rem; }
.seccion-wa > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; min-height: 44px; list-style: none; }
.seccion-wa > summary::-webkit-details-marker { display: none; }
.seccion-wa-titulo { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.1rem; }
.seccion-wa-titulo .icono { color: var(--marca); }
.seccion-wa[open] > summary { margin-bottom: .6rem; }
.etiqueta-estado { font-size: .8rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px; background: var(--marca-suave); color: var(--marca); white-space: nowrap; }
.sub-seccion { border-top: 1px solid var(--borde); padding-top: 1rem; margin-top: 1rem; }
.chequeos { list-style: none; padding: 0; margin: 0 0 .8rem; }
.chequeo { display: flex; align-items: center; gap: .55rem; font-size: .92rem; padding: .2rem 0; }
.chequeo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chequeo-listo::before { background: var(--positivo); box-shadow: 0 0 0 3px var(--positivo-suave); }
.chequeo-pendiente::before { background: transparent; box-shadow: inset 0 0 0 2px var(--acento); }
.mensajes-wa { list-style: none; padding: 0; margin: 0; }
.mensajes-wa li { padding: .6rem 0; border-top: 1px solid var(--borde); }
.mensajes-wa p { margin: 0; overflow-wrap: anywhere; }

/* ---------- Login ---------- */
.pagina-login .contenedor { min-height: calc(100vh - 62px); display: flex; flex-direction: column; justify-content: center; padding-top: 1rem; }
.login { margin: 0 0 2rem; text-align: left; padding: 1.8rem 1.4rem 1.4rem; }
.login-logo { display: block; margin: 0 auto 1rem; border-radius: 18px; box-shadow: 0 12px 30px -8px rgba(109, 74, 255, .6); }
.login h1 { text-align: center; }
.login > .suave { text-align: center; }
.campo-clave { display: flex; gap: .4rem; }
.campo-clave input { flex: 1; min-width: 0; }
.ver-clave { display: inline-flex; align-items: center; gap: .3rem; min-height: 48px; padding: 0 .85rem; border-radius: var(--radio-chico); color: var(--texto); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; flex: none; }
.ver-clave .icono { width: 18px; height: 18px; color: var(--marca); }
.ver-clave[aria-pressed="true"] { background: var(--marca-suave); }

code { background: var(--superficie-2); padding: .1rem .4rem; border-radius: 6px; font-size: .9em; overflow-wrap: anywhere; }

@media (max-width: 380px) {
  .contenedor { padding-left: 12px; padding-right: 12px; }
  .accion-fija { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .marca span { font-size: 1rem; }
  .monto-campo input { font-size: 2.3rem; }
  .tarjeta { padding: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .persona-boton:hover, .boton:active { transform: none; }
}

/* Escritorio: letra más chica y pesos más livianos (en el celular se mantiene grande para tocar y leer fácil) */
@media (min-width: 760px) {
  html { font-size: 14.5px; }
  body { font-size: 15px; }
  h1 { font-size: 1.6rem; font-weight: 700; }
  h2, .grupo > legend, .grupo > .rotulo, .seccion-wa-titulo { font-weight: 650; }
  h3, strong, .marca, .boton, .chip, .boton-texto, .campo > label, .rotulo, .segmentado label, .monto-rotulo,
  .cat-opcion, .persona-opcion, .desplegable > summary, .accion-fija-resumen, .resumen-yo-rotulo, .persona-boton,
  .todo-ok, .saldo-nombre, .mov-titulo, .filtros > summary, .reparto-cat > summary, .reparto-cat-estado,
  .alerta-accion, .enlace-chico, .volver, .ver-clave, .nav-item { font-weight: 600; }
  .saldo-estado strong, .categoria-monto, .mov-monto, .grupo-mes-total strong, .lista-resumen strong,
  .pago-monto, .cifra-valor, .monto-signo, .monto-campo input, .resumen-yo-monto { font-weight: 700; }
  .resumen-yo-monto { font-size: 2.3rem; }
  .pago-monto { font-size: 1.2rem; }
  .cifra-valor { font-size: 1.25rem; }
  .monto-campo input { font-size: 2.4rem; }
  .boton { min-height: 42px; }
  .boton-grande { min-height: 48px; font-size: 1rem; }
  .cat-opcion { min-height: 84px; font-size: .78rem; }
}

/* Detalle de "Otros" debajo de la grilla de categorías */
.otros-detalle { margin-top: .9rem; }
.otros-detalle[hidden] { display: none; }

/* Selección y foco sutiles: borde fino y un resplandor suave, en vez de bordes gruesos */
:root { --sel-borde: rgba(109, 74, 255, .55); --sel-brillo: 0 0 0 1px rgba(109, 74, 255, .18), 0 6px 22px -6px rgba(124, 77, 255, .45); --sel-fondo: rgba(255, 255, 255, .85); }
:root[data-theme="dark"] { --sel-borde: rgba(179, 161, 255, .6); --sel-brillo: 0 0 0 1px rgba(179, 161, 255, .2), 0 6px 24px -6px rgba(150, 120, 255, .55); --sel-fondo: rgba(60, 48, 110, .7); }
.cat-opcion:has(input:checked),
.persona-opcion:has(input:checked), .persona-opcion.elegida {
  border: 1px solid var(--sel-borde); background: var(--sel-fondo); box-shadow: var(--sel-brillo), var(--brillo);
}
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--sel-borde); box-shadow: var(--sel-brillo);
}
.monto-campo input:focus, .monto-campo input:focus-visible { box-shadow: 0 2px 0 0 var(--marca); }
/* Con teclado se sigue viendo bien dónde está el foco */
.cat-opcion:has(input:focus-visible), .persona-opcion:has(input:focus-visible), .segmentado label:has(input:focus-visible) {
  outline: 2px solid var(--sel-borde); outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .cat-opcion, .persona-opcion, input, select, textarea { transition: border-color .2s, box-shadow .25s, background-color .2s; }
}