/* Paleta y medidas de FlujoDuo. Cambiando estas variables cambias el aspecto de toda la app. */
:root {
  --fondo: #FCFCFD;          /* fondo de la app */
  --exterior: #EEF0F3;       /* fondo alrededor de la columna en el ordenador */
  --suave: #F2F4F7;          /* superficies suaves */
  --linea: #E4E7EC;          /* líneas finas */
  --texto: #101828;
  --texto-2: #475467;        /* texto secundario */
  --oscuro: #101828;         /* botones oscuros */
  --negocio: #0072B2;        /* azul = del negocio */
  --negocio-suave: #EAF3FA;
  --negocio-texto: #0B5FA5;
  --personal: #E69F00;       /* ámbar = personal */
  --personal-suave: #FFFBF2;
  --personal-texto: #B45309;
  --gana: #067647;           /* ganancia ▲ */
  --pierde: #B42318;         /* pérdida ▼ */
  --pierde-suave: #FEF3F2;
  --pierde-borde: #FECDCA;
  --radio: 6px;
  --radio-g: 8px;
  --ancho: 480px;
}

/* IBM Plex Sans: si el teléfono la tiene instalada se usa esa; si no, la de Google Fonts que carga index.html;
   y si no hay conexión, la letra del sistema. */
@font-face { font-family: "FlujoDuo Plex"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("IBM Plex Sans"), local("IBMPlexSans"); }
@font-face { font-family: "FlujoDuo Plex"; font-style: normal; font-weight: 500; font-display: swap;
  src: local("IBM Plex Sans Medium"), local("IBMPlexSans-Medium"); }
@font-face { font-family: "FlujoDuo Plex"; font-style: normal; font-weight: 600; font-display: swap;
  src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"); }
@font-face { font-family: "FlujoDuo Plex"; font-style: normal; font-weight: 700; font-display: swap;
  src: local("IBM Plex Sans Bold"), local("IBMPlexSans-Bold"); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--exterior);
  color: var(--texto);
  font-family: "FlujoDuo Plex", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums; /* cifras del mismo ancho: se alinean en columnas */
  -webkit-font-smoothing: antialiased;
}
body.sin-scroll { overflow: hidden; }

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--negocio); outline-offset: 2px; }
[hidden] { display: none !important; }

/* La columna de móvil, centrada en pantallas grandes. */
.app {
  max-width: var(--ancho);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--fondo);
}
@media (min-width: 481px) {
  .app { border-left: 1px solid var(--linea); border-right: 1px solid var(--linea); }
}
main { padding-bottom: 150px; } /* hueco para la barra fija de abajo */

.gris { color: var(--texto-2); }
.gana { color: var(--gana); }
.pierde { color: var(--pierde); }

/* ---------- Aviso de datos de ejemplo ---------- */
.aviso-ejemplo {
  padding: 8px 20px;
  background: var(--personal-suave);
  border-bottom: 1px solid #F7E3B5;
  color: var(--personal-texto);
  font-size: 13px;
}
.enlace {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--texto); font-weight: 600; text-decoration: underline;
}

/* ---------- Parte fija de abajo: "+", franja de pérdida y pestañas ---------- */
.dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--ancho);
  z-index: 10;
}
.fab {
  position: absolute;
  right: 16px;
  bottom: calc(100% + 14px);
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: var(--oscuro); color: #fff;
  font-size: 30px; font-weight: 400; line-height: 1;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .25);
  cursor: pointer;
}
.aviso-perdida {
  display: block; width: 100%;
  padding: 10px 16px;
  border: 0; border-top: 1px solid var(--pierde-borde);
  background: var(--pierde-suave); color: var(--pierde);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.pestanas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--fondo);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.pestanas a {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px;
  margin-top: -1px;
  border-top: 2px solid transparent;
  color: var(--texto-2); font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.pestanas a:hover { color: var(--texto); }
.pestanas a.activa { color: var(--texto); font-weight: 700; border-top-color: var(--oscuro); }
.pastilla {
  padding: 1px 7px; border-radius: 9px;
  background: var(--oscuro); color: #fff;
  font-size: 11px; font-weight: 600;
}

/* ---------- Logo ---------- */
.logo { display: inline-flex; gap: 3px; }
.logo i { width: 7px; height: 20px; border-radius: 2px; background: var(--negocio); }
.logo i + i { background: var(--personal); }
.logo-grande i { width: 12px; height: 34px; border-radius: 3px; }

/* ---------- Mes: cabecera ---------- */
.mes-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 12px;
}
.marca { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.mes-acciones { display: flex; align-items: center; gap: 4px; }
.selector-caja { position: relative; display: inline-block; }
.selector-caja span {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; pointer-events: none;
}
.selector-mes {
  appearance: none; -webkit-appearance: none;
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--linea); border-radius: var(--radio-g);
  background: #fff; color: var(--texto);
  font: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer;
}
.boton-icono {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: var(--radio); background: none;
  color: var(--texto-2); font-size: 16px; cursor: pointer;
}
.boton-icono:hover { background: var(--suave); color: var(--texto); }

/* ---------- Mes: resumen ---------- */
.resumen {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end;
  padding: 8px 20px 18px;
  border-bottom: 1px solid var(--linea);
  font-size: 13px;
}
.resumen .etiqueta { font-size: 14px; color: var(--texto-2); }
.cifra-grande { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 2px 0 4px; }
.cifra-media { font-size: 22px; font-weight: 700; margin: 2px 0 4px; }
.resumen-cobrar { text-align: right; }
.resumen strong { font-weight: 600; }

