/* Pendientes — estética minimalista (tipografía del sistema, superficies claras, vidrio esmerilado). */
:root {
  --acento: #0071e3;
  --bg: #f5f5f7;
  --superficie: #ffffff;
  --superficie-2: #fbfbfd;
  --columna: rgba(0, 0, 0, 0.035);
  --vidrio: rgba(255, 255, 255, 0.72);
  --texto: #1d1d1f;
  --texto-2: #6e6e73;
  --texto-3: #a1a1a6;
  --borde: rgba(0, 0, 0, 0.08);
  --borde-fuerte: rgba(0, 0, 0, 0.14);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  --rojo: #ff3b30;
  --naranja: #ff9500;
  --amarillo: #ffcc00;
  --verde: #34c759;
  --radio: 14px;
  --radio-grande: 20px;
  --escala: 1;
  --tarjeta-pad: 12px;
  --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Inter, system-ui, sans-serif;
  --fuente-titulo: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', Inter, system-ui, sans-serif;
  color-scheme: light;
}
:root[data-tema='oscuro'] {
  --bg: #000000;
  --superficie: #1c1c1e;
  --superficie-2: #232325;
  --columna: rgba(255, 255, 255, 0.045);
  --vidrio: rgba(28, 28, 30, 0.7);
  --texto: #f5f5f7;
  --texto-2: #a1a1a6;
  --texto-3: #6e6e73;
  --borde: rgba(255, 255, 255, 0.09);
  --borde-fuerte: rgba(255, 255, 255, 0.16);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-alta: 0 12px 34px rgba(0, 0, 0, 0.6);
  --rojo: #ff453a;
  --naranja: #ff9f0a;
  --amarillo: #ffd60a;
  --verde: #30d158;
  color-scheme: dark;
}
:root[data-densidad='compacta'] { --tarjeta-pad: 8px; }
:root[data-letra='grande'] { --escala: 1.08; }
:root[data-letra='muy'] { --escala: 1.16; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--fuente);
  font-size: calc(14px * var(--escala));
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  letter-spacing: -0.01em;
}
/* Fondos */
body[data-fondo='niebla'] { background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--acento) 14%, transparent), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(175, 82, 222, 0.12), transparent 60%), var(--bg); }
body[data-fondo='aurora'] { background: radial-gradient(900px 500px at 0% 0%, rgba(90, 200, 250, 0.35), transparent 60%), radial-gradient(900px 600px at 100% 0%, rgba(175, 82, 222, 0.3), transparent 60%), radial-gradient(1000px 700px at 50% 120%, rgba(52, 199, 89, 0.22), transparent 60%), var(--bg); }
body[data-fondo='arena'] { background: linear-gradient(160deg, #f6efe6 0%, #efe6da 100%); }
:root[data-tema='oscuro'] body[data-fondo='arena'] { background: linear-gradient(160deg, #1f1a14 0%, #14110d 100%); }
body[data-fondo='grafito'] { background: linear-gradient(160deg, #e9e9ee 0%, #d9d9de 100%); }
:root[data-tema='oscuro'] body[data-fondo='grafito'] { background: linear-gradient(160deg, #1c1c1f 0%, #0c0c0e 100%); }

button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea, select { outline: none; }
::selection { background: color-mix(in srgb, var(--acento) 30%, transparent); }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Estructura */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; transition: grid-template-columns 0.2s ease; }
body[data-lateral='compacto'] .app { grid-template-columns: 68px minmax(0, 1fr); }
.lateral {
  background: var(--vidrio);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  padding: 18px 12px 12px;
  gap: 2px;
  overflow-y: auto;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-family: var(--fuente-titulo); font-weight: 600; font-size: 17px; }
.marca .logo { width: 26px; height: 26px; border-radius: 8px; background: var(--acento); display: grid; place-items: center; color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--acento) 40%, transparent); }
.marca .logo svg { width: 16px; height: 16px; fill: #fff; stroke: none; }
.marca .plegar { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--texto-2); }
.marca .plegar:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); color: var(--texto); }
/* Barra lateral compacta: sólo íconos */
body[data-lateral='compacto'] .lateral { padding: 18px 10px 12px; align-items: center; overflow-x: hidden; }
body[data-lateral='compacto'] .lateral .txt,
body[data-lateral='compacto'] .lateral .cuenta:not(.alerta),
body[data-lateral='compacto'] .lateral .mas,
body[data-lateral='compacto'] .marca .logo { display: none; }
body[data-lateral='compacto'] .marca { padding: 4px 0 18px; justify-content: center; }
body[data-lateral='compacto'] .marca .plegar { margin: 0; }
body[data-lateral='compacto'] .nav { justify-content: center; padding: 9px 0; width: 44px; }
body[data-lateral='compacto'] .nav .punto { margin: 0; }
body[data-lateral='compacto'] .nav .emoji { font-size: 17px; width: auto; }
body[data-lateral='compacto'] .nav .cuenta.alerta { position: absolute; top: 2px; right: 0; font-size: 10px; padding: 0 5px; line-height: 15px; }
body[data-lateral='compacto'] .seccion-titulo { padding: 14px 0 6px; justify-content: center; border-top: 1px solid var(--borde); margin-top: 10px; width: 44px; }
body[data-lateral='compacto'] .seccion-titulo button { margin: 0; }
body[data-lateral='compacto'] .lateral .pie { align-items: center; }
body[data-lateral='compacto'] .estado-guardado { padding: 8px 0 0; justify-content: center; }
.nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--texto); width: 100%; text-align: left; position: relative; }
.nav:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.nav.activo { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); font-weight: 600; }
.nav .cuenta { margin-left: auto; font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.nav.activo .cuenta { color: var(--acento); }
.nav .cuenta.alerta { color: #fff; background: var(--rojo); border-radius: 10px; padding: 0 7px; line-height: 18px; font-weight: 600; }
.nav .punto { width: 10px; height: 10px; border-radius: 50%; flex: none; margin: 0 4px; }
.nav .emoji { width: 18px; text-align: center; flex: none; }
.nav .mas { opacity: 0; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--texto-2); padding: 0 2px; border-radius: 6px; display: grid; place-items: center; height: 22px; }
.nav:hover .mas { opacity: 1; }
.nav:hover .cuenta.oculta-hover { display: none; }
.nav .mas:hover { color: var(--texto); background: color-mix(in srgb, var(--texto) 8%, transparent); }
.seccion-titulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); padding: 18px 10px 6px; display: flex; align-items: center; }
.seccion-titulo button { margin-left: auto; color: var(--texto-2); border-radius: 6px; display: grid; place-items: center; width: 22px; height: 22px; }
.seccion-titulo button:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); color: var(--texto); }
.lateral .pie { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.estado-guardado { font-size: 11.5px; color: var(--texto-3); padding: 8px 10px 0; display: flex; align-items: center; gap: 6px; height: 26px; flex: none; white-space: nowrap; overflow: hidden; }
.estado-guardado .luz { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
.estado-guardado.error .luz { background: var(--rojo); }
.estado-guardado.guardando .luz { background: var(--naranja); }

.principal { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.cabecera { display: flex; align-items: center; gap: 12px; padding: 22px 28px 14px; flex-wrap: wrap; }
.cabecera h1 { font-family: var(--fuente-titulo); font-size: calc(28px * var(--escala)); font-weight: 700; letter-spacing: -0.025em; margin: 0; display: flex; align-items: center; gap: 10px; }
.cabecera h1 .emoji { font-size: 26px; }
.cabecera .sub { color: var(--texto-2); font-size: 13px; margin-top: 2px; }
.cabecera .acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.buscador { display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--texto) 6%, transparent); border-radius: 10px; padding: 0 10px; height: 34px; width: 230px; color: var(--texto-2); }
.buscador input { border: 0; background: transparent; width: 100%; color: var(--texto); }
.buscador input::placeholder { color: var(--texto-3); }
.boton { height: 34px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.boton.primario { background: var(--acento); color: #fff; }
.boton.primario:hover { filter: brightness(1.07); }
.boton.suave { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.boton.suave:hover { background: color-mix(in srgb, var(--texto) 10%, transparent); }
.boton.peligro { color: var(--rojo); background: color-mix(in srgb, var(--rojo) 10%, transparent); }
.boton.peligro:hover { background: color-mix(in srgb, var(--rojo) 16%, transparent); }
.boton.chico { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.boton svg.i { width: 16px; height: 16px; }

.filtros { display: flex; gap: 6px; padding: 0 28px 12px; flex-wrap: wrap; align-items: center; }
.chip { height: 28px; border-radius: 14px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--texto) 5%, transparent); color: var(--texto-2); font-size: 13px; border: 1px solid transparent; }
.chip:hover { color: var(--texto); }
.chip.activo { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); font-weight: 500; }
.chip .punto { width: 8px; height: 8px; border-radius: 50%; }
.filtros .separador { width: 1px; height: 18px; background: var(--borde-fuerte); margin: 0 4px; }

/* Tablero */
.tablero { flex: 1; display: flex; gap: 12px; padding: 4px 28px 28px; overflow-x: hidden; overflow-y: hidden; align-items: flex-start; }
.columna { flex: 1 1 0; min-width: 0; max-height: 100%; display: flex; flex-direction: column; background: var(--columna); border-radius: var(--radio-grande); padding: 10px; }
body:not([data-fondo='liso']) .columna { background: var(--vidrio); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--borde); }
.columna-cab { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-weight: 600; }
.columna-cab .marca-col { width: 8px; height: 8px; border-radius: 50%; }
.columna-cab .num { color: var(--texto-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.columna-cab .acc { margin-left: auto; display: flex; gap: 2px; }
.columna-cab .acc button { width: 26px; height: 26px; border-radius: 7px; color: var(--texto-2); display: grid; place-items: center; }
.columna-cab .acc button:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); color: var(--texto); }
.lista { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 40px; padding: 2px; margin: -2px; border-radius: 12px; }
.lista.sobre { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.hueco { height: 4px; border-radius: 2px; background: var(--acento); margin: -2px 4px; }

.tarjeta {
  background: var(--superficie);
  border-radius: var(--radio);
  padding: var(--tarjeta-pad) calc(var(--tarjeta-pad) + 2px);
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
  cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
  user-select: none;
}
.tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.tarjeta.arrastrando { opacity: 0.35; }
.tarjeta .titulo { font-weight: 500; line-height: 1.35; word-break: break-word; }
.tarjeta.hecha .titulo { color: var(--texto-2); text-decoration: line-through; text-decoration-color: var(--texto-3); }
.tarjeta .prio { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; }
.tarjeta .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.tarjeta .meta:empty { display: none; }
.etiqueta { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--acento) 11%, transparent); color: var(--acento); font-weight: 500; white-space: nowrap; }
.dato { font-size: 12px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dato svg.i { width: 13px; height: 13px; }
.dato.vencida { color: var(--rojo); font-weight: 600; }
.dato.pronto { color: var(--naranja); font-weight: 600; }
.dato.completo { color: var(--verde); }
.avatares { display: inline-flex; margin-left: auto; }
.avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--superficie); margin-left: -6px; }
.pill-espacio { font-size: 11px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.pill-espacio .punto { width: 7px; height: 7px; border-radius: 50%; }

.agregar { margin-top: 8px; border-radius: 10px; padding: 8px 10px; color: var(--texto-2); display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; }
.agregar:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); color: var(--texto); }
.rapida { margin-top: 8px; background: var(--superficie); border-radius: var(--radio); border: 1px solid var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); padding: 10px 12px; }
.rapida textarea { width: 100%; border: 0; background: transparent; resize: none; min-height: 40px; }
.rapida .ayuda { font-size: 11.5px; color: var(--texto-3); margin-top: 4px; }
.rapida .fila { display: flex; gap: 6px; margin-top: 8px; }

