/* 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: 16px; 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: 16px;
}
.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: 16px; }
.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: 16px; }
  .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: 16px; 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); }
/* 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; }
  .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-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* V8 · 4B: «Guardar respaldo» y «Reintentar guardar» */

/* 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 (V8 · 4B: con los pasos, «Entendido» y ✕; ver el bloque «Versión 8 · Etapa 4B»). */
.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; }
}

/* ---------- Lanzamiento L1: la cuenta («Crea tu cuenta» y «Revisa tu correo») ---------- */
.cuenta { padding-top: 16px; }
.cuenta-cabecera { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.cuenta h1 { font-size: 24px; }
.form-cuenta { display: flex; flex-direction: column; gap: 4px; }
/* Cada casilla con su texto es un objetivo de 44 px; los enlaces de dentro también se pueden tocar. */
.casilla-cuenta { align-items: center; min-height: 44px; margin: 0; line-height: 1.4; }
.casilla-cuenta a { color: var(--negocio-texto); font-weight: 600; }
.error-cuenta { margin: 4px 0; padding: 10px 12px; border: 1px solid var(--pierde-borde); border-radius: var(--radio); background: var(--pierde-suave); color: var(--pierde); font-size: 14px; line-height: 1.45; }
.casillas-codigo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.casilla-codigo { min-height: 52px; padding: 8px 0; text-align: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.casilla-codigo:disabled { background: var(--suave); }
.fila-cuenta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.fila-cuenta .enlace-suave:disabled { color: var(--texto-2); cursor: default; text-decoration: none; }
.aviso-otro-telefono { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radio); background: var(--negocio-suave); color: var(--negocio-texto); font-size: 14px; line-height: 1.45; }
/* Ajustes · «Tu cuenta: correo · Cerrar sesión». */
.tarjeta-cuenta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.tarjeta-cuenta p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tarjeta-cuenta .boton-claro { min-height: 44px; }
/* Páginas de privacidad y términos (privacidad.html, terminos.html). */
.legal { padding: 32px 24px 48px; line-height: 1.55; }
.legal h1 { margin: 16px 0 8px; font-size: 26px; line-height: 1.25; }
.legal h2 { margin: 24px 0 8px; font-size: 17px; }
.legal li { margin: 0 0 8px; }
.legal .aviso-borrador { margin: 0 0 8px; padding: 10px 12px; border: 1px solid #F5D08A; border-radius: var(--radio); background: var(--personal-suave); color: var(--personal-texto); font-weight: 600; font-size: 14px; }
.legal .volver-app { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto); font-weight: 600; }

/* ---------- Lanzamiento L2: prueba de 15 días (V4-1) y bloqueo amable ---------- */
/* Línea discreta del Mes («Prueba gratis · te quedan N días» o «Tu plan se renueva el …»). */
.linea-prueba { margin: 8px 20px 0; font-size: 13.5px; line-height: 1.45; }
/* Tarjeta de los días 8, 12 y 15 (y de la gracia): mismo estilo que la de la copia; la de gracia, borde ámbar + texto. */
.tarjeta-prueba .fila-prueba { flex-wrap: wrap; }
.tarjeta-prueba .boton-pago { white-space: normal; text-align: left; }
.tarjeta-prueba-gracia { border-left-color: var(--personal); background: var(--personal-suave); }
@media (max-width: 400px) { .linea-prueba { margin-left: 16px; margin-right: 16px; } }
/* Con la cuenta bloqueada no se ven las pestañas ni el «+» (Ajustes vuelve con «← Mes», que lleva al bloqueo). */
body.cuenta-bloqueada .dock { display: none; }
body.cuenta-bloqueada main { padding-bottom: 32px; }
/* «Tu prueba terminó». */
.bloqueo { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 32px; }
.bloqueo-cabecera { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.bloqueo h1 { margin: 12px 0 0; font-size: 26px; line-height: 1.25; }
.bloqueo-texto { margin: 0; font-size: 16px; line-height: 1.5; }
.bloqueo-subtitulo { margin: 12px 0 0; font-size: 17px; }
.bloqueo-botones { display: flex; flex-direction: column; gap: 10px; }
.bloqueo-botones .boton-oscuro, .bloqueo-botones .boton-claro { min-height: 48px; white-space: normal; }
.bloqueo a { color: var(--negocio-texto); font-weight: 600; }
.bloqueo .bloqueo-botones a.boton-claro { color: var(--texto); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.bloqueo p.pequeno-13 { margin: 0; line-height: 1.45; }
/* Respuesta de «Ya pagué» y nota de Ajustes: texto, no solo color. */
.aviso-bloqueo { margin: 0; padding: 10px 12px; border: 1px solid #F5D08A; border-radius: var(--radio); background: var(--personal-suave); color: var(--personal-texto); font-size: 14px; line-height: 1.45; }
.ajustes .aviso-bloqueo { margin: 0 0 12px; }
.aviso-bloqueo a { color: inherit; font-weight: 700; }
/* «Ver mis datos» (#lectura en la pestaña editora): el modo lectura de siempre. */
.lectura-bloqueada { padding: 16px; }
.lectura-bloqueada .fila-botones { flex-wrap: wrap; margin-top: 8px; }

/* ---------- Lanzamiento L3: pago con Hotmart ---------- */
/* Hoja «Elige tu plan» (L3): cada opción es un botón grande. V4-1 la pasó a dos columnas (bloque de abajo). */
.opcion-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; width: 100%;
  min-height: 56px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: var(--fondo);
  color: var(--texto); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.opcion-plan:hover { background: var(--suave); }
.opcion-plan:focus-visible { outline: 3px solid var(--negocio); outline-offset: 2px; }
.opcion-plan-titulo { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.opcion-plan-recomendada { border: 2px solid var(--negocio); background: var(--negocio-suave); }
.opcion-plan-marca { font-size: 13px; font-weight: 700; color: var(--negocio-texto); white-space: nowrap; }
.planes-correo { margin: 0 0 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.planes-mensaje .aviso-bloqueo { margin: 0 0 12px; }
.planes-ya-pague .boton-claro { width: 100%; min-height: 48px; }
/* Ajustes → Tu cuenta: el plan y «Cómo cancelar». */
.linea-plan { margin: 0 0 10px; }
.fila-cancelar { margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; }
.enlace-cancelar { display: inline-flex; align-items: center; min-height: 44px; color: var(--negocio-texto); font-weight: 600; }

/* ---------- Versión 4 · V4-1: dos planes, candado del Plus y sección «Plan Plus» ---------- */
/* Hoja «Elige tu plan»: dos columnas (Básico / Plus) que caben a 360 px. La recomendada lleva borde azul Y «★ Recomendado». */
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.columna-plan { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: var(--fondo); }
.columna-plan-recomendada { border: 2px solid var(--negocio); background: var(--negocio-suave); }
.columna-plan-nombre { margin: 0; font-size: 18px; line-height: 1.2; }
.columna-plan .opcion-plan-marca { display: block; min-height: 18px; }
.incluye-plan { margin: 0 0 4px; padding: 0 0 0 16px; font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.incluye-plan li { margin: 0 0 4px; overflow-wrap: anywhere; }
.columna-plan-botones { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.columna-plan .opcion-plan { min-height: 48px; padding: 10px 8px; font-size: 15px; justify-content: center; text-align: center; background: #fff; }
.columna-plan-recomendada .opcion-plan { border-color: var(--negocio); }
/* El candado: «🔒 Esto es del plan Plus · Ver planes» (texto, no solo el icono). */
.candado-plus { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 4px 0; padding: 6px 10px; border: 1px dashed var(--linea); border-radius: var(--radio); background: var(--suave); font-size: 13px; color: var(--texto-2); }
.candado-icono { font-size: 14px; }
.boton-enlace { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--negocio-texto); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.boton-enlace:focus-visible { outline: 3px solid var(--negocio); outline-offset: 2px; border-radius: var(--radio); }
/* Ajustes → Plan Plus: las 4 funciones con «Próximamente» o el candado. */
.lista-plus { margin: 0; padding: 0; list-style: none; }
.fila-plus { padding: 8px 0; border-top: 1px solid var(--linea); }
.fila-plus:first-child { border-top: 0; }
.fila-plus-texto { line-height: 1.45; overflow-wrap: anywhere; }
.etiqueta-pronto { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--personal-suave); color: var(--personal-texto); font-size: 12px; font-weight: 700; }
/* Ajustes → Tu cuenta: «Pasar a Plus» con plan Básico. Bloqueo: la línea de los dos planes. */
.fila-pasar-plus { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; }
.boton-pasar-plus { min-height: 44px; }
.bloqueo-planes { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }

/* ---------- Versión 4 · V4-2: «Entrar con Google» ---------- */
/* Botón claro con la «G» dibujada en SVG (pantalla-cuenta.js · iconoGoogle); 48 px de alto, como los demás de la cuenta. */
.boton-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 8px;
  padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; color: var(--texto);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.boton-google:hover { background: var(--suave); }
.boton-google:disabled { color: var(--texto-2); cursor: default; }
.icono-g { flex: none; }
/* «o entra con tu correo y un código»: una línea a cada lado del texto. */
.separador-o { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; color: var(--texto-2); font-size: 13px; }
.separador-o::before, .separador-o::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.separador-o span { flex: none; text-align: center; }
/* Ajustes → Tu cuenta: «Entras con Google» / «Entras con tu correo y un código». */
.tarjeta-cuenta .linea-proveedor { flex-basis: 100%; margin: -4px 0 0; }

/* ---------- Lanzamiento L4: legal, precio en la bienvenida y «Borrar mi cuenta» ---------- */
/* Bienvenida: «15 días gratis con todo. Luego desde $7/mes.» bajo el título. */
.bienvenida-precio { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--texto-2); }
/* Enlaces a privacidad y términos (pie de Ajustes y hoja «Elige tu plan»): cada uno es un objetivo de 44 px. */
.pie p { margin: 0; }
.pie-enlaces a, .enlaces-legales a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--texto-2); font-weight: 600; }
.enlaces-legales { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--texto-2); text-align: center; }
/* Hoja «¿Borrar tu cuenta?». */
.borrar-cuenta p { margin: 0 0 10px; line-height: 1.5; }
.borrar-cuenta .aviso-bloqueo { margin: 0 0 12px; }
.borrar-cuenta .etiqueta-campo { margin-top: 12px; }
.borrar-cuenta .campo { width: 100%; min-height: 44px; }
.borrar-cuenta .error-cuenta { margin-top: 8px; }
.fila-borrar-cuenta { margin-top: 12px; }
/* Páginas legales completas (privacidad.html y terminos.html): legibles a 360 px, sin scripts. */
.pagina-legal { padding: 20px 20px 56px; line-height: 1.6; font-size: 16px; }
.pagina-legal h1 { margin: 12px 0 4px; font-size: 26px; line-height: 1.25; }
.pagina-legal h2 { margin: 28px 0 8px; font-size: 18px; line-height: 1.3; }
.pagina-legal p, .pagina-legal li { margin: 0 0 10px; overflow-wrap: anywhere; }
.pagina-legal ul { margin: 0 0 12px; padding-left: 20px; }
.pagina-legal a { color: var(--negocio-texto); font-weight: 600; }
.pagina-legal .meta { margin: 0 0 16px; font-size: 14px; color: var(--texto-2); }
.pagina-legal .aviso-borrador { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #F5D08A; border-radius: var(--radio); background: var(--personal-suave); color: var(--personal-texto); font-weight: 600; font-size: 14px; line-height: 1.45; }
/* Notas para la revisión legal: ámbar con borde y texto entre corchetes (no solo color). */
.pagina-legal .nota-abogado { margin: 6px 0 12px; padding: 8px 12px; border-left: 3px solid var(--personal); border-radius: var(--radio); background: var(--personal-suave); color: var(--personal-texto); font-size: 14px; line-height: 1.45; }
.pagina-legal .volver-app { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto); font-weight: 600; text-decoration: none; }
.pagina-legal .pie-legal { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--texto-2); }
.pagina-legal .pie-legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 400px) { .pagina-legal { padding-left: 16px; padding-right: 16px; } }

/* ---------- Versión 4 · V4-4: «Descargar para tu contador» (hoja-contador.js) ---------- */
/* Periodo (mes / trimestre / año) y tres opciones: CSV, ZIP con recibos y PDF resumen (estas dos, con candado en Básico). */
.hoja-contador .segmento button { min-height: 44px; }
.opcion-contador { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.opcion-contador h3 { margin: 0 0 4px; font-size: 15px; }
.opcion-contador p { margin: 0 0 10px; }
.opcion-contador .boton-oscuro, .opcion-contador .boton-claro { min-height: 44px; }
.opcion-contador .fila-botones { margin-top: 4px; }
.tamano-zip { font-size: 14px; font-weight: 600; }
.aviso-periodo-vacio, .aviso-zip-grande { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--personal); border-radius: var(--radio); background: var(--personal-suave); color: var(--personal-texto); font-size: 14px; line-height: 1.45; }
.boton-abrir-plus { min-height: 44px; min-width: 44px; }

/* Versión 4 · V4-5 */
/* Hoja Ayuda → «Pregunta lo que quieras»: campo, contador, casilla de cifras, Preguntar/Cancelar, respuesta y errores. */
.ayuda-asistente:has(.ayuda-ia) { border-style: solid; background: #fff; }
.ayuda-asistente .candado-plus { margin-top: 8px; }
.ayuda-ia { margin-top: 8px; }
.ayuda-ia-etiqueta { margin: 0; }
.ayuda-ia-campo { min-height: 88px; resize: vertical; line-height: 1.45; }
.ayuda-ia-fila { display: flex; justify-content: flex-end; margin-top: 2px; }
.ayuda-ia-contador { font-size: 12px; }
.ayuda-ia-casilla { display: flex; gap: 10px; margin: 6px 0 10px; font-size: 14px; }
.ayuda-ia-casilla input { flex: none; width: 20px; height: 20px; }
.ayuda-ia-preguntar, .ayuda-ia-cancelar, .ayuda-ia-otra-vez { min-height: 44px; }
.ayuda-ia-preguntar:disabled { opacity: .5; cursor: default; }
.ayuda-ia-estado:empty { display: none; }
.ayuda-ia-estado { margin-top: 10px; }
.ayuda-ia-pensando { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; }
.ayuda-ia-pensando .ayuda-ia-cancelar { width: auto; margin-left: auto; padding: 8px 16px; }
/* Punto fijo (sin animaciones, como el resto de la app desde los gráficos): el texto «Pensando…» basta. */
.ayuda-ia-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--negocio); }
.ayuda-ia-respuesta { padding: 10px 12px; border-left: 3px solid var(--negocio); border-radius: var(--radio); background: var(--negocio-suave); }
.ayuda-ia-respuesta.tema-contador { border-left-color: var(--personal); background: var(--personal-suave); }
.ayuda-ia-tu-pregunta { margin: 0 0 6px; font-size: 13px; overflow-wrap: anywhere; white-space: pre-line; }
.ayuda-ia-texto { display: flex; gap: 8px; align-items: flex-start; }
.ayuda-ia-icono { flex: none; font-size: 18px; line-height: 1.4; }
.ayuda-ia-parrafo { margin: 0; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.ayuda-ia-error { margin: 0 0 8px; padding: 10px 12px; border-left: 3px solid var(--personal); border-radius: var(--radio); background: var(--personal-suave); color: var(--personal-texto); line-height: 1.45; }
.ayuda-ia-quedan { margin: 8px 0 0; font-size: 13px; }
.ayuda-ia-nota { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }

/* Versión 4 · V4-6 */
/* «Cotizar hablando» (hoja-cotizar.js): opción del «+», grabar con cuenta atrás, borrador editable y «Cotizaciones» del trabajo. */
.entrada-cotizar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--negocio); border-radius: var(--radio); background: var(--negocio-suave); color: var(--texto); text-align: left; font: inherit; cursor: pointer; }
.entrada-cotizar .opcion-texto { display: flex; flex-direction: column; gap: 2px; }
.cotizar p { line-height: 1.45; }
.ejemplo-cotizar { margin: 8px 0 14px; padding: 10px 12px; border-left: 3px solid var(--negocio); border-radius: var(--radio); background: var(--negocio-suave); font-size: 14px; }
.boton-grabar { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; margin-bottom: 10px; border: 0; border-radius: 32px; background: var(--negocio); color: #fff; font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; }
.boton-grabar:hover { background: var(--negocio-texto); }
.boton-grabar-punto { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #fff; flex: none; }
.grabando-cotizar .boton-grabar-punto, .enviando-cotizar .boton-grabar-punto { background: var(--pierde); }
.grabando-cotizar { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 12px; }
.reloj-cotizar { font-size: 40px; font-variant-numeric: tabular-nums; }
.parcial-cotizar { min-height: 66px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; overflow-wrap: anywhere; }
.enviando-cotizar { display: flex; align-items: center; gap: 10px; }
.campo-cotizar { width: 100%; resize: vertical; }
.contador-cotizar { display: block; margin: 4px 0 8px; text-align: right; }
.aviso-cotizar { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--personal); border-radius: var(--radio); background: var(--personal-suave); color: var(--personal-texto); font-size: 14px; }
.propone-cotizar { margin: 0 0 6px; font-weight: 600; color: var(--negocio-texto); }
.quedan-cotizar { margin: 0 0 10px; }
.dudas-cotizar { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #F5D08A; border-radius: var(--radio); background: var(--personal-suave); }
.dudas-cotizar > strong { display: block; margin-bottom: 8px; }
.dudas-cotizar .campo { width: 100%; min-height: 44px; margin-top: 4px; }
.dudas-cotizar .boton-claro { width: 100%; }
.grupo-cotizar { margin: 0 0 14px; padding: 10px 12px 4px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; min-width: 0; }
.grupo-cotizar legend { padding: 0 4px; font-size: 14px; font-weight: 600; }
.grupo-cotizar .campo { width: 100%; min-height: 44px; }
.concepto-fila { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.concepto-fila > .campo { margin-bottom: 6px; }
.concepto-cifras { display: grid; grid-template-columns: 64px 1fr auto 44px; gap: 8px; align-items: end; }
.concepto-cifras label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.concepto-total { min-width: 72px; padding-bottom: 12px; text-align: right; font-weight: 600; white-space: nowrap; }
.boton-quitar { width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; color: var(--texto-2); font-size: 16px; cursor: pointer; }
.linea-total-cotizar { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 8px; font-size: 16px; }
.total-cotizar { font-size: 20px; color: var(--negocio-texto); }
.porcentaje-anticipo { display: block; margin-top: 4px; min-height: 18px; }
.acciones-cotizar { display: flex; flex-direction: column; gap: 8px; }
.bloque-cotizaciones { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; }
.cotizacion-fila { padding: 10px 0; border-top: 1px solid var(--linea); }
.cotizacion-linea { display: flex; justify-content: space-between; gap: 8px; }
.cotizacion-fila p { margin: 2px 0 8px; }
.cotizacion-fila .fila-botones .boton-claro { flex: 1; min-height: 44px; }
.segmento-cotizacion { margin: 8px 0 0; }
.segmento-cotizacion button { min-height: 44px; }

/* Versión 4 · V4-3 */
/* «Guardar recibos en mi Google Drive» (Ajustes) y «Ver en Drive» en el movimiento. Sin animaciones (probar-v3). */
.drive-ajustes { display: flex; flex-direction: column; gap: 6px; }
.drive-ajustes p { margin: 0; }
.estado-drive { overflow-wrap: anywhere; }
.fila-drive { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fila-drive .boton-drive { min-height: 44px; }
.boton-drive[disabled] { opacity: 0.6; cursor: not-allowed; }
.avance-drive { font-weight: 600; }
.aviso-drive { margin: 4px 0 0; padding: 8px 10px; border: 1px solid #F5D08A; border-radius: var(--radio); background: var(--personal-suave); color: var(--personal-texto); font-size: 14px; }
.aviso-drive[hidden], .avance-drive[hidden] { display: none; }
.boton-reintentar-drive, .boton-volver-subir { min-height: 44px; }
.zona-drive { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.enlace-drive { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; }
.det-foto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Versión 5 · V5-1 */
/* «Tu marca en las cotizaciones» (hoja-marca.js), la miniatura de la marca en el borrador y la hoja «Ver PDF»
   (hoja-cotizar.js). Sigue 11-notas.png y la ficha Cotiza § 8: botones principales en tinta, campos altos, etiquetas
   de sección en mayúsculas pequeñas. Sin animaciones (probar-v3.mjs las prohíbe desde el bloque de gráficos). */
.etiqueta-seccion { margin: 16px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.hoja-marca > .etiqueta-seccion:first-child { margin-top: 6px; }
.hoja-marca label.etiqueta-campo .campo { min-height: 48px; }
/* Estilo: 4 tarjetas tocables; la elegida con borde en tinta y ✓. */
.tarjetas-estilo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tarjeta-estilo { display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 10px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.tarjeta-estilo.elegida { border: 2px solid var(--oscuro); padding: 9px; }
.tarjeta-estilo-nombre { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 16px; }
.tarjeta-estilo-para { font-size: 13px; line-height: 1.35; }
.marca-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--oscuro); color: #fff; font-size: 14px; font-weight: 700; flex: none; }
.dibujo-estilo { display: flex; flex-direction: column; gap: 5px; height: 74px; padding: 9px 10px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; }
.dibujo-estilo .dib { display: block; height: 4px; width: 100%; border-radius: 2px; background: #D0D5DD; }
.dibujo-estilo .dib.oscura { width: 62%; background: #1a1a1a; }
.dibujo-estilo .dib.corta { width: 38%; }
.dibujo-estilo .dib.fina { height: 2px; background: var(--marca); }
.dibujo-estilo .dib.franja { height: 8px; background: var(--marca); }
.dibujo-estilo .dib.cab { height: 22px; border-radius: 3px; background: var(--marca); }
.dibujo-estilo .dib.caja { height: 10px; width: 55%; background: var(--suave); border-left: 3px solid var(--marca); border-radius: 0; }
.dibujo-estilo .dib.centro { align-self: center; }
.dibujo-estilo .dib.rombo { width: 8px; height: 8px; align-self: center; background: var(--marca); transform: rotate(45deg); border-radius: 1px; }
.dibujo-estilo .dib.barra { height: 5px; background: var(--marca); }
.dibujo-estilo .dib.marco { height: 14px; border: 1.5px solid #1a1a1a; border-left: 4px solid var(--marca); border-radius: 4px; background: #fff; }
/* Color: círculos de 44 px; el elegido con anillo en tinta y ✓; «Otro» abre el selector de color del teléfono. */
.colores-marca { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 10px; }
.color-marca { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--c, var(--negocio)); color: var(--ct, #fff); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.color-marca.elegido { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--oscuro); }
.color-marca:focus-visible { outline: 3px solid var(--negocio); outline-offset: 3px; }
.color-otro { background: conic-gradient(#B42318, #E69F00, #067647, #0072B2, #4A2C82, #B42318); }
.color-otro.elegido { background: var(--c); }
.color-otro span { font-size: 11px; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .6); }
.color-otro-entrada { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.aviso-letra-oscura { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--personal); border-radius: var(--radio); background: var(--personal-suave); color: var(--personal-texto); font-size: 14px; }
.aviso-letra-oscura[hidden] { display: none; }
/* Logo: la imagen o un hueco punteado con las iniciales en el color de marca. */
.logo-actual { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.logo-imagen { display: block; max-width: 160px; max-height: 72px; width: auto; height: auto; border: 1px solid var(--linea); border-radius: 8px; padding: 4px; background: #fff; }
.logo-hueco { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 84px; height: 84px; border: 2px dashed #D0D5DD; border-radius: 10px; background: #fff; flex: none; }
.marca-iniciales { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--marca); border-radius: 8px; color: var(--marca); font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 400; letter-spacing: .02em; background: #fff; flex: none; }
.marca-iniciales.grande { width: 44px; height: 44px; font-size: 20px; }
.logo-botones { display: flex; flex-direction: column; gap: 6px; }
.logo-botones .boton-claro { width: auto; min-width: 140px; }
/* La cabecera del documento en pequeño (vista previa de la hoja y miniatura del borrador). */
.marca-mini { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; color: var(--texto); overflow: hidden; }
.marca-mini-logo { display: inline-flex; align-items: center; justify-content: center; }
.marca-mini-logo img { display: block; max-width: 72px; max-height: 40px; width: auto; height: auto; }
.marca-mini-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.marca-mini-nombre { font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-mini-datos { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.marca-mini-doc { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marca); }
.marca-mini.estilo-clasica { border-bottom: 4px solid var(--marca); }
.marca-mini.estilo-moderna { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }
.marca-mini.estilo-moderna .marca-mini-doc { color: var(--marca-texto); }
.marca-mini.estilo-moderna .marca-iniciales { background: #fff; border-color: #fff; }
.marca-mini.estilo-moderna .marca-mini-logo img { background: #fff; padding: 3px; border-radius: 6px; }
.marca-mini.estilo-elegante { grid-template-columns: 1fr; justify-items: center; text-align: center; font-family: Georgia, "Times New Roman", serif; border-bottom: 1px solid var(--marca); }
.marca-mini.estilo-elegante .marca-mini-nombre { font-weight: 400; letter-spacing: .02em; }
.marca-mini.estilo-elegante .marca-mini-doc { letter-spacing: .24em; color: var(--texto-2); }
.marca-mini.estilo-sencilla { border-top: 6px solid var(--marca); }
.marca-mini.estilo-sencilla .marca-mini-doc { color: var(--texto); }
.marca-mini.compacta { grid-template-columns: auto 1fr; gap: 6px; width: 120px; min-height: 44px; padding: 7px 8px; border-radius: 8px; }
.marca-mini.compacta .marca-mini-logo img { max-width: 28px; max-height: 20px; }
.marca-mini.compacta .marca-iniciales { width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; border-radius: 4px; }
.marca-mini.compacta .marca-mini-nombre { font-size: 11px; }
.marca-mini.compacta.estilo-clasica { border-bottom-width: 3px; }
.marca-mini.compacta.estilo-sencilla { border-top-width: 4px; }
.marca-mini.compacta.estilo-elegante { grid-template-columns: auto 1fr; text-align: left; justify-items: start; }
/* Abajo, fija: «Así la verá tu cliente · Estilo», la vista previa y Guardar. */
.acciones-marca { gap: 6px; }
.vista-marca-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; }
.vista-marca .marca-mini { margin: 0 0 4px; }
/* El borrador de «Cotizar hablando»: «Tu cotización» con la miniatura de la marca (o el enlace para ponerla). */
.cabecera-borrador { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; }
.titulo-borrador { margin: 0; font-size: 20px; font-weight: 700; }
.zona-marca-borrador { display: flex; align-items: center; min-height: 44px; }
.enlace-marca { color: var(--negocio-texto); font-weight: 600; text-align: right; }
.boton-miniatura-marca { display: block; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.boton-miniatura-marca:focus-visible { outline: 3px solid var(--negocio); outline-offset: 2px; border-radius: 8px; }
/* Ajustes → Plan Plus: la fila «Tu marca en las cotizaciones». */
.fila-marca { margin: 10px 0 0; }
/* La hoja «Ver PDF»: el documento tal cual, «Guardar PDF» (borde) y «Compartir» (tinta). */
.vista-documento { display: block; margin: 0 0 10px; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: #fff; }
.acciones-ver-pdf .fila-botones > * { flex: 1; min-height: 52px; }
.ayuda-pdf { margin: 0; line-height: 1.45; }

/* Versión 5 · V5-3 */
/* El borrador ampliado «Tu cotización» (hoja-cotizar.js): dudas en ámbar con «?», secciones con etiqueta en mayúsculas,
   autocompletar de clientes y de la lista de precios, conceptos en tarjetas, totales, plan de pagos, condiciones, fotos,
   cobro y «Solo para ti». Sigue 10-borrador-*.png y la ficha Cotiza § 8. Sin animaciones (probar-v3.mjs las prohíbe). */
.seccion-cotizar { margin: 0 0 6px; }
.seccion-cotizar > .etiqueta-seccion { margin-top: 14px; }
.seccion-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.seccion-cotizar .campo { min-height: 48px; }
.seccion-cotizar label.etiqueta-campo { margin-bottom: 12px; }
.campo-select { width: auto; min-width: 64px; min-height: 48px; padding-right: 28px; }
.campo-corto { max-width: 110px; }
.campo-con-tipo { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: stretch; margin-top: 6px; }
.campo-con-tipo .campo { margin-top: 0; }
.campo-error { border-color: var(--pierde); box-shadow: 0 0 0 1px var(--pierde); }
.aviso-campo { display: block; margin: 4px 0 8px; color: var(--personal-texto); }
.aviso-campo:empty, .aviso-campo[hidden] { display: none; }
.etiqueta-propios { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--negocio-suave); color: var(--negocio-texto); font-weight: 600; }
.etiqueta-propios:empty { display: none; }
/* Dudas: tarjeta ámbar con el círculo «?». */
.dudas-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dudas-icono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--personal); color: #fff; font-weight: 700; flex: none; }
.dudas-cabecera strong { margin: 0; }
.nota-dudas { margin: 8px 0 0; color: var(--personal-texto); }
/* Autocompletar: una lista sencilla bajo el campo, con botones de 44 px. */
.zona-sugerencias:empty { display: none; }
.sugerencias { margin: -8px 0 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; overflow: hidden; }
.sugerencia { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--linea); background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.sugerencia:last-child { border-bottom: 0; }
.sugerencia:hover { background: var(--suave); }
.segmento-tipo { margin-bottom: 12px; }
.segmento-tipo button, .segmento-plan button { min-height: 44px; }
/* Conceptos en tarjetas: descripción con ✕; debajo cantidad, precio, (descuento) y total. */
.concepto-tarjeta { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; }
.concepto-cabeza { display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: start; margin-bottom: 8px; }
.concepto-desc-zona { min-width: 0; }
.concepto-desc-zona .sugerencias { margin: 4px 0 0; }
.concepto-tarjeta .concepto-cifras { grid-template-columns: 64px 1fr auto; align-items: end; }
.concepto-tarjeta .concepto-cifras.con-descuento { grid-template-columns: 56px 1fr 96px auto; }
.concepto-tarjeta .concepto-cifras label, .concepto-total-zona { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.concepto-tarjeta .concepto-cifras .campo { min-height: 44px; padding: 8px 10px; }
.concepto-desc .campo-con-tipo { grid-template-columns: auto 1fr; gap: 4px; margin-top: 0; }
.concepto-desc .campo-select { min-width: 44px; padding: 0 4px; text-align: center; }
.concepto-total-zona { align-items: flex-end; }
.concepto-tarjeta .concepto-total { min-width: 0; padding-bottom: 10px; font-size: 16px; }
.origen-precio { display: block; min-height: 18px; margin-top: 4px; }
.origen-precio:empty { display: none; }
.boton-anadir { display: block; width: 100%; min-height: 48px; margin: 4px 0 8px; border: 1px dashed #98A2B3; border-radius: 12px; background: #fff; color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; }
.boton-anadir:hover { background: var(--suave); }
/* Paquetes y extras (solo lectura en esta etapa). */
.paquete-fila { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.paquete-linea { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.paquete-linea p, .paquete-fila p { margin: 2px 0 0; }
.chip-recomendado { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--negocio-suave); color: var(--negocio-texto); font-size: 12px; font-weight: 600; }
.paquete-total { color: var(--texto-2); }
/* Totales: filas con la cifra a la derecha y el Total grande; «Valores en USD». */
.totales-cotizar { margin: 14px 0 6px; padding-top: 10px; border-top: 2px solid var(--oscuro); }
.fila-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 15px; }
.fila-total > span:first-child { display: flex; flex-direction: column; }
.fila-total-campo { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; }
.fila-total-campo .campo-con-tipo { margin-top: 0; }
.fila-total-grande { margin-top: 6px; font-size: 18px; }
.fila-total-grande .total-cotizar { font-size: 30px; color: var(--texto); font-variant-numeric: tabular-nums; }
/* Plan de pagos: segmento y el detalle del anticipo o de las cuotas. */
.plan-anticipo .campo-con-tipo { grid-template-columns: 72px 1fr; }
.porcentaje-anticipo { display: block; margin-top: 4px; min-height: 18px; color: var(--texto-2); }
.porcentaje-anticipo.pierde::before { content: "! "; font-weight: 700; }
.cuota-fila { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.cuota-cabeza { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 6px; }
.cuota-cifras { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.cuota-cifras .campo-con-tipo { margin-top: 0; grid-template-columns: 52px 1fr; }
.cuota-cifras .campo-select { min-width: 52px; padding: 0 4px; text-align: center; }
.cuota-importe { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.cuotas-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; }
.suma-cuotas { font-weight: 600; }
.suma-cuotas.pierde::before { content: "! "; }
/* Condiciones guardadas: cada una con su título y ✕; los chips para añadir más. */
.condicion-fila { display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: start; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.condicion-texto p { margin: 2px 0 0; white-space: pre-wrap; }
.chips-condiciones { flex-wrap: wrap; margin: 0 0 8px; }
.vence-cotizar { display: block; margin-top: 4px; }
/* Fotos: miniaturas de 88 px con ✕ encima; «+ Añadir foto» abre cámara o galería. */
.fotos-cotizar { display: flex; flex-wrap: wrap; gap: 10px; }
.foto-cotizar { position: relative; width: 88px; height: 88px; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: var(--suave); }
.foto-cotizar-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-quitar { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; border-radius: 0 0 0 10px; background: rgba(255, 255, 255, .9); }
.fotos-pie { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.boton-foto { width: auto; min-height: 44px; }
/* Cobro: el interruptor y lo que saldrá. */
.cobro-detalle { margin: -6px 0 10px 28px; overflow-wrap: anywhere; }
.cobro-detalle p { margin: 0 0 4px; }
.cobro-detalle[hidden] { display: none; }
/* «Solo para ti»: caja gris plegable con candado. */
.solo-para-ti { margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--suave); }
.solo-para-ti summary { min-height: 44px; display: flex; align-items: center; gap: 4px; font-weight: 700; cursor: pointer; }
.solo-para-ti > p { margin: 6px 0 10px; }
.costo-fila { display: grid; grid-template-columns: 1fr 130px; gap: 8px; align-items: center; margin: 0 0 8px; }
.costo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.costo-fila .campo-dinero { margin-top: 0; }
.costo-fila .campo { padding-left: 26px; }
/* Barra fija: por qué no se puede guardar, Guardar y Descartar. */
.motivo-bloqueo { margin: 0; font-weight: 600; }
.motivo-bloqueo[hidden] { display: none; }
.acciones-cotizar .boton-oscuro[aria-disabled="true"] { opacity: .7; }
.lista-precios-distintos { margin: 0 0 14px; padding-left: 20px; }
.lista-precios-distintos li { margin: 0 0 4px; }

/* Versión 5 · V5-4 */
/* Paquetes y extras editables en el borrador, la tarjeta de cada cotización del trabajo (estado con icono, segmento de 4,
   historial, acciones), las hojas de elección y de motivo, y las pantallas Precios / Clientes / Plantillas (lista + hoja).
   Sin animaciones ni transiciones. */
.paquete-tarjeta { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; }
.paquete-tarjeta .campo { min-height: 44px; margin-bottom: 8px; }
.paquete-cifras { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.paquete-cifras .concepto-precio { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paquete-cifras .campo { margin-bottom: 0; }
.chip-recomendado-boton { min-height: 44px; padding: 0 12px; margin-bottom: 0; }
.paquete-total-cifra { font-variant-numeric: tabular-nums; }
.extra-tarjeta .concepto-cifras { grid-template-columns: 72px 1fr; }
.enlace-plantilla { width: 100%; justify-content: center; margin-top: 2px; }
/* La tarjeta de una cotización guardada. */
.estado-cot { font-weight: 700; color: var(--texto); }
.estado-cot.estado-aceptada { color: var(--gana); }
.estado-cot.estado-rechazada { color: var(--pierde); }
.estado-cot.estado-pendiente, .estado-cot.estado-vencida { color: var(--texto-2); }
.segmento-cotizacion button { padding: 10px 2px; font-size: 13px; }
.historial-cot { margin: 8px 0 0 !important; }
.acciones-cot { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; margin-top: 2px; }
.acciones-cot .enlace-suave { min-height: 44px; padding: 0 2px; }
.enlace-eliminar { color: var(--pierde); }
/* Hoja «Aceptada»: el paquete elegido y los extras que sumó. */
.eleccion-paquetes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.opcion-eleccion { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.opcion-eleccion > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.opcion-eleccion.activo { border-color: var(--oscuro); box-shadow: 0 0 0 1px var(--oscuro); font-weight: 600; }
.opcion-eleccion.activo > span:first-child > strong::before { content: "✓ "; }
.fila-extra-eleccion { min-height: 44px; }
.eleccion-total { font-size: 26px; }
.chips-motivo { flex-wrap: wrap; margin: 0 0 14px; }
.chips-motivo .chip { min-height: 44px; }
/* Pantallas de listas (Precios, Clientes, Plantillas): cabecera, nota, botón de añadir y filas de 56 px. */
.pantalla-lista { padding-bottom: 24px; }
.pantalla-lista h1 { margin: 0; padding: 0 20px; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.pantalla-lista .cabecera-lista { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 20px; }
.pantalla-lista .cabecera-lista h1, .pantalla-lista .cabecera-lista h2 { padding: 0; }
.pantalla-lista .cabecera-lista h2 { margin: 0; font-size: 17px; font-weight: 700; }
.pantalla-lista > p, .pantalla-lista .bloque-lista > p { padding: 0 20px; }
.nota-lista { margin: 6px 0 12px; }
.boton-anadir-lista { width: calc(100% - 40px); margin: 0 20px 6px; }
.lista-sencilla { margin: 6px 20px 0; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; overflow: hidden; }
.lista-sencilla:empty { display: none; }
.fila-sencilla { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--linea); background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.fila-sencilla:last-child { border-bottom: 0; }
.fila-sencilla:hover { background: var(--suave); }
.fila-sencilla-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.texto-recortado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pantalla-lista .vacio { padding: 16px 20px; }
.bloque-lista { margin-top: 18px; }
.fila-plantilla { margin: 8px 20px 0; padding: 10px 14px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; }
.fila-plantilla .acciones-cot { margin-top: 6px; gap: 0 14px; }
.pantalla-lista .candado-plus { margin: 12px 20px; }
.pantalla-lista .gris + .candado-plus { margin-top: 0; }
/* Hojas de Precios y Clientes. */
.chips-alias { flex-wrap: wrap; margin: -6px 0 14px; }
.chips-alias:empty { display: none; }
.chip-alias { min-height: 44px; }
.fila-alias { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.fila-alias .campo { margin-top: 0; }
.costo-privado { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--suave); }
.costo-privado .etiqueta-campo { margin-bottom: 6px; }
.lista-propia { margin: 0 0 14px; }
.fila-propio { display: grid; grid-template-columns: 1fr 120px 44px; gap: 8px; align-items: center; margin: 0 0 8px; }
.fila-propio-nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila-propio-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.fila-propio .campo-dinero { margin-top: 0; }
.fila-propio .campo { padding-left: 26px; min-height: 44px; }
.cotizaciones-cliente { margin: 4px 0 14px; }
.fila-cot-cliente { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--linea); color: var(--texto); text-decoration: none; }
.aceptado-cliente { margin: 8px 0 0; text-align: right; }
.fila-cotizador strong { font-size: 15px; }

/* Versión 5 · V5-6 */
/* La pantalla Cotizaciones (cifras del mes, botones de cotizar, Por seguir, lista con filtro y buscador, menú), la hoja
   Renovar, la hoja Estadísticas (barras simples en CSS) y la tarjeta «Por seguir» del Mes. Sin animaciones ni transiciones. */
.tono-gana { color: var(--gana); }
.tono-pierde { color: var(--pierde); }
/* Las tres cifras del mes: un botón grande que abre Estadísticas. */
.cifras-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; width: calc(100% - 40px); margin: 10px 20px 0; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.cifras-cot:hover { background: var(--suave); }
.cifra-cot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cifra-cot .cifra-valor { font-size: 24px; letter-spacing: -0.01em; }
.cifra-tasa { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--linea); }
.frase-tasa-cot { font-size: 17px; }
/* Cotizar: hablando (en tinta), escribir y usar una plantilla. */
.acciones-cotizar-pantalla { display: flex; flex-direction: column; gap: 8px; margin: 14px 20px 4px; }
.acciones-cotizar-pantalla .boton-oscuro { width: 100%; }
.acciones-cotizar-pantalla .fila-botones .boton-claro { flex: 1; }
/* Por seguir: tarjetas con el texto del motivo y los dos botones. */
.bloque-seguir .nota-lista { margin-bottom: 8px; }
.tarjeta-seguir { margin: 8px 20px 0; padding: 12px 14px; border: 1px solid var(--linea); border-left: 4px solid var(--oscuro); border-radius: var(--radio-g); background: #fff; }
.tarjeta-seguir .cot-linea { align-items: flex-start; }
.seguir-texto { margin: 6px 0 10px; font-size: 14px; font-weight: 600; }
.seguir-texto .gris { font-weight: 400; }
.tarjeta-seguir .fila-botones .boton-corto { flex: 1; padding-left: 8px; padding-right: 8px; }
/* La lista: chips de filtro (con la cuenta), buscador y tarjetas de cotización. */
.pantalla-cotizaciones .zona-buscador { padding-top: 8px; }
.pantalla-cotizaciones .zona-buscador .campo { margin: 0; }
.chips-filtro { margin: 8px 0 0; padding: 0 20px; overflow-x: auto; flex-wrap: nowrap; }
.chips-filtro .chip { flex: none; }
.chip-cuenta { display: inline-block; min-width: 18px; margin-left: 2px; padding: 0 5px; border-radius: 999px; background: var(--suave); color: var(--texto-2); font-size: 12px; font-weight: 600; text-align: center; }
.chip.activo .chip-cuenta { background: rgba(255, 255, 255, .2); color: #fff; }
.lista-cot { margin: 10px 20px 0; }
.tarjeta-cot { margin: 0 0 8px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; overflow: hidden; }
.tarjeta-cot-enlace { display: block; padding: 12px 14px; color: var(--texto); text-decoration: none; }
.tarjeta-cot-enlace:hover { background: var(--suave); }
.cot-linea { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cot-linea > .fila-sencilla-texto { flex: 1; }
.cot-derecha { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.cot-derecha .estado-cot { font-size: 13px; }
.estado-tarjeta-vencida .tarjeta-cot-enlace { border-bottom: 1px solid var(--linea); }
.boton-renovar { width: 100%; justify-content: center; min-height: 44px; }
.pantalla-cotizaciones .lista-cot .vacio { padding: 16px 4px; }
/* Vacío: el ejemplo de qué decir. */
.vacio-cot { margin: 10px 20px 0; padding: 18px 16px; border: 1px dashed var(--linea); border-radius: var(--radio-g); background: #fff; }
.vacio-cot p { margin: 0 0 8px; }
.ejemplo-dictado { padding: 10px 12px; border-radius: var(--radio); background: var(--suave); font-style: italic; color: var(--texto-2); }
/* Menú: Tu marca, Precios, Clientes, Plantillas y condiciones, ajustes. */
.menu-cotizaciones .tarjeta-salida { width: calc(100% - 40px); margin: 8px 20px 0; }
.menu-cotizaciones .cabecera-lista { margin-bottom: 2px; }
.enlace-plantillas-hoja { margin-top: 8px; color: var(--negocio-texto); text-decoration: none; font-weight: 600; }
/* Hoja Estadísticas: cuentas por estado, tasa, dinero, barras de motivos y paquete más elegido. */
.segmento-periodo button { min-height: 44px; padding: 10px 2px; font-size: 13px; }
.rango-estad { margin: -6px 0 10px; }
.cifras-estad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 6px; }
.cifra-estad { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; }
.cifra-estad .cifra-valor { font-size: 22px; }
.cifra-estad.tono-gana .cifra-valor { color: var(--gana); }
.cifra-estad.tono-pierde .cifra-valor { color: var(--pierde); }
.bloque-estad { margin: 0 0 6px; }
.bloque-estad .etiqueta-seccion { margin-top: 14px; }
.frase-tasa { margin: 0 0 4px; font-size: 17px; }
.bloque-estad .gris.pequeno-13 { margin: 0; line-height: 1.45; }
.linea-estad { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 36px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.linea-estad:last-child { border-bottom: 0; }
.linea-estad strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.barras-motivos { display: flex; flex-direction: column; gap: 8px; }
.barra-motivo-texto { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 3px; font-size: 14px; }
.barra-fondo { height: 10px; border-radius: 999px; background: var(--suave); overflow: hidden; }
.barra-relleno { height: 100%; border-radius: 999px; background: var(--pierde); }
/* Tarjeta «Por seguir» del Mes: misma forma que la de la copia; en el Mes simple va suelta, sin la sección de atención. */
.tarjeta-seguir-mes .copia-titulo .gris { font-weight: 400; }
.tarjeta-seguir-mes .fila-botones a.boton-corto { text-decoration: none; }
@media (max-width: 374px) {
  .cifras-estad { grid-template-columns: 1fr 1fr; }
  .cifra-cot .cifra-valor { font-size: 21px; }
}

/* ---------- Versión 6 · V6-1: tres membresías y vista reducida (plan «Solo cotizador») ---------- */
/* Hoja «Elige tu plan»: tres tarjetas (Básico · Plus · Solo cotizador) en fila cuando cabe; en el teléfono (hasta 599 px) se
   apilan, una debajo de otra, para que a 360 px se lean los precios y lo que incluye cada una. */
.planes.planes-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 599px) {
  .planes.planes-tres { grid-template-columns: minmax(0, 1fr); }
  .planes-tres .columna-plan-botones { flex-direction: row; }
  .planes-tres .columna-plan-botones .opcion-plan { flex: 1 1 0; }
  .planes-tres .opcion-plan-marca-vacia { display: none; }
}
/* Precio fundador del Básico anual: «$49 al año» con el «$59» tachado (texto, no solo el tachado) y la etiqueta debajo. */
.precio-tachado { font-weight: 400; color: var(--texto-2); text-decoration: line-through; }
.opcion-plan-nota { display: block; width: 100%; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--personal-texto); }
.columna-plan .opcion-plan { flex-wrap: wrap; }
/* Barra de abajo en la vista reducida: Cotizaciones · Ajustes (los demás enlaces y el «+» van con hidden / sin-mas). */
body.vista-cotizador .pestanas { justify-content: space-around; }
body.vista-cotizador .capsula { display: none; }
/* Ficha de la cotización (el trabajo visto desde el plan Solo cotizador). */
.ficha-cotizacion .ficha-cliente { margin: 4px 0 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.ficha-finanzas .candado-plus { margin: 6px 0 0; }
/* Ajustes en la vista reducida: la palabra de los trabajos con su nota. */
.ajustes-reducidos .etiqueta-campo .pequeno-13 { margin-top: 4px; }

/* Versión 6 · V6-2a (ingreso: pantalla «¿Qué plan quieres?», bienvenida, «+» en simple) */
/* «¿Qué plan quieres?» (#plan): las tres tarjetas de «Elige tu plan» (columna-plan, apiladas en el teléfono por la regla de
   V6-1), cada una con sus dos precios en una línea, lo que incluye y un solo botón «Probar 15 días gratis». */
.pantalla-plan .asistente-cuerpo { padding-bottom: 24px; }
.pantalla-plan .planes.planes-tres { margin-top: 10px; }
.tarjeta-plan { gap: 8px; }
.tarjeta-plan .columna-plan-nombre { font-size: 20px; }
.tarjeta-plan-precio { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.tarjeta-plan .opcion-plan-nota { margin: -4px 0 0; }
.bloqueo-planes .bloqueo-fundador { margin-top: 6px; } /* V8-11: la nota del fundador, pegada a los precios de la pantalla de bloqueo */
.tarjeta-plan .incluye-plan { margin: 0; }
.tarjeta-plan .boton-probar { width: 100%; min-height: 48px; margin-top: auto; }
/* La tarjeta ya elegida (si se vuelve a la pantalla) lleva un borde más, además del texto «Elegido». */
.tarjeta-plan-elegida { outline: 2px solid var(--negocio); outline-offset: 2px; }
.tarjeta-plan-elegida .marca-elegido { font-size: 13px; font-weight: 700; color: var(--negocio-texto); }
.nota-plan { margin: 14px 0 0; text-align: center; line-height: 1.45; }
.nota-plan-cambiar { margin: 6px 0 0; text-align: center; }
/* Bienvenida: la pregunta «¿Modo simple o completo?» usa las tarjetas del asistente (opcion-asistente); nada nuevo. */
/* fin V6-2a */

/* Versión 6 · V6-2b (hoja «Tu plan», vincular compra, solo lectura por función) */
/* «Elige tu plan» con el plan elegido: los dos botones «Seguir con…» arriba del todo y la tarjeta marcada «Tu elección». */
.planes-seguir { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.planes-seguir .boton-seguir-plan { width: 100%; min-height: 48px; }
.planes-cambiar { margin: 0 0 8px; }
.columna-plan-elegida { border: 2px solid var(--negocio); background: var(--negocio-suave); }
.columna-plan-elegida .opcion-plan { border-color: var(--negocio); }
/* Hoja «Tu plan»: el plan y su fecha arriba; bloques «Subir a…» / «Bajar a…» con su nota y dos botones de 48 px. */
.tu-plan-titulo { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }
.tu-plan-siguiente { margin: 0 0 12px; }
.tu-plan-bloque { margin: 14px 0 0; padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.tu-plan-subtitulo { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.tu-plan-bloque .pequeno-13 { margin: 0 0 8px; }
.tu-plan-botones { display: flex; gap: 8px; }
.tu-plan-botones .opcion-tu-plan { flex: 1 1 auto; min-height: 48px; justify-content: center; text-align: center; flex-wrap: wrap; } /* V8-11: base «auto» para que crezca con la nota del fundador (con base 0, en columna se quedaba en 48 px y la nota se salía) */
.segmento-planes button { min-height: 44px; }
.tu-plan-cancelar { margin: 14px 0 0; }
.tu-plan .planes-correo { margin: 12px 0 0; }
.tu-plan-acciones { flex-wrap: wrap; margin-top: 12px; }
.tu-plan-acciones .boton-claro { flex: 1 1 160px; min-height: 44px; }
.tu-plan .planes-mensaje { margin-top: 10px; }
/* Pantalla de bloqueo: «¿Ya pagaste? Vincular mi compra» centrado bajo los botones. */
.bloqueo .boton-vincular-bloqueo { display: inline-flex; margin: 4px auto 0; }
/* Solo lectura por función (bajó de plan): el aviso arriba, las filas sin flecha ni toque y los botones apagados. */
.aviso-solo-lectura { display: block; margin: 0 0 12px; }
.aviso-solo-lectura .boton-enlace { min-height: 44px; }
.pantalla-lista .aviso-solo-lectura { margin: 0 20px 12px; }
.fila-solo-lectura { cursor: default; }
.fila-solo-lectura:hover { background: none; }
.bloque-solo-lectura .segmento button[disabled], .bloque-solo-lectura .acciones-cot button[disabled] { opacity: 0.45; cursor: not-allowed; }
/* «Elige tu plan»: el aviso «Muy pronto podrás pagar aquí» también justo debajo del botón tocado (sw v6-4). */
.planes-aviso-cerca { margin: 8px 0 0; }
/* fin V6-2b */

/* Versión 6 · V6-3 (cupos definitivos por plan: contador, cupo agotado con «Subir a Plus», «El más elegido») */
/* El contador del cupo en «Cotizar hablando» (pasos inicio y escribir) y en el borrador. */
.cotizar .quedan-cotizar[data-cupo] { margin: 10px 0 0; }
/* El paso «fin» con el cupo agotado: «Subir a Plus» / «Ver planes» arriba y «Cerrar» debajo, los dos de 44 px o más. */
.acciones-fin-cotizar { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.acciones-fin-cotizar .boton-oscuro, .acciones-fin-cotizar .boton-claro { min-height: 44px; width: 100%; }
/* Ajustes → Plan Plus: la fila del cotizador muestra el contador en su propia línea. */
.fila-plus .cupo-cotizador { display: block; margin-top: 2px; color: var(--negocio-texto); }
/* fin V6-3 */

/* Versión 7 · V7-1 (lista de precios: pegar, rubros, importar, precios especiales por cliente) */
/* Precios: «+ Añadir precio», «Pegar mi lista» e «Importar Excel o CSV» juntos; los tres de 44 px. */
.acciones-precios { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 20px 10px; }
.acciones-precios .boton-anadir-lista { width: 100%; margin: 0; min-height: 44px; }
.acciones-precios .boton-claro { flex: 1 1 140px; min-height: 44px; }
/* «Pon tu precio»: ámbar y con texto (el color nunca va solo). */
.pon-tu-precio, .nota-pon-precio { color: var(--personal-texto); font-weight: 600; }
/* «Empezar con la lista de [rubro]». */
.tarjeta-rubros { margin: 0 20px 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: var(--suave); }
.tarjeta-rubros strong { display: block; }
.tarjeta-rubros .campo { width: 100%; min-height: 44px; }
.tarjeta-rubros .boton-claro { width: 100%; min-height: 44px; margin-top: 8px; }
/* Pegar: el ejemplo y el cuadro de texto. */
.ejemplo-lista { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--linea); }
.ejemplo-linea { font-size: 14px; }
.campo-lista { width: 100%; min-height: 160px; font-size: 16px; }
/* La vista previa: una tarjeta por servicio con casilla, nombre, precio y unidad. */
.revisar-lista { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.fila-revisar { display: grid; grid-template-columns: 44px 1fr; gap: 6px; align-items: start; padding: 8px; border: 1px solid var(--linea); border-radius: var(--radio); }
.fila-revisar.fila-quitada { opacity: 0.55; }
.fila-revisar-incluir { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.fila-revisar-incluir input { width: 22px; height: 22px; }
.fila-revisar-campos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fila-revisar-campos .campo { min-height: 44px; width: 100%; }
.fila-revisar-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fila-revisar-cifras .campo-dinero { margin-top: 0; }
.fila-revisar-cifras .campo-dinero .campo { padding-left: 26px; }
.nota-fila { display: block; }
.nota-existe { color: var(--texto-2); }
.nota-especial { color: var(--negocio-texto); font-weight: 600; }
.nota-cliente-lista { margin: 0 0 8px; color: var(--negocio-texto); font-weight: 600; }
.casilla-actualizar { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.casilla-actualizar input { width: 22px; height: 22px; flex: none; }
.acciones-revisar { display: flex; flex-direction: column; gap: 8px; }
.acciones-revisar .boton-oscuro, .acciones-revisar .boton-claro { width: 100%; min-height: 44px; }
.acciones-revisar .boton-oscuro[aria-disabled="true"] { opacity: 0.5; }
/* Importar: el aviso y el paso de columnas. */
.aviso-importar { margin: 8px 0; }
.aviso-importar:empty { display: none; }
.zona-importar .campo { width: 100%; min-height: 44px; }
.zona-importar .boton-oscuro { width: 100%; min-height: 44px; margin-top: 8px; }
/* Ficha del cliente: «Pegar lista para este cliente». */
.boton-pegar-cliente { width: 100%; min-height: 44px; margin: 4px 0 12px; }
/* fin V7-1 */

/* Versión 8 · Etapa 1A (números correctos) */
/* Trabajo con su cotización sin confirmar: «Cotizado» en gris y la pregunta «¿El cliente aceptó…?». */
.cifra-cotizado .cifra-valor { color: var(--texto-2); }
.tarjeta-aceptada {
  margin: 16px 20px 0; padding: 12px 16px; border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff;
}
.tarjeta-aceptada > p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.tarjeta-aceptada .fila-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.fila-por-confirmar .fila-cifra { color: var(--texto-2); font-size: 16px; }
/* Nota corta de un pago sin fecha y sus botones rápidos (cada uno de 44 px). */
.nota-pago { margin-top: 8px; }
.etiqueta-nota .campo-nota { margin-top: 4px; }
.chips-nota { flex-wrap: wrap; margin: 6px 0 0; }
.chips-nota .chip { min-height: 44px; }
.texto-saldo { margin-top: 10px; }
/* Editar · Pagos acordados: la nota ocupa la fila entera bajo el monto y la fecha. */
.cuota-nota { grid-column: 1 / 4; }
/* Borrador de la cotización: cada cuota apila cabeza, cifras y nota (la rejilla de 3 columnas es la de Editar). */
.plan-cuotas .cuota-fila { display: block; }
/* fin V8-1A */

/* Versión 8 · Etapa 2A (planes, contador y barra) */
/* Barra de abajo con 4 o 5 elementos (Mes · {Trabajos} · + · Cotizar · Por revisar): cabe a 360 px; el texto puede ir
   en dos líneas y cada pestaña conserva 52 px de alto. */
.pestanas a { gap: 4px; padding: 0 2px; font-size: 13px; line-height: 1.15; text-align: center; overflow: hidden; overflow-wrap: anywhere; }
.pestanas .pastilla { flex: none; }
body.barra-cinco .pestanas .fab { width: 46px; height: 46px; margin: 2px 6px; }
@media (max-width: 400px) {
  .pestanas a { font-size: 12.5px; }
  body.barra-cinco .pestanas .fab { margin: 2px 4px; }
}
/* «⚙ Ajustes» con el texto visible, arriba a la derecha de Mes, trabajos, Cotizaciones y Por revisar. */
.boton-ajustes {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--linea); border-radius: var(--radio-g); background: #fff; color: var(--texto);
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.boton-ajustes:hover { background: var(--suave); }
.boton-ajustes-icono { font-size: 16px; line-height: 1; }
.barra-ajustes { display: flex; justify-content: flex-end; padding: 8px 14px 0; }
/* Mes: arriba la marca y «Ajustes»; en la fila de abajo, el selector de mes y los iconos. */
.mes-cabecera .boton-ajustes { margin-left: auto; }
.mes-cabecera .mes-acciones { flex-basis: 100%; justify-content: flex-end; }
/* El contador del cupo y, si ya no quedan, el texto del plan con «Pasar a Plus ahora». */
.cupo-agotado-cotizar { margin-top: 8px; }
.cupo-agotado-cotizar .hoja-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cupo-agotado-cotizar .boton-oscuro, .cupo-agotado-cotizar .boton-claro,
.acciones-fin-cotizar .boton-oscuro, .acciones-fin-cotizar .boton-claro { min-height: 44px; }
.cupo-tu-plan { margin: 4px 0 2px; font-weight: 600; }
.cupo-tu-plan-lista { margin: 0 0 10px; }
/* Las líneas bajo «Escribir en vez de hablar» y «Llenar a mano». */
.nota-escribir { margin: 4px 0 0; }
.nota-llenar { margin: 6px 0 0; }
/* fin V8-2A */

/* Versión 8 · Etapa 2B (cotizador: unidades, IVA y empresa) */
/* Tarjeta del concepto: «Cant.» lleva la cantidad y, al lado, la unidad («40 [m²]»). Con descuento, Desc. y Total bajan. */
.concepto-tarjeta .concepto-cifras { grid-template-columns: auto 1fr auto; }
.concepto-tarjeta .concepto-cifras.con-descuento { grid-template-columns: auto 1fr; }
.concepto-tarjeta .concepto-cifras.con-descuento .concepto-total-zona { justify-self: end; text-align: right; }
.concepto-cant { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cant-unidad { display: grid; grid-template-columns: 52px 88px; gap: 4px; }
.cant-unidad .campo-unidad { padding: 8px 4px; font-size: 16px; min-height: 44px; }
/* IVA con tres botones visibles (el elegido en tinta y con ✓) y, debajo, el porcentaje y lo calculado. */
.bloque-iva { margin: 4px 0 6px; }
.segmento-iva { margin: 4px 0 6px; }
.segmento-iva button { min-height: 44px; padding: 10px 2px; font-size: 13px; }
/* «¿Es una empresa? Marcar como empresa»: aviso de un toque bajo Persona / Empresa. */
.sugerir-empresa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -4px 0 12px; color: var(--texto-2); }
.sugerir-empresa[hidden] { display: none; }
.sugerir-empresa .enlace-suave { min-height: 44px; }
/* fin V8-2B */

/* Versión 8 · Etapa 3B (retenciones en cobros a empresas) */
/* «¿Te retuvieron algo?»: bloque plegable en Anotar a mano y en la hoja de Editar. */
.bloque-retencion { margin: 4px 0 12px; border: 1px solid var(--linea); border-radius: 12px; padding: 0 12px; background: var(--suave); }
.bloque-retencion summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.bloque-retencion[open] { padding-bottom: 10px; }
.retencion-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.retencion-ayuda { margin: 4px 0 0; color: var(--texto-2); }
.linea-retenciones { margin: 8px 0 0; }
/* Editar: el cobro con «+ $X retenido» y el enlace se parte en dos líneas (sin cortar el texto). */
.ed-concepto-retencion { display: flex; flex-direction: column; align-items: flex-start; white-space: normal; min-width: 0; }
.ed-concepto .boton-retencion { min-height: 44px; padding: 0; font-size: 13px; }
@media (max-width: 380px) { .retencion-campos { grid-template-columns: 1fr; } }
/* fin V8-3B */

/* Versión 8 · Etapa 3A (lista de precios simplificada) */
.mas-opciones { margin: 4px 0 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.mas-opciones > summary { display: flex; align-items: center; min-height: 44px; padding: 0 14px; cursor: pointer; font-weight: 600; font-size: 14px; }
.mas-opciones[open] > summary { border-bottom: 1px solid var(--linea); margin-bottom: 10px; }
.mas-opciones > :not(summary) { margin-left: 14px; margin-right: 14px; }
.mas-opciones > :last-child { margin-bottom: 12px; }
.nota-cero { margin: -6px 0 10px; }
.mas-formas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: -4px 20px 10px; }
.mas-formas .enlace-suave { min-height: 44px; padding: 0; font-size: 13px; }
.boton-subir-precios { display: block; width: calc(100% - 40px); min-height: 44px; margin: 14px 20px 20px; }
.aviso-sin-precio { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radio); background: #fff7e6; color: #7a4b00; }
.aviso-sin-precio::before { content: "⚠ "; }
.lista-guardar-precios { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.precio-guardar { padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.precio-guardar-cabeza { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; overflow-wrap: anywhere; }
.opciones-guardar { display: flex; flex-direction: column; gap: 6px; }
.opcion-guardar { min-height: 44px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; color: var(--texto-2); font-size: 14px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.opcion-guardar.activo { border-color: var(--oscuro); background: var(--oscuro); color: #fff; font-weight: 600; }
.opcion-guardar:focus-visible { outline: 3px solid #0072B2; outline-offset: 2px; }
.segmento-subir button { min-height: 44px; }
.campo-porcentaje { display: flex; align-items: center; gap: 8px; }
.campo-porcentaje .campo { flex: 1; }
.vista-subir { margin: 8px 0 14px; }
.lista-subir { margin: 6px 0; padding-left: 18px; font-size: 14px; overflow-wrap: anywhere; }
.lista-subir li { margin: 3px 0; }
/* fin V8-3A */

/* V8-3C: «Preparando el micrófono…» (el botón de grabar, deshabilitado mientras arranca la grabación) */
.boton-grabar:disabled, .boton-grabar:disabled:hover { background: #D0D5DD; color: var(--texto-2); cursor: default; }
.boton-grabar:disabled .boton-grabar-punto { background: var(--texto-2); }
/* fin V8-3C */

/* V8-4A: tarjeta «Haz tu primera cotización hablando» del primer Mes y resumen de la bienvenida */
.tarjeta-primera-cotizacion { margin: 12px 20px 0; }
.tarjeta-primera-cotizacion .ejemplo-dictado { margin: 0; font-size: 14px; }
.tarjeta-primera-cotizacion .boton-oscuro { width: 100%; min-height: 44px; }
.tarjeta-primera-cotizacion .enlace-a-mano { align-self: center; min-height: 44px; padding: 0 12px; }
.resumen-personal { display: block; }
/* fin V8-4A */

/* Versión 8 · Etapa 4B (Ajustes plegable, campos de 16 px, áreas táctiles de 44 px y aviso de instalar en iPhone) */
/* Ajustes: cada sección es un <details>; su summary mide 56 px (≥ 44), con el título h2, una línea gris y la flecha. */
.ajustes-grupo { border-bottom: 1px solid var(--linea); }
.ajustes-grupo > summary {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 20px;
  cursor: pointer; list-style: none;
}
.ajustes-grupo > summary::-webkit-details-marker { display: none; }
.ajustes-grupo > summary:focus-visible { outline: 2px solid var(--negocio); outline-offset: -2px; }
.ajustes-grupo-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ajustes-grupo-texto h2 { margin: 0; font-size: 17px; font-weight: 700; }
.ajustes-grupo-texto .gris { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ajustes-grupo-flecha { flex: none; color: var(--texto-2); } /* sin animación (regla de las pruebas: nada se mueve solo) */
.ajustes-grupo[open] > summary .ajustes-grupo-flecha { transform: rotate(90deg); }
.ajustes-grupo-cuerpo .ajustes-seccion:first-child { padding-top: 4px; }
.ajustes-grupo-cuerpo .ajustes-seccion:last-child { border-bottom: 0; }
.ajustes-seccion h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
@media (max-width: 400px) {
  .ajustes-grupo > summary { padding-left: 16px; padding-right: 16px; }
}
/* Campos: red de seguridad de 16 px (el iPhone no hace zoom) para cualquier campo sin tamaño propio. :where() no suma
   especificidad: no le gana a ningún tamaño mayor (como el de los campos de dinero). */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea) { font-size: 16px; }
/* Casillas: toda la fila (la etiqueta) se toca y mide 44 px como mínimo; la casilla visible sigue de 20–22 px. */
.interruptor, .casilla, .casilla-indicador, .ayuda-ia-casilla, .casilla-actualizar, .fila-revisar-incluir, .asignar-fila { min-height: 44px; cursor: pointer; }
.ayuda-ia-casilla { align-items: center; }
/* «Creado por Andrea»: 44 px de alto para el dedo; los márgenes negativos hacen que el pie no crezca. */
.enlace-autora { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 6px; margin: -14px -6px; vertical-align: middle; }
/* Aviso de instalar en iPhone: el texto con la ✕ (44 px) a la derecha. */
.tarjeta-iphone-cabeza { display: flex; align-items: flex-start; gap: 8px; }
.tarjeta-iphone-cabeza p { flex: 1; min-width: 0; }
.iphone-cerrar { flex: none; width: 44px; height: 44px; margin: -10px -10px 0 0; }
.tarjeta-iphone .instalar-pasos { font-size: 14.5px; }
/* Borrador a 360 px con campos de 16 px: Cant. + unidad y Precio se reparten el ancho (antes el precio quedaba en ~40 px). */
.concepto-tarjeta .concepto-cifras.con-descuento { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.concepto-cifras .cant-unidad { grid-template-columns: 52px minmax(0, 1fr); }
/* Cuotas del borrador en el teléfono: «% / $ + valor» e importe arriba, y la fecha debajo a todo lo ancho (la fecha de 16 px
   ya no cabe en la misma fila y empujaba el importe fuera de la pantalla). */
@media (max-width: 420px) {
  .cuota-cifras { grid-template-columns: minmax(0, 1fr) auto; }
  .cuota-cifras > input[type="date"] { grid-column: 1 / -1; grid-row: 2; }
}
/* El aviso de guardado: «Guardar respaldo» y «Reintentar guardar», de 44 px. */
.aviso-guardado-botones .boton-oscuro, .aviso-guardado-botones .boton-claro { flex: 1 1 150px; width: auto; min-height: 44px; padding-left: 10px; padding-right: 10px; }
/* fin V8-4B */

/* Versión 8 · Etapa 5A (copia diaria en Google Drive) */
.copia-drive { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.copia-drive p { margin: 0; }
.titulo-copia-drive { margin: 0; font-size: 15px; }
.linea-copia-drive { overflow-wrap: anywhere; }
.boton-reintentar-copia { min-height: 44px; }
.resultado-copia-drive:empty { display: none; }
/* V8-6: interruptor de la copia diaria (toda la fila se toca: 44 px) y avisos de copia más nueva / copia vieja */
.interruptor-copia-drive { min-height: 44px; margin: 0; align-items: center; }
.aviso-copia-nueva p { margin: 0 0 6px; }
.aviso-copia-nueva .boton-drive { white-space: normal; text-align: center; }
.aviso-copia-vieja { overflow-wrap: anywhere; }
.aviso-tope-subir { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
/* fin V8-5A */

/* Versión 8 · Etapa 5B (adicionales en un trabajo aceptado) */
.cotizacion-adicional { margin-left: 14px; padding-left: 10px; border-left: 3px solid var(--linea); }
.linea-adicional { display: block; font-weight: 600; }
.lista-adicionales { margin: 0 0 8px; padding-left: 18px; color: var(--gris, #5E6B78); }
.lista-adicionales li { margin: 2px 0; overflow-wrap: anywhere; }
.boton-adicional { width: 100%; min-height: 44px; margin-top: 10px; }
.ayuda-adicional { margin: 6px 0 0; }
.linea-incluye-adicionales { display: block; }
@media (max-width: 380px) { .cotizacion-adicional { margin-left: 6px; padding-left: 8px; } }
/* fin V8-5B */

/* V8 · ajustes finales: «Ya tengo cuenta · Entrar» arriba de «¿Qué plan quieres?» (44 px) */
.plan-ya-tengo { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.enlace-ya-tengo { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; color: var(--oscuro); text-decoration: underline; text-underline-offset: 3px; }
/* fin V8 · ajustes finales */

/* V8 · ajustes finales 5–7: en «Anotar a mano», lo que falta sale debajo de su campo (texto rojo con ⚠: el color nunca va solo) */
.aviso-falta { margin: 4px 0 8px; color: var(--pierde); font-weight: 600; }
.aviso-falta::before { content: "⚠ "; }
.aviso-falta[hidden], .aviso-falta:empty { display: none; }
/* fin V8 · ajustes finales 5–7 */

/* V8 · ajuste 8: recordatorio de la prueba en el Mes (tarjeta fina, ámbar suave de aviso; ✕ y botón de 44 px) */
.recordatorio-prueba { display: flex; flex-direction: column; gap: 6px; margin: 10px 20px 0; padding: 10px 12px 10px 14px; border: 1px solid #F5D08A; border-radius: var(--radio-g); background: var(--personal-suave); color: var(--texto); }
.recordatorio-prueba p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.recordatorio-prueba-cabeza { display: flex; align-items: flex-start; gap: 8px; }
.recordatorio-prueba-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.recordatorio-prueba .recordatorio-prueba-fundador { font-size: 13.5px; color: var(--personal-texto); }
.recordatorio-prueba-cerrar { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; }
.recordatorio-prueba-boton { align-self: flex-start; min-height: 44px; }
@media (max-width: 400px) { .recordatorio-prueba { margin-left: 16px; margin-right: 16px; } }
/* fin V8 · ajuste 8 */

/* V8-9: aviso de audio bajo al dictar. Indicador de nivel (barra que se mueve, aria-hidden), la línea «muy bajo»
 (ámbar con ⚠: el color nunca va solo) y el aviso arriba del texto con sus dos salidas de 44 px */
.nivel-voz { height: 8px; margin: 0 auto 10px; max-width: 220px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.nivel-voz-barra { display: block; height: 100%; background: var(--negocio); transform: scaleX(0); transform-origin: left center; } /* sin animación: la app no usa transiciones; se mueve cada ~100 ms */
.muy-bajo-voz { margin: 0 0 10px; color: var(--personal-texto); font-weight: 600; font-size: 14px; text-align: center; }
.muy-bajo-voz:not(:empty)::before { content: "⚠ "; }
.muy-bajo-voz:empty { margin: 0; }
.aviso-audio { margin: 0 0 12px; }
.aviso-audio .aviso-cotizar { margin-bottom: 8px; }
.salidas-audio { display: flex; flex-wrap: wrap; gap: 8px; }
.salidas-audio .boton-claro { flex: 1 1 140px; min-height: 44px; }
/* fin V8-9 */

/* Versión 7 · V7-2 (dictar la lista) */
/* La hoja reutiliza los estilos de «Cotizar hablando» (.cotizar); aquí solo lo propio. */
.dictar-lista .campo-cotizar { width: 100%; min-height: 132px; }
.dictar-lista .hoja-acciones .boton-oscuro { width: 100%; min-height: 44px; }
.dictar-lista .enlace-suave { min-height: 44px; }
/* Los botones que acompañan a un aviso: pegar o importar la lista, o ver los planes. */
.salidas-dictar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.salidas-dictar .boton-claro, .salidas-dictar .boton-oscuro { flex: 1 1 140px; min-height: 44px; }
.boton-cerrar-dictar { width: 100%; min-height: 44px; }
/* Ficha del cliente: «Dictar lista para este cliente», pegado a «Pegar lista…». */
.boton-dictar-cliente { margin-top: 0; }
/* fin V7-2 */