/* ---------- Mes: tabla de proyectos ---------- */
.tabla-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px 8px;
  border-bottom: 1px solid var(--linea);
  color: var(--texto-2); font-size: 11px; font-weight: 500; letter-spacing: .08em;
}
.boton-orden {
  padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: var(--texto); font-size: 11px; font-weight: 600; letter-spacing: .08em;
}
.fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%;
  padding: 14px 20px;
  border: 0; border-bottom: 1px solid var(--linea);
  background: none; text-align: left;
  cursor: pointer;
}
.fila:hover { background: var(--suave); }
.fila.en-perdida { box-shadow: inset 3px 0 0 var(--pierde); } /* línea roja a la izquierda */
.fila-fija { cursor: default; }
.fila-fija:hover { background: none; }
.fila-total { border-top: 2px solid var(--oscuro); border-bottom: 0; }
.fila-nombre { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-sub { margin-top: 4px; font-size: 13px; color: var(--texto-2); white-space: nowrap; }
.fila-sub b { font-weight: 400; color: var(--texto); }
/* "Vendido $X   Costo $Y": cada cifra entera en su línea si no caben juntas (teléfonos estrechos). */
.fila-sub-izq { display: flex; flex-wrap: wrap; gap: 0 14px; white-space: normal; }
.fila-sub-izq > span { white-space: nowrap; }
.fila-izq { min-width: 0; }
.fila-der { text-align: right; }
.fila-cifra { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.flecha { font-size: .85em; }
.vacio { padding: 24px 20px; color: var(--texto-2); text-align: center; }
.vacio p { margin: 0 0 12px; }
.vacio .boton-corto { color: var(--texto); }

/* ---------- Mes: mezcla, sueldo y pie ---------- */
.tarjeta-mezcla {
  display: grid; grid-template-columns: 6px 1fr auto;
  width: calc(100% - 40px);
  margin: 8px 20px 0; padding: 0;
  border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; background: #fff; text-align: left; cursor: pointer;
}
.tarjeta-mezcla:hover { background: var(--suave); }
.rayas { background: repeating-linear-gradient(135deg, var(--personal) 0 3px, var(--negocio) 3px 6px); }
.mezcla-texto { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 12px 14px; font-size: 13px; }
.mezcla-texto .gris { font-size: 12px; }
.mezcla-cifra {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 3px;
  padding: 12px 14px 12px 0; font-size: 12px; font-weight: 500;
}
.mezcla-cifra strong { font-size: 17px; font-weight: 600; color: var(--personal-texto); }
.linea-sueldo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 18px 20px 16px; font-size: 13px; color: var(--texto-2);
}
.linea-sueldo strong { color: var(--texto); font-weight: 500; }
.pie {
  padding: 14px 20px; border-top: 1px solid var(--linea);
  font-size: 11.5px; line-height: 1.5; color: var(--texto-2);
}
.pie a { color: var(--texto); font-weight: 500; }

/* ---------- Cabecera sencilla (Proyectos) ---------- */
.cabecera-simple { padding: 16px 20px 12px; border-bottom: 1px solid var(--linea); }
.antetitulo { font-size: 14px; color: var(--texto-2); }
.cabecera-simple h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Mes: primer uso y aviso de pendientes ---------- */
.primeros-pasos { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 28px; }
.primeros-pasos h1 { margin: 4px 0 0; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.primeros-pasos p { margin: 0; line-height: 1.5; }
.pasos { margin: 8px 0 0; padding: 14px 16px 14px 34px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; font-size: 14px; line-height: 1.6; }
a.tarjeta-salida { color: inherit; text-decoration: none; }
.tarjeta-salida.tarjeta-revisar { width: calc(100% - 40px); margin: 14px 20px 4px; }
.gastos-vacio { margin: 0 0 4px; line-height: 1.5; }

/* ---------- Hoja que sube desde abajo ---------- */
.hoja-fondo {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(16, 24, 40, .4);
  animation: aparecer .15s ease-out;
}
.hoja {
  width: 100%; max-width: var(--ancho); max-height: 85vh; overflow: auto;
  padding: 6px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: var(--radio-g) var(--radio-g) 0 0;
  background: var(--fondo);
  box-shadow: 0 -8px 24px rgba(16, 24, 40, .14);
  animation: subir .2s ease-out;
}
.hoja:focus { outline: none; }
.hoja-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.hoja-cabecera h2 { margin: 0; font-size: 18px; font-weight: 700; }
.opcion {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 14px; align-items: center;
  width: 100%; padding: 14px 4px;
  border: 0; border-bottom: 1px solid var(--linea); background: none;
  text-align: left; cursor: pointer;
}
.opcion:hover { background: var(--suave); }
.opcion-marca { width: 10px; height: 32px; border-radius: 3px; background: var(--negocio); }
.opcion-marca.personal { background: var(--personal); }
.opcion-texto { display: flex; flex-direction: column; gap: 2px; }
.opcion-texto .gris { font-size: 13px; }
.nota-hoja { margin: 14px 0 0; font-size: 12.5px; }
@keyframes subir { from { transform: translateY(100%); } }
@keyframes aparecer { from { opacity: 0; } }

/* ---------- Aviso breve (toast) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 150px; z-index: 60;
  transform: translate(-50%, 10px);
  max-width: calc(min(100vw, var(--ancho)) - 32px);
  padding: 10px 14px; border-radius: var(--radio-g);
  background: var(--oscuro); color: #fff; font-size: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
/* El aviso ocupa el ancho de su texto (sin partirse en columnas estrechas)
   y, si hay una hoja abierta, queda detrás de ella para no taparla. */
.toast { width: max-content; }
body.sin-scroll .toast { z-index: 40; }
.toast.con-boton { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.toast-boton {
  flex: none; padding: 6px 10px; border: 0; border-radius: var(--radio);
  background: #fff; color: var(--texto); font-size: 13px; font-weight: 600; cursor: pointer;
}
body.con-pie .toast { bottom: 220px; }

/* ---------- Botones comunes ---------- */
.boton-oscuro, .boton-claro {
  display: block; width: 100%;
  padding: 12px 14px; border-radius: var(--radio);
  font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer;
}
.boton-oscuro { border: 0; background: var(--oscuro); color: #fff; }
.boton-oscuro:hover { background: #344054; }
.boton-claro { border: 1px solid var(--linea); background: #fff; color: var(--texto); }
.boton-claro:hover { background: var(--suave); }
.enlace-suave {
  padding: 6px 0; border: 0; background: none; cursor: pointer;
  color: var(--texto-2); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px;
}
.pequeno { font-size: 12px; }

/* ---------- Pie fijo de una pantalla (dentro de la parte fija de abajo) ---------- */
.pie-pantalla {
  display: flex; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--linea); background: var(--fondo);
}
.pie-pantalla .boton-claro { width: auto; white-space: nowrap; }
.pie-pantalla .boton-oscuro { flex: 1; }
body.con-pie main { padding-bottom: 220px; }

/* ---------- Revisar: cabecera, interruptor y lotes ---------- */
.revisar-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--linea);
}
.revisar-cabecera h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.revisar-cabecera h1 { white-space: nowrap; }
.cuentas { text-align: right; font-size: 13px; line-height: 1.6; padding-top: 4px; white-space: nowrap; }
/* En teléfonos estrechos las cuentas pasan debajo del título (así "14 movimientos" queda en una línea). */
@media (max-width: 440px) {
  .revisar-cabecera { flex-direction: column; gap: 2px; }
  .cuentas { display: flex; flex-wrap: wrap; gap: 0 14px; padding-top: 0; text-align: left; font-size: 12px; }
}
.interruptor-modo {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 12px 20px 4px; padding: 3px;
  border-radius: var(--radio-g); background: var(--suave);
}
.interruptor-modo button {
  padding: 7px; border: 0; border-radius: var(--radio); background: none;
  color: var(--texto-2); font-size: 14px; font-weight: 500; cursor: pointer;
}
.interruptor-modo button.activo { background: #fff; color: var(--texto); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.lote-cabecera { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px 12px; border-bottom: 1px solid var(--linea); }
.lote-cabecera > .gris { font-size: 13px; }
.lote-cabecera .boton-oscuro { margin-top: 12px; }
.lote-dudas .lote-cabecera { border-top: 2px solid var(--oscuro); }

/* Fila de movimiento: concepto, monto y propuesta a la izquierda; par Negocio | Personal a la derecha. */
.mov {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 16px 10px 20px; border-bottom: 1px solid var(--linea);
}
.mov-info {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 2px 0; border: 0; background: none; text-align: left; cursor: pointer;
}
.mov-linea { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.mov-concepto { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mov-monto { flex: none; font-weight: 700; }
.mov-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--texto-2); }
.mov-sub > span { flex: none; }
.mov-sub > .mov-proyecto { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mov-nota { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--personal-texto); }
.mov-nota::before {
  content: ""; width: 10px; height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(135deg, var(--personal) 0 2px, var(--negocio) 2px 4px);
}

/* Icono de confianza: tres barras con 3, 2, 1 o 0 rellenas. */
.confianza { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.confianza i { width: 3px; background: #D0D5DD; border-radius: 1px; }
.confianza i:nth-child(1) { height: 6px; }
.confianza i:nth-child(2) { height: 9px; }
.confianza i:nth-child(3) { height: 12px; }
.confianza.c1 i:nth-child(-n+1), .confianza.c2 i:nth-child(-n+2), .confianza.c3 i { background: var(--texto); }

/* Par Negocio | Personal: el propuesto va relleno (azul o ámbar), el otro en blanco. */
.par { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.par-boton {
  min-width: 68px; padding: 8px 10px; border: 0; background: #fff;
  color: var(--texto-2); font-size: 13px; font-weight: 500; cursor: pointer;
}
.par-boton + .par-boton { border-left: 1px solid var(--linea); }
.par-boton:hover { background: var(--suave); }
.par-boton.negocio.relleno { background: var(--negocio); color: #fff; font-weight: 600; }
.par-boton.personal.relleno { background: var(--personal); color: var(--texto); font-weight: 600; }
.par-ancho { display: grid; width: 100%; margin-bottom: 14px; }
.par-ancho .par-boton { padding: 11px; font-size: 15px; }
.par-grande { display: grid; gap: 12px; width: 100%; border: 0; overflow: visible; }
.par-grande .par-boton {
  padding: 22px 10px; border: 1px solid var(--linea); border-radius: var(--radio-g); font-size: 18px;
}
.par-grande .par-boton + .par-boton { border-left: 1px solid var(--linea); }

.bandeja-vacia { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 48px 20px; text-align: center; }
.bandeja-vacia strong { font-size: 17px; }
.bandeja-vacia p { margin: 0 0 14px; font-size: 14px; }
.bandeja-vacia .boton-claro { width: auto; }
.pie-revisar { margin: 0; padding: 16px 20px; font-size: 12px; }

/* ---------- Revisar: uno a uno ---------- */
.uno { padding: 12px 20px 8px; }
.uno-progreso { display: flex; justify-content: space-between; font-size: 13px; }
.barra { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--linea); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--oscuro); }
.uno-centro { padding: 36px 0 18px; border-bottom: 1px solid var(--linea); font-size: 14px; }
.uno-concepto {
  display: block; max-width: 100%; margin: 6px 0 4px; padding: 0; border: 0; background: none;
  font-size: 22px; font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.uno-monto { font-size: 46px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.uno-propuesta { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 6px; }
.uno-propuesta-cabecera { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.uno-propuesta-texto { font-size: 16px; color: var(--texto-2); }
.uno-propuesta-texto strong.negocio { color: var(--negocio-texto); }
.uno-propuesta-texto strong.personal { color: var(--personal-texto); }
.cuadro { display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 2px; background: var(--negocio); }
.cuadro.personal { background: var(--personal); }
.uno-propuesta .enlace-suave { align-self: flex-start; font-size: 13px; }
.uno-ayuda { margin: 18px 0 8px; font-size: 13px; }
.uno-aceptar { display: block; margin: 10px 0 0 auto; }

/* ---------- Selector del movimiento y hoja de regla ---------- */
.selector-info { padding: 0 0 12px; font-size: 13px; }
.selector-monto { margin-top: 4px; font-size: 24px; font-weight: 700; }
.etiqueta-campo { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
label.etiqueta-campo { margin-bottom: 14px; }
label.etiqueta-campo .campo { margin-top: 6px; }
.campo {
  display: block; width: 100%;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: #fff; color: var(--texto); font: inherit; font-size: 15px;
}
.lista-opciones { margin: 6px 0 14px; border-top: 1px solid var(--linea); }
.opcion-lista {
  display: flex; justify-content: space-between; gap: 10px; width: 100%;
  padding: 11px 4px; border: 0; border-bottom: 1px solid var(--linea); background: none;
  font-size: 15px; text-align: left; cursor: pointer;
}
.opcion-lista:hover { background: var(--suave); }
.opcion-lista.elegida { font-weight: 600; color: var(--negocio-texto); }
.opcion-crear { color: var(--texto); font-weight: 600; }
.vacio-lista { margin: 0; padding: 10px 4px; font-size: 13px; }
.crear-proyecto { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.fila-botones { display: flex; gap: 8px; }
.interruptor, .casilla { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: 14px; cursor: pointer; }
.interruptor input, .casilla input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--negocio); flex: none; }
.interruptor > span { display: flex; flex-direction: column; gap: 2px; }
.interruptor .gris { font-size: 13px; }

/* ---------- Proyectos: lista ---------- */
.cabecera-con-boton { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.boton-corto { display: inline-block; width: auto; padding: 8px 14px; font-size: 14px; white-space: nowrap; }
.zona-buscador { padding: 12px 20px 4px; }
a.fila { color: inherit; text-decoration: none; }
.grupo .tabla-cabecera { padding-top: 18px; }

/* ---------- Detalle de proyecto ---------- */
.barra-detalle { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 4px; }
.boton-volver {
  padding: 8px 0; border: 0; background: none; cursor: pointer;
  font-size: 15px; font-weight: 500;
}
.detalle-cabecera { padding: 10px 20px 18px; border-bottom: 1px solid var(--linea); }
.detalle-cabecera h1 { margin: 2px 0 16px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.rejilla-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--linea); }
.cifra-etiqueta { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.cifra-valor { margin-top: 2px; font-size: 20px; font-weight: 700; white-space: nowrap; }
.rejilla-4 .cifra-valor { font-size: 16px; }
.cifra-extra { margin-top: 2px; font-size: 12px; }
.det-titulo, .ed-titulo { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 20px 10px; font-size: 16px; }
.det-encabezado, .det-mov { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; padding: 0 20px; }
.det-encabezado { padding-bottom: 8px; border-bottom: 1px solid var(--linea); font-size: 11px; letter-spacing: .08em; color: var(--texto-2); }
.det-encabezado span:last-child { text-align: right; }
.det-mov { align-items: center; padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--linea); }
.det-fecha { font-size: 14px; }
.det-concepto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.det-nombre { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.det-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 13px; color: var(--negocio-texto); }
.det-quien .cuadro { width: 9px; height: 9px; margin-right: 0; }
.etiqueta-cliente {
  padding: 0 7px; border-radius: 999px; background: var(--suave);
  color: var(--texto-2); font-size: 11.5px; font-weight: 500;
}
.det-monto { font-weight: 700; white-space: nowrap; text-align: right; }
.det-total { padding: 12px 20px 16px; border-top: 2px solid var(--oscuro); margin-top: -1px; }
.det-total-linea { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.det-total-linea strong:last-child { font-size: 17px; }
.det-total p { margin: 6px 0 0; }

/* ---------- Editar o crear proyecto ---------- */
.barra-editar {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 6px 12px; border-bottom: 1px solid var(--linea); background: var(--fondo);
}
.enlace-barra { justify-self: start; padding: 10px 8px; border: 0; background: none; cursor: pointer; color: var(--texto-2); font-size: 15px; }
.enlace-barra.fuerte { justify-self: end; color: var(--texto); font-weight: 700; }
.editar { padding: 16px 20px 8px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dos-columnas > * { min-width: 0; }
.segmento { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: 14px; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: #fff; }
.segmento button { padding: 10px 6px; border: 0; background: none; cursor: pointer; color: var(--texto-2); font-size: 14px; font-weight: 500; }
.segmento button + button { border-left: 1px solid var(--linea); }
.segmento button.activo { background: var(--oscuro); color: #fff; font-weight: 600; }
.campo-dinero { position: relative; margin-top: 6px; }
.campo-dinero span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--texto-2); }
label.etiqueta-campo .campo-dinero .campo { margin-top: 0; padding-left: 30px; font-size: 22px; font-weight: 700; }
.separador-oscuro { margin: 4px 0 0; border-top: 2px solid var(--oscuro); }
.explica-vendido { margin: 10px 0 0; }
.nota-editar { margin: 16px 0; font-size: 13.5px; }
.ed-titulo { padding: 18px 0 8px; border-bottom: 1px solid var(--linea); }
.ed-mov {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 14px;
}
.ed-concepto { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ed-mov .enlace-suave { font-size: 13px; }
.ed-asignar { margin: 14px 0; }
.tarjeta-regla {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 4px 0 20px; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff;
}
.regla-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; }
.regla-texto strong { font-size: 15px; font-weight: 600; }
.regla-texto label { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.campo-pequeno { display: inline-block; width: auto; min-width: 0; flex: 1; padding: 6px 8px; font-size: 14px; }
.boton-peligro {
  display: block; margin: 8px 0 12px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  color: var(--pierde); font-size: 14px; font-weight: 600;
}
.boton-oscuro.boton-rojo { background: var(--pierde); }
.boton-oscuro:disabled { background: #D0D5DD; color: var(--texto-2); cursor: default; } /* legible aunque esté desactivado */
.nota-hoja-arriba { margin: 0 0 12px; font-size: 13.5px; }
.asignar-fila { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--linea); cursor: pointer; }
.asignar-fila input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--negocio); }
.asignar-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.asignar-linea { display: flex; justify-content: space-between; gap: 8px; }

/* ---------- Corregir la mezcla ---------- */
.mezcla-mov { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.mezcla-linea { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; font-size: 15px; }
.texto-personal { color: var(--personal-texto); }
.mezcla-salidas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mezcla-salidas .boton-corto { padding: 7px 10px; font-size: 13px; }

/* ---------- Cronómetro: reloj de la cabecera, cápsula y hoja ---------- */
.boton-reloj.activo { color: var(--negocio); background: var(--negocio-suave); }
.cabecera-acciones { display: flex; align-items: center; gap: 6px; }
.barra-derecha { justify-self: end; display: flex; align-items: center; gap: 2px; }
.revisar-cabecera { position: relative; padding-right: 60px; }
.reloj-esquina { position: absolute; top: 12px; right: 12px; }
/* La cápsula va a la izquierda del "+", a su misma altura: no lo tapa ni tapa el pie fijo de la bandeja. */
.capsula {
  position: absolute; left: 16px; bottom: calc(100% + 22px);
  display: flex; align-items: stretch; max-width: calc(100% - 104px);
  border: 1px solid var(--linea); border-radius: 999px; overflow: hidden;
  background: #fff; box-shadow: 0 4px 14px rgba(16, 24, 40, .15);
}
.capsula-info {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 9px 12px 9px 14px; border: 0; background: none; cursor: pointer; font-size: 14px;
}
.capsula-tiempo { flex: none; font-weight: 700; }
.capsula-proyecto { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--texto-2); }
.punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--negocio); animation: latido 1.6s ease-in-out infinite; }
.punto.parado { background: var(--texto-2); animation: none; }
.capsula-parar { flex: none; width: 42px; border: 0; border-left: 1px solid var(--linea); background: none; cursor: pointer; font-size: 13px; }
.capsula-parar:hover, .capsula-info:hover { background: var(--suave); }
@keyframes latido { 50% { opacity: .3; } }
.crono-tiempo { margin: 4px 0 2px; font-size: 44px; font-weight: 700; letter-spacing: -0.02em; }
.crono-nota { margin: 0 0 14px; font-size: 13px; }
.crono-pide { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radio); background: var(--personal-suave); color: var(--personal-texto); font-size: 13.5px; }
.crono-descartar { display: block; margin: 10px auto 0; }

/* ---------- Horas (Editar proyecto) ---------- */
.barra-horas { padding: 12px 0 8px; }
.barra-horas-texto { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.barra-horas .barra { height: 6px; }
.barra-horas .barra i { background: var(--negocio); }
.barra-horas.pasada .barra i { background: var(--pierde); }

/* ---------- Mes: comparación, meta, colchón, "Necesita atención" y gastos por categoría ---------- */
.comparacion { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
button.resumen-cobrar {
  align-self: end; margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: var(--radio);
  background: none; cursor: pointer;
}
button.resumen-cobrar:hover { background: var(--suave); }
.metas { display: flex; flex-direction: column; gap: 12px; padding: 12px 20px 14px; border-bottom: 1px solid var(--linea); font-size: 13px; }
.meta-texto { margin-bottom: 6px; }
.barra-meta { height: 6px; }
.barra-meta i { background: var(--gana); }
.boton-ayuda { padding: 0 2px; border: 0; background: none; cursor: pointer; color: var(--negocio-texto); font-size: 13px; font-weight: 600; }
.colchon-explica { margin: 6px 0 0; }
.atencion { margin: 14px 20px 4px; border: 1px solid var(--pierde-borde); border-radius: var(--radio-g); background: #fff; overflow: hidden; }
.atencion-titulo { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 8px; color: var(--pierde); font-size: 14px; }
.atencion-titulo .enlace-suave { padding: 0; font-size: 13px; }
.aviso-linea {
  display: flex; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 14px; border: 0; border-top: 1px solid var(--linea); background: none;
  font-size: 14px; text-align: left; cursor: pointer;
}
.aviso-linea:hover { background: var(--pierde-suave); }
.hoja .aviso-linea { padding: 12px 4px; }
.aviso-ir { flex: none; color: var(--texto-2); }
.gastos { margin-top: 4px; padding: 4px 20px 14px; border-top: 1px solid var(--linea); }
.gastos-titulo { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 6px; font-size: 15px; }
.gasto-fila { display: block; width: 100%; padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.gasto-fila:hover .gasto-nombre { text-decoration: underline; }
.gasto-linea { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.gasto-nombre { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gasto-cifra { flex: none; }
.barra-gasto { display: block; height: 6px; margin-top: 5px; }
.barra-gasto i { background: var(--negocio); }

/* Filas de las hojas del Mes (por cobrar, categoría, comprobantes). */
.hoja-mov { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.hoja-mov-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion-cobrar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%;
  padding: 12px 4px; border: 0; border-bottom: 1px solid var(--linea); background: none; font-size: 15px; text-align: left; cursor: pointer;
}
.opcion-cobrar:hover { background: var(--suave); }
.hoja-total { display: flex; justify-content: space-between; margin-top: -1px; padding: 12px 0 4px; border-top: 2px solid var(--oscuro); }

@media (max-width: 400px) {
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra-valor { font-size: 17px; }
  .fila, .tabla-cabecera { padding-left: 16px; padding-right: 16px; }
  .fila-cifra { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Subir estado de cuenta (#subir) ---------- */
.subir-cuerpo { padding: 4px 20px 16px; }
.subir h1 { margin: 10px 0 6px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.subir-cuerpo > p { margin: 0 0 14px; line-height: 1.5; }
.pequeno-13 { font-size: 13px; }
.pequeno-14 { font-size: 14px; }
.tarjeta-claves {
  display: flex; gap: 12px; margin: 6px 0 20px; padding: 14px 16px;
  border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; line-height: 1.5;
}
.tarjeta-claves p { margin: 4px 0 0; font-size: 14px; }
.casilla-marcada {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid var(--texto); border-radius: 4px; font-size: 13px; font-weight: 700;
}
.subir .par-cuenta { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.subir .par-cuenta .par-boton { padding: 16px 10px; font-size: 16px; }
.campo-digitos { max-width: 140px; letter-spacing: .1em; }
.nota-subir { font-size: 13px; }
.zona-archivo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 200px; margin-top: 6px; padding: 24px 16px;
  border: 1.5px dashed #98A2B3; border-radius: var(--radio-g); text-align: center;
}
.zona-archivo strong { font-size: 17px; }
.zona-archivo.encima { border-color: var(--negocio); background: var(--negocio-suave); }
.subir-archivo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-size: 14px; }
.subir-archivo .cuadro { margin-right: 4px; }
.subir-archivo strong.negocio { color: var(--negocio-texto); }
.subir-archivo strong.personal { color: var(--personal-texto); }
.tarjeta-cuadre { padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; }
.tarjeta-cuadre.aviso { border-color: var(--pierde-borde); background: var(--pierde-suave); }
.tarjeta-cuadre strong { font-size: 16px; }
.tarjeta-cuadre p { margin: 4px 0 0; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
/* Versión 3.2 · R4: el archivo parece de otra cuenta (tres salidas, una debajo de otra) y "Seguir con este archivo". */
.aviso-otra-cuenta { margin-top: 14px; }
.botones-otra-cuenta { display: grid; gap: 10px; margin-top: 14px; }
.botones-otra-cuenta button { min-height: 44px; }
.seguir-archivo { margin: 14px 0; }
.seguir-archivo .boton-oscuro { margin-top: 12px; min-height: 44px; }
.subir h1.subir-leimos { margin-top: 20px; font-size: 24px; }
.subir-titulo {
  margin: 22px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
}
.col-tabla { border-top: 1px solid var(--linea); }
.col-fila, .motivo-fila, .muestra-fila {
  display: grid; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 15px;
}
.col-fila { grid-template-columns: 76px minmax(0, 1fr) auto; }
.col-fila strong { font-weight: 500; overflow-wrap: anywhere; }
.motivo-fila { grid-template-columns: 1fr auto; }
.muestra-fila { grid-template-columns: 48px minmax(0, 1fr) auto; }
.muestra-concepto { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.col-tabla + .enlace, .col-tabla + .gris { margin-top: 10px; }
.subir-cuerpo > .enlace { display: inline-block; margin-top: 10px; }
.editor-columnas { margin: 8px 0 4px; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: var(--suave); }
.pareja { padding: 10px 0; margin: 0; border-bottom: 1px solid var(--linea); }
.pareja-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.descartada { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.descartada-celdas { font-size: 14px; overflow-wrap: anywhere; }
.pie-subir { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; text-align: center; }
.tarjeta-salida {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0 0 12px; padding: 14px 16px;
  border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; text-align: left; cursor: pointer;
}
.tarjeta-salida:hover { background: var(--suave); }
.tarjeta-salida > span:first-child { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; }
.tarjeta-salida strong { font-size: 16px; }
.subir-mano { margin: 18px 0 24px; padding-top: 18px; border-top: 1px solid var(--linea); line-height: 1.5; }

/* ---------- Cabecera del Mes en el móvil: cuatro botones a la derecha ---------- */
.mes-cabecera { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 440px) {
  .mes-cabecera { gap: 6px; padding: 14px 14px 10px; }
  .marca { gap: 8px; font-size: 17px; }
  .mes-acciones { gap: 0; }
  .selector-mes { padding: 7px 24px 7px 10px; font-size: 14px; }
  .selector-caja span { right: 9px; }
}

.marca-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.marca-negocio { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--texto-2); font-size: 12px; font-weight: 500; }
.mes-acciones { margin-left: auto; } /* si la cabecera pasa a dos líneas, los botones quedan a la derecha */

/* ---------- Bienvenida y "Empezar con lo mío" (sin pestañas ni "+") ---------- */
body.sin-barra .dock { display: none; }
body.sin-barra main { padding-bottom: 32px; }
.bienvenida { display: flex; flex-direction: column; gap: 16px; padding: 48px 24px 32px; }
.bienvenida-marca { display: flex; align-items: center; gap: 12px; font-size: 26px; }
.bienvenida h1 { margin: 8px 0 0; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.bienvenida > p { margin: 0; line-height: 1.5; }
.bienvenida .tarjeta-claves { margin: 0; }
.bienvenida-botones { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bienvenida-pie { margin-top: 12px; line-height: 1.5; }
.segmento-palabras { margin-bottom: 6px; }
.segmento-palabras button { padding: 10px 2px; font-size: 13px; }
.nota-palabra { margin: 0 0 16px; }

/* ---------- Ajustes ---------- */
.ajustes-titulo { margin: 4px 20px 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.ajustes-seccion { padding: 16px 20px 8px; border-bottom: 1px solid var(--linea); }
.ajustes-seccion h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.ajustes-seccion .tarjeta-salida { width: 100%; margin-bottom: 10px; }
.ajustes-seccion > .boton-oscuro { margin-bottom: 10px; }
.opcion-lista.fija { cursor: default; }
.opcion-lista.fija:hover { background: none; }
.opcion-regla { align-items: center; }
.regla-fila { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 400; }
.regla-fila strong { font-weight: 600; }
.campo-porcentaje { position: relative; margin-top: 6px; max-width: 140px; }
.campo-porcentaje span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-2); }
label.etiqueta-campo .campo-porcentaje .campo { margin-top: 0; padding-right: 30px; }

/* ---------- Entrada rápida: foto, correo y a mano ---------- */
.zona-foto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 12px; }
.boton-foto {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  padding: 26px 16px; border: 1.5px dashed #D0D5DD; border-radius: var(--radio-g);
  background: var(--suave); cursor: pointer; font-size: 15px;
}
.boton-foto .gris { font-size: 13px; }
.boton-otro { margin-top: 8px; }
.campo-correo { min-height: 120px; resize: vertical; font-size: 14px; line-height: 1.45; }
.titulo-correo { margin: 4px 0 10px; font-size: 15px; font-weight: 700; }
.aviso-correo {
  margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--pierde-borde); border-radius: var(--radio);
  background: var(--pierde-suave); color: var(--pierde); font-size: 14px;
}
.correo-mov { padding: 12px 0 2px; border-top: 1px solid var(--linea); }
.correo-mov-cabecera { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.coincidencia {
  display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff;
}
.coincidencia-linea { display: flex; justify-content: space-between; gap: 12px; }

/* Miniatura de una foto (se toca para ampliarla) y la foto a pantalla completa. */
.miniatura {
  flex: none; width: 44px; height: 44px; padding: 0; overflow: hidden;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--suave); cursor: zoom-in;
}
.miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.miniatura-grande { width: 100%; height: 180px; }
.miniatura-grande img { object-fit: contain; background: var(--suave); }
.miniatura-selector { margin-top: 10px; width: 64px; height: 64px; }
.det-concepto .miniatura { margin-top: 4px; }
.hoja-fondo.foto-grande { align-items: center; padding: 16px; background: rgba(16, 24, 40, .9); cursor: zoom-out; }
.foto-grande img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radio); }
.foto-cerrar {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px; cursor: pointer;
}

/* ---------- Objetivos táctiles (44 px como mínimo), foco visible y pantallas estrechas ---------- */
.boton-icono { width: 44px; height: 44px; }
.capsula-parar { width: 44px; }
.capsula-info, .par-boton, .segmento button, .interruptor-modo button, .opcion-lista, .campo,
.boton-volver, .enlace-barra, .boton-peligro, .aviso-linea, .aviso-perdida, .toast-boton,
.boton-oscuro, .boton-claro { min-height: 44px; }
.boton-corto { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.mezcla-salidas .boton-corto { min-height: 44px; }
.enlace-suave { display: inline-flex; align-items: center; min-height: 44px; }
.crono-descartar { display: flex; justify-content: center; margin: 6px auto 0; }
.uno-aceptar { display: flex; margin: 6px 0 0 auto; }
.atencion-titulo { padding-top: 4px; padding-bottom: 4px; }
.atencion-titulo strong { padding: 6px 0; }
/* Enlaces dentro de un texto: el área que se toca crece sin mover el texto de alrededor. */
.enlace, .boton-ayuda { padding: 10px 2px; margin: -10px -2px; }
.boton-orden { padding: 15px 8px; margin: -15px -8px; }
.pestanas a { min-height: 52px; }
/* Dentro de cajas con overflow hidden el contorno de foco se dibuja por dentro para que no se corte. */
.par button:focus-visible, .segmento button:focus-visible, .interruptor-modo button:focus-visible,
.capsula button:focus-visible, .atencion button:focus-visible, .tarjeta-mezcla:focus-visible,
.fila:focus-visible, .opcion-lista:focus-visible, .opcion:focus-visible, .opcion-cobrar:focus-visible,
.gasto-fila:focus-visible, .mov-info:focus-visible, .pestanas a:focus-visible { outline-offset: -3px; }
/* Con la franja de pérdida visible, la parte fija de abajo es más alta. */
body.con-perdida main { padding-bottom: 196px; }
body.con-perdida .toast { bottom: 196px; }
/* Cabeceras con botón: si no caben en una línea, los botones pasan debajo (a la derecha). */
.cabecera-con-boton { flex-wrap: wrap; }
.cabecera-con-boton .cabecera-acciones { margin-left: auto; }
/* Editar: el título del centro se corta con "…" antes que empujar "Guardar" fuera de la pantalla. */
.barra-editar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; }
.barra-editar > strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
/* Bandeja vacía (primer uso): dos botones apilados. */
.bandeja-vacia .boton-oscuro, .bandeja-vacia .boton-claro { width: 100%; max-width: 320px; margin-top: 8px; }
.campo-correo { min-height: 120px; } /* el cuadro del correo sigue siendo grande */
.aviso-perdida { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 400px) {
  .cifra-grande { font-size: 30px; }
  .resumen { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Versión 2 · etapa 1: familia del trabajo en Editar ---------- */
.lista-familias { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.opcion-familia {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff;
  color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.opcion-familia:hover { background: var(--suave); }
.opcion-familia.activa { border-color: var(--oscuro); box-shadow: inset 0 0 0 1px var(--oscuro); }
.familia-cerrada { margin-bottom: 14px; }
.familia-textos { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.familia-textos strong { font-size: 15px; font-weight: 600; }
.familia-textos .gris { font-size: 13px; line-height: 1.35; }
/* Círculo de elección: vacío o con punto (la forma acompaña al borde oscuro, nunca solo el color). */
.familia-marca { flex: none; width: 18px; height: 18px; border: 2px solid var(--texto-2); border-radius: 50%; }
.opcion-familia.activa .familia-marca { border-color: var(--oscuro); background: radial-gradient(circle, var(--oscuro) 0 4px, transparent 5px); }
.familia-cambiar { flex: none; font-size: 14px; font-weight: 600; text-decoration: underline; color: var(--texto); }
.nota-cobro { margin: -6px 0 14px; }

/* ---------- Versión 2 · etapa 2: formas de cobro, plan de cobros, presupuesto, avance y fecha clave ---------- */
.ayuda-campo { display: block; margin-top: 4px; font-weight: 400; }
.nota-campo { margin: -6px 0 14px; }
/* "Más detalles": botón ancho que pliega y despliega las piezas que la familia no muestra abiertas. */
.mas-detalles-boton {
  display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; margin: 0 0 14px;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff;
  font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.mas-detalles-boton:hover { background: var(--suave); }
.mas-detalles-boton .gris { font-weight: 400; }
.mas-detalles { margin: -4px 0 14px; padding: 14px 12px 2px; border-left: 2px solid var(--linea); }
/* Avance: − 80% + y chips 25 · 50 · 75 · 100 */
.pieza-avance { margin-bottom: 14px; }
.fila-avance { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.boton-avance { width: 44px; height: 44px; padding: 0; font-size: 20px; line-height: 1; }
.boton-avance:disabled, .chip:disabled { opacity: .45; cursor: default; }
.avance-valor { min-width: 52px; font-size: 18px; font-weight: 700; text-align: center; }
.chips { display: flex; gap: 6px; margin-left: auto; }
.chip {
  min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--linea); border-radius: 999px;
  background: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
.chip.activo { border-color: var(--oscuro); background: var(--oscuro); color: #fff; font-weight: 600; }
.sugerencia-cerrar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px;
  padding: 8px 8px 8px 12px; border-radius: var(--radio); background: var(--suave); font-size: 14px;
}
/* Plan de cobros: nombre y ✕ arriba; monto y fecha prevista debajo. */
.pieza-plan { margin-bottom: 14px; }
.ayuda-plan { margin: 0 0 10px; }
.cuotas-cabecera { display: none; }
.cuota-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 6px 8px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.cuota-nombre { grid-column: 1 / 3; }
.cuota-quitar { grid-column: 3; border: 0; background: none; cursor: pointer; color: var(--texto-2); font-size: 16px; }
.cuota-fila .campo-dinero { margin-top: 0; }
.cuota-fila .campo-dinero span { font-size: 15px; }
.cuota-fila .campo-dinero .campo { padding-left: 26px; font-weight: 600; }
.cuota-fecha { grid-column: 2 / 4; }
.plan-suma { margin: 8px 0 0; }
.plan-suma:empty { display: none; }
.plan-botones { margin-top: 10px; }
.repartir-iguales { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.repartir-iguales .etiqueta-campo { flex: 1; margin: 0; font-size: 14px; color: var(--texto); }
/* Detalle: fecha clave con cuenta atrás y bloque "Cobros". */
.fecha-clave { margin: -8px 0 14px; font-size: 14px; }
.bloque-cobros { border-bottom: 1px solid var(--linea); padding-bottom: 8px; }
.cobros-resumen { margin: -4px 20px 6px; font-size: 13.5px; }
.cuota-linea {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 20px; border-top: 1px solid var(--linea); font-size: 15px;
}
.cuota-icono { font-size: 16px; text-align: center; color: var(--texto-2); }
.cuota-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cuota-monto { white-space: nowrap; }
.cuota-linea.vencida, .cuota-linea.vencida .cuota-icono, .cuota-linea.vencida .gris { color: var(--pierde); }
.cobros-aviso { margin: 6px 20px 4px; }
@media (max-width: 400px) {
  .chips { margin-left: 0; }
  .cuota-linea { padding-left: 16px; padding-right: 16px; }
  .cobros-resumen, .cobros-aviso { margin-left: 16px; margin-right: 16px; }
}

/* ---------- Versión 2 · etapa 3: dinero de terceros, dividir y unir ---------- */
/* Chip "Para proveedores" / "Es mío" / "Pago a proveedor" / "Mi costo". Marcado: rayas azul y ámbar + texto. */
.chip-terceros {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px;
  padding: 0 12px; border: 1px solid var(--linea); border-radius: 999px; background: #fff;
  color: var(--texto); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.chip-terceros:hover { background: var(--suave); }
.chip-marca { width: 10px; height: 10px; border-radius: 2px; background: var(--negocio); }
.chip-terceros.es-tercero { border-color: var(--personal-texto); background: var(--personal-suave); color: var(--personal-texto); font-weight: 600; }
.chip-terceros.es-tercero .chip-marca { background: repeating-linear-gradient(135deg, var(--personal) 0 2px, var(--negocio) 2px 4px); }
.chip-cambiar { color: var(--texto-2); font-size: 12px; }
.fila-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 14px; }
/* Bandeja: el chip va debajo de la propuesta, en la columna de la izquierda. */
.mov-izq { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.uno-propuesta .chip-terceros { margin-top: 2px; }
/* Selector y hoja del movimiento: Dividir, Unir, Quitar… */
.selector-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.selector-acciones .boton-claro { flex: 1 1 40%; width: auto; }
/* Detalle: cada movimiento es un botón (abre su hoja); la foto va debajo, fuera del botón. */
.det-fila { border-bottom: 1px solid var(--linea); }
button.det-mov {
  width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
button.det-mov:hover { background: var(--suave); }
button.det-mov:focus-visible { outline-offset: -3px; }
.det-foto { padding: 0 20px 10px 84px; }
.det-parte { font-weight: 400; }
.etiqueta-terceros { background: var(--personal-suave); color: var(--personal-texto); }
/* Bloque "Dinero de terceros" del detalle. */
.bloque-terceros { border-bottom: 1px solid var(--linea); padding-bottom: 14px; }
.terceros-cifras { padding: 0 20px; }
.terceros-frase { margin: 10px 20px 4px; font-size: 14px; }
.pagos-titulo { margin: 12px 20px 2px; font-size: 13px; }
.pago-fila {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 9px 20px 0; border-top: 1px solid var(--linea); margin-top: 6px;
}
.pago-icono { padding-top: 1px; font-size: 16px; text-align: center; color: var(--texto-2); }
.pago-fila.vencido, .pago-fila.vencido .pago-icono { color: var(--pierde); }
.pago-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pago-linea { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.pago-acciones { display: flex; gap: 16px; }
.pago-acciones .enlace-suave { font-size: 13px; }
.pagados-boton { width: calc(100% - 40px); margin: 10px 20px 0; }
.pago-nuevo { width: calc(100% - 40px); margin: 12px 20px 0; }
/* Mes: tarjeta "$X no es tuyo" (rayas como la tarjeta de mezcla: dinero que no es lo que parece). */
.tarjeta-terceros {
  display: grid; grid-template-columns: 6px 1fr; margin: 8px 20px 0;
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: #fff;
}
.terceros-cuerpo { display: flex; flex-direction: column; padding: 10px 14px 4px; min-width: 0; }
.terceros-titulo { margin: 0 0 4px; font-size: 14px; }
.terceros-titulo strong { color: var(--personal-texto); }
.terceros-cuerpo .enlace-suave { align-self: flex-start; font-size: 13px; }
.pago-mes {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  padding: 6px 0; border: 0; border-top: 1px solid var(--linea); background: none; color: inherit; font: inherit;
  font-size: 14px; text-align: left; cursor: pointer;
}
.pago-mes:hover { background: var(--suave); }
.pago-mes:focus-visible { outline-offset: -3px; }
.pago-mes-der { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
/* Hoja "Dividir": una tarjeta por parte; la última es "el resto". */
.partes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.parte { padding: 10px 12px 0; border: 1px solid var(--linea); border-radius: var(--radio); }
.parte-cabecera { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-bottom: 4px; }
.parte-cabecera .boton-icono { margin-right: -8px; }
.parte-monto { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; }
.parte-resto { font-size: 22px; }
.dividir-problema { margin: 0 0 10px; }
.dividir-problema:empty { display: none; }
/* Editar: interruptor del dinero de terceros. */
.pieza-terceros { margin-bottom: 14px; }
.pieza-terceros .interruptor { margin-bottom: 6px; }
.nota-terceros { margin: 0 0 6px 28px; }
.aviso-terceros { color: var(--personal-texto); }
@media (max-width: 400px) {
  .terceros-cifras, .pago-fila { padding-left: 16px; padding-right: 16px; }
  .terceros-frase, .pagos-titulo { margin-left: 16px; margin-right: 16px; }
  .pagados-boton, .pago-nuevo { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
  .tarjeta-terceros { margin-left: 16px; margin-right: 16px; }
  .det-foto { padding-left: 80px; }
}

/* ---------- Versión 2 · etapa 4: indicadores destacados ---------- */
/* Detalle: fila de hasta 3 celdas encima de la rejilla de cifras. */
.indicadores-trabajo {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radio); background: var(--suave);
}
/* Mes: fila pequeña bajo el resumen, con los valores del conjunto de trabajos del mes. */
.indicadores-mes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  padding: 10px 20px 12px; border-bottom: 1px solid var(--linea);
}
.indicador { min-width: 0; }
.indicador-etiqueta {
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.indicador-valor { margin-top: 2px; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.indicadores-mes .indicador-valor { font-size: 15px; }
.indicador-frase { margin-top: 2px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
/* Ajustes: casillas de los indicadores (44 px de alto como mínimo). */
.lista-indicadores { margin: 6px 0 10px; border-top: 1px solid var(--linea); }
.casilla-indicador { min-height: 44px; margin: 0; padding: 10px 4px; border-bottom: 1px solid var(--linea); }
.casilla-indicador > span { display: flex; flex-direction: column; gap: 2px; }
.casilla-indicador input { width: 20px; height: 20px; }
.casilla-indicador.apagada { cursor: default; }
.casilla-indicador.apagada .casilla-titulo { color: var(--texto-2); }
@media (max-width: 400px) {
  .indicadores-mes { padding-left: 16px; padding-right: 16px; }
  .indicador-valor { font-size: 15px; }
}

/* ---------- Versión 2 · etapa 5: bienvenida a tu medida y "Mi forma de trabajar" ---------- */
/* Asistente (#empezar): barra con "Atrás", "N de 9" y "Saltar"; avance; una pregunta por pantalla. */
.asistente { display: flex; flex-direction: column; min-height: 100vh; }
.asistente-barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 20px 4px; }
.asistente-barra .boton-volver { justify-self: start; min-height: 44px; }
.asistente-saltar { justify-self: end; min-height: 44px; padding: 10px 0 10px 12px; }
.asistente-hueco { justify-self: end; }
.avance-asistente { height: 4px; margin: 0 20px; border-radius: 2px; background: var(--linea); overflow: hidden; }
.avance-asistente i { display: block; height: 100%; background: var(--oscuro); transition: width .2s ease; }
.asistente-cuerpo { flex: 1; padding: 8px 20px 16px; }
.asistente-titulo { margin: 16px 0 6px; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.asistente-titulo:focus { outline: none; }
.asistente-ayuda { margin: 0 0 16px; line-height: 1.5; font-size: 14px; }
.opcion-asistente .familia-textos strong { font-size: 16px; }
/* "Siguiente" fijo abajo (en esta pantalla no hay barra de pestañas). */
.asistente-pie {
  position: sticky; bottom: 0; z-index: 2; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea); background: var(--fondo);
}
.asistente-pie .boton-oscuro { min-height: 48px; }
body.sin-barra main:has(.asistente) { padding-bottom: 0; }
/* Varias respuestas (pantalla 8): casilla cuadrada con ✓ en vez de círculo. */
.casilla-marca {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px;
  border: 2px solid var(--texto-2); border-radius: 4px; font-size: 13px; font-weight: 700; color: #fff;
}
.opcion-casilla.activa .casilla-marca { border-color: var(--oscuro); background: var(--oscuro); }
.segmento-dias { margin-top: 6px; }
.segmento-dias button { min-height: 44px; padding: 10px 0; font-size: 13px; }
.otra-palabra, .otro-campo { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--linea); }
.nota-palabra { margin: 0; }
/* "Así quedó tu FlujoDuo": una línea por respuesta con "Cambiar". */
.resumen-lista { margin: 0 0 14px; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.resumen-linea {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px;
  padding: 6px 0; border-bottom: 1px solid var(--linea); font-size: 15px; line-height: 1.4;
}
.resumen-categorias { display: block; }
.boton-cambiar {
  flex: none; min-height: 44px; padding: 0 0 0 12px; border: 0; background: none; cursor: pointer;
  color: var(--texto); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline;
}
.resumen-confianza { line-height: 1.5; }
.resumen-personal { margin: 10px 0 0; text-align: center; }
/* Vista previa de un perfil o de una forma importada: "Se añade", "Cambia" y "No se toca". */
.vista-bloque { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.vista-bloque h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.vista-lista { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.vista-pliegue { font-size: 14px; }
.vista-pliegue summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }
.vista-pliegue .vista-lista { margin-bottom: 8px; }
.vista-linea { margin: 4px 0; font-size: 14px; }
/* Ajustes → "Mi forma de trabajar". */
.fila-forma { align-items: center; min-height: 56px; }
.fila-forma-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila-forma-texto strong { font-weight: 600; overflow-wrap: anywhere; }
.ajustes-subtitulo { margin: 18px 0 8px; font-size: 15px; font-weight: 700; }
.regla-fila .etiqueta-cliente { margin-left: 6px; }
@media (max-width: 400px) {
  .asistente-barra, .asistente-cuerpo, .asistente-pie { padding-left: 16px; padding-right: 16px; }
  .avance-asistente { margin: 0 16px; }
  .asistente-titulo { font-size: 22px; }
  .segmento-dias button { font-size: 12px; }
}

/* ---------- Versión 2 · etapa 6: registro en segundos y ayudas ---------- */
/* Botón "+": mantener pulsado no selecciona texto ni abre el menú del sistema. */
.fab { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
/* Filas de chips (fecha, conceptos frecuentes, trabajos, cuentas): 44 px de alto, saltan de línea. */
.chips-fila { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.chip-texto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips-frecuentes { margin-top: -6px; }
.chips-frecuentes .chip { font-size: 13px; background: var(--suave); }
.chips-frecuentes .chip:hover { background: #fff; }
.campo-fecha-otra { margin: -6px 0 14px; }
.etiqueta-concepto { margin-bottom: 10px; }
/* A dónde va lo anotado: "Nace confirmado…" o "Va a la bandeja Revisar…". */
.destino-anotar { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radio); background: var(--suave); font-size: 13.5px; line-height: 1.45; color: var(--texto-2); }
.destino-anotar.nace-confirmado { background: var(--negocio-suave); color: var(--negocio-texto); }
/* Franja del recordatorio del efectivo, arriba del Mes. */
.franja-efectivo {
  display: flex; align-items: center; gap: 10px; margin: 0 20px 6px; padding: 8px 6px 8px 14px;
  border: 1px solid var(--personal); border-radius: var(--radio-g); background: var(--personal-suave);
}
.franja-efectivo p { flex: 1; margin: 0; font-size: 14px; line-height: 1.4; }
.franja-efectivo .boton-oscuro { flex: none; }
/* Fila agrupada "Servicios rápidos" y sus servicios (con sangría a la izquierda). */
.fila-grupo .fila-nombre { white-space: normal; }
.grupo-flecha { color: var(--texto-2); }
.grupo-perdida { font-weight: 600; }
.grupo-servicios { border-left: 3px solid var(--linea); }
.grupo-servicios .fila { padding-left: 28px; }
.texto-confianza { margin: 0 0 12px; line-height: 1.5; }
@media (max-width: 400px) {
  .franja-efectivo { margin-left: 16px; margin-right: 16px; }
  .grupo-servicios .fila { padding-left: 24px; }
}

/* ---------- Versión 2 · etapa 7: aviso de ejemplo con dos acciones y hoja "¿Qué ejemplo quieres ver?" ---------- */
/* El aviso pasa a una fila que salta de línea; cada acción mide 44 px de alto (sin márgenes negativos que se pisen). */
.aviso-ejemplo:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; padding: 2px 20px; }
.aviso-texto { padding: 6px 0; }
.aviso-acciones { display: flex; flex-wrap: wrap; column-gap: 16px; }
.aviso-ejemplo .enlace { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 2px; }
.ejemplos-ayuda { margin: 0 0 12px; line-height: 1.45; }
.opcion-ejemplo { min-height: 64px; }
.ejemplo-visto { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--texto); }
.resumen-ejemplo { line-height: 1.5; }
@media (max-width: 400px) {
  .aviso-ejemplo:not([hidden]) { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Versión 2 · etapa 8: instalable, sin conexión, una mano y estados vacíos ---------- */
/* Marca "Sin conexión" (arriba de todo, en todas las pantallas; no tapa nada porque ocupa su propia línea). */
.sin-conexion:not([hidden]) {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 4px 16px;
  background: var(--suave); border-bottom: 1px solid var(--linea); color: var(--texto); font-size: 12.5px; font-weight: 600;
}
.sin-conexion .gris { font-weight: 400; }
/* Tarjeta "Instala FlujoDuo en tu teléfono" (al final del Mes, plegable, con ✕). */
.tarjeta-instalar {
  display: flex; align-items: flex-start; gap: 4px; margin: 16px 20px 0; padding: 4px 4px 4px 14px;
  border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff;
}
.instalar-pliegue { flex: 1; min-width: 0; }
.instalar-pliegue summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0;
  font-size: 14px; line-height: 1.4; cursor: pointer; list-style: none;
}
.instalar-pliegue summary::-webkit-details-marker { display: none; }
.instalar-pliegue summary:focus-visible { outline-offset: -2px; }
.instalar-logo { flex: none; }
.instalar-cuerpo { padding: 0 0 12px; }
.instalar-nota { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; }
.instalar-pasos { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.instalar-cerrar { flex: none; }
/* Uso con una mano: en las hojas largas, los botones de guardar quedan pegados abajo, al alcance del pulgar. */
.hoja-acciones {
  position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px;
  margin: 4px -20px 0; padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea); background: var(--fondo);
}
.hoja-acciones .boton-otro, .hoja-acciones .boton-peligro { margin-top: 0; }
/* Interruptores y casillas sueltas: toda la fila se toca y mide 44 px como mínimo. */
.interruptor, .casilla { min-height: 44px; padding: 10px 0; margin-bottom: 4px; }
.interruptor input, .casilla input { width: 20px; height: 20px; margin-top: 0; }
.cuota-quitar { min-height: 44px; } /* la ✕ de cada cuota del plan */
/* Estados vacíos nuevos: bandeja con chips de terceros y bloque de terceros sin movimientos. */
.ayuda-chips { margin: 0 20px 12px; line-height: 1.45; }
.terceros-vacio { line-height: 1.5; }
@media (max-width: 400px) {
  .tarjeta-instalar { margin-left: 16px; margin-right: 16px; }
  .ayuda-chips { margin-left: 16px; margin-right: 16px; }
}
/* App instalada en el iPhone (con la barra de inicio abajo): los huecos para la parte fija suman la zona segura,
   así el "+" y la cápsula nunca tapan lo último de la pantalla ni el aviso breve. */
main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
body.con-pie main { padding-bottom: calc(220px + env(safe-area-inset-bottom)); }
body.con-perdida main { padding-bottom: calc(196px + env(safe-area-inset-bottom)); }
body.sin-barra main { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
body.con-pie .toast { bottom: calc(220px + env(safe-area-inset-bottom)); }
body.con-perdida .toast { bottom: calc(196px + env(safe-area-inset-bottom)); }

/* ---------- Versión 3 · etapa 0: arreglos y textos ---------- */
/* El "+" no se ve en Editar, Subir y Ajustes (ahí no sirve y tapaba botones). */
body.sin-mas .fab { display: none; }
/* Aviso de ejemplo en UNA línea de 44 px: "Ejemplo · Eventos Amapola · Cambiar · Volver a lo mío". */
.aviso-ejemplo:not([hidden]) { flex-wrap: nowrap; min-height: 44px; padding: 0 20px; column-gap: 12px; }
.aviso-texto { flex: 1; min-width: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso-acciones { flex: none; flex-wrap: nowrap; column-gap: 14px; }
.aviso-ejemplo .enlace { white-space: nowrap; }
@media (max-width: 400px) {
  .aviso-ejemplo:not([hidden]) { padding-left: 16px; padding-right: 16px; column-gap: 10px; }
  .aviso-acciones { column-gap: 12px; }
}
/* Hojas: en el teléfono, el alto visible de verdad (sin la barra del navegador). */
.hoja { max-height: 85dvh; }
/* Texto solo para lectores de pantalla. */
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* "(?)" que despliega una explicación (comisión del detalle, chips de la bandeja). */
.pliegue-ayuda summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  cursor: pointer; list-style: none;
}
.pliegue-ayuda summary::-webkit-details-marker { display: none; }
.pliegue-ayuda summary .boton-ayuda { padding: 0 2px; margin: 0; }
.pliegue-texto { display: block; padding-bottom: 6px; line-height: 1.45; }
/* Detalle: la caja al lado de la utilidad. */
.linea-caja { margin: 14px 0 0; font-size: 14px; line-height: 1.45; }
.linea-caja strong { font-weight: 700; }
/* Versión 3.2 · R5: "Hoy vas" en grande y "Si te pagan lo que falta" en gris. */
.hoy-vas { margin: 0 0 18px; }
.hoy-vas .cifra-grande { margin: 2px 0 2px; }
.hoy-vas-detalle { margin: 0; }
.hoy-vas-si { margin: 4px 0 0; font-size: 15px; }
/* Mes: el margen en palabras, la nota de la tabla y "Gastos del negocio de septiembre". */
.margen-frase { margin-top: 2px; }
.tabla-nota { margin: 8px 20px 0; line-height: 1.45; }
.gastos-sub { margin: -2px 0 8px; }
@media (max-width: 400px) {
  .tabla-nota { margin-left: 16px; margin-right: 16px; }
}

/* ---------- Versión 3 · etapa 1: Modo simple (Mes) y barra con el "+" en el centro ---------- */
/* Barra de abajo: Mes · [Trabajos] · + · Revisar. El "+" es un botón redondo dentro de la barra (ya no flota). */
.pestanas { display: flex; align-items: center; }
.pestanas a { flex: 1 1 0; min-width: 0; }
.pestanas .fab {
  position: static; flex: none;
  width: 48px; height: 48px; margin: 2px 12px;
  font-size: 28px; box-shadow: 0 2px 8px rgba(16, 24, 40, .18);
}
.pestanas .fab:hover { background: #344054; }
.pestanas .fab:focus-visible { outline-offset: 2px; }
/* La cápsula del cronómetro, encima de la barra y a lo ancho (nunca tapa el "+", que está en la barra). */
.capsula { left: 16px; bottom: calc(100% + 10px); max-width: calc(100% - 32px); }
/* Mes simple: las tres cifras de caja. */
.resumen-caja { padding: 10px 20px 16px; border-bottom: 1px solid var(--linea); }
.caja-fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0; font-size: 15px; color: var(--texto-2);
}
.caja-cifra { color: var(--negocio-texto); font-size: 20px; font-weight: 700; white-space: nowrap; }
.caja-quedo { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linea); }
.caja-quedo .etiqueta { font-size: 14px; color: var(--texto-2); }
.caja-comparacion { font-size: 13px; }
.caja-terceros { margin: 10px 0 0; line-height: 1.45; }
/* Mes simple: últimos movimientos del negocio (punto azul = negocio, ámbar = personal). */
.ultimos { padding: 4px 20px 14px; border-top: 1px solid var(--linea); }
.lista-ultimos { margin: 0; padding: 0; list-style: none; }
.ultimo-fila {
  display: grid; grid-template-columns: 8px 48px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 14px;
}
.ultimo-fila:last-child { border-bottom: 0; }
.punto-mov { width: 8px; height: 8px; border-radius: 50%; background: var(--negocio); }
.punto-mov.personal { background: var(--personal); }
.ultimo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ultimo-texto .mov-concepto { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ultimo-monto { font-weight: 600; white-space: nowrap; }
.metas .pliegue-ayuda { display: inline; }
/* Ajustes: la tarjeta del modo. */
.tarjeta-modo { display: flex; flex-direction: column; gap: 8px; }
.tarjeta-modo p { margin: 0; line-height: 1.45; }
@media (max-width: 400px) {
  .resumen-caja, .ultimos { padding-left: 16px; padding-right: 16px; }
  .pestanas .fab { margin: 2px 8px; }
}

/* ---------- Versión 3 · etapa 2: Revisar simple, Anotar a mano simple, Ajustes en dos niveles y bancos ---------- */
/* Revisar simple: una sola lista, la línea de ayuda y filas con concepto, monto, fecha y el par. */
.ayuda-simple { margin: 12px 20px 4px; font-size: 14px; line-height: 1.45; }
.lote-simple { border-top: 1px solid var(--linea); }
.mov-simple .mov-info { min-height: 44px; justify-content: center; }
.mov-simple .par-boton { min-width: 76px; }
.revisar-simple .boton-volver { display: block; margin-bottom: 2px; }
.revisar-simple .bandeja-vacia .enlace-suave { margin-top: 6px; }
/* Hoja mínima: "Lo devolví" / "Era mi sueldo" (el elegido, marcado). */
.fila-botones .boton-claro.elegido { border-color: var(--oscuro); font-weight: 700; }
/* Anotar a mano simple: aviso de la mezcla y "Otras formas: subir archivo del banco · foto · correo". */
.nota-mezcla-anotar { margin: -6px 0 12px; line-height: 1.45; }
.otras-formas { margin: 4px 0 10px; line-height: 1.6; }
.enlace-otra-forma { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; margin: 0; font-weight: 500; color: var(--texto-2); }
/* Ajustes: "Avanzado ▸" plegado (44 px), con la flecha que gira al abrirlo. */
.avanzado { border-bottom: 1px solid var(--linea); }
.avanzado > summary {
  display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 20px;
  font-size: 17px; font-weight: 700; cursor: pointer; list-style: none;
}
.avanzado > summary::-webkit-details-marker { display: none; }
.avanzado > summary .gris { flex: 1; min-width: 0; font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.avanzado-flecha { flex: none; transition: transform .15s; }
.avanzado[open] .avanzado-flecha { transform: rotate(90deg); }
.avanzado > summary:focus-visible { outline: 2px solid var(--negocio); outline-offset: -2px; }
.avanzado .ajustes-seccion:last-child { border-bottom: 0; }
/* Hoja "¿Cómo descargo el archivo de mi banco?": un pliegue de 44 px por banco. */
.lista-bancos { margin: 0 0 12px; border-top: 1px solid var(--linea); }
.banco { border-bottom: 1px solid var(--linea); }
.banco > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px;
  font-size: 15px; font-weight: 600; cursor: pointer; list-style: none;
}
.banco > summary::-webkit-details-marker { display: none; }
.banco[open] > summary .gris { transform: rotate(180deg); }
.pasos-banco { margin: 0 0 12px; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.pasos-banco li + li { margin-top: 4px; }
/* Subir: el enlace a esa hoja y la vista previa resumida del Modo simple. */
.enlace-bancos { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 6px; padding: 0; font-size: 14px; }
.subir-descartamos { font-size: 0.7em; font-weight: 500; }
.pliegue-subir { margin: 14px 0 0; border-top: 1px solid var(--linea); }
.pliegue-subir > summary { display: flex; align-items: center; flex-wrap: wrap; min-height: 44px; font-weight: 600; cursor: pointer; }
@media (max-width: 400px) {
  .ayuda-simple { margin-left: 16px; margin-right: 16px; }
  .avanzado > summary { padding-left: 16px; padding-right: 16px; }
  .mov-simple .par-boton { min-width: 68px; }
}

/* ---------- Versión 3 · etapa 3: bienvenida simple, invitación al completo y microlecciones ---------- */
/* Bienvenida simple: los dígitos de una cuenta, debajo de su tarjeta; "Saltar" grande y los enlaces del paso 3. */
.digitos-bienvenida { margin: 0 0 8px 34px; }
.asistente-pie-doble { display: flex; flex-direction: column; gap: 8px; }
.asistente-pie-enlaces { display: flex; flex-direction: column; align-items: center; gap: 0; }
.enlace-bienvenida { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; }
.hoja-acciones .enlace-bienvenida { margin: 0; }
/* "Así funciona" (Mes, tras la bienvenida). */
.tarjeta-asi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 12px 20px 0; padding: 14px 16px;
  border: 1px solid #C9DFEF; border-radius: var(--radio-g); background: var(--negocio-suave);
}
.tarjeta-asi p { margin: 0; line-height: 1.5; font-size: 14.5px; }
/* Microlección: tarjeta plegable de 1 minuto con "Entendido" y "Más tarde". */
.tarjeta-leccion { margin: 12px 20px 0; padding: 0 14px; border: 1px solid var(--linea); border-left: 4px solid var(--negocio); border-radius: var(--radio-g); background: #fff; }
.leccion-pliegue > summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 0;
  font-size: 15px; line-height: 1.35; cursor: pointer; list-style: none;
}
.leccion-pliegue > summary::-webkit-details-marker { display: none; }
.leccion-pliegue > summary:focus-visible { outline: 2px solid var(--negocio); outline-offset: -2px; }
.leccion-marca {
  flex: none; padding: 2px 8px; border-radius: 999px; background: var(--negocio-suave); color: var(--negocio-texto);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.leccion-cuerpo { padding: 0 0 14px; }
.leccion-texto { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; }
.leccion-enlace { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 6px; padding: 0; }
.leccion-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.subir-cuerpo .tarjeta-leccion { margin: 0 0 16px; }
/* Invitación al modo completo (al final del Mes simple) y su enlace discreto en el pie. */
.tarjeta-invitacion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 16px 20px 0; padding: 12px 8px 8px 16px;
  border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff;
}
.invitacion-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; }
.invitacion-cabeza strong { padding-top: 10px; font-size: 16px; line-height: 1.35; }
.tarjeta-invitacion > p { margin: 0; padding-right: 8px; font-size: 14px; line-height: 1.5; }
.invitacion-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.tarjeta-invitacion .enlace-suave { min-height: 44px; }
.pie-enlace { margin: -6px 0 6px; }
.enlace-invitacion { font-size: 13px; }
/* Modo completo, tras pasar: "Tienes N movimientos sin evento · Asignarlos ›" con su ✕. */
.tarjeta-asignar { display: flex; align-items: flex-start; gap: 4px; margin: 12px 20px 0; }
.tarjeta-asignar .tarjeta-salida { flex: 1; min-width: 0; margin: 0; }
@media (max-width: 400px) {
  .tarjeta-asi, .tarjeta-leccion, .tarjeta-invitacion, .tarjeta-asignar { margin-left: 16px; margin-right: 16px; }
}

/* ---------- Versión 3 · etapa 4: gráficos con SVG propio (graficos.js). Sin animaciones. ---------- */
/* Cada gráfico: la pregunta como título, el dibujo a todo el ancho (escala con el viewBox) y "Ver como tabla". */
.grafico { margin-top: 4px; padding: 4px 20px 14px; border-top: 1px solid var(--linea); }
.grafico-titulo { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.grafico-cabeza { gap: 12px; }
.grafico-cabeza > .gris { flex: none; }
.grafico-sub { margin: -2px 0 8px; line-height: 1.45; }
.grafico-dibujo { margin: 6px 0 2px; }
.grafico-svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: hidden; }
.grafico-nota { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
.grafico-diferencia { margin: 8px 0 0; font-size: 17px; }
.grafico-diferencia.gris { color: var(--texto-2); }
.grafico .enlace-suave { font-size: 13px; }
/* Colores: los de la identidad (negocio azul, personal ámbar, ▲ verde, ▼ rojo; fondo gris de las barras). */
.g-negocio { fill: var(--negocio); }
.g-personal { fill: var(--personal); }
.g-gana { fill: var(--gana); }
.g-pierde { fill: var(--pierde); }
.g-gris { fill: var(--texto-2); }
.g-fondo { fill: var(--linea); }
.g-suave { opacity: .6; }
.g-pasado { opacity: .6; }          /* G2: los meses que no estás viendo */
.g-eje { stroke: var(--texto-2); stroke-width: 1; }
.g-texto { fill: var(--texto); font-size: 13px; }
.g-cifra { font-weight: 600; }
.g-cifra-mes { font-size: 12px; font-weight: 600; }
.g-mes { fill: var(--texto-2); font-size: 12px; }
.g-mes.g-actual { fill: var(--texto); font-weight: 700; }
.g-texto-gana { fill: var(--gana); font-weight: 600; }
.g-texto-pierde { fill: var(--pierde); font-weight: 600; }
.g-texto-gris { fill: var(--texto-2); }
/* Filas y columnas que se pueden tocar (G2 → ese mes, G4 → la categoría, G5 → el detalle). */
.g-toque { fill: transparent; }
.g-tocable { cursor: pointer; }
.g-tocable:hover .g-toque { fill: var(--suave); }
/* G2 en el modo completo: el conmutador "Caja / Utilidad". */
.conmutador { display: inline-flex; margin: 0 0 6px; padding: 2px; border: 1px solid var(--linea); border-radius: 999px; background: var(--suave); }
.conmutador-boton {
  min-width: 84px; min-height: 44px; padding: 6px 14px; border: 0; border-radius: 999px;
  background: none; color: var(--texto-2); font-size: 14px; font-weight: 600; cursor: pointer;
}
.conmutador-boton.activo { background: #fff; color: var(--texto); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
/* "Ver como tabla": plegado, con las mismas cifras en texto. */
.grafico-tabla { margin-top: 4px; font-size: 13px; }
.grafico-tabla > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-2); font-weight: 500; cursor: pointer; }
.grafico-tabla table { width: 100%; border-collapse: collapse; table-layout: auto; }
.grafico-tabla th, .grafico-tabla td { padding: 6px 4px; border-bottom: 1px solid var(--linea); text-align: left; font-weight: 400; vertical-align: top; overflow-wrap: anywhere; }
.grafico-tabla thead th { color: var(--texto-2); font-size: 12px; font-weight: 600; }
.grafico-tabla .num { text-align: right; white-space: nowrap; }
.grafico-tabla .enlace { font-weight: 500; text-align: left; }
.tabla > .grafico-g5 { margin-top: 0; }
@media (max-width: 400px) {
  .grafico { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Versión 3 · etapa 5: ayuda sin conexión y "¿Qué es esto?" ---------- */
/* El "?" de cada cabecera: un botón de icono de 44 px con el signo en un círculo. */
.boton-ayuda-cabecera span {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border: 1.8px solid currentColor; border-radius: 50%; font-size: 14px; font-weight: 700; line-height: 1;
}
.barra-detalle .boton-ayuda-cabecera { margin-right: -10px; }
.barra-derecha-subir { display: inline-flex; align-items: center; gap: 4px; }
.bienvenida-marca .boton-ayuda-cabecera { margin-left: auto; }
/* Revisar: arriba a la derecha caben el reloj (completo) y el "?". */
.reloj-esquina { display: flex; align-items: center; gap: 2px; }
.revisar-cabecera { padding-right: 104px; }
.revisar-simple .revisar-cabecera { padding-right: 60px; }
/* "¿Qué es esto?" junto a una cifra: texto pequeño subrayado, pero el toque mide 44 px de alto. */
.que-es {
  display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 4px;
  border: 0; background: none; cursor: pointer;
  color: var(--negocio-texto); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
  vertical-align: middle; white-space: nowrap;
}
.etiqueta-con-ayuda { display: flex; align-items: center; flex-wrap: wrap; column-gap: 4px; }
.resumen-cobrar-caja { display: flex; flex-direction: column; align-items: flex-end; align-self: end; }
.resumen-cobrar-caja .que-es { margin: 2px -4px -12px 0; }
.que-es-fila { margin: 10px 0 0; line-height: 1.6; }
.que-es-fila .que-es { margin: -10px 0; padding: 0 6px; }
.terceros-titulo .que-es { margin: -12px 0; }
.indicador .que-es { margin: -8px -4px -12px; font-size: 12px; }
/* G1 del completo: por qué puede decir lo contrario que la utilidad. */
.grafico-sub-ayuda { margin-top: 0; line-height: 1.5; }
/* La hoja "Ayuda": buscador, preguntas plegadas de 44 px, el hueco del asistente y WhatsApp. */
.ayuda-etiqueta { margin-bottom: 4px; }
.ayuda-subtitulo { margin: 14px 0 4px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.ayuda-nada { margin: 14px 0; line-height: 1.5; }
.faq { border-bottom: 1px solid var(--linea); }
.faq > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0;
  font-size: 15px; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq[open] > summary .gris { transform: rotate(180deg); }
.faq-cuerpo { padding: 0 0 12px; font-size: 14px; line-height: 1.5; }
.faq-respuesta { margin: 0 0 6px; }
.faq-pasos { margin: 0 0 6px; padding-left: 22px; }
.faq-pasos li + li { margin-top: 4px; }
.faq-mas { margin: 0 0 6px; color: var(--texto-2); }
.faq-enlace { display: inline-flex; align-items: center; min-height: 44px; margin: 0 14px 0 0; font-size: 14px; text-align: left; }
.ayuda-asistente { margin: 16px 0 10px; padding: 12px 14px; border: 1px dashed var(--linea); border-radius: var(--radio-g); background: var(--suave); font-size: 14px; }
.ayuda-asistente p { margin: 4px 0 0; }
.ayuda-whatsapp { margin-top: 10px; }
/* Cabecera del Mes en 360 px: con el "?" son hasta cuatro botones y el selector; si no caben, el selector baja de línea
   (nunca se sale por la derecha). */
.mes-acciones { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.selector-caja { max-width: 100%; }
.selector-mes { max-width: 100%; text-overflow: ellipsis; }
/* Editar: entre "Cancelar" y "Guardar" van el reloj y el "?"; el título se corta con "…" antes que empujarlos. */
.barra-editar .barra-derecha .boton-icono { width: 44px; }

/* A2: alerta persistente, en el flujo y visible al desplazarse entre pantallas. */
.aviso-guardado {
  position: sticky; top: 0; z-index: 35; padding: 12px 16px;
  background: var(--pierde-suave); color: var(--pierde); border-bottom: 2px solid var(--pierde);
}
.aviso-guardado p { margin: 6px 0; }
.aviso-guardado .enlace { display: block; min-height: 44px; padding: 12px 0; color: inherit; }

/* La pestaña secundaria muestra solo el resumen persistido. */
.aviso-lectura { padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--suave); }
.aviso-lectura h1 { margin-top: 0; }

.modo-lectura #pantalla { padding: 16px; }

/* Dinero propio: la pregunta sigue legible con una sola columna en el celular. */
.pregunta-propio { flex: 1 0 100%; min-width: 0; padding: 8px 0; }
.pregunta-propio p { margin: 0 0 8px; }
.mov:has(.pregunta-propio) { flex-wrap: wrap; }
.movimientos-propios { padding: 16px; border-top: 1px solid var(--borde, #e4e7ec); }
.pregunta-propio button, .movimientos-propios button { min-height: 44px; }

/* Sello de confianza (portada y Subir): un círculo oscuro, no una casilla para marcar (el verde es solo para ganancia). */
.sello-confianza {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; background: var(--oscuro); color: #fff; font-size: 13px; font-weight: 700;
}

/* ---------- Versión 3.2 · etapa 2: categoría propuesta y dudosas sin pintar ---------- */
/* «Transporte · cambiar» bajo el concepto: texto pequeño, pero el toque mide 44 px de alto. */
.mov-simple .mov-izq { gap: 0; }
.mov-categoria {
  display: flex; align-items: center; min-height: 44px; margin-top: -8px; padding: 0;
  border: 0; background: none; color: var(--negocio-texto); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.mov-categoria .gris { color: var(--texto-2); }
.mov-categoria:focus-visible { outline-offset: -3px; }
/* «¿Negocio o personal?»: arriba de la lista, con borde oscuro como el lote de dudas del completo. */
.lote-dudosas .lote-cabecera, .lote-dudas-r2 .lote-cabecera { border-top: 2px solid var(--oscuro); }
/* Mes simple: «Pon categoría a tus gastos…» bajo el gráfico de categorías. */
.aviso-sin-categoria { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }

/* ---------- Versión 3.2 · etapa 3: gasto personal con el negocio (R3), cifra sin cobros (R6) y sueldo (P1) ---------- */
/* Una sola línea ámbar dentro de «Sacaste para ti», con su «Ver detalle» (44 px). */
.linea-gastos-personales { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; margin: 6px 0; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--personal-suave); overflow: hidden; }
.linea-gastos-personales .rayas { align-self: stretch; }
.linea-gastos-texto { margin: 0; padding: 10px 0; font-size: 14px; line-height: 1.4; }
.linea-gastos-personales .enlace-suave { min-height: 44px; padding: 0 12px 0 0; white-space: nowrap; }
.sueldo-exceso { margin: 6px 0; font-weight: 600; }
.nota-sin-cobros { margin: 0 0 4px; font-size: 14px; }
.botones-devolver { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.botones-devolver button { min-height: 44px; }
.mezcla-estado { margin: 4px 0 0; font-size: 13px; }

/* ---------- Versión 3.2 · etapa 4: trabajos en el Modo simple (R7) y avisos de copia e iPhone (P3) ---------- */
/* «Boda Pérez · cambiar» bajo el concepto en Revisar simple (mismo aspecto que la línea de categoría). */
.mov-trabajo { margin-top: -10px; }
/* La fila «¿De qué sesión?» y su enlace plegado «Asignar a una sesión». */
.fila-trabajo .enlace-trabajo { margin: -4px 0 8px; padding: 0; font-size: 14px; }
/* «Tus sesiones» del Mes simple: cada fila es un enlace de 44 px a la pantalla del trabajo. */
.tus-trabajos { margin: 16px 20px 0; }
.lista-trabajos { margin: 6px 0 0; padding: 0; list-style: none; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; overflow: hidden; }
.lista-trabajos li + li { border-top: 1px solid var(--linea); }
.fila-trabajo-mes { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; color: inherit; text-decoration: none; font-size: 14.5px; }
.trabajo-mes-texto { min-width: 0; overflow-wrap: anywhere; }
/* «Descarga tu copia de seguridad» (sola en el simple; dentro de «Necesita atención» en el completo). */
.tarjeta-copia { display: flex; flex-direction: column; gap: 8px; margin: 12px 20px 0; padding: 14px 16px; border: 1px solid var(--linea); border-left: 4px solid var(--oscuro); border-radius: var(--radio-g); background: #fff; }
.tarjeta-copia p { margin: 0; line-height: 1.45; font-size: 14.5px; }
.tarjeta-copia .fila-botones { margin: 2px 0 0; }
.atencion .tarjeta-copia { margin: 0 14px 10px; }
/* Aviso del iPhone sin instalar (una vez, con «Cómo se hace» y «Entendido»). */
.tarjeta-iphone { display: flex; flex-direction: column; gap: 10px; margin: 12px 20px 0; padding: 14px 16px; border: 1px solid #C9DFEF; border-radius: var(--radio-g); background: var(--negocio-suave); }
.tarjeta-iphone p { margin: 0; line-height: 1.5; font-size: 14.5px; }
@media (max-width: 400px) {
  .tus-trabajos, .tarjeta-copia, .tarjeta-iphone { margin-left: 16px; margin-right: 16px; }
}