/* Hoy / listas */
.vista-lista { flex: 1; overflow-y: auto; padding: 4px 28px 40px; }
.bloque { max-width: 860px; margin-bottom: 26px; }
.bloque h2 { font-family: var(--fuente-titulo); font-size: 15px; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.bloque h2 .num { color: var(--texto-2); font-weight: 500; }
.bloque h2.rojo { color: var(--rojo); }
.grupo { background: var(--superficie); border-radius: var(--radio); border: 1px solid var(--borde); box-shadow: var(--sombra); overflow: hidden; }
.fila-t { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.fila-t:last-child { border-bottom: 0; }
.fila-t:hover { background: var(--superficie-2); }
.circulo { width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid var(--borde-fuerte); flex: none; display: grid; place-items: center; color: transparent; }
.circulo:hover { border-color: var(--acento); }
.circulo.ok { background: var(--acento); border-color: var(--acento); color: #fff; }
.circulo svg.i { width: 12px; height: 12px; stroke-width: 3; }
.fila-t .txt { flex: 1; min-width: 0; }
.fila-t .txt .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-t .txt .s { font-size: 12px; color: var(--texto-2); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.vacio { color: var(--texto-2); padding: 40px 0; text-align: center; }
.vacio .grande { font-family: var(--fuente-titulo); font-size: 20px; font-weight: 600; color: var(--texto); margin-bottom: 6px; }

/* Calendario */
.calendario { flex: 1; display: flex; flex-direction: column; padding: 0 28px 24px; min-height: 0; }
.cal-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-barra h2 { font-family: var(--fuente-titulo); font-size: 20px; margin: 0 8px 0 0; font-weight: 600; min-width: 170px; }
.cal-barra .flecha { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--texto-2); }
.cal-barra .flecha:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); color: var(--texto); }
.cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); padding: 0 0 6px; }
.cal-dias div { padding: 0 8px; }
.cal-grilla { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; background: var(--borde); gap: 1px; border-radius: var(--radio-grande); overflow: hidden; border: 1px solid var(--borde); min-height: 0; }
.dia { background: var(--superficie); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; cursor: pointer; }
.dia:hover { background: var(--superficie-2); }
.dia.fuera { background: var(--superficie-2); }
.dia.fuera .n { color: var(--texto-3); }
.dia .n { font-size: 12px; font-weight: 600; color: var(--texto-2); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 2px; }
.dia.hoy .n { background: var(--rojo); color: #fff; }
.dia.sobre { box-shadow: inset 0 0 0 2px var(--acento); }
.evento { font-size: 11.5px; padding: 2px 6px; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; flex: none; cursor: pointer; }
.evento.hecho { text-decoration: line-through; opacity: 0.55; }
.dia .mas-ev { font-size: 11px; color: var(--texto-2); padding-left: 4px; }

/* Modal */
.fondo-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 50; animation: aparecer 0.15s ease; padding: 24px; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(8px) scale(0.985); opacity: 0; } }
.modal { background: var(--superficie); border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); width: min(680px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; animation: subir 0.18s ease; border: 1px solid var(--borde); }
.modal.chico { width: min(440px, 100%); }
.modal-cuerpo { padding: 22px 26px; overflow-y: auto; }
.modal-pie { padding: 14px 26px; border-top: 1px solid var(--borde); display: flex; align-items: center; gap: 8px; }
.modal-pie .der { margin-left: auto; display: flex; gap: 8px; }
.titulo-grande { width: 100%; border: 0; background: transparent; font-family: var(--fuente-titulo); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; padding: 6px 0; resize: none; overflow: hidden; line-height: 1.3; }
.titulo-grande::placeholder { color: var(--texto-3); }
.campos { display: grid; grid-template-columns: 110px 1fr; gap: 12px 14px; align-items: center; margin-top: 16px; }
.campos .lbl { font-size: 13px; color: var(--texto-2); display: flex; align-items: center; gap: 6px; }
.campos .lbl svg.i { width: 15px; height: 15px; }
.segmentado { justify-self: start; display: inline-flex; background: color-mix(in srgb, var(--texto) 6%, transparent); border-radius: 9px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.segmentado button { padding: 4px 12px; border-radius: 7px; font-size: 13px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; }
.segmentado button.activo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); font-weight: 500; }
:root[data-tema='oscuro'] .segmentado button.activo { background: #3a3a3c; }
.segmentado .punto { width: 8px; height: 8px; border-radius: 50%; }
.entrada { height: 32px; border-radius: 8px; border: 1px solid var(--borde-fuerte); background: var(--superficie); padding: 0 10px; }
.entrada:focus, .area:focus { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent); }
.area { width: 100%; min-height: 90px; border-radius: 10px; border: 1px solid var(--borde-fuerte); background: var(--superficie); padding: 10px 12px; resize: vertical; line-height: 1.45; }
.fila-campos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chips-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 32px; }
.chips-edit .etiqueta, .chips-edit .persona { display: inline-flex; align-items: center; gap: 4px; }
.chips-edit .persona { font-size: 12px; padding: 2px 8px 2px 3px; border-radius: 12px; background: color-mix(in srgb, var(--texto) 6%, transparent); }
.chips-edit .persona .avatar { margin: 0; width: 18px; height: 18px; font-size: 9px; border: 0; }
.chips-edit .x { opacity: 0.55; font-size: 14px; line-height: 1; padding: 0 2px; }
.chips-edit .x:hover { opacity: 1; }
.chips-edit input { border: 0; background: transparent; min-width: 140px; height: 28px; }
.sub-titulo { font-size: 13px; font-weight: 600; margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; }
.sub-titulo .num { color: var(--texto-2); font-weight: 500; }
.barra { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--texto) 8%, transparent); overflow: hidden; margin-bottom: 8px; }
.barra div { height: 100%; background: var(--verde); border-radius: 3px; transition: width 0.2s; }
.item-check { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 8px; }
.item-check:hover { background: var(--superficie-2); }
.item-check input[type='text'] { flex: 1; border: 0; background: transparent; padding: 4px 0; }
.item-check.ok input[type='text'] { color: var(--texto-2); text-decoration: line-through; }
.item-check .borrar { opacity: 0; color: var(--texto-2); }
.item-check:hover .borrar { opacity: 1; }
.info-meta { font-size: 11.5px; color: var(--texto-3); margin-top: 18px; }

