/* Panel web de Gestiona Tus Lucas (F1–F4). Marca: azul marino #0D2B5B, azul eléctrico #1E88FF (botones y enlaces en #1565D8 por contraste AA),
   amarillo #FFC107 solo como acento o relleno, verde #10B981 para relleno (#047857 / #065F46 para texto), fondo #F3F6FA.
   Títulos en Poppins, texto en Inter (autoalojadas: nada sale a Google). Sin build, sin Tailwind. */

@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url("/assets/inter-400-13d63289.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url("/assets/inter-500-8f08d215.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url("/assets/inter-600-9ba793e2.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url("/assets/inter-700-f327e0a6.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url("/assets/poppins-500-ce788af2.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url("/assets/poppins-600-1f3eca1a.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url("/assets/poppins-700-54e23180.woff2") format("woff2"); }

:root {
  --marino: #0D2B5B;
  --marino-2: #123A75;
  --marino-3: #1D4E9E;
  --electrico: #1E88FF;
  --azul: #1565D8;
  --dorado: #FFC107;
  --verde: #10B981;
  --verde-texto: #047857;
  --fondo: #F3F6FA;
  --tarjeta: #FFFFFF;
  --borde: #E3E6EB;
  --borde-suave: #EEF1F4;
  --texto: #0F172A;
  --suave: #5B6474;
  --peligro: #B42318;
  --radio: 14px;
  --sombra-foco: 0 0 0 3px #FFFFFF, 0 0 0 5px #1565D8;
}

* { box-sizing: border-box; }
html { color-scheme: light; }

body.panel {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.panel a { color: var(--azul); }
.panel a:hover { color: var(--marino); }
.panel :focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
.panel .side :focus-visible { outline-color: #FFD54F; }
.h { font-family: Poppins, Inter, system-ui, sans-serif; }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.dorado { color: var(--dorado); }
.derecha { text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Contenedores con scroll propio (tablas anchas, gráficos, pestañas): son también el bloque contenedor de lo que va en position: absolute dentro de ellos (los .sr-only de los
   encabezados «Acciones», los globos). Sin position, ese hijo se escapa del recorte, queda a la derecha de la tabla y ensancha la página entera: scroll horizontal y barra
   inferior (fixed) más ancha que el celular. No se arregla con overflow-x: hidden global. Se revisa con bin/revisar-ancho-movil. */
.tabla-scroll, .grafico-scroll, .flujo-scroll, .pestanas, .segmentos { position: relative; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--marino); color: #fff !important; padding: 10px 16px; border-radius: 8px; z-index: 10; }
.saltar:focus { left: 8px; }

/* ---------- estructura: sidebar + contenido; en el teléfono se apila ---------- */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side {
  background: var(--marino); color: #C9D6EE; padding: 24px 16px; display: flex; flex-direction: column; gap: 28px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-marca { display: flex; align-items: center; gap: 12px; padding: 0 8px; text-decoration: none; }
.panel .side-marca:hover { color: inherit; }
.side-isotipo { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); flex: none; }
.side-nombre { display: block; color: #fff; font-weight: 700; font-size: 16px; line-height: 1.15; }
.side-lema { display: block; color: #A9BBDA; font-size: 12px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #C9D6EE; text-decoration: none;
  font-size: 14px; font-weight: 500; min-height: 44px;
}
.panel .nav-a { color: #C9D6EE; }
.panel .nav-a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.panel .nav-on, .panel .nav-on:hover { background: var(--marino-3); color: #fff; }
.nav-t { flex: 1; }
.side-usuario {
  margin-top: auto; padding: 12px; border-radius: 12px; background: var(--marino-2); display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center;
}
.avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--dorado); color: var(--marino); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.side-usuario-datos { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.side-usuario-datos strong { color: #fff; font-size: 14px; }
.side-usuario-datos span { color: #A9BBDA; font-size: 12px; }
.side-usuario-acciones { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.side-usuario-acciones form { margin: 0; }
.panel .side-usuario-acciones a, .enlace-claro { color: #C9D6EE; font: inherit; font-size: 13px; text-decoration: underline; background: none; border: 0; cursor: pointer; padding: 0 8px; min-height: 44px; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; }
.panel .side-usuario-acciones a:hover, .enlace-claro:hover { color: #fff; }

.main { padding: 28px 32px 56px; display: flex; flex-direction: column; gap: 20px; min-width: 0; max-width: 1280px; }
.main:focus { outline: none; }

/* ---------- tarjetas, títulos, indicadores ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; min-width: 0; }
.tarjeta.vacio { text-align: center; padding: 40px 20px; }
.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.etiqueta { font-size: 12px; color: var(--suave); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.titulo { margin: 4px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.subtitulo { color: var(--suave); font-size: 14px; margin-top: 4px; }
.h2 { margin: 0; font-size: 17px; font-weight: 600; font-family: Poppins, Inter, sans-serif; }
.h2-nota { color: var(--suave); font-size: 13px; margin-top: 2px; }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tarjeta-cab a { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.kpi { display: flex; flex-direction: column; gap: 8px; }
.kpi-valor { font-size: 26px; font-weight: 600; letter-spacing: -.01em; font-family: Poppins, Inter, sans-serif; }
.kpi-pie { font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; color: var(--suave); }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: #F1F5F9; color: #334155; }
.chip-verde { background: #DDF7EC; color: #065F46; }
.chip-ambar { background: #FEF3C7; color: #92400E; }
.chip-azul { background: #E8EEFC; color: #1E40AF; }
.chip-rojo { background: #FDE7E4; color: #B42318; }
.chip-naranja { background: #FFEDD5; color: #9A3412; }
.chip-gris { background: #F1F5F9; color: #334155; }
.chip-ambar-fuerte { background: #F59E0B; color: #3B2300; }
.chip-dorado { background: rgba(255, 193, 7, .16); color: #FFD54F; }
.sube { color: var(--peligro); }
.baja { color: var(--verde-texto); }

.fila-doble { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.fila-doble > .col-2 { flex: 2 1 560px; min-width: 0; }
.fila-doble > .col-1 { flex: 1 1 320px; min-width: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.pila { display: flex; flex-direction: column; gap: 14px; }

/* ---------- botones y formularios ---------- */
.btn, .panel .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #D5DAE1; background: #fff; color: var(--texto);
  font: inherit; font-size: 14px; font-weight: 600; padding: 0 16px; min-height: 44px; border-radius: 10px; cursor: pointer; text-decoration: none;
}
.panel .btn:hover { border-color: var(--azul); color: var(--marino); }
.panel .btn-p { background: var(--azul); border-color: var(--azul); color: #fff; }
.panel .btn-p:hover { background: var(--marino-3); border-color: var(--marino-3); color: #fff; }
.panel .btn-peligro { color: var(--peligro); }
.panel .btn-peligro:hover { border-color: var(--peligro); color: var(--peligro); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.enlace-boton { display: inline-flex; align-items: center; text-decoration: none; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--azul); cursor: pointer; padding: 0 4px; min-height: 44px; }
.enlace-boton.peligro { color: var(--peligro); }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.acciones form { margin: 0; display: contents; }
.pie-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center; border-top: 1px solid var(--borde-suave); padding-top: 16px; }

.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #3B4452; flex: 1 1 150px; }
.campo select, .campo input {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--texto); border: 1px solid #D5DAE1; border-radius: 10px; min-height: 44px; padding: 0 12px; background: #fff; width: 100%;
}
.pila > .campo { flex: none; }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px; }
.filtros .campo-ancho { flex: 2 1 220px; }

.segmentos { display: inline-flex; gap: 2px; padding: 4px; background: #E9EDF1; border-radius: 10px; }
.segmentos a, .segmentos button {
  border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; padding: 0 14px; min-height: 44px; border-radius: 8px; cursor: pointer; color: #3B4452;
  display: inline-flex; align-items: center; text-decoration: none;
}
.panel .segmentos a { color: #3B4452; }
.panel .segmentos a[aria-current="true"], .panel .segmentos a[aria-current="page"] { background: #fff; color: var(--texto); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.aviso { padding: 10px 14px; border-radius: 10px; margin: 0; font-size: 14px; }
.aviso-ok { background: #DDF7EC; color: #065F46; }
.aviso-error { background: #FDE7E4; color: #7A271A; }
.nota-info { font-size: 13px; background: #EEF5FF; color: #1D4E9E; border-radius: 10px; padding: 10px 12px; }
.nota-ambar { font-size: 13px; background: #FEF3C7; color: #7A4A00; border-radius: 10px; padding: 10px 12px; }

/* ---------- gráfico de 12 meses (CSS generado en el servidor) ---------- */
.grafico-scroll { overflow-x: auto; margin-top: 18px; }
.meses { position: relative; min-width: 560px; height: 236px; display: flex; align-items: flex-end; gap: 10px; padding: 0 4px 26px; }
.mes-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; height: 100%; justify-content: flex-end; }
.mes-valor { font-size: 11px; color: var(--suave); }
.mes-barra { width: 100%; max-width: 44px; display: flex; flex-direction: column; justify-content: flex-end; height: 190px; }
.mes-barra .gastado { background: var(--azul); border-radius: 6px; }
.mes-barra .gastado.parcial { border-radius: 0 0 6px 6px; }
.mes-barra .proyectado { background: #9EC5FF; border-radius: 6px 6px 0 0; }
.mes-nombre { position: absolute; bottom: -22px; font-size: 12px; color: #3B4452; font-weight: 500; }
.mes-nombre.actual { font-weight: 700; color: var(--marino); }
.linea-promedio { position: absolute; left: 0; right: 0; border-top: 2px dashed #CBD5E1; }
.leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--suave); flex-wrap: wrap; align-items: center; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.leyenda i.raya { width: 14px; height: 0; border-top: 2px dashed #94A3B8; border-radius: 0; }

.cierre-barra { position: relative; height: 18px; background: #EEF1F4; border-radius: 999px; overflow: hidden; }
.cierre-barra > span { position: absolute; top: 0; bottom: 0; }
.cierre-gastado { left: 0; background: var(--azul); }
.cierre-resto { background: #9EC5FF; }
.cierre-rango { background: repeating-linear-gradient(45deg, #CFE2FF, #CFE2FF 4px, #E8F1FF 4px, #E8F1FF 8px); }
.dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 13px; }
.dos-col dt { color: var(--suave); }
.dos-col dd { margin: 0; font-weight: 600; font-size: 15px; }
.dos-col > div { min-width: 0; }

.barra-h { height: 8px; background: var(--borde-suave); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.barra-h > span { display: block; height: 100%; border-radius: 999px; background: var(--azul); }
.barra-h > span.alto { background: #EA580C; }
.lista-barras { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding: 0; list-style: none; }
.lista-barras .linea { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.lista-barras .linea .monto { display: flex; gap: 10px; }
.delta { font-size: 12px; color: var(--suave); }
.delta.sube { color: var(--peligro); font-weight: 600; }
.delta.baja { color: var(--verde-texto); font-weight: 600; }

.partes { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 16px 0 18px; gap: 2px; }
.grupo-saldo { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--borde-suave); }
.punto { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.grupo-saldo .nombre { font-size: 14px; font-weight: 500; }
.grupo-saldo .detalle { font-size: 12px; color: var(--suave); }
.grupo-saldo > div { flex: 1; min-width: 0; }

.observacion { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: #F8FAFB; border: 1px solid var(--borde-suave); }
.observacion .marca { width: 8px; align-self: stretch; border-radius: 4px; flex: none; }
.observacion .cuerpo { flex: 1; min-width: 0; }
.observacion .cuerpo strong { display: block; font-size: 14px; }
.observacion .cuerpo span { display: block; font-size: 13px; color: var(--suave); margin-top: 2px; }
.observacion form { margin: 0; }
.voto { display: inline-flex; gap: 4px; }
.icono-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--borde); background: #fff; border-radius: 10px; cursor: pointer; color: #3B4452; }
.icono-btn:hover { border-color: var(--azul); color: var(--azul); }
.icono-btn[aria-pressed="true"] { background: #E8F1FF; border-color: var(--azul); color: var(--azul); }

.pendiente { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; text-decoration: none; color: var(--texto); min-height: 44px; }
.panel a.pendiente { color: var(--texto); }
.panel a.pendiente:hover { border-color: var(--azul); }
.sigla { width: 40px; height: 40px; border-radius: 10px; background: #FFF4CC; color: #7A5200; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.cuerpo-chico { flex: 1; min-width: 0; }
.cuerpo-chico strong { display: block; font-size: 14px; }
.cuerpo-chico span { display: block; font-size: 12px; color: var(--suave); }

.metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.metrica .valor { font-size: 22px; font-weight: 600; font-family: Poppins, Inter, sans-serif; }
.metrica .tit, .metrica .nota { font-size: 12px; color: var(--suave); }
.con-lucas { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--fondo); border-radius: 12px; font-size: 13px; color: var(--suave); }
.con-lucas img { width: 44px; height: 44px; border-radius: 10px; flex: none; }

/* ---------- tablas ---------- */
.tabla-scroll { overflow-x: auto; }
.panel table { border-collapse: collapse; width: 100%; font-size: 14px; }
.panel th { text-align: left; font-size: 12px; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.panel td { padding: 0; border-bottom: 1px solid var(--borde-suave); }
.panel td.celda { padding: 12px; }
.panel tr.sel { background: #EEF5FF; }
.celda-enlace { display: block; padding: 12px; color: inherit !important; text-decoration: none; min-height: 44px; }
.celda-enlace:hover { background: #F6F9FE; }
.panel td .celda-enlace .sub { display: block; font-size: 12px; color: var(--suave); }
.paginacion { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--suave); padding: 12px; }
.paginacion .btn { min-height: 44px; }

.detalle-aside { display: flex; flex-direction: column; gap: 14px; flex: 1 1 320px; min-width: 0; }
.fila-partida { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 8px 10px; background: #F8FAFB; border-radius: 8px; }
.items { border: 1px solid var(--borde-suave); border-radius: 10px; overflow: hidden; }
.items .item { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--borde-suave); }
.items .item:last-child { border-bottom: 0; }
.items .item small { display: block; color: var(--suave); font-size: 12px; }
.items .item .der { text-align: right; white-space: nowrap; }
.historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.historial li { display: flex; gap: 8px; align-items: baseline; }
.historial .punto-h { width: 8px; height: 8px; border-radius: 999px; background: var(--azul); flex: none; position: relative; top: 1px; }

/* ---------- Por confirmar ---------- */
.bandeja { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.bandeja-lista { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bandeja-detalle { flex: 3 1 600px; min-width: 0; }
.item-lista { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; color: inherit; border: 1px solid var(--borde); background: #fff; border-radius: 12px; padding: 12px; min-height: 44px; text-decoration: none; }
.panel a.item-lista { color: var(--texto); }
.item-lista:hover { border-color: var(--azul); }
.panel a.item-lista[aria-current="true"] { border-color: var(--azul); box-shadow: 0 0 0 2px #CFE2FF; }
.item-lista .cuerpo-chico { flex: 1; }
.lucas-dice { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lucas-dice img { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--borde); flex: none; }
.lucas-dice p { flex: 1 1 300px; margin: 0; font-size: 15px; }
.progreso { height: 6px; background: var(--borde); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.progreso > span { display: block; height: 100%; background: var(--azul); border-radius: 999px; }
.progreso-cab { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: #3B4452; }
.pregunta { border: 1px solid var(--borde); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 16px; background: #FBFCFE; }
.pregunta h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--marino); font-family: Poppins, Inter, sans-serif; }
.pregunta p { margin: 4px 0 0; color: var(--suave); font-size: 14px; }
.opciones { display: flex; gap: 10px; flex-wrap: wrap; }
.opciones form { flex: 1 1 180px; display: flex; margin: 0; }
.opcion {
  flex: 1; border: 1px solid #C9D3E3; background: #fff; font: inherit; font-size: 15px; font-weight: 600; padding: 0 18px; min-height: 48px; border-radius: 12px; cursor: pointer; color: var(--marino);
}
.opcion:hover { border-color: var(--azul); background: #F3F8FF; }
.opcion.sugerida { border-color: var(--azul); }
.resumen-boleta h2 { margin: 8px 0 0; font-size: 24px; font-weight: 600; font-family: Poppins, Inter, sans-serif; }
.partidas { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.partidas .fila-partida { font-size: 15px; padding: 12px 14px; background: var(--fondo); border-radius: 10px; }
.partidas .total { display: flex; justify-content: space-between; font-size: 15px; padding: 12px 14px; border-top: 2px solid var(--marino); font-weight: 700; }
.datos-simples { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; font-size: 14px; }
.datos-simples dt { color: var(--suave); font-size: 12px; }
.datos-simples dd { margin: 0; font-weight: 600; }
.cita { font-size: 15px; background: var(--fondo); border-radius: 12px; padding: 14px; }
.ajustes { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 14px; background: #F8FAFB; border: 1px solid var(--borde-suave); border-radius: 12px; }
.ajustes form { display: contents; }
details.ajustar > summary { cursor: pointer; list-style: none; }
details.ajustar > summary::-webkit-details-marker { display: none; }
.aviso-guardian { display: flex; flex-direction: column; gap: 6px; }

/* ---------- acceso y páginas públicas (login, privacidad) con la marca ---------- */
body.acceso { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 24px 16px 48px; }
.acceso-marca { padding: 8px 0 20px; }
.acceso-marca img { max-width: 100%; height: auto; display: block; }
.acceso-main { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.acceso-main.ancho { max-width: 780px; }
.acceso-main:focus { outline: none; }
.acceso-main .tarjeta h2 { font-family: Poppins, Inter, sans-serif; font-size: 18px; margin: 24px 0 8px; }
.acceso-main .tarjeta h1 { font-family: Poppins, Inter, sans-serif; font-size: 26px; margin: 0 0 8px; }
.acceso-main .tarjeta ul { padding-left: 20px; }
.qr { max-width: 240px; margin: 16px 0; padding: 12px; background: #fff; border: 1px solid var(--borde); border-radius: 8px; }
.qr svg { width: 100%; height: auto; display: block; }

.kpi-pregunta { font-size: 13px; font-weight: 600; color: var(--marino-3); margin-top: -4px; }
.historia-texto { margin: 0; font-size: 16px; line-height: 1.7; }
.historia { border-left: 4px solid var(--dorado); }

/* ---------- ayudas «?» y cuadratura ---------- */
.etiqueta-ayuda { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ayuda { flex: none; }
.ayuda > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; margin: -12px -12px 0 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--azul); }
.ayuda > summary::-webkit-details-marker { display: none; }
.ayuda > summary::before { content: "?"; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--azul); display: inline-flex; align-items: center; justify-content: center; }
.ayuda > summary { font-size: 0; }
.ayuda > summary::before { font-size: 13px; }
.ayuda[open] > summary::before { background: var(--azul); color: #fff; }
.ayuda > p, .ayuda > .globo { position: absolute; z-index: 3; left: 12px; right: 12px; margin: 4px 0 0; padding: 10px 12px; background: #fff; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 6px 24px rgba(15, 23, 42, .18); font-size: 13px; font-weight: 400; color: var(--texto); text-transform: none; letter-spacing: 0; line-height: 1.45; }
.kpi, .tarjeta.kpi, .hormiga, .sobrante, .desplegable, .historia { position: relative; }
.ayuda > .globo p { margin: 0 0 6px; }
.ayuda > .globo p:last-child { margin-bottom: 0; }
.cuadratura { width: 100%; margin-top: 10px; }
.cuadratura th { text-align: left; font-weight: 500; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--texto); border-bottom: 1px solid var(--borde-suave); padding: 10px 4px; white-space: normal; }
.cuadratura td { text-align: right; padding: 10px 4px; border-bottom: 1px solid var(--borde-suave); font-weight: 600; white-space: nowrap; }
.cuadratura tr.total th, .cuadratura tr.total td { border-top: 2px solid var(--marino); border-bottom: 0; font-weight: 700; }

/* ---------- Reportes ---------- */
.acordeon { border-radius: 10px; }
.acordeon[open] { background: var(--fondo); }
.acordeon > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 8px; cursor: pointer; list-style: none; }
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon .flecha { color: var(--suave); transition: transform .15s; display: inline-block; }
.acordeon[open] .flecha { transform: rotate(90deg); }
.acordeon-nombre { flex: 1 1 140px; font-weight: 500; font-size: 14px; min-width: 0; }
.acordeon-barra { flex: 1 1 100px; margin-top: 0; }
.acordeon-monto { flex: 0 0 150px; text-align: right; font-size: 14px; }
.acordeon-detalle { padding: 0 8px 8px 30px; }
.panel .acordeon-fila { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 8px; border-radius: 8px; color: var(--texto); text-decoration: none; }
.panel .acordeon-fila:hover { background: #fff; color: var(--texto); }
.duo { display: flex; align-items: flex-end; gap: 6px; height: 200px; min-width: 288px; padding-bottom: 22px; position: relative; }
.duo-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.duo-barras { display: flex; align-items: flex-end; gap: 2px; height: 100%; width: 100%; justify-content: center; }
.duo-barras span { width: 40%; max-width: 14px; border-radius: 4px 4px 0 0; display: block; }
.mes-nombre-s { position: absolute; bottom: -20px; font-size: 11px; color: #3B4452; }
.linea-evolucion { width: 100%; height: 180px; display: block; }
.informe-caja { background: var(--fondo); border-radius: 12px; padding: 16px; font-size: 14px; }
.informe-caja ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Lucas y seguridad ---------- */
.interruptor { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 600; }
.ajuste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--borde-suave); }
.ajuste > div:first-child { flex: 1 1 220px; }
.evento { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--borde-suave); }
.evento .punto-e { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.evento form { margin: 0; }

/* ---------- Configuración ---------- */
.pestanas { display: flex; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--borde); }
.panel .pestana { color: var(--suave); font-size: 14px; font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; padding: 0 4px; }
.panel .pestana[aria-current="page"] { color: var(--texto); border-bottom-color: var(--azul); }
.panel .sub-item { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 8px; border-radius: 8px; color: var(--texto); text-decoration: none; font-size: 14px; }
.panel .sub-item:hover { background: #F6F9FE; color: var(--texto); }
.panel .sub-item[aria-current="true"] { background: #E8F1FF; color: #1D4E9E; }
.arbol { max-height: 70vh; overflow-y: auto; }
.fila-lista { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border: 1px solid var(--borde); border-radius: 10px; min-height: 52px; }
.fila-lista form { margin: 0; }
.panel code { background: #F1F5F9; padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* ---------- «Cuéntale a Lucas» en la web (F3 · L3) ----------
   Un campo y, debajo, lo que Lucas contesta (tarjetas chicas con los mismos botones de Por confirmar). Móvil primero: todo en una columna, botones a todo el ancho. */
.lucas-campo { margin-bottom: 16px; gap: 12px; }
.lucas-ayuda { margin: 4px 0 0; font-size: 13px; }
.lucas-formulario { display: flex; flex-direction: column; gap: 10px; }
.lucas-formulario .campo, .lucas-corregir .campo { flex: none; }
.lucas-enviar, .lucas-todos, .lucas-acciones .btn, .lucas-acciones form, .lucas-corregir .btn, .lucas-pregunta .btn { width: 100%; justify-content: center; }
.lucas-acciones form, .lucas-pregunta form { display: block; margin: 0; }
.lucas-conversacion:empty { display: none; }
.lucas-conversacion { gap: 12px; }
.lucas-mensaje { display: block; }
.lucas-leyendo { margin: 0; padding: 10px 12px; background: #EEF5FF; color: #1D4E9E; border-radius: 10px; font-size: 14px; }
.lucas-respuesta { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.lucas-respuesta p { margin: 0; background: var(--fondo); border-radius: 12px; padding: 10px 12px; font-size: 14px; overflow-wrap: anywhere; min-width: 0; }
.lucas-avatar { border-radius: 8px; flex: none; margin-top: 4px; }
.lucas-leyo { margin: 0 0 8px; font-size: 13px; }
.lucas-tarjeta { border: 1px solid var(--borde); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #FBFCFE; margin-bottom: 10px; min-width: 0; }
.lucas-tarjeta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lucas-tarjeta-titulo { font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.lucas-tarjeta-monto { font-size: 20px; font-weight: 600; }
.lucas-tarjeta-linea { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.lucas-tarjeta .nota-ambar { margin: 0; }
.lucas-pregunta { border: 1px dashed var(--borde); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.lucas-pregunta p { margin: 0; font-size: 13px; }
.lucas-acciones { display: flex; flex-direction: column; gap: 8px; }
.lucas-corregir { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--borde-suave); padding-top: 10px; }
@media (min-width: 768px) {
  .lucas-formulario { flex-direction: row; align-items: flex-end; }
  .lucas-formulario .campo { flex: 1 1 auto; }
  .lucas-enviar, .lucas-todos { width: auto; }
  .lucas-acciones { flex-direction: row; flex-wrap: wrap; }
  .lucas-acciones .btn, .lucas-acciones form { width: auto; }
  .lucas-corregir { flex-direction: row; align-items: flex-end; }
  .lucas-corregir .campo { flex: 1 1 auto; }
  .lucas-corregir .btn { width: auto; }
}

/* ---------- Cuenta, banner y «Plan y pagos» (F5b · C4, C8) ----------
   Se diseña para 375 px primero: una columna, botones a todo el ancho y apilados, el historial como lista (no tabla), nada de scroll horizontal. */
.banner-cuenta { display: flex; flex-direction: column; gap: 10px; border-radius: var(--radio); padding: 14px 16px; margin: 0 0 16px; border: 1px solid; }
.banner-pausa { background: #FEF3C7; border-color: #F5D77A; color: #5E3B00; }
.banner-prueba { background: #EEF5FF; border-color: #C9DBFB; color: #1D4E9E; }
.banner-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.banner-texto strong { font-size: 15px; }
.banner-boton { width: 100%; justify-content: center; text-align: center; }
.lucas-en-pausa { border-color: #F5D77A; background: #FFFBEB; }
.plan { gap: 16px; }
.plan-estado { margin: 0; font-size: 15px; }
.plan-sub { font-size: 17px; margin: 0; }
.plan-nota { margin: 0; font-size: 13px; }
.plan-datos { grid-template-columns: minmax(0, 1fr); }
.plan-datos dd { overflow-wrap: anywhere; }
.plan-activar, .plan-historial { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--borde-suave); padding-top: 16px; }
.plan-form { gap: 12px; }
.plan-opciones { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-opcion { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 14px 14px 14px 44px; border: 2px solid var(--borde); border-radius: 12px; cursor: pointer; min-height: 64px; background: #fff; }
.plan-opcion input { position: absolute; left: 14px; top: 18px; width: 20px; height: 20px; margin: 0; accent-color: var(--azul); }
.plan-opcion:has(input:checked) { border-color: var(--azul); background: #F3F8FF; }
.plan-opcion:has(input:focus-visible) { box-shadow: var(--sombra-foco); }
.plan-nombre { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.plan-precio { font-family: Poppins, Inter, sans-serif; font-weight: 700; font-size: 18px; white-space: nowrap; }
.plan-precio small { font-family: Inter, sans-serif; font-weight: 500; font-size: 12px; color: var(--suave); }
.plan-ahorro { grid-column: 1 / -1; font-size: 12.5px; color: var(--verde-texto); }
.plan-etiqueta { background: var(--dorado); color: #3B2A00; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; }
.mp-brick { min-height: 56px; min-width: 0; }
.mp-brick[aria-busy="true"]::before { content: "Cargando el formulario de pago…"; color: var(--suave); font-size: 13px; }
.plan-acciones { gap: 10px; border-top: 1px solid var(--borde-suave); padding-top: 16px; }
.plan-detalle { border: 0; padding: 0; }
.plan-detalle[open] { border: 1px solid var(--borde); border-radius: 12px; padding: 4px 12px 14px; }
.plan-detalle > summary { width: 100%; justify-content: center; list-style: none; cursor: pointer; }
.plan-detalle > summary::-webkit-details-marker { display: none; }
.plan-detalle > form { margin-top: 12px; }
.plan-cancelar { gap: 6px; }
.plan-cancelar-form { margin: 0; }
.plan-cancelar .btn, .plan-detalle .btn, .plan-form .btn { width: 100%; }
.pagos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pago-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; font-size: 14px; }
.pago-fecha { flex: 1 1 140px; min-width: 0; font-weight: 600; }
.pago-monto { font-weight: 700; }
.pago-periodo { flex: 1 1 100%; font-size: 12.5px; }
@media (min-width: 768px) {
  .banner-cuenta { flex-direction: row; align-items: center; justify-content: space-between; }
  .banner-boton { width: auto; flex: none; }
  .plan-datos { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .plan-opciones { flex-direction: row; }
  .plan-opcion { flex: 1 1 0; }
  .plan-cancelar .btn, .plan-detalle .btn, .plan-form .btn { width: auto; }
  .plan-detalle > summary { width: auto; display: inline-flex; }
  .plan-acciones { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .plan-detalle[open] { flex: 1 1 100%; }
  .pago-periodo { flex: 0 1 auto; }
}

/* ---------- celular (< 768 px) ----------
   Con JavaScript (clase .con-js en <html>): barra superior + cajón con el menú (Stimulus `menu`) + atajos abajo. Sin JavaScript: la barra lateral queda a la vista, apilada.
   Regla de diseño: toda pantalla nueva se diseña también para 375 px; la navegación en celular es un menú desplegable, nunca botones en fila. */
.topbar, .menu-fondo, .atajos, .menu-cerrar { display: none; }
@media (max-width: 767px) {
  .shell { display: block; }
  .side { position: static; height: auto; padding: 16px; gap: 16px; }
  .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-usuario { margin-top: 0; }
  .main { padding: 20px 16px 48px; }
  .titulo { font-size: 24px; }
  .nav-a { padding: 8px 10px; font-size: 13px; gap: 8px; }

  .con-js .topbar {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; min-height: 56px; padding: 6px 8px 6px 12px;
    padding-top: max(6px, env(safe-area-inset-top)); background: var(--marino); color: #fff;
  }
  .topbar-marca { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .topbar-isotipo { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
  .topbar-titulo { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-boton {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
  }
  .topbar-boton:hover, .topbar-boton[aria-expanded="true"] { background: rgba(255, 255, 255, .2); }
  .topbar-punto {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #F59E0B; color: #3B2300;
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  }
  .con-js .panel :focus-visible, .con-js .topbar :focus-visible { outline-color: #FFD54F; }

  .con-js .menu-fondo { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(13, 43, 91, .55); opacity: 0; visibility: hidden; }
  .con-js .menu-abierto .menu-fondo { opacity: 1; visibility: visible; }
  .con-js .side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(320px, 86vw); height: auto; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 16px 16px max(16px, env(safe-area-inset-bottom)); gap: 20px; box-shadow: 8px 0 32px rgba(13, 43, 91, .35);
    transform: translateX(-100%); visibility: hidden;
  }
  .con-js .menu-abierto .side { transform: none; visibility: visible; }
  .con-js .nav { display: flex; flex-direction: column; }
  .con-js .nav-a { font-size: 15px; padding: 10px 12px; gap: 12px; }
  .con-js .side-usuario { margin-top: auto; }
  .con-js .menu-cerrar {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
  }
  .con-js .menu-cerrar:hover { background: rgba(255, 255, 255, .2); }
  .con-js .side-marca { padding-right: 52px; }
  html.menu-bloqueado { overflow: hidden; }

  .con-js .main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .con-js .atajos {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--borde);
    padding: 4px 4px max(4px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(13, 43, 91, .08);
  }
  .panel .atajo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; border-radius: 10px; color: var(--suave); text-decoration: none; font-size: 11px; font-weight: 600; text-align: center; }
  .panel .atajo-on, .panel .atajo-on:hover { color: var(--azul); background: #E8F1FF; }
  .atajo-icono { position: relative; display: inline-flex; }
  .atajo-globo {
    position: absolute; top: -6px; left: 100%; margin-left: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #F59E0B; color: #3B2300;
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  }
  .atajo-t { line-height: 1.1; }
}
@media (max-width: 767px) {
  /* Las pestañas de Configuración no se apilan en 3 filas: van en una sola, con desplazamiento de lado (Stimulus `pestanas` deja a la vista la actual). */
  .pestanas { flex-wrap: nowrap; overflow-x: auto; gap: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pestanas::-webkit-scrollbar { display: none; }
  .panel .pestana { flex: none; white-space: nowrap; }
  .segmentos { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmentos::-webkit-scrollbar { display: none; }
  .segmentos a, .segmentos button { flex: none; white-space: nowrap; }
}
@media (max-width: 767px) {
  /* Movimientos: cada fila es una tarjeta chica (descripción y monto arriba; fecha y categoría abajo) en vez de una tabla de 6 columnas que esconde el monto. La cuenta y el origen están en el detalle. */
  .tabla-mov, .tabla-mov tbody { display: block; }
  .tabla-mov thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tabla-mov tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--borde-suave); }
  .panel .tabla-mov td { border: 0; min-width: 0; }
  .tabla-mov td:nth-child(2) { grid-column: 1 / 3; grid-row: 1; }
  .tabla-mov td:nth-child(6) { grid-column: 3; grid-row: 1; }
  .tabla-mov td:nth-child(1) { grid-column: 1; grid-row: 2; }
  .tabla-mov td:nth-child(3) { grid-column: 2 / 4; grid-row: 2; }
  .tabla-mov td:nth-child(4), .tabla-mov td:nth-child(5) { display: none; }
  .tabla-mov td:nth-child(1) .celda-enlace, .tabla-mov td:nth-child(3) .celda-enlace { min-height: 0; padding-top: 0; }
  .tabla-mov td:nth-child(2) .celda-enlace { padding-bottom: 4px; }
}
@media (max-width: 480px) {
  .tarjeta { padding: 16px; }
  .metricas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Filtros de Movimientos: dos campos por fila en vez de uno bajo otro. */
  .filtros { gap: 10px; }
  .filtros .campo { flex: 1 1 130px; min-width: 0; }
  .filtros .campo-ancho, .filtros .campo:nth-child(2) { flex-basis: 100%; }
  /* Reportes: el nombre y el monto en la primera línea y la barra debajo, a todo el ancho (antes la barra le comía el nombre). */
  .acordeon > summary, .acordeon-fila { flex-wrap: wrap; row-gap: 2px; }
  .acordeon-nombre { flex: 1 1 0; }
  .acordeon-monto { flex: 0 0 auto; }
  .acordeon-barra { order: 3; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .opcion, .celda-enlace, .nav-a { transition: background-color .12s, border-color .12s; }
  @media (max-width: 767px) {
    .con-js .side { transition: transform .2s ease-out, visibility 0s linear .2s; }
    .con-js .menu-abierto .side { transition: transform .2s ease-out; }
    .con-js .menu-fondo { transition: opacity .2s, visibility 0s linear .2s; }
    .con-js .menu-abierto .menu-fondo { transition: opacity .2s; }
  }
}
@media print { .side, .controles, .acciones, .topbar, .atajos, .menu-fondo { display: none !important; } .shell { display: block; } }

/* F4.4 · gasto hormiga: tono tranquilo, sin rojo; ámbar solo para «pasaste el cupo». */
.tipos-de-gasto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 20px; margin: 0; }
.tipos-de-gasto dt { font-weight: 600; font-size: 14px; }
.tipos-de-gasto dd { margin: 2px 0 0; color: var(--suave); font-size: 13px; }
.hormiga-fila { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.hormiga-top { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.hormiga-salida { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--borde-suave); }
.hormiga-salida.pasaste { background: #FEF3C7; color: #7A4A00; padding: 6px 10px; border-radius: 8px; border-top: 0; }

/* F4.6 · el Resumen como dashboard: cada KPI es nombre + cifra + UNA línea; lo que explica va al «?» o a un desplegable. */
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-linea { font-size: 13px; color: var(--suave); line-height: 1.35; }
.kpi-ambar { color: #92400E; }
.kpi-barra { height: 8px; border-radius: 999px; background: #E3EAF6; overflow: hidden; }
.kpi-barra > span { display: block; height: 100%; background: var(--azul); border-radius: 999px; }
.alerta-suave { margin: 0; padding: 10px 14px; background: #FFF8E1; border-left: 4px solid var(--dorado); border-radius: 8px; font-size: 15px; font-weight: 500; }
.ayuda > .globo { z-index: 4; }
.historia-plegada > summary, .detalle > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 14px; color: var(--azul); }
.historia-plegada[open] > summary, .detalle[open] > summary { color: var(--marino); }
.desplegable > summary { cursor: pointer; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: "▾"; color: var(--azul); margin-left: 4px; }
.desplegable[open] > summary::after { content: "▴"; }
.desplegable > summary > .h2 { flex: 1; font-size: 17px; font-weight: 600; font-family: Poppins, Inter, sans-serif; }
.desplegable:target { box-shadow: 0 0 0 2px var(--azul); }
.h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; font-family: Inter, sans-serif; }
.lista-falta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }

.flujo-scroll { overflow-x: auto; }
.flujo { display: block; width: 100%; min-width: 460px; max-width: 680px; margin: 0 auto; height: auto; font-family: Inter, system-ui, sans-serif; }
.flujo a { cursor: pointer; }
.flujo a:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.flujo a:hover .fl-barra { filter: brightness(.92); }
.fl-cero { stroke: #94A3B8; stroke-width: 1.2; }
.fl-conector { stroke: #94A3B8; stroke-width: 1; stroke-dasharray: 3 3; }
.fl-barra { fill: #64748B; }
.fl-partiste { fill: #64748B; }
.fl-ingresos, .fl-llegan { fill: #0E9F8E; }
.fl-gastado, .fl-falta { fill: #1565D8; }
.fl-ahorro { fill: #7C3AED; }
.fl-otros { fill: #94A3B8; }
.fl-hoy, .fl-fin { fill: #64748B; }
.fl-estimado { fill-opacity: .28; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 4 3; }
.fl-llegan.fl-estimado { stroke: #0E9F8E; }
.fl-falta.fl-estimado { stroke: #1565D8; }
.fl-fin.fl-estimado { stroke: #64748B; }
.fl-fin.fl-ambar { fill: #D97706; stroke: #B45309; }
.fl-valor { font-size: 11px; font-weight: 600; fill: var(--texto); }
.fl-valor-ambar { fill: #92400E; }
.fl-nombre { font-size: 11px; fill: var(--suave); }

@media (max-width: 1199px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; }
  .kpi-valor { font-size: 20px; }
}
@media (max-width: 480px) { .flujo { min-width: 0; } .fl-valor { font-size: 13px; } .fl-nombre { font-size: 12.5px; } .fl-aprox { display: none; } }

/* ---------- Onboarding (F4): barra, /panel/empezar, burbujas, estados vacíos y contador de historia ----------
   Todo a 375 px primero: una columna, botones a todo el ancho y apilados (nunca en fila), objetivos de 44 px. Sin scroll horizontal. */
.onb-barra { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.onb-barra-compacta { margin: 0 0 16px; padding: 10px 14px; }
.onb-barra-cabeza { display: flex; flex-direction: column; gap: 6px; }
.onb-barra-titulo { margin: 0; font-weight: 600; font-size: 16px; color: var(--marino); }
.onb-barra-siguiente { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: #E8EEFC; color: #1E40AF; font-weight: 600; font-size: 14px; text-decoration: none; }
.onb-barra-siguiente:hover { background: #D9E4FB; color: var(--marino); }
.onb-barra-siguiente-texto { min-width: 0; overflow-wrap: anywhere; }
.onb-progreso { height: 10px; border-radius: 999px; background: #E3E8F0; overflow: hidden; position: relative; }
.onb-progreso > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--electrico), var(--verde)); }
@media (prefers-reduced-motion: no-preference) { .onb-progreso > span { transition: width .4s ease; } }
@media (min-width: 768px) {
  .onb-barra-cabeza { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .onb-barra-siguiente { padding: 0 14px; }
}
.onb-guia-enlace { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.onb-guia-form { display: contents; }
.onb-guia-boton { background: transparent; border: 0; color: var(--azul); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px; padding: 0 4px; text-decoration: underline; }

.empezar-subtitulo { margin: 4px 0 0; }
.empezar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.empezar-paso { order: -1; min-width: 0; }
.empezar-columna-lista { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 900px) {
  .empezar { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; }
  .empezar-paso { order: 0; }
}
.empezar-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.empezar-lista-caja { padding: 10px; }
.empezar-tarea-fila { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 10px; text-decoration: none; color: var(--texto); }
a.empezar-tarea-fila:hover { background: #F3F6FA; color: var(--marino); }
.empezar-tarea-activa .empezar-tarea-fila { background: #E8EEFC; }
.empezar-tarea-nombre { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.empezar-tarea-hecha .empezar-tarea-nombre { color: var(--suave); font-weight: 500; }
.empezar-marca { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #C5CCD8; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; }
.empezar-tarea-hecha .empezar-marca, .empezar-marca-ok { background: var(--verde); border-color: var(--verde); }
.empezar-marca-ok { width: 20px; height: 20px; flex-basis: 20px; font-size: 12px; }
.empezar-lucas { display: flex; align-items: center; gap: 12px; padding: 12px; background: #FFF8E1; border: 1px solid #FDE9A9; border-radius: var(--radio); }
.empezar-lucas-avatar { border-radius: 16px; flex: 0 0 auto; }
.empezar-lucas-dice { margin: 0; font-size: 14px; }
.empezar-hechas { padding: 10px 12px; background: #F8FAFB; border: 1px solid var(--borde-suave); border-radius: 12px; }
.empezar-cuentas { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.empezar-cuentas li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.empezar-formulario { margin: 0; }
.empezar-mas > summary { list-style: none; cursor: pointer; }
.empezar-mas > summary::-webkit-details-marker { display: none; }
.empezar-mas[open] > summary { margin-bottom: 14px; }
.empezar-omitir { display: block; }
.empezar-omitir .btn { width: 100%; }
.campo-ayuda { font-size: 12.5px; font-weight: 400; }
.check-fila { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 500; }
.check-fila input { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; }
.empezar .btn-p, .empezar .btn, .empezar-listo .btn { width: 100%; }
@media (min-width: 768px) { .empezar .btn-p, .empezar .btn { width: auto; } .empezar .empezar-omitir .btn { width: auto; } }

/* fichas de tipo de cuenta: radios grandes, de a dos por fila en el teléfono */
.fichas { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.fichas legend { grid-column: 1 / -1; padding: 0 0 4px; }
.ficha { position: relative; display: block; min-width: 0; }
.ficha input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ficha-cara { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 56px; padding: 8px; border: 2px solid var(--borde); border-radius: 12px; background: #fff; font-weight: 600; font-size: 14px; }
.ficha input:checked + .ficha-cara { border-color: var(--azul); background: #E8EEFC; color: var(--marino); }
.ficha input:focus-visible + .ficha-cara { outline: 3px solid var(--azul); outline-offset: 2px; }
@media (min-width: 768px) { .fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* el saldo de una tarjeta es «lo que debes»: el texto cambia según la ficha elegida, sin JavaScript */
.saldo-tarjeta { display: none; }
.empezar-cuenta-form:has(input[value="tarjeta_credito"]:checked) .saldo-tarjeta { display: inline; }
.empezar-cuenta-form:has(input[value="tarjeta_credito"]:checked) .saldo-normal { display: none; }

.empezar-fijos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.empezar-fijo { border: 1px solid var(--borde-suave); border-radius: 12px; padding: 4px 12px 10px; background: #fff; }
.empezar-fijo-campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.empezar-qr { display: none; }
@media (min-width: 768px) { .empezar-qr.solo-escritorio { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .empezar-qr .qr { width: 200px; } }
.empezar-incentivo { margin: 0; padding: 10px 12px; background: #FFF8E1; border-radius: 10px; font-size: 14px; }
.empezar-pendiente { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.empezar-pendiente .btn { width: 100%; }
@media (min-width: 768px) { .empezar-pendiente { flex-direction: row; align-items: center; justify-content: space-between; } .empezar-pendiente .btn { width: auto; } }
.empezar-listo { align-items: flex-start; }
.empezar-queviene { margin: 0; padding-left: 20px; }

/* burbujas (Driver.js): colores de la marca, objetivos de 44 px y, en el teléfono, la burbuja anclada abajo como una hoja */
.driver-popover.burbuja { background: #fff; color: var(--texto); border-radius: 14px; padding: 16px; max-width: 340px; font-family: Inter, system-ui, sans-serif; box-shadow: 0 10px 30px rgba(13, 43, 91, .25); }
.driver-popover.burbuja .driver-popover-title { font-family: Poppins, Inter, sans-serif; font-size: 16px; font-weight: 600; color: var(--marino); }
.driver-popover.burbuja .driver-popover-description { font-size: 14px; color: var(--texto); line-height: 1.5; }
.driver-popover.burbuja .driver-popover-footer { flex-wrap: wrap; gap: 8px; }
.driver-popover.burbuja .driver-popover-footer button { min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #D5DAE1; background: #fff; color: var(--texto); font: inherit; font-size: 14px; font-weight: 600; text-shadow: none; cursor: pointer; }
.driver-popover.burbuja .driver-popover-next-btn, .driver-popover.burbuja .driver-popover-footer button.driver-popover-next-btn { background: var(--azul); border-color: var(--azul); color: #fff; }
.driver-popover.burbuja .driver-popover-close-btn { min-width: 44px; min-height: 44px; color: var(--suave); }
.driver-popover.burbuja .driver-popover-progress-text { color: var(--suave); font-size: 12px; }
@media (max-width: 767px) {
  .driver-popover.burbuja { position: fixed !important; inset: auto 8px 8px 8px !important; max-width: none; width: auto; transform: none !important; }
  .driver-popover.burbuja .driver-popover-arrow { display: none; }
}

/* estados vacíos y contador de historia */
.vacio-onb { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.vacio-onb .btn { width: 100%; }
@media (min-width: 768px) { .vacio-onb .btn { width: auto; } }
.historia-contador { display: flex; flex-direction: column; gap: 8px; }
.historia-contador .onb-progreso { height: 8px; }
.ejemplo-marca { display: inline-flex; padding: 2px 8px; border-radius: 6px; background: #FEF3C7; color: #92400E; font-size: 12px; font-weight: 600; }
.reportes-ejemplo { opacity: .75; }
/* el campo «Cuéntale a Lucas» dentro de un paso: la columna es angosta en 1024 px, así que va siempre en columna y con los botones a todo el ancho */
.empezar .lucas-formulario, .empezar .lucas-corregir { flex-direction: column; align-items: stretch; }
.empezar .lucas-enviar, .empezar .lucas-acciones .btn, .empezar .lucas-corregir .btn { width: 100%; }
.empezar .lucas-acciones { flex-direction: column; }
/* pagos fijos: el monto y el día aparecen al marcar el pago (sin :has() se ven siempre, y todo sigue funcionando) */
@supports selector(:has(a)) { .empezar-fijo:not(:has(input[type="checkbox"]:checked)) .empezar-fijo-campos { display: none; } .empezar-fijo:not(:has(input[type="checkbox"]:checked)) { padding-bottom: 4px; } }
.empezar-cuentas-compartir { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ---------- Plataforma · cola de voz (F6b · X6) ---------- */
.voz-plano { display: flex; align-items: flex-end; gap: 4px; height: 150px; min-width: 288px; position: relative; border-bottom: 1px solid var(--borde-suave); }
.voz-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.voz-barra { display: block; width: 70%; max-width: 18px; background: #1565D8; border-radius: 4px 4px 0 0; }
.voz-barra.sobre { background: #EA580C; }
.voz-umbral { position: absolute; left: 0; right: 0; border-top: 2px dashed #B42318; pointer-events: none; }
.voz-umbral > span { position: absolute; right: 0; bottom: 2px; font-size: 11px; font-weight: 600; color: #B42318; background: #fff; padding: 0 4px; border-radius: 4px; }