/* Ajustes */
.ajustes-sec { margin-bottom: 26px; }
.ajustes-sec h3 { font-family: var(--fuente-titulo); font-size: 15px; margin: 0 0 12px; font-weight: 600; }
.colores { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.color { width: 26px; height: 26px; border-radius: 50%; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.color.activo::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--texto-2); }
.color-libre { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border: 0; padding: 0; background: conic-gradient(#ff3b30, #ffcc00, #34c759, #5ac8fa, #007aff, #af52de, #ff3b30); border-radius: 50%; overflow: hidden; cursor: pointer; }
.color-libre::-webkit-color-swatch-wrapper { padding: 3px; }
.color-libre::-webkit-color-swatch { border: 2px solid var(--superficie); border-radius: 50%; }
.fondos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fondo-op { border-radius: 12px; height: 62px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--borde); position: relative; }
.fondo-op.activo { border-color: var(--acento); }
.fondo-op span { position: absolute; left: 8px; bottom: 6px; font-size: 11.5px; font-weight: 500; color: #1d1d1f; }
.espacio-ed { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.espacio-ed:last-child { border-bottom: 0; }
.espacio-ed .entrada { flex: 1; }
.emoji-in { width: 44px; text-align: center; }
.icono-btn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--texto-2); }
.icono-btn:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); color: var(--texto); }
.icono-btn.rojo:hover { color: var(--rojo); }
.nota { font-size: 12.5px; color: var(--texto-2); line-height: 1.45; }

/* Avisos */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: color-mix(in srgb, #1d1d1f 92%, transparent); color: #fff; padding: 10px 14px 10px 18px; border-radius: 14px; display: flex; align-items: center; gap: 14px; box-shadow: var(--sombra-alta); z-index: 80; animation: subir 0.18s ease; backdrop-filter: blur(12px); font-size: 13.5px; }
.toast button { color: #64d2ff; font-weight: 600; padding: 4px 6px; }

/* Menú contextual */
.menu { position: fixed; background: var(--vidrio); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 5px; z-index: 90; min-width: 190px; animation: aparecer 0.1s ease; }
.menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 7px; text-align: left; font-size: 13.5px; }
.menu button:hover { background: var(--acento); color: #fff; }
.menu button.rojo { color: var(--rojo); }
.menu button.rojo:hover { background: var(--rojo); color: #fff; }
.menu hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 6px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--texto) 16%, transparent); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Ideas */
.captura { max-width: 980px; display: flex; align-items: flex-start; gap: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 14px 14px 14px 16px; margin-bottom: 18px; }
.captura:focus-within { border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 15%, transparent); }
.captura .foco { color: var(--amarillo); margin-top: 4px; }
.captura .foco svg.i { width: 22px; height: 22px; }
.captura textarea { flex: 1; border: 0; background: transparent; resize: none; font-size: calc(15px * var(--escala)); line-height: 1.45; padding: 3px 0; min-height: 26px; }
.captura textarea::placeholder { color: var(--texto-3); }
.ideas { columns: 280px; column-gap: 14px; max-width: 1400px; }
.idea { break-inside: avoid; margin-bottom: 14px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 16px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.idea:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.idea.apagada { opacity: 0.55; }
.idea-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.estado-idea { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.estrella { margin-left: auto; color: var(--texto-3); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; }
.estrella:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); color: var(--texto-2); }
.estrella.on, .estrella-btn.on { color: var(--amarillo); }
.estrella.on svg.i, .estrella-btn.on svg.i { fill: currentColor; }
.idea-titulo { font-family: var(--fuente-titulo); font-weight: 600; font-size: calc(15.5px * var(--escala)); line-height: 1.3; letter-spacing: -0.015em; }
.idea-notas { color: var(--texto-2); margin-top: 6px; line-height: 1.45; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.idea .meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Marca de los espacios */
.marca-esp { display: inline-grid; place-items: center; flex: none; border-radius: 28%; color: #fff; font-weight: 700; line-height: 1; font-family: var(--fuente-titulo); }
.marca-esp.simbolo, .marca-esp.iniciales { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, #fff), var(--c)); box-shadow: 0 1px 2px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.marca-esp.simbolo svg.i { width: 64%; height: 64%; stroke-width: 1.9; }
.marca-esp.linea svg.i { width: 88%; height: 88%; stroke-width: 1.7; }
.marca-esp.punto-esp span { width: 42%; height: 42%; border-radius: 50%; }
.nav .marca-esp { margin: 0 -2px; }
.nav.activo .marca-esp.linea { color: var(--acento); }
.chip .marca-esp { margin-left: -4px; }
.vista-esp { display: flex; align-items: center; gap: 14px; font-family: var(--fuente-titulo); font-size: 20px; font-weight: 600; margin: 0 0 20px; }
.simbolos { display: grid; grid-template-columns: repeat(auto-fill, 36px); gap: 6px; }
.op-simbolo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--texto-2); background: color-mix(in srgb, var(--texto) 5%, transparent); }
.op-simbolo:hover { color: var(--texto); background: color-mix(in srgb, var(--texto) 9%, transparent); }
.op-simbolo.activo { background: var(--c); color: #fff; }
.op-simbolo svg.i { width: 20px; height: 20px; }
.modal.mediano { width: min(540px, 100%); }
.estilos-esp { display: flex; gap: 8px; flex-wrap: wrap; }
.estilo-op { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px 8px; border-radius: 12px; border: 1.5px solid var(--borde); font-size: 12px; color: var(--texto-2); min-width: 92px; }
.estilo-op:hover { border-color: var(--borde-fuerte); }
.estilo-op.activo { border-color: var(--acento); color: var(--texto); font-weight: 500; }
.estilo-op .marcas { display: flex; gap: 4px; align-items: center; min-height: 22px; }

/* Ordenar espacios arrastrando */
.lateral .nav[draggable='true'] { cursor: default; }
.nav.arrastrando { opacity: 0.4; }
.nav.antes::before, .nav.despues::after { content: ''; position: absolute; left: 8px; right: 8px; height: 2px; border-radius: 2px; background: var(--acento); }
.nav.antes::before { top: -2px; }
.nav.despues::after { bottom: -2px; }

/* Sugerencias de etiquetas y personas (mismo estilo que los menús) */
.chips-entrada { position: relative; flex: 1; min-width: 160px; }
.chips-entrada input { width: 100%; }
.sugerencias { position: absolute; top: calc(100% + 6px); left: -6px; min-width: 240px; max-width: 340px; max-height: 280px; overflow-y: auto; z-index: 60; background: var(--vidrio); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 5px; animation: aparecer 0.1s ease; }
:root[data-tema='claro'] .sugerencias { background: rgba(255, 255, 255, 0.92); }
.sug { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 7px; text-align: left; font-size: 13.5px; }
.sug .avatar { margin: 0; border: 0; width: 20px; height: 20px; font-size: 9px; }
.sug.marcada { background: var(--acento); color: #fff; }
.sug-nueva { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); }
.sug.marcada .sug-nueva { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* Calendario: vistas Día / Semana / Año */
.cal-barra { flex-wrap: wrap; }
.dia .n:hover { background: color-mix(in srgb, var(--texto) 9%, transparent); color: var(--texto); }
.dia.hoy .n:hover { background: var(--rojo); color: #fff; }
.dia .mas-ev { text-align: left; }
.dia .mas-ev:hover { color: var(--acento); }
.cal-dia-vista { max-width: 860px; border-radius: var(--radio-grande); padding: 4px; }
.cal-dia-vista.sobre { box-shadow: inset 0 0 0 2px var(--acento); }
.hora-col { width: 44px; flex: none; font-size: 13px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.cal-semana { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio-grande); overflow: hidden; min-height: 0; }
.sem-dia { background: var(--superficie); display: flex; flex-direction: column; min-height: 0; cursor: pointer; }
.sem-dia:hover { background: var(--superficie-2); }
.sem-dia.sobre { box-shadow: inset 0 0 0 2px var(--acento); }
.sem-cab { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; border-bottom: 1px solid var(--borde); text-align: left; }
.sem-nombre { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); }
.sem-cab .n { font-size: 20px; font-weight: 600; font-family: var(--fuente-titulo); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.sem-cab:hover .n { background: color-mix(in srgb, var(--texto) 8%, transparent); }
.sem-dia.hoy .sem-cab .n { background: var(--rojo); color: #fff; }
.sem-eventos { padding: 8px 6px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sem-eventos .evento { white-space: normal; padding: 5px 7px; line-height: 1.3; }
.cal-anio { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.mini-mes { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 12px 10px; }
.mini-titulo { font-family: var(--fuente-titulo); font-weight: 600; font-size: 15px; color: var(--rojo); display: flex; align-items: center; gap: 8px; margin: 0 0 8px 4px; }
.mini-titulo .num { font-size: 11px; color: var(--texto-2); font-weight: 500; background: color-mix(in srgb, var(--texto) 6%, transparent); border-radius: 8px; padding: 1px 7px; }
.mini-titulo:hover { text-decoration: underline; }
.mini-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-cab { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--texto-3); text-align: center; padding-bottom: 2px; }
.mini-dia { height: 30px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; font-variant-numeric: tabular-nums; gap: 1px; }
.mini-dia:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.mini-dia.fuera { visibility: hidden; }
.mini-dia.con span:first-child { font-weight: 700; }
.mini-dia.hoy span:first-child { background: var(--rojo); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; }
.mini-dia.sobre { box-shadow: inset 0 0 0 2px var(--acento); }
.mini-dia .puntos { display: flex; gap: 2px; height: 4px; }
.mini-dia .puntos i { width: 4px; height: 4px; border-radius: 50%; }

/* ---------------------------------------------------------------------------------------------
   Mis finanzas
   --------------------------------------------------------------------------------------------- */
.fin { padding-top: 0; }
.fin-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fin-barra .sep { width: 1px; height: 20px; background: var(--borde-fuerte); margin: 0 4px; }
.fin-barra .flecha { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--texto-2); }
.fin-barra .flecha:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); color: var(--texto); }
.mes-fin { font-family: var(--fuente-titulo); font-weight: 600; font-size: 16px; min-width: 130px; text-align: center; padding: 4px 6px; border-radius: 8px; }
.mes-fin:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.chip.cotiz { margin-left: auto; }
.fin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 18px; overflow-x: auto; }
.fin-tab { padding: 8px 12px 10px; color: var(--texto-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.fin-tab:hover { color: var(--texto); }
.fin-tab.activo { color: var(--texto); border-bottom-color: var(--acento); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 16px; min-width: 0; }
.kpi-t { font-size: 12px; color: var(--texto-2); font-weight: 500; }
.kpi-v { font-family: var(--fuente-titulo); font-size: calc(22px * var(--escala)); font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-s { font-size: 11.5px; color: var(--texto-3); line-height: 1.35; }
.kpi.verde .kpi-v { color: var(--verde); }
.kpi.rojo .kpi-v { color: var(--rojo); }
.kpi.naranja .kpi-v { color: var(--naranja); }
.fin-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 14px; }
.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 16px 18px; min-width: 0; }
.panel-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-cab h3 { font-family: var(--fuente-titulo); font-size: 15px; font-weight: 600; margin: 0; }
.panel-cab > :last-child:not(h3) { margin-left: auto; }
.leyenda { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-2); }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.li-ing, .grafico .b-ing { background: var(--verde); fill: var(--verde); }
.li-gas, .grafico .b-gas { background: var(--rojo); fill: var(--rojo); }
.grafico svg { width: 100%; height: 190px; display: block; }
.grafico .b-ing, .grafico .b-gas { opacity: 0.55; transition: opacity 0.15s; }
.grafico g.actual .b-ing, .grafico g.actual .b-gas, .grafico g:hover .b-ing, .grafico g:hover .b-gas { opacity: 1; }
.grafico text { font-size: 11px; fill: var(--texto-2); font-family: var(--fuente); }
.grafico .eje { stroke: var(--borde-fuerte); stroke-width: 1; }
.cat-barras { display: flex; flex-direction: column; gap: 2px; }
.cat-fila { display: grid; grid-template-columns: 22px minmax(90px, 0.9fr) 1.6fr auto; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 9px; text-align: left; }
.cat-fila:hover { background: var(--superficie-2); }
.cat-nom { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-barra { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--texto) 6%, transparent); }
.cat-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.cat-barra b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--texto-2); border-radius: 1px; }
.cat-monto { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cat-monto small { font-weight: 400; color: var(--texto-3); }
.tag-hormiga { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--naranja); background: color-mix(in srgb, var(--naranja) 13%, transparent); border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }
.lista-fin { display: flex; flex-direction: column; }
.fila-fin { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--borde); text-align: left; width: 100%; background: none; }
.panel .fila-fin { padding: 9px 4px; }
.fila-fin:last-child { border-bottom: 0; }
button.fila-fin:hover, .fila-fin button.desc:hover { background: var(--superficie-2); }
.fila-fin.apagada { opacity: 0.5; }
.fila-fin .desc { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.fila-fin .desc .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-fin .desc .s { font-size: 12px; color: var(--texto-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-fin .monto { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila-fin .monto small { font-weight: 400; color: var(--texto-2); }
.verde { color: var(--verde); }
.rojo { color: var(--rojo); }
.fecha-fin { width: 74px; flex: none; font-size: 12.5px; color: var(--texto-2); font-weight: 500; }
.fecha-fin.rojo { color: var(--rojo); font-weight: 600; }
.estado-pago { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); padding: 4px 8px; border-radius: 8px; }
.estado-pago.ok { color: var(--verde); }
.estado-pago.ok:hover { background: color-mix(in srgb, var(--verde) 12%, transparent); }
.estado-pago svg.i { width: 14px; height: 14px; stroke-width: 2.6; }
.totales-fin { margin-left: auto; display: flex; gap: 14px; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; }
.vacio.chico { padding: 18px 4px; font-size: 13px; text-align: left; }
.aviso-fin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: color-mix(in srgb, var(--naranja) 10%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--naranja) 35%, transparent); border-radius: var(--radio); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.cuentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cuenta-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 16px 18px; display: flex; flex-direction: column; text-align: left; min-height: 170px; }
.cuenta-card.nueva { align-items: center; justify-content: center; gap: 8px; color: var(--texto-2); border-style: dashed; box-shadow: none; background: transparent; font-weight: 500; }
.cuenta-card.nueva:hover { color: var(--acento); border-color: var(--acento); }
.cuenta-card.tarjeta-cred { background: linear-gradient(145deg, #2c2c2e, #1c1c1e); color: #f5f5f7; border-color: transparent; }
.cuenta-card.tarjeta-cred .cc-sub, .cuenta-card.tarjeta-cred .cc-datos span { color: rgba(255, 255, 255, 0.6); }
.cuenta-card.tarjeta-cred .icono-btn { color: rgba(255, 255, 255, 0.7); }
.cuenta-card.tarjeta-cred .boton.suave { background: rgba(255, 255, 255, 0.12); color: #fff; }
.cc-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cc-tipo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); }
.cc-nombre { font-weight: 600; font-size: 15px; }
.cc-saldo { font-family: var(--fuente-titulo); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.cc-sub { font-size: 12px; color: var(--texto-2); min-height: 16px; }
.cc-datos { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 10px; font-size: 12px; }
.cc-datos span { display: flex; justify-content: space-between; gap: 8px; }
.cc-datos b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-acc { display: flex; gap: 6px; margin-top: auto; padding-top: 14px; flex-wrap: wrap; }
.barra-pres { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--texto) 7%, transparent); margin: 6px 0 4px; overflow: hidden; max-width: 420px; }
.barra-pres i { display: block; height: 100%; border-radius: 3px; }
.moneda-pres { color: var(--texto-2); font-size: 13px; }
.monto-pres { width: 130px; text-align: right; }
.mov-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mov-cab .nota { margin-left: auto; }
.monto-fila { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--borde); padding-bottom: 8px; }
.monto-fila .moneda { font-family: var(--fuente-titulo); font-size: 26px; color: var(--texto-3); font-weight: 600; }
.monto-grande { flex: 1; border: 0; background: transparent; font-family: var(--fuente-titulo); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; min-width: 0; }
.monto-grande::placeholder { color: var(--texto-3); }
.cats-elegir { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-op { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, var(--texto) 5%, transparent); border: 1.5px solid transparent; }
.cat-op:hover { background: color-mix(in srgb, var(--texto) 9%, transparent); }
.cat-op.activo { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); font-weight: 600; }
.evento.venc { background: transparent; border: 1px dashed var(--borde-fuerte); color: var(--texto-2); }
.evento.venc.vencido { border-color: var(--rojo); color: var(--rojo); }
.venc-dia { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.venc-dia .evento { font-size: 13px; padding: 8px 10px; white-space: normal; }

/* Pantalla de PIN */
.bloqueo { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); animation: aparecer 0.2s ease; }
.pin-caja { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pin-caja .logo-grande { width: 64px; height: 64px; border-radius: 16px; background: var(--acento); display: grid; place-items: center; box-shadow: 0 8px 24px color-mix(in srgb, var(--acento) 40%, transparent); }
.pin-caja .logo-grande svg { width: 34px; height: 34px; fill: #fff; stroke: none; }
.pin-titulo { font-family: var(--fuente-titulo); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.pin-msj { color: var(--texto-2); font-size: 14px; min-height: 18px; }
.pin-puntos { display: flex; gap: 14px; height: 16px; margin: 4px 0 10px; }
.pin-puntos i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--texto-2); transition: background 0.1s; }
.pin-puntos i.lleno { background: var(--texto); border-color: var(--texto); }
.pin-teclas { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px 22px; }
.pin-tecla { width: 72px; height: 72px; border-radius: 50%; font-family: var(--fuente-titulo); font-size: 28px; font-weight: 400; background: color-mix(in srgb, var(--texto) 8%, transparent); transition: background 0.1s; }
.pin-tecla:hover { background: color-mix(in srgb, var(--texto) 13%, transparent); }
.pin-tecla:active { background: color-mix(in srgb, var(--texto) 22%, transparent); }
.pin-tecla.borrar { background: transparent; font-size: 22px; color: var(--texto-2); }
.sacudir { animation: sacudir 0.4s ease; }
@keyframes sacudir { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.pin-in { width: 140px; letter-spacing: 0.3em; font-size: 16px; }

/* Bienvenida */
.bienvenida { width: min(620px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; animation: subir 0.25s ease; }
.bienvenida .logo-grande { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 85%, #fff), var(--acento)); display: grid; place-items: center; box-shadow: 0 10px 30px color-mix(in srgb, var(--acento) 40%, transparent); margin-bottom: 8px; }
.bienvenida .logo-grande svg { width: 40px; height: 40px; fill: #fff; stroke: none; }
.bienvenida h1 { font-family: var(--fuente-titulo); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin: 4px 0 0; }
.bienvenida p { color: var(--texto-2); font-size: 15px; line-height: 1.5; margin: 0 0 14px; max-width: 480px; }
.bienvenida .pregunta { font-weight: 600; margin-top: 8px; }
.entrada.grande { height: 46px; font-size: 17px; width: 320px; text-align: center; border-radius: 12px; }
.boton.grande { height: 42px; padding: 0 24px; font-size: 15px; border-radius: 12px; }
.acciones-b { display: flex; gap: 10px; margin-top: 22px; }
.pasos { display: flex; gap: 8px; margin-top: 18px; }
.pasos i { width: 7px; height: 7px; border-radius: 50%; background: var(--borde-fuerte); }
.pasos i.activo { background: var(--acento); }
.esp-sug { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; width: 100%; }
.esp-op { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--superficie); border: 1.5px solid var(--borde); text-align: left; font-weight: 500; }
.esp-op:hover { border-color: var(--borde-fuerte); }
.esp-op .tilde { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--borde-fuerte); display: grid; place-items: center; color: transparent; }
.esp-op .tilde svg.i { width: 12px; height: 12px; stroke-width: 3; }
.esp-op.activo { border-color: var(--acento); }
.esp-op.activo .tilde { background: var(--acento); border-color: var(--acento); color: #fff; }
.bienvenida .entrada:not(.grande) { width: 320px; }
.novedades { white-space: pre-line; line-height: 1.55; color: var(--texto); font-size: 14px; }

/* ---- Selector de período (años en lista + meses + días) ---- */
.titulo-periodo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; margin: -3px -8px; border-radius: 9px; font: inherit; color: inherit; }
.titulo-periodo:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.titulo-periodo .flechita { display: grid; place-items: center; color: var(--texto-3); }
.titulo-periodo .flechita svg { width: 15px; height: 15px; }
.titulo-periodo:hover .flechita { color: var(--texto-2); }
.cal-barra h2 { min-width: 0; margin-right: 14px; }
.mes-fin.titulo-periodo { margin: 0; justify-content: center; }
.selector-periodo { position: fixed; z-index: 95; width: 372px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra-alta); padding: 10px; animation: aparecer 0.12s ease; }
.selector-periodo.solo-anios { width: 170px; }
.sp-cuerpo { display: grid; grid-template-columns: 96px 1fr; gap: 10px; height: 268px; }
.solo-anios .sp-cuerpo { grid-template-columns: 1fr; }
.solo-anios .sp-der { display: none; }
.sp-anios { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 8px; border-right: 1px solid var(--borde); scrollbar-width: thin; }
.solo-anios .sp-anios { border-right: 0; padding-right: 0; }
.sp-anio { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; font-size: 14px; flex: none; }
.sp-anio:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.sp-anio.actual { color: var(--acento); font-weight: 600; }
.sp-anio.activo { background: var(--acento); color: #fff; font-weight: 600; }
.sp-punto { width: 5px; height: 5px; border-radius: 50%; background: var(--texto-3); }
.sp-anio.activo .sp-punto { background: #fff; }
.sp-titulo { font-family: var(--fuente-titulo); font-weight: 600; font-size: 15px; padding: 4px 4px 10px; display: flex; align-items: center; gap: 6px; }
.sp-volver { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--texto-2); }
.sp-volver:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); color: var(--texto); }
.sp-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp-mes { height: 50px; border-radius: 10px; font-size: 14px; }
.sp-mes:hover, .sp-dia:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.sp-mes.actual, .sp-dia.actual { color: var(--acento); font-weight: 600; }
.sp-mes.activo, .sp-dia.activo { background: var(--acento); color: #fff; font-weight: 600; }
.sp-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sp-dsem { font-size: 11px; color: var(--texto-3); text-align: center; padding: 2px 0 4px; }
.sp-dia { height: 30px; border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sp-pie { display: flex; justify-content: flex-end; border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 8px; }

/* ---- Búsqueda global (Ctrl+K) ---- */
kbd { font-family: var(--fuente); font-size: 11px; color: var(--texto-3); border: 1px solid var(--borde-fuerte); border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
.nav.buscar-todo { color: var(--texto-2); }
.nav.buscar-todo kbd { margin-left: auto; }
body[data-lateral='compacto'] .nav.buscar-todo kbd { display: none; }
.fondo-paleta { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: aparecer 0.12s ease; }
.paleta { width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28); overflow: hidden; animation: subir 0.15s ease; }
.paleta-cab { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--borde); color: var(--texto-2); }
.paleta-input { flex: 1; border: 0; background: transparent; font-size: 17px; color: var(--texto); min-width: 0; }
.paleta-input:focus { outline: none; }
.paleta-lista { overflow-y: auto; padding: 6px; }
.paleta-grupo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); padding: 10px 10px 4px; }
.paleta-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; text-align: left; font-size: 14px; }
.paleta-item.marcado { background: var(--acento); color: #fff; }
.paleta-item .pi-ico { display: grid; place-items: center; width: 20px; color: var(--texto-2); }
.paleta-item.marcado .pi-ico { color: #fff; }
.paleta-item .pi-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-item .pi-txt.tachado { text-decoration: line-through; opacity: 0.6; }
.paleta-item .pi-extra { font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.paleta-item.marcado .pi-extra { color: rgba(255, 255, 255, 0.85); }
.paleta-vacio { padding: 18px; text-align: center; color: var(--texto-2); }

/* ---- Personalizar: interruptores, copia, avisos, celular ---- */
.interruptor { width: 42px; height: 26px; border-radius: 13px; background: color-mix(in srgb, var(--texto) 18%, transparent); position: relative; flex: none; transition: background 0.18s; }
.interruptor::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.18s; }
.interruptor.on { background: var(--verde); }
.interruptor.on::after { transform: translateX(16px); }
.interruptor:disabled { opacity: 0.5; }
.fila-ajuste { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 0; }
.fila-ajuste .fa-t { font-weight: 500; margin-bottom: 2px; }
.carpeta-copia { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie-2); }
.carpeta-copia .ruta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.carpeta-copia.vacia .ruta { color: var(--texto-3); }
.carpeta-copia > span:first-child { color: var(--texto-2); display: grid; }
.caja-celular { margin-top: 6px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--acento) 8%, transparent); display: flex; flex-direction: column; gap: 6px; }
.caja-celular .direccion { font-family: var(--fuente-titulo); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; user-select: all; color: var(--acento); }
.fondo-modal.capa { z-index: 60; }
.titulo-modal { font-family: var(--fuente-titulo); font-size: 20px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
.carpetas-ruta { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
.carpetas-ruta .ruta { font-size: 12.5px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carpetas-lista { height: 320px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 12px; }
.carpeta-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-bottom: 1px solid var(--borde); text-align: left; }
.carpeta-item:hover { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.carpeta-item span { color: var(--acento); display: grid; }

/* ---- Finanzas: carga rápida ---- */
.rapida-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 4px 8px 4px 12px; margin-bottom: 16px; box-shadow: var(--sombra); }
.rapida-fin:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); }
.rapida-fin .rf-ico { color: var(--naranja); display: grid; }
.rapida-fin-input { flex: 1 1 280px; border: 0; background: transparent; height: 38px; font-size: 14.5px; color: var(--texto); min-width: 0; }
.rapida-fin-input:focus { outline: none; }
.rapida-fin-vista { display: none; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; padding: 2px 0 8px 28px; }
.rapida-fin.con-texto .rapida-fin-vista { display: flex; }
.rf-tipo, .rf-dato { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; background: color-mix(in srgb, var(--texto) 6%, transparent); }
.rf-tipo.gasto { background: color-mix(in srgb, var(--rojo) 12%, transparent); color: var(--rojo); font-weight: 600; }
.rf-tipo.ingreso { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); font-weight: 600; }
.rf-dato.fuerte { font-weight: 600; }
.rf-dato.suave { color: var(--texto-2); }
.rf-enter { margin-left: auto; font-size: 12px; color: var(--texto-3); }

/* ---- Metas de ahorro ---- */
.metas-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.meta-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 16px; box-shadow: var(--sombra); }
.meta-cab { display: flex; align-items: center; gap: 10px; }
.meta-nombre { flex: 1; min-width: 0; font-weight: 600; }
.meta-nombre .nota { font-weight: 400; }
.meta-cab .flecha { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--texto-2); }
.meta-cab .flecha:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.meta-monto { font-family: var(--fuente-titulo); font-size: 22px; font-weight: 700; margin: 14px 0 8px; letter-spacing: -0.02em; }
.meta-monto .de { font-size: 13px; font-weight: 400; color: var(--texto-2); letter-spacing: 0; }
.meta-barra { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--c) 16%, transparent); overflow: hidden; }
.meta-barra > div { height: 100%; border-radius: 4px; background: var(--c); transition: width 0.3s; }
.meta-pie { display: flex; justify-content: space-between; font-size: 13px; margin-top: 7px; color: var(--texto-2); }
.meta-pie .fuerte { color: var(--texto); font-weight: 600; }
.meta-ritmo { font-size: 12.5px; color: var(--texto-2); margin-top: 4px; }
.aportes { display: flex; flex-direction: column; }
.aporte { display: grid; grid-template-columns: 110px 1fr auto 26px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--borde); font-size: 13px; }
.aporte .x { color: var(--texto-3); display: grid; place-items: center; }
.aporte .x:hover { color: var(--rojo); }

/* ---- Importar movimientos ---- */
.modal.grande-import { width: min(1000px, 100%); }
.import-config { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.import-config label { display: flex; flex-direction: column; gap: 4px; }
.entrada.chica { height: 30px; font-size: 13px; max-width: 100%; }
.import-tabla { max-height: 46vh; overflow: auto; border: 1px solid var(--borde); border-radius: 12px; }
.import-tabla table { width: 100%; border-collapse: collapse; font-size: 13px; }
.import-tabla th { position: sticky; top: 0; background: var(--superficie-2); text-align: left; font-weight: 600; font-size: 12px; color: var(--texto-2); padding: 8px; z-index: 1; }
.import-tabla td { padding: 5px 8px; border-top: 1px solid var(--borde); }
.import-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.import-tabla tr.fuera { opacity: 0.45; }
.import-tabla .ya { margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--naranja) 16%, transparent); color: var(--naranja); }
.zona-archivo { display: flex; align-items: center; gap: 14px; width: 100%; padding: 22px; margin-top: 12px; border: 2px dashed var(--borde-fuerte); border-radius: 16px; text-align: left; color: var(--texto-2); }
.zona-archivo:hover { border-color: var(--acento); color: var(--acento); }
.zona-archivo .fuerte { font-weight: 600; color: var(--texto); }

/* ---- Resumen para imprimir / PDF ---- */
#impresion { display: none; }
@media print {
  @page { margin: 14mm; }
  body.imprimiendo { overflow: visible; height: auto; background: #fff; }
  body.imprimiendo > *:not(#impresion) { display: none !important; }
  body.imprimiendo #impresion { display: block; color: #111; font-size: 10.5pt; }
  #impresion .imp-cab { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 14px; }
  #impresion .imp-marca { font-size: 9pt; color: #666; text-transform: uppercase; letter-spacing: 0.08em; }
  #impresion h1 { font-size: 20pt; margin: 2px 0 0; }
  #impresion .imp-fecha { font-size: 9pt; color: #666; }
  #impresion h2 { font-size: 12pt; margin: 18px 0 6px; }
  #impresion h2.salto { break-before: page; }
  #impresion .imp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  #impresion .imp-kpi { border: 1px solid #ccc; border-radius: 8px; padding: 8px 10px; }
  #impresion .k-t { font-size: 8.5pt; color: #666; }
  #impresion .k-v { font-size: 14pt; font-weight: 700; margin: 2px 0; }
  #impresion .k-s { font-size: 8pt; color: #666; }
  #impresion table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  #impresion th { text-align: left; border-bottom: 1px solid #888; padding: 4px; font-size: 8.5pt; color: #444; }
  #impresion td { padding: 3px 4px; border-bottom: 1px solid #e5e5e5; }
  #impresion .num { text-align: right; white-space: nowrap; }
  #impresion tr { break-inside: avoid; }
}

/* ---- Celular y pantallas chicas ---- */
.boton-menu { display: none; width: 38px; height: 38px; border-radius: 10px; place-items: center; color: var(--texto); margin-left: -6px; }
.boton-menu:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
@media (max-width: 760px) {
  .app, body[data-lateral='compacto'] .app { grid-template-columns: minmax(0, 1fr); height: 100dvh; }
  .principal { height: 100dvh; }
  .lateral { position: fixed; top: 0; bottom: 0; left: 0; width: min(290px, 84vw); z-index: 60; background: var(--superficie); transform: translateX(-105%); transition: transform 0.22s ease, box-shadow 0.22s; padding-top: calc(18px + env(safe-area-inset-top)); }
  body.lateral-movil .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.32); }
  body[data-lateral='compacto'] .lateral { align-items: stretch; padding: calc(18px + env(safe-area-inset-top)) 12px 12px; }
  body[data-lateral='compacto'] .lateral .txt, body[data-lateral='compacto'] .lateral .cuenta:not(.alerta) { display: inline; }
  body[data-lateral='compacto'] .marca .logo { display: grid; }
  body[data-lateral='compacto'] .marca { justify-content: flex-start; padding: 4px 10px 18px; }
  body[data-lateral='compacto'] .nav { justify-content: flex-start; padding: 9px 10px; width: 100%; }
  body[data-lateral='compacto'] .nav .cuenta.alerta { position: static; font-size: 12px; padding: 0 7px; line-height: 18px; }
  body[data-lateral='compacto'] .seccion-titulo { width: auto; justify-content: flex-start; border-top: 0; margin-top: 0; padding: 18px 10px 6px; }
  body[data-lateral='compacto'] .seccion-titulo button { margin-left: auto; }
  body[data-lateral='compacto'] .lateral .pie { align-items: stretch; }
  .nav { padding: 9px 10px; }
  .marca .plegar, .nav.buscar-todo kbd { display: none; }
  .boton-menu { display: grid; }
  .cabecera { padding: calc(10px + env(safe-area-inset-top)) 14px 10px; gap: 6px 8px; flex-wrap: wrap; }
  .cab-titulo { flex: 1; min-width: 0; }
  .cabecera h1 { font-size: 22px; }
  .cabecera .sub { font-size: 12px; }
  .cabecera .acciones { margin-left: 0; width: 100%; }
  .buscador { flex: 1; width: auto; }
  .filtros { padding: 0 14px 10px; flex-wrap: nowrap; overflow-x: auto; }
  .filtros > * { flex: none; }
  .tablero { overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 14px 14px; gap: 10px; }
  .columna { flex: 0 0 86%; scroll-snap-align: center; }
  .vista-lista { padding: 4px 14px 40px; }
  .calendario { padding: 0 10px 14px; overflow-x: auto; }
  .cal-semana { min-width: 680px; }
  .fondo-modal { padding: 0; place-items: end center; }
  .modal, .modal.chico, .modal.mediano, .modal.grande-import { width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; }
  .modal-cuerpo { padding: 18px 16px; }
  .modal-pie { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .campos { grid-template-columns: 1fr; gap: 6px; }
  .campos .lbl { margin-top: 8px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fin-barra { gap: 6px; }
  .chip.cotiz { margin-left: 0; }
  .fin-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .rf-enter { display: none; }
  .selector-periodo { left: 8px !important; right: 8px; width: auto; }
  .selector-periodo.solo-anios { right: auto; width: 170px; }
  .paleta-input { font-size: 16px; }
  .fondo-paleta { padding-top: calc(10px + env(safe-area-inset-top)); }
  .toast { left: 12px; right: 12px; transform: none; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .entrada, input, select, textarea { font-size: 16px; }
  .fila-ajuste { align-items: flex-start; }
}
.estado-fw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.estado-fw:empty { display: none; }
.estado-fw .nota svg.i { width: 14px; height: 14px; vertical-align: -2px; }

/* ---- Número de semana ---- */
.chip-semana { font-size: 12px; font-weight: 600; color: var(--texto-2); background: color-mix(in srgb, var(--texto) 6%, transparent); border-radius: 8px; padding: 4px 8px; white-space: nowrap; }
.cal-dias:has(.sem-num-cab) { grid-template-columns: 34px repeat(7, 1fr); }
.cal-grilla.con-semanas { grid-template-columns: 34px repeat(7, 1fr); }
.sem-num-cab { padding: 0 !important; text-align: center; color: var(--texto-3); }
.sem-num { background: var(--superficie-2); color: var(--texto-3); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; display: flex; justify-content: center; padding-top: 10px; }
.sem-num:hover { color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, var(--superficie)); }
.sp-dias { grid-template-columns: 22px repeat(7, 1fr); }
.sp-nsem { font-size: 10px; color: var(--texto-3); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.sp-dsem.sp-nsem { font-size: 10px; }

/* ---- Utilidades PC / celular ---- */
.solo-movil { display: none !important; }
.boton-icono { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--texto); flex: none; }
.boton-icono:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.barra-movil { display: none; }

/* ---- Celular: diseño propio ---- */
@media (max-width: 760px) {
  .solo-pc { display: none !important; }
  .solo-movil { display: revert !important; }
  .boton-icono.solo-movil, .cols-movil.solo-movil { display: flex !important; }
  .boton-icono.solo-movil { display: grid !important; }
  * { scrollbar-width: none; }
  *::-webkit-scrollbar { display: none; }
  html, body { overscroll-behavior: none; }
  .principal { overflow: hidden; }
  #contenido { overflow: hidden; }

  /* Cabecera: menú · título · lupa. El botón de crear pasa a ser flotante. */
  .cabecera { flex-wrap: nowrap; align-items: center; gap: 4px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; }
  .cab-titulo { flex: 1; min-width: 0; }
  .cabecera h1 { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .cabecera h1 > span { vertical-align: middle; }
  .cabecera .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cabecera .acciones { width: auto; margin: 0; }
  .cabecera .acciones .buscador { display: none; }
  .boton.fab { position: fixed; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 40; width: 56px; height: 56px; padding: 0; border-radius: 28px; justify-content: center; font-size: 0; gap: 0; box-shadow: 0 8px 22px color-mix(in srgb, var(--acento) 45%, transparent), 0 2px 6px rgba(0, 0, 0, 0.15); }
  .boton.fab svg.i { width: 24px; height: 24px; }

  /* Barra de abajo */
  .barra-movil { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--vidrio); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--borde); }
  .bm-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: var(--texto-3); font-size: 10.5px; font-weight: 500; }
  .bm-item svg.i { width: 24px; height: 24px; }
  .bm-item.activo { color: var(--acento); }
  .principal { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

  /* Filtros: una sola fila que se desliza */
  .filtros { padding: 0 12px 8px; flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  .filtros > * { flex: none; }

  /* Tablero: una columna por vez, con pestañas arriba */
  .cols-movil { gap: 6px; padding: 0 12px 10px; overflow-x: auto; flex: none; }
  .cols-movil button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; font-size: 14px; color: var(--texto-2); background: color-mix(in srgb, var(--texto) 5%, transparent); }
  .cols-movil button .punto { width: 8px; height: 8px; border-radius: 50%; }
  .cols-movil button .num { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
  .cols-movil button.activo { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra); }
  .tablero { overflow: hidden; padding: 0 12px 12px; scroll-snap-type: none; display: flex; }
  .tablero .columna { display: none; }
  .tablero .columna.elegida { display: flex; flex: 1 1 auto; width: 100%; max-height: 100%; }
  .columna { background: transparent !important; border: 0 !important; backdrop-filter: none !important; padding: 0; }
  .columna-cab { display: none; }
  .lista { padding-bottom: 90px; }
  .tarjeta { padding: 12px 14px; }

  /* Listas (Hoy, Ideas, Archivo, Finanzas) */
  .vista-lista { padding: 2px 12px 96px; overflow-x: hidden; }

  /* Calendario */
  .calendario { padding: 0 12px 0; overflow: hidden; }
  .cal-barra { flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .cal-barra h2 { font-size: 18px; margin-right: 0; flex: 1 1 100%; }
  .cal-barra .segmentado { margin-left: auto; }
  .cal-espacios { flex-wrap: nowrap !important; overflow-x: auto; width: 100%; margin-left: 0 !important; }
  .cal-espacios > * { flex: none; }
  .cal-semana { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; border-radius: 16px; }
  .sem-dia { flex: none; min-height: 0; }
  .sem-cab { padding: 8px 12px; }
  .sem-cab .n { font-size: 17px; width: 30px; height: 30px; }
  .sem-eventos { padding: 4px 12px 10px; overflow: visible; }
  .sem-eventos:empty { display: none; }
  .vista-lista.mm { padding: 0 0 96px; }
  .mm-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 8px 6px 6px; }
  .mm-cab, .mm-grilla { display: grid; grid-template-columns: 22px repeat(7, 1fr); }
  .mm-cab span { text-align: center; font-size: 11px; font-weight: 600; color: var(--texto-3); padding-bottom: 4px; }
  .mm-sem { font-size: 10px; color: var(--texto-3); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
  .mm-dia { height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding-top: 4px; }
  .mm-dia .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-variant-numeric: tabular-nums; }
  .mm-dia.fuera .n { color: var(--texto-3); }
  .mm-dia.hoy .n { color: var(--rojo); font-weight: 700; }
  .mm-dia.sel .n { background: var(--texto); color: var(--superficie); font-weight: 600; }
  .mm-dia.hoy.sel .n { background: var(--rojo); color: #fff; }
  .mm-dia .puntos { display: flex; gap: 2px; height: 5px; }
  .mm-dia .puntos i { width: 5px; height: 5px; border-radius: 50%; }
  .mm-dia .puntos i.venc { background: transparent; border: 1px solid var(--naranja); }
  .mm-agenda { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
  .mm-agenda-t { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--fuente-titulo); font-weight: 600; font-size: 16px; }
  .mm-agenda .boton { align-self: flex-start; }
  .cal-anio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cal-dia-vista { padding: 0; }

  /* Finanzas */
  .fin-barra { flex-wrap: nowrap; gap: 4px; margin-bottom: 10px; }
  .fin-barra .segmentado.libros { flex: none; }
  .fin-barra .segmentado.libros button { padding: 4px 10px; }
  .fin-barra > .sep:first-of-type { display: none; }
  .fin-barra .flecha { width: 28px; height: 30px; flex: none; }
  .mes-fin.titulo-periodo { min-width: 0; flex: 1; font-size: 15px; padding: 4px 2px; white-space: nowrap; }
  .fin-barra .boton.suave.chico:not(.solo-pc) { display: none; }
  .fin-mas { margin-left: 2px; }
  .fin-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 12px; padding: 0 8px; gap: 0; }
  .fin-tab { padding: 8px 10px 9px; font-size: 14px; }
  .rapida-fin { margin-bottom: 12px; padding: 2px 6px 2px 10px; }
  .rapida-fin-vista { padding-left: 0; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .kpi { padding: 10px 12px; }
  .kpi-v { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi-s { font-size: 11px; }
  .panel { padding: 12px 12px; border-radius: 16px; }
  .fila-fin { padding: 10px 6px; gap: 10px; }
  .metas-grilla { grid-template-columns: 1fr; }
  .bloque h2 { font-size: 13px; }

  /* Ventanas como hoja desde abajo, por encima de la barra */
  .fondo-modal { z-index: 50; }
  .modal-cuerpo { padding: 16px 14px; }
  .modal .fila-campos { flex-wrap: wrap; }
  .menu { max-width: calc(100vw - 16px); }
}
@media (max-width: 760px) {
  .cabecera .sub:not(.sub-fija) { display: none; }
}
@media (max-width: 760px) {
  .fin-grilla { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .panel { min-width: 0; overflow: hidden; }
  .panel-cab { flex-wrap: wrap; row-gap: 4px; }
  .panel-cab > :last-child:not(h3) { font-size: 12px; }
  .panel svg { max-width: 100%; }
  /* Cuentas: tarjetas chicas, de a dos */
  .cuentas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cuenta-card { min-height: 0; padding: 12px; border-radius: 16px; }
  .cuenta-card.tarjeta-cred, .cuenta-card.nueva { grid-column: 1 / -1; }
  .cuenta-card.nueva { padding: 14px; flex-direction: row; }
  .cc-tipo { font-size: 10px; }
  .cc-nombre { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cc-saldo { font-size: 20px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cc-acc { padding-top: 10px; gap: 4px; }
  .cc-acc .boton { height: 28px; padding: 0 9px; font-size: 12.5px; border-radius: 8px; }
  /* Pestañas: un degradé avisa que se puede deslizar */
  .fin-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
}
@media (max-width: 760px) {
  .modal, .modal.chico, .modal.mediano, .modal.grande-import { min-width: 0; max-width: 100vw; }
  .modal > *, .modal-cuerpo > * { min-width: 0; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .campos > * { min-width: 0; }
  .cats-elegir { flex-wrap: wrap; min-width: 0; }
  .modal .entrada { max-width: 100%; }
  .modal input[type='date'] { min-width: 0; }
  .mov-cab { flex-wrap: wrap; gap: 6px; }
  .monto-grande { min-width: 0; width: 100%; }
}

/* 1.8: pantallas grandes. Hasta 1199 px queda todo como antes; desde 1200 px Hoy suma un panel a la
   derecha, y desde 1600 px las listas, las ideas y la vista de día usan más ancho. */
.hoy-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.hoy-lateral { display: none; }
.panel-hoy { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 14px 16px; }
body:not([data-fondo='liso']) .panel-hoy { background: var(--vidrio); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
.panel-hoy h3 { font-family: var(--fuente-titulo); font-size: calc(13px * var(--escala)); font-weight: 600; color: var(--texto-2); text-transform: none; margin: 0 0 10px; }
.panel-vacio { color: var(--texto-3); font-size: 13px; padding: 4px 0; }
.avance-hoy { margin-bottom: 12px; }
.avance-num { font-family: var(--fuente-titulo); font-size: calc(24px * var(--escala)); font-weight: 700; letter-spacing: -0.02em; }
.avance-txt { color: var(--texto-2); font-size: 12.5px; margin-bottom: 8px; }
.avance-barra { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--texto) 8%, transparent); overflow: hidden; }
.avance-barra span { display: block; height: 100%; border-radius: 3px; background: var(--acento); transition: width 0.3s ease; }
.agenda-hoy { display: flex; flex-direction: column; gap: 2px; }
.agenda-item { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; text-align: left; width: 100%; }
.agenda-item:hover, .semana-dia:hover, .espacio-hoy:hover, .idea-hoy:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.agenda-hora { font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: 12.5px; width: 40px; flex-shrink: 0; }
.agenda-barra { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.agenda-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.semana-lista { display: flex; flex-direction: column; gap: 1px; }
.semana-dia { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'n c' 'f p'; column-gap: 8px; padding: 7px 8px; border-radius: 8px; text-align: left; width: 100%; }
.semana-dia.hoy .semana-nombre { color: var(--acento); }
.semana-nombre { grid-area: n; font-weight: 600; font-size: 13px; }
.semana-fecha { grid-area: f; color: var(--texto-3); font-size: 11.5px; }
.semana-num { grid-area: c; justify-self: end; color: var(--texto-2); font-variant-numeric: tabular-nums; font-size: 13px; }
.semana-puntos { grid-area: p; justify-self: end; display: flex; gap: 3px; align-items: center; }
.semana-puntos .punto, .espacio-hoy .punto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.espacios-hoy, .ideas-hoy { display: flex; flex-direction: column; gap: 1px; }
.espacio-hoy { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; width: 100%; text-align: left; }
.espacio-nombre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.espacio-num { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.idea-hoy { padding: 6px 8px; border-radius: 8px; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-link { margin-top: 6px; color: var(--acento); font-size: 12.5px; padding: 2px 8px; }
@media (min-width: 1200px) {
  .hoy-grilla { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .hoy-grilla .bloque { max-width: none; }
  .hoy-lateral { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 4px; }
}
@media (min-width: 1600px) {
  .hoy-grilla { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
  .ideas { max-width: none; }
  .captura { max-width: 1200px; }
  .cal-dia-vista { max-width: 1200px; }
  .bloque { max-width: 1100px; }
}
@media (min-width: 2200px) {
  .hoy-grilla { grid-template-columns: minmax(0, 1fr) 460px; }
}

/* 1.9: plan del día, reprogramar, revisión semanal, finanzas en Hoy y teclado */
.bloque h2 .reprogramar { margin-left: auto; font-size: 12px; color: var(--texto-2); }
.fila-t:focus { outline: none; box-shadow: inset 3px 0 0 var(--acento); background: color-mix(in srgb, var(--acento) 7%, transparent); }
.aviso-revision { display: flex; align-items: center; gap: 14px; justify-content: space-between; background: color-mix(in srgb, var(--acento) 9%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); border-radius: var(--radio-grande); padding: 12px 16px; margin-bottom: 22px; font-size: 13px; color: var(--texto-2); }
.aviso-revision b { color: var(--texto); font-size: 14px; display: block; margin-bottom: 2px; }
.plan-ayuda { color: var(--texto-3); font-size: 11.5px; margin: 2px 0 6px; }
.plan-dia { display: flex; flex-direction: column; }
.plan-hora { display: flex; align-items: flex-start; gap: 8px; min-height: 30px; border-top: 1px dashed color-mix(in srgb, var(--texto) 10%, transparent); padding: 3px 2px; border-radius: 6px; transition: background 0.1s ease; }
.plan-hora.ahora .agenda-hora { color: var(--acento); font-weight: 700; }
.plan-hora.sobre { background: color-mix(in srgb, var(--acento) 14%, transparent); }
.plan-hora .agenda-hora { padding-top: 5px; }
.plan-items { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-items .agenda-item { padding: 4px 6px; cursor: grab; }
.agenda-item.hecho .agenda-txt { text-decoration: line-through; color: var(--texto-3); }
.fin-hoy-fila { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; color: var(--texto-2); }
.fin-hoy-v { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-hoy-v.rojo, .fin-hoy-pago .rojo { color: var(--rojo); }
.fin-hoy-pagos { margin-top: 8px; }
.fin-hoy-pago { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; width: 100%; text-align: left; padding: 5px 6px; border-radius: 8px; font-size: 12.5px; }
.fin-hoy-pago:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.fin-hoy-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal:has(.revision) { width: min(780px, 100%); }
.rev-cab { font-family: var(--fuente-titulo); font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.rev-sub { color: var(--texto-2); margin: 0 0 14px; }
.rev-paso { border-top: 1px solid var(--borde); padding: 12px 0; }
.rev-paso h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 0 0 8px; }
.rev-n { width: 22px; height: 22px; border-radius: 50%; background: var(--acento); color: #fff; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; }
.rev-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.rev-fila:last-child { border-bottom: 0; }
.rev-titulo { flex: 1; min-width: 200px; text-align: left; display: flex; gap: 8px; align-items: baseline; }
.rev-fecha { color: var(--rojo); font-size: 12px; }
.rev-acciones { display: flex; gap: 4px; flex-wrap: wrap; }
.rev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rev-chip { background: color-mix(in srgb, var(--texto) 6%, transparent); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; text-align: left; }
.rev-nota { margin-top: 8px; color: var(--texto-2); font-size: 12.5px; }
.modal:has(.ayuda-teclado) { width: min(500px, 100%); }
.ayuda-teclado h3 { font-size: 13px; color: var(--texto-2); margin: 14px 0 6px; }
.tecla-fila { display: flex; align-items: center; gap: 12px; padding: 3px 0; font-size: 13px; }
.teclas { width: 110px; flex-shrink: 0; display: flex; gap: 4px; }
.teclas kbd { font-family: inherit; font-size: 11.5px; border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; background: var(--superficie); }
@media (max-width: 760px) {
  .revision, .ayuda-teclado { padding: 18px; }
  .aviso-revision { flex-direction: column; align-items: flex-start; }
}

/* ---- Versión web: ingreso, seguridad y código del celular ---- */
.ingreso-form { display: flex; flex-direction: column; gap: 10px; width: min(320px, calc(100vw - 48px)); margin-top: 4px; }
.ingreso-form .entrada { height: 42px; font-size: 16px; border-radius: 10px; width: 100%; }
.ingreso-form .boton { height: 42px; font-size: 15px; justify-content: center; }
.ingreso-recordar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
.ingreso-codigo { display: flex; flex-direction: column; gap: 6px; }
.entrada.codigo { letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; font-size: 18px; }
.campos-columna { display: flex; flex-direction: column; gap: 8px; }
.entrada.ancho { width: 100%; height: 38px; }
.sesiones-web { display: flex; flex-direction: column; gap: 6px; }
.sesion-web { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; }
.sesion-web.actual { border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.sesion-web .pastilla { margin-left: 8px; font-size: 11px; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--acento) 15%, transparent); color: var(--acento); }
.dos-pasos { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.dos-pasos ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.dos-pasos .qr { align-self: center; width: 190px; height: 190px; background: #fff; border-radius: 12px; padding: 6px; }
.dos-pasos .qr svg { width: 100%; height: 100%; }
.dos-pasos .clave-totp code { font-size: 13px; word-break: break-all; user-select: all; }
.dos-pasos a.boton { align-self: flex-start; text-decoration: none; }