/* Cuentas por cobrar · demo de infoweb.mx
   Paleta: marino #0D2440 · marino 2 #18406B · papel #F3F6FA · blanco · verde dinero #0F7A4E · rojo alerta #C61A2E · vino #741020
   Tipos: Archivo (expandida para cifras y títulos) · Public Sans (texto) · Courier Prime (solo el recibo) */

[hidden] { display: none !important; }

:root {
  --marino: #0D2440;
  --marino-2: #18406B;
  --marino-3: #23507F;
  --papel: #F3F6FA;
  --blanco: #FFFFFF;
  --linea: #D7DFE8;
  --tinta: #0B1B2B;
  --gris: #4F6176;
  --verde: #0F7A4E;
  --verde-b: #1F9E63;
  --verde-c: #E3F4EA;
  --rojo: #C61A2E;
  --vino: #741020;
  --ambar: #E2A019;
  --cab: 120px;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(13, 36, 64, .06), 0 6px 20px rgba(13, 36, 64, .07);
  --f-cifra: 'Archivo', 'Arial Narrow', sans-serif;
  --f-texto: 'Public Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + .5rem); }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--f-texto); font-size: 1rem; line-height: 1.5;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
body.con-capa { overflow: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: var(--marino-2); }
h1, h2, h3 { font-family: var(--f-cifra); font-stretch: 112%; line-height: 1.12; margin: 0 0 .4em; color: var(--marino); letter-spacing: -.01em; }
h2 { font-size: 1.28rem; font-weight: 800; }
h3 { font-size: 1.02rem; font-weight: 800; margin-top: 1.5rem; text-transform: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--marino); color: #fff; padding: .6rem 1rem; z-index: 100; }
.saltar:focus { left: .5rem; }
:focus-visible { outline: 3px solid #2F6FDE; outline-offset: 2px; }
.ojo { font-family: var(--f-cifra); font-stretch: 110%; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 700; color: var(--gris); margin: 0 0 .3rem; }
.lema { color: var(--gris); margin: 0 0 .8rem; max-width: 60ch; }
.vacio { color: var(--gris); font-style: italic; margin: .4rem 0; }
.ayuda { color: var(--gris); font-size: .86rem; margin: .4rem 0; }
.link { background: none; border: 0; padding: 0; color: var(--marino-2); text-decoration: underline; font-weight: 700; cursor: pointer; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- cabecera ---------- */
.demo-banner { background: #2b2620; color: #f2ece1; text-align: center; font-size: .78rem; line-height: 1.35; padding: .32rem .8rem; letter-spacing: .01em; }
@media (min-width: 640px) { .demo-banner { font-size: .86rem; } }
.cab { position: sticky; top: 0; z-index: 30; background: var(--marino); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.cab-barra { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; padding: .5rem 1rem .55rem; }
.marca { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; margin-right: auto; }
.marca-ico { width: 34px; height: 34px; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.05; }
.marca-txt strong { font-family: var(--f-cifra); font-stretch: 115%; font-weight: 800; font-size: 1.02rem; }
.marca-txt small { color: #A9BFD8; font-size: .74rem; }
.cab-acciones { display: flex; gap: .35rem; }
.btn-icono { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; display: grid; place-items: center; cursor: pointer; }
.btn-icono svg { width: 21px; height: 21px; }
.btn-icono[aria-pressed="true"] .ico-off, .btn-icono[aria-pressed="false"] .ico-on { display: none; }
.rol { order: 3; width: 100%; display: grid; grid-template-columns: 1fr 1fr; background: rgba(255, 255, 255, .1); border-radius: 12px; padding: 3px; }
.rol button { border: 0; background: none; color: #C9D8E8; padding: .45rem .4rem; border-radius: 9px; font-weight: 700; font-size: .9rem; cursor: pointer; }
.rol button[aria-pressed="true"] { background: #fff; color: var(--marino); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
@media (min-width: 760px) {
  .rol { order: 0; width: auto; display: flex; }
  .rol button { padding: .45rem .9rem; }
}

/* ---------- estructura ---------- */
.app { max-width: 1180px; margin: 0 auto; padding: 1rem 1rem 1.5rem; }
.app:focus { outline: none; }
.intro { margin: .4rem 0 1rem; }
.intro h1 { font-size: 1.9rem; font-weight: 900; }
.bloque { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.1rem 1rem; margin: 1.1rem 0; }

/* ---------- saludo y cifras ---------- */
.saludo { display: flex; gap: .85rem; align-items: center; margin: .2rem 0 .8rem; }
.saludo-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--sombra); flex: none; }
.saludo h1 { margin: 0; display: flex; flex-direction: column; }
.h1-chico { font-size: .95rem; font-weight: 700; color: var(--gris); font-stretch: 100%; }
.cifra-gigante { font-size: clamp(2.1rem, 10vw, 3.6rem); font-weight: 900; font-stretch: 118%; color: var(--marino); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.saludo .lema { display: none; }
@media (min-width: 760px) { .saludo-foto { width: 86px; height: 86px; } .saludo .lema { display: block; margin-top: .4rem; } }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-bottom: .8rem; }
.kpi { background: #fff; border-radius: 12px; padding: .7rem .8rem; box-shadow: var(--sombra); display: flex; flex-direction: column; border-top: 4px solid var(--linea); min-width: 0; }
.kpi-et { font-size: .78rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: .3rem; }
.kpi-et svg { width: 18px; height: 18px; }
.kpi strong { font-family: var(--f-cifra); font-stretch: 110%; font-size: 1.32rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.kpi small { color: var(--gris); font-size: .78rem; }
.kpi-venc { border-top-color: var(--rojo); }
.kpi-venc strong { color: var(--rojo); }
.kpi-pv { border-top-color: var(--verde-b); }
.kpi-pv strong { color: var(--verde); }
.kpi-rec { border-top-color: var(--ambar); background: linear-gradient(100deg, #fff 50%, #FFF6DD); }
.kpi-rec strong { color: var(--marino); }
@media (max-width: 759px) {
  .kpi { padding: .45rem .5rem; border-top-width: 3px; }
  .kpi-et { font-size: .66rem; letter-spacing: .03em; }
  .kpi-et svg { width: 13px; height: 13px; }
  .kpi strong { font-size: .98rem; font-stretch: 100%; }
  .kpi small { display: none; }
  .saludo { margin-bottom: .55rem; gap: .6rem; }
  .saludo-foto { width: 52px; height: 52px; }
}
.kpi-rec.golpe { animation: golpe .35s ease; }
@keyframes golpe { 40% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(226, 160, 25, .35), var(--sombra); } }
@media (min-width: 760px) { .kpis { grid-template-columns: 1fr 1fr 1.2fr; gap: .6rem; } .kpi strong { font-size: 1.55rem; } }

/* ---------- el campo de burbujas (la firma) ---------- */
.campo-wrap {
  background: var(--marino); color: #fff; border-radius: 18px; padding: 1rem .8rem .8rem; margin: 0 -.4rem 1rem;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 28px 28px; box-shadow: 0 10px 30px rgba(13, 36, 64, .25);
}
.campo-cab { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; justify-content: space-between; padding: 0 .2rem .4rem; }
.campo-cab h2 { color: #fff; margin: 0 0 .15rem; font-size: 1.15rem; }
.campo-cab p { margin: 0; color: #B6C8DC; font-size: .84rem; }
@media (max-width: 520px) {
  .campo-cab { gap: .5rem; }
  .campo-cab h2 { font-size: 1.02rem; }
  .campo-wrap { padding-top: .75rem; }
  .btn-cinco { padding-top: .38rem; padding-bottom: .38rem; font-size: .98rem; }
  .btn-cinco-n { width: 28px; height: 28px; }
  #guia-1 { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 .6rem; padding: .45rem .7rem; margin: .4rem 0 .3rem; }
  #guia-1 .guia-paso { grid-column: 1 / -1; }
  #guia-1 p { font-size: .86rem; margin: 0; }
}
.btn-cinco {
  display: inline-flex; align-items: center; gap: .55rem; border: 0; cursor: pointer; border-radius: 999px;
  background: #F5C543; color: var(--marino); font-family: var(--f-cifra); font-stretch: 112%; font-weight: 900; font-size: 1.02rem;
  padding: .55rem 1.1rem .55rem .55rem; box-shadow: 0 4px 0 #B88912, 0 8px 18px rgba(0, 0, 0, .3); transition: transform .12s;
}
.btn-cinco:active { transform: translateY(2px); box-shadow: 0 2px 0 #B88912; }
.btn-cinco-n { width: 32px; height: 32px; border-radius: 50%; background: var(--marino); color: #F5C543; display: grid; place-items: center; font-size: 1.1rem; }
.btn-cinco[aria-pressed="true"] { background: #fff; box-shadow: 0 4px 0 #8DA2BA, 0 8px 18px rgba(0, 0, 0, .3); }
@media (max-width: 520px) { .btn-cinco { width: 100%; justify-content: center; } }
.rec-campo { display: inline-flex; align-items: baseline; gap: .45rem; margin: .2rem .2rem .3rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(245, 197, 67, .14); border: 1px solid rgba(245, 197, 67, .5); }
.rec-campo span { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #F5D98A; font-weight: 700; }
.rec-campo strong { font-family: var(--f-cifra); font-stretch: 112%; font-weight: 900; color: #fff; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.rec-campo.golpe { animation: golpe2 .35s ease; }
@keyframes golpe2 { 40% { transform: scale(1.08); background: rgba(245, 197, 67, .35); } }
.campo { position: relative; width: 100%; touch-action: manipulation; }
#campo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.burb { cursor: pointer; outline: none; }
.burb .flota { animation: flota 6s ease-in-out infinite; }
@keyframes flota { 50% { transform: translate(0, -3px); } }
.burb .b-c { stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; transition: fill .6s; }
.burb .b-halo { fill: none; stroke: #F5C543; stroke-width: 3; opacity: 0; }
.burb:focus-visible .b-halo, .burb:hover .b-halo { opacity: .8; }
.burb .b-foto { opacity: 0; transition: opacity .35s; pointer-events: none; }
.burb .b-brillo { pointer-events: none; }
.burb .b-txt { pointer-events: none; text-anchor: middle; font-family: var(--f-cifra); transition: opacity .3s; }
.b-nom { font-weight: 700; font-stretch: 85%; }
.b-monto { font-weight: 900; font-stretch: 100%; font-variant-numeric: tabular-nums; }
.burb.tocada .b-foto { opacity: 1; }
.burb.tocada .b-txt { opacity: 0; }
.burb.tocada .flota { animation: tocada .7s ease forwards; }
@keyframes tocada { 40% { transform: scale(1.22); } 100% { transform: scale(1.12); } }
.burb.cobrando .b-halo { opacity: 1; stroke: #6CE3A4; }
.burb.liquidada .flota { animation: liquida .7s ease forwards; }
@keyframes liquida { to { transform: scale(0); opacity: 0; } }
.burb.guia-pulso .b-halo { animation: pulso 1.3s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: .2; stroke-width: 3; } 50% { opacity: 1; stroke-width: 7; } }
.modo-cinco .burb { transition: opacity .45s; }
.modo-cinco .burb:not(.top) { opacity: .2; }
.modo-cinco .burb.top .b-halo { opacity: 1; stroke: #F5C543; stroke-width: 4; }
.b-num circle { fill: #F5C543; stroke: var(--marino); stroke-width: 2.5; }
.b-num text { fill: var(--marino); font-family: var(--f-cifra); font-weight: 900; font-size: 14px; text-anchor: middle; }
.b-num:not([hidden]) { animation: aparece .45s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes aparece { from { opacity: 0; } }
.leyenda { list-style: none; padding: 0; margin: .6rem .2rem .2rem; display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .78rem; color: #C9D8E8; }
.leyenda li { display: flex; align-items: center; gap: .3rem; }
.leyenda i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255, 255, 255, .5); }
.campo-pie { margin: .3rem .2rem 0; font-size: .78rem; color: #9FB4CB; }

/* panel «Cobra estos cinco» */
.cinco { background: #fff; color: var(--tinta); border-radius: 14px; padding: 1rem; margin-top: .6rem; }
.cinco.entra { animation: sube .5s cubic-bezier(.2, .9, .3, 1); }
@keyframes sube { from { transform: translateY(16px); opacity: 0; } }
.cinco-titulo { font-family: var(--f-cifra); font-stretch: 108%; font-weight: 800; font-size: 1.15rem; line-height: 1.2; margin: 0 0 .3rem; color: var(--marino); }
.cinco-pct { display: inline-block; font-size: 2.1rem; font-stretch: 120%; font-weight: 900; color: var(--verde); font-variant-numeric: tabular-nums; vertical-align: -.12em; }
.cinco-sub { font-size: .84rem; color: var(--gris); margin: 0 0 .6rem; }
.cinco-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.cinco-lista button { width: 100%; display: grid; grid-template-columns: auto 48px minmax(0, 1fr); gap: .6rem; align-items: center; text-align: left; border: 1px solid var(--linea); background: var(--papel); border-radius: 12px; padding: .45rem .6rem; cursor: pointer; }
.cinco-n { width: 26px; height: 26px; border-radius: 50%; background: #F5C543; color: var(--marino); display: grid; place-items: center; font-family: var(--f-cifra); font-weight: 900; }
.cinco-lista img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.cinco-info { min-width: 0; }
.cinco-l1 { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.cinco-info strong { line-height: 1.2; }
.cinco-info small { color: var(--gris); font-size: .78rem; line-height: 1.25; display: block; }
.cinco-monto { white-space: nowrap; font-family: var(--f-cifra); font-weight: 800; color: var(--rojo); font-variant-numeric: tabular-nums; }

/* antigüedad */
.antig-barra { display: flex; height: 26px; border-radius: 8px; overflow: hidden; gap: 2px; margin: .4rem 0 .8rem; }
.antig-barra span { min-width: 4px; }
.antig-lista { list-style: none; padding: 0; margin: 0; }
.antig-lista li { display: grid; grid-template-columns: 14px 1fr auto 3.2rem; gap: .5rem; align-items: center; padding: .38rem 0; border-bottom: 1px solid #EDF1F5; font-size: .94rem; }
.antig-lista i { width: 12px; height: 12px; border-radius: 3px; }
.antig-lista strong { font-variant-numeric: tabular-nums; font-family: var(--f-cifra); }
.antig-lista small { color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; }
.antig-total { border-bottom: 0 !important; font-weight: 700; }
.antig-total strong { font-size: 1.1rem; }

/* la distribuidora */
.fotos-negocio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .6rem 0 1rem; }
.fotos-negocio figure { margin: 0; }
.fotos-negocio img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.fotos-negocio figcaption { font-size: .78rem; color: var(--gris); margin-top: .2rem; }
.equipo { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 700px) { .equipo { grid-template-columns: 1fr 1fr; } }
.persona { display: flex; gap: .7rem; align-items: center; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: .5rem; text-align: left; }
button.persona { cursor: pointer; }
.persona img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.persona strong { display: block; }
.persona span span, .persona div span { font-size: .82rem; color: var(--gris); }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 12px; border: 2px solid transparent; padding: .7rem 1rem; font-weight: 800; cursor: pointer; text-decoration: none; line-height: 1.15; min-height: 46px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-pago { background: var(--verde); color: #fff; }
.btn-pago:hover:not(:disabled) { background: #0B6640; }
.btn-sec { background: #fff; color: var(--marino); border-color: var(--linea); }
.btn-sec:hover:not(:disabled) { border-color: var(--marino-3); }
.btn-alerta { background: var(--rojo); color: #fff; }
.btn-grande { width: 100%; font-size: 1.1rem; min-height: 54px; margin-top: .6rem; }
.btn-chico { min-height: 40px; padding: .45rem .75rem; font-size: .9rem; border-radius: 10px; }
.btn-wa { background: #0F7A6E; color: #fff; }
.btn-wa:hover { background: #0B6359; }
.ico-wa { width: 22px; height: 22px; flex: none; }

/* ---------- clientes ---------- */
.buscar { display: flex; align-items: center; gap: .5rem; background: #fff; border: 2px solid var(--linea); border-radius: 12px; padding: 0 .8rem; margin-bottom: .7rem; }
.buscar svg { width: 20px; height: 20px; color: var(--gris); }
.buscar input { border: 0; outline: none; padding: .75rem 0; width: 100%; font: inherit; background: none; }
.buscar:focus-within { border-color: var(--marino-3); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.chips button { border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: .38rem .8rem; font-size: .88rem; font-weight: 600; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--marino); color: #fff; border-color: var(--marino); }
.lista-suma { font-weight: 700; color: var(--gris); margin: .3rem 0 .5rem; }
.lista-cli { display: grid; gap: .5rem; }
@media (min-width: 760px) { .lista-cli { grid-template-columns: 1fr 1fr; } .lista-suma { grid-column: 1 / -1; } }
.tarjeta-cli { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: .7rem; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: .5rem; text-align: left; cursor: pointer; box-shadow: var(--sombra); }
.tarjeta-cli:hover { border-color: var(--marino-3); }
.tarjeta-cli img { width: 72px; height: 58px; border-radius: 10px; object-fit: cover; }
.tc-info strong { display: block; line-height: 1.2; }
.tc-info small { color: var(--gris); font-size: .8rem; display: block; }
.tc-cal { display: inline-block; margin-top: .2rem; font-size: .74rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.nivel-puntual.tc-cal { background: #DDF2E6; color: #0B5E3C; }
.nivel-tarda.tc-cal { background: #FBEFCF; color: #6B4A00; }
.nivel-perseguir.tc-cal { background: #FBE2D5; color: #8A3108; }
.nivel-riesgo.tc-cal { background: #F7D9DE; color: #741020; }
.tc-saldo { text-align: right; }
.tc-saldo b { display: block; font-family: var(--f-cifra); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tc-saldo small { font-size: .74rem; color: var(--gris); }
.tc-saldo small.venc { color: var(--rojo); font-weight: 700; }

/* ---------- capa / hoja ---------- */
.capa { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.capa-fondo { position: absolute; inset: 0; background: rgba(8, 20, 36, .55); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.hoja { position: relative; background: var(--papel); width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; border-radius: 20px 20px 0 0; animation: hoja .32s cubic-bezier(.2, .9, .3, 1); outline: none; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
@keyframes hoja { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 760px) { .capa { align-items: center; } .hoja { border-radius: 20px; max-height: 88vh; } }
.hoja-cerrar { position: sticky; top: .6rem; float: right; margin: .6rem .6rem -3rem 0; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(13, 36, 64, .78); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hoja-cerrar svg { width: 20px; height: 20px; }
.ficha { padding: 1rem 1rem 1.4rem; }
.ficha h2 { font-size: 1.45rem; }
.capa-chica .hoja { max-width: 460px; }
.foto-grande { width: 100%; border-radius: 12px; margin: .4rem 0 1rem; }
.ficha-foto { margin: 0; position: relative; }
.ficha-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; max-height: 300px; }
.ficha-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1rem .8rem; color: #fff; background: linear-gradient(transparent, rgba(8, 20, 36, .88)); }
.ficha-foto h2 { color: #fff; margin: .1rem 0; font-size: 1.5rem; }
.ficha-foto span { font-size: .86rem; color: #DCE6F1; }
.ficha-tipo { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem !important; font-weight: 700; }
.alerta-no { background: #F7D9DE; color: var(--vino); border-radius: 10px; padding: .55rem .75rem; font-weight: 700; margin: 0 0 .8rem; }
.ficha-saldo { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .5rem; margin-bottom: .7rem; }
.ficha-saldo div { background: #fff; border-radius: 12px; padding: .55rem .6rem; box-shadow: var(--sombra); min-width: 0; }
.ficha-saldo span { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.ficha-saldo strong { font-family: var(--f-cifra); font-size: clamp(.86rem, 3.6vw, 1.1rem); font-stretch: 96%; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ficha-saldo div:first-child strong { font-size: clamp(.95rem, 4vw, 1.3rem); }
@media (max-width: 420px) { .ficha-saldo { grid-template-columns: 1fr 1fr; } .ficha-saldo div:first-child { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; } .ficha-saldo div:first-child strong { font-size: 1.5rem; } }
.fs-venc strong { color: var(--rojo); }
.limite p { margin: .3rem 0 0; font-size: .84rem; color: var(--gris); }
.limite-barra { height: 10px; background: #E1E8F0; border-radius: 99px; overflow: hidden; }
.limite-barra i { display: block; height: 100%; background: var(--marino-3); border-radius: 99px; }
.limite-barra.excede i { background: var(--rojo); }
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0 .4rem; }
.acciones .btn-pago { grid-column: 1 / -1; font-size: 1.08rem; }
@media (min-width: 560px) { .acciones { grid-template-columns: 1.3fr 1fr 1fr; } .acciones .btn-pago { grid-column: auto; } .capa-recibo .acciones, .capa-chica .acciones, .capa-rec .acciones { grid-template-columns: 1fr 1fr; } }

/* termómetro */
.termo { background: #fff; border-radius: 14px; padding: .7rem .8rem .5rem; box-shadow: var(--sombra); }
.termo-svg { width: 100%; height: auto; display: block; }
.termo-mercurio { animation: mercurio 1s cubic-bezier(.2, .9, .3, 1); transform-origin: left; transform-box: fill-box; }
@keyframes mercurio { from { transform: scaleX(.05); } }
.termo-escala { display: grid; grid-template-columns: 30fr 25fr 25fr 20fr; font-size: .68rem; color: var(--gris); margin: .1rem 0 0 10%; line-height: 1.15; }
.termo-nivel { margin: .4rem 0 0; font-family: var(--f-cifra); font-size: 1.2rem; }
.termo-nivel strong { font-weight: 900; }
.termo-nivel span { color: var(--gris); font-size: .9rem; font-variant-numeric: tabular-nums; }
.nivel-puntual .termo-nivel strong { color: var(--verde); }
.nivel-tarda .termo-nivel strong { color: #8A5C00; }
.nivel-perseguir .termo-nivel strong { color: #A63C0C; }
.nivel-riesgo .termo-nivel strong { color: var(--vino); }
.datos-pago { margin: .6rem 0; padding-left: 1.1rem; color: var(--gris); font-size: .9rem; }
.reco { border-radius: 12px; padding: .65rem .8rem; display: flex; flex-direction: column; border-left: 6px solid; background: #fff; }
.reco strong { font-family: var(--f-cifra); font-size: 1.05rem; }
.reco span { font-size: .88rem; color: var(--gris); }
.reco-puntual { border-color: var(--verde-b); }
.reco-tarda { border-color: var(--ambar); }
.reco-perseguir { border-color: #E0642B; }
.reco-riesgo { border-color: var(--vino); }

/* notas */
.tabla-notas { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--sombra); font-size: .9rem; }
.tabla-notas th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); padding: .5rem .6rem; background: #EEF2F7; }
.tabla-notas td { padding: .5rem .6rem; border-top: 1px solid #EDF1F5; vertical-align: top; }
.tabla-notas td small { display: block; color: var(--gris); font-size: .74rem; }
.tabla-notas td.num { font-family: var(--f-cifra); font-weight: 800; white-space: nowrap; }
.tabla-notas tfoot td { font-weight: 800; background: #F6F8FB; font-size: 1rem; }
.chip-dias { display: inline-block; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: .1rem .5rem; background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 55%, #000); border: 1px solid color-mix(in srgb, var(--c) 50%, #fff); white-space: nowrap; }
.lista-prom, .lista-pagos { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.lista-prom li { display: flex; gap: .6rem; align-items: center; background: #fff; border-radius: 10px; padding: .45rem .6rem; font-size: .9rem; }
.prom-estado { font-size: .72rem; font-weight: 800; text-transform: uppercase; padding: .1rem .45rem; border-radius: 6px; }
.prom-pendiente .prom-estado { background: #DCE8FA; color: #1D4B9A; }
.prom-cumplida .prom-estado { background: #DDF2E6; color: #0B5E3C; }
.prom-rota .prom-estado { background: #F7D9DE; color: var(--vino); }
.lista-pagos li { display: grid; grid-template-columns: 48px 1fr auto; gap: .6rem; align-items: center; background: #fff; border-radius: 10px; padding: .4rem .5rem; }
.pago-foto { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; border: 0; padding: 0; cursor: zoom-in; background: #E1E8F0; }
.pago-foto img { width: 100%; height: 100%; object-fit: cover; }
.pago-foto.sin { cursor: default; }
.pago-info strong { font-family: var(--f-cifra); color: var(--verde); font-variant-numeric: tabular-nums; }
.pago-info small { display: block; color: var(--gris); font-size: .76rem; }

/* formulario de pago */
.form-pago, #form-promesa { display: grid; gap: .8rem; }
.campo-monto > span:first-child { font-weight: 700; display: block; margin-bottom: .25rem; }
.monto-in { display: flex; align-items: center; background: #fff; border: 2px solid var(--linea); border-radius: 14px; padding: 0 .8rem; }
.monto-in:focus-within { border-color: var(--verde); }
.monto-in b { font-family: var(--f-cifra); font-size: 1.8rem; color: var(--gris); }
.monto-in input { border: 0; outline: none; font-family: var(--f-cifra); font-stretch: 112%; font-weight: 900; font-size: 2rem; width: 100%; padding: .35rem .3rem; background: none; color: var(--marino); font-variant-numeric: tabular-nums; }
.rapidos { display: flex; flex-wrap: wrap; gap: .35rem; }
.rapidos button { border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: .35rem .7rem; font-size: .82rem; font-weight: 600; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 700; margin-bottom: .3rem; padding: 0; }
.notas-sel label { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; background: #fff; border-radius: 10px; padding: .5rem .6rem; margin-bottom: .3rem; font-size: .9rem; }
.notas-sel input { width: 20px; height: 20px; accent-color: var(--verde); }
.notas-sel b { font-family: var(--f-cifra); font-variant-numeric: tabular-nums; }
.formas { display: flex; flex-wrap: wrap; gap: .4rem; }
.formas legend { width: 100%; }
.formas label { flex: 1 1 30%; }
.formas input { position: absolute; opacity: 0; }
.formas span { display: flex; flex-direction: column; align-items: center; text-align: center; border: 2px solid var(--linea); background: #fff; border-radius: 12px; padding: .55rem .4rem; font-weight: 700; cursor: pointer; font-size: .92rem; }
.formas span small { font-weight: 400; color: var(--gris); font-size: .76rem; }
.formas input:checked + span { border-color: var(--verde); background: var(--verde-c); color: #0B5E3C; }
.formas input:focus-visible + span { outline: 3px solid #2F6FDE; outline-offset: 2px; }
.comprobante { background: #fff; border-radius: 14px; padding: .7rem; }
.comp-et { font-weight: 700; display: block; margin-bottom: .4rem; }
.comp-prev { border: 2px dashed var(--linea); border-radius: 12px; min-height: 120px; display: grid; place-items: center; color: var(--gris); font-size: .88rem; overflow: hidden; text-align: center; padding: .3rem; }
.comp-prev img { max-height: 200px; width: auto; border-radius: 8px; }
.comp-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .5rem; }
.btn-foto { position: relative; overflow: hidden; }
.btn-foto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn-foto:focus-within { outline: 3px solid #2F6FDE; outline-offset: 2px; }
.error { background: #F7D9DE; color: var(--vino); border-radius: 10px; padding: .55rem .7rem; font-weight: 700; margin: 0; }

/* recordatorio */
.tonos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: .4rem 0 .6rem; }
.tonos span { background: #fff; border: 2px solid var(--linea); border-radius: 10px; padding: .35rem .3rem; text-align: center; line-height: 1.1; transition: all .25s; }
.tonos b { display: block; font-size: .85rem; font-family: var(--f-cifra); }
.tonos small { font-size: .68rem; color: var(--gris); }
.tonos span.on[data-t="amable"] { border-color: var(--verde-b); background: #DDF2E6; }
.tonos span.on[data-t="cordial"] { border-color: var(--ambar); background: #FBEFCF; }
.tonos span.on[data-t="firme"] { border-color: #E0642B; background: #FBE2D5; }
.tonos span.on[data-t="serio"] { border-color: var(--vino); background: #F7D9DE; }
.tonos span.on { transform: translateY(-2px); box-shadow: var(--sombra); }
.dias-rango { display: block; }
.dias-rango > span { display: block; font-weight: 700; margin-bottom: .2rem; min-height: 3.1em; }
.dias-rango strong { font-family: var(--f-cifra); font-size: 1.15rem; color: var(--marino); }
.dias-rango em { font-style: normal; color: var(--gris); font-size: .82rem; font-weight: 400; }
#rec-rango { width: 100%; height: 34px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
#rec-rango::-webkit-slider-runnable-track { height: 12px; border-radius: 99px; background: linear-gradient(90deg, #1F9E63 0 8.5%, #93B52B 8.5% 26%, #E2A019 26% 62%, #C61A2E 62% 100%); }
#rec-rango::-moz-range-track { height: 12px; border-radius: 99px; background: linear-gradient(90deg, #1F9E63 0 8.5%, #93B52B 8.5% 26%, #E2A019 26% 62%, #C61A2E 62% 100%); }
#rec-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--marino); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
#rec-rango::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--marino); }
.chat { border-radius: 16px; overflow: hidden; margin: .6rem 0; background: #E9E2D6; box-shadow: var(--sombra); transition: box-shadow .3s; }
.chat-cab { display: flex; gap: .6rem; align-items: center; background: #0B5E57; color: #fff; padding: .5rem .7rem; }
.chat-cab img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.chat-cab strong { display: block; line-height: 1.1; }
.chat-cab small { color: #CFE7E2; font-size: .76rem; }
.chat-cuerpo { padding: .8rem; background-image: radial-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px); background-size: 14px 14px; }
.burbuja-msg { background: #D9FDD3; border-radius: 12px 2px 12px 12px; padding: .65rem .75rem; margin-left: 8%; white-space: pre-wrap; font-size: .9rem; line-height: 1.42; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); border-top: 4px solid transparent; transition: border-color .3s; }
.burbuja-msg.cambia { animation: msg .35s ease; }
@keyframes msg { from { opacity: .4; transform: translateY(5px); } }
.tono-amable .burbuja-msg { border-top-color: var(--verde-b); }
.tono-cordial .burbuja-msg { border-top-color: var(--ambar); }
.tono-firme .burbuja-msg { border-top-color: #E0642B; }
.tono-serio .burbuja-msg { border-top-color: var(--vino); }
.tono-serio { box-shadow: 0 0 0 3px rgba(116, 16, 32, .35), var(--sombra); }
.editar-msg span { display: block; font-weight: 700; margin-bottom: .25rem; }
.editar-msg textarea { width: 100%; font: inherit; font-size: .9rem; border: 2px solid var(--linea); border-radius: 12px; padding: .6rem; resize: vertical; }
.nota-demo { background: #FBEFCF; color: #5A3E00; border-radius: 10px; padding: .55rem .7rem; }

/* recibo */
.recibo-ok { background: var(--verde-c); color: #0B5E3C; font-weight: 800; border-radius: 10px; padding: .55rem .7rem; margin: 2.4rem 0 .7rem; }
.recibo { font-family: 'Courier Prime', 'Courier New', monospace; background: #FFFDF7; color: var(--marino); padding: 1.1rem 1rem 1.3rem; max-width: 380px; margin: .8rem auto; box-shadow: var(--sombra); position: relative;
  -webkit-mask: radial-gradient(8px at 50% 100%, #0000 98%, #000) 50% / 18px 100% repeat-x; mask: radial-gradient(8px at 50% 100%, #0000 98%, #000) 50% / 18px 100% repeat-x; }
.recibo p { margin: 0; }
.rc-neg { text-align: center; font-weight: 700; font-size: 1.2rem; }
.rc-c { text-align: center; font-size: .78rem; }
.rc-linea { border-top: 2px dashed var(--marino); margin: .6rem 0 !important; opacity: .55; }
.rc-fila, .rc-total { display: flex; justify-content: space-between; gap: .8rem; font-size: .9rem; }
.rc-fila b { text-align: right; }
.rc-total { font-size: 1.15rem; font-weight: 700; margin: .2rem 0 .4rem !important; }
.rc-foto { width: 100%; max-height: 160px; object-fit: cover; margin-top: .7rem; filter: grayscale(.2); border-radius: 4px; }
.rc-gracias { text-align: center; font-weight: 700; margin-top: .8rem !important; }

/* ---------- promesas ---------- */
.prom-resumen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.prom-resumen div { background: #fff; border-radius: 12px; padding: .6rem; box-shadow: var(--sombra); border-top: 4px solid; }
.prom-resumen strong { display: block; font-family: var(--f-cifra); font-size: 1.7rem; font-weight: 900; line-height: 1; }
.prom-resumen span { font-size: .78rem; color: var(--gris); }
.prom-resumen .prom-pendiente { border-color: #2F6FDE; }
.prom-resumen .prom-rota { border-color: var(--vino); }
.prom-resumen .prom-cumplida { border-color: var(--verde-b); }
.calendario { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: .8rem; margin-bottom: 1.2rem; }
.cal-mes { font-family: var(--f-cifra); font-weight: 800; font-size: 1.15rem; text-transform: capitalize; margin: 0 0 .5rem; color: var(--marino); }
.cal-sem, .cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-sem span { font-size: .7rem; text-align: center; color: var(--gris); font-weight: 700; text-transform: uppercase; }
.dia { min-height: 62px; background: var(--papel); border-radius: 8px; padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dia.otro-mes { opacity: .45; }
.dia.hoy { outline: 2px solid var(--marino); background: #fff; }
.dia-n { font-size: .72rem; font-weight: 700; color: var(--gris); }
.dia.hoy .dia-n { color: var(--marino); }
.pin-prom { border: 0; border-radius: 5px; font-size: .62rem; font-weight: 700; padding: 2px 3px; text-align: left; cursor: pointer; line-height: 1.1; overflow: hidden; }
.pin-prom span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-prom.prom-pendiente { background: #DCE8FA; color: #1D4B9A; }
.pin-prom.prom-cumplida { background: #DDF2E6; color: #0B5E3C; }
.pin-prom.prom-rota { background: var(--vino); color: #fff; text-decoration: line-through; }
.cal-ley { list-style: none; display: flex; gap: .9rem; padding: 0; margin: .6rem 0 0; font-size: .78rem; }
.cal-ley li::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.cal-ley .prom-pendiente::before { background: #9CBDF2; }
.cal-ley .prom-cumplida::before { background: var(--verde-b); }
.cal-ley .prom-rota::before { background: var(--vino); }
@media (min-width: 760px) { .dia { min-height: 84px; padding: 5px; } .pin-prom { font-size: .74rem; } }
.prom-lista, .entra-lista { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .45rem; }
.prom-lista button, .entra-lista button { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .65rem; align-items: center; text-align: left; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: .45rem; cursor: pointer; }
.prom-lista img, .entra-lista img { width: 56px; height: 44px; object-fit: cover; border-radius: 8px; }
.prom-lista strong, .entra-lista strong { display: block; line-height: 1.2; }
.prom-lista small, .entra-lista small { display: block; color: var(--gris); font-size: .8rem; line-height: 1.25; }
.prom-lista b, .entra-lista b { font-family: var(--f-cifra); font-variant-numeric: tabular-nums; }
.prom-lista b.prom-rota { color: var(--vino); text-decoration: line-through; }
.prom-lista b.prom-cumplida, .entra-lista b.conf { color: var(--verde); }
.prom-lista b.prom-pendiente { color: #1D4B9A; }
.entra-lista b.duda { color: #8A5C00; }

/* ---------- lo que entra ---------- */
.entra-tarjetas { display: grid; gap: .55rem; margin-bottom: .6rem; }
@media (min-width: 760px) { .entra-tarjetas { grid-template-columns: repeat(3, 1fr); } }
.entra-t { text-align: left; background: #fff; border: 2px solid var(--linea); border-radius: 14px; padding: .8rem; cursor: pointer; display: flex; flex-direction: column; gap: .25rem; }
.entra-t.on { border-color: var(--marino); box-shadow: var(--sombra); }
.entra-plazo { font-weight: 700; color: var(--gris); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.entra-t strong { font-family: var(--f-cifra); font-stretch: 115%; font-size: 1.9rem; font-weight: 900; color: var(--marino); font-variant-numeric: tabular-nums; line-height: 1.05; }
.entra-barra { display: flex; height: 12px; background: #E8EDF3; border-radius: 99px; overflow: hidden; }
.entra-barra .b-conf { background: var(--verde-b); }
.entra-barra .b-duda { background: var(--ambar); }
.entra-t small { color: var(--gris); }
.entra-t small b { color: var(--verde); font-variant-numeric: tabular-nums; }
.suma-ok { font-size: .84rem; color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- ruta de cobro ---------- */
.vendedores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: .2rem 0 1rem; }
.vendedores button { display: flex; flex-direction: column; align-items: center; gap: .25rem; background: #fff; border: 2px solid var(--linea); border-radius: 14px; padding: .5rem .3rem; cursor: pointer; text-align: center; }
.vendedores button[aria-pressed="true"] { border-color: var(--marino); background: var(--marino); color: #fff; }
.vendedores button[aria-pressed="true"] small { color: #C9D8E8; }
.vendedores img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.vendedores strong { display: block; font-size: .9rem; line-height: 1.1; }
.vendedores small { font-size: .72rem; color: var(--gris); }
.ruta-cab h1 { font-size: 1.45rem; font-weight: 900; }
.meta { background: var(--marino); color: #fff; border-radius: 16px; padding: .9rem 1rem; margin-bottom: 1rem; }
.meta-txt span { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #B6C8DC; font-weight: 700; }
.meta-txt strong { display: block; font-family: var(--f-cifra); font-stretch: 118%; font-size: 2.3rem; font-weight: 900; color: #6CE3A4; line-height: 1.05; font-variant-numeric: tabular-nums; }
.meta-txt strong.golpe { animation: golpe .35s; }
.meta-txt small { color: #DCE6F1; }
.meta-barra { height: 14px; background: rgba(255, 255, 255, .15); border-radius: 99px; overflow: hidden; margin: .6rem 0 .4rem; }
.meta-barra i { display: block; height: 100%; background: linear-gradient(90deg, #1F9E63, #6CE3A4); border-radius: 99px; transition: width .8s; }
.meta-pie { margin: 0; font-size: .82rem; color: #B6C8DC; }
.ruta-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .ruta-grid { grid-template-columns: 400px 1fr; align-items: start; } .mapa { position: sticky; top: calc(var(--cab) + 1rem); } }
.mapa { position: relative; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.mapa-svg { display: block; width: 100%; height: auto; }
.recorrido { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: traza 2.2s ease forwards .2s; opacity: .85; }
@keyframes traza { to { stroke-dashoffset: 0; } }
.pin { cursor: pointer; }
.pin:focus-visible path { stroke: #F5C543; stroke-width: 4; }
.mapa-card { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(0, 0, 0, .25); padding: .5rem; display: grid; grid-template-columns: 64px 1fr; gap: .2rem .6rem; align-items: center; }
.mapa-card img { width: 64px; height: 52px; object-fit: cover; border-radius: 8px; grid-row: span 2; }
.mapa-card strong { display: block; line-height: 1.15; padding-right: 1.6rem; }
.mapa-card small { color: var(--gris); }
.mapa-card .btn { grid-column: 2; justify-self: start; }
.mapa-card-x { position: absolute; top: .2rem; right: .3rem; border: 0; background: none; font-size: 1.4rem; cursor: pointer; width: 36px; height: 36px; }
.paradas { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.parada { background: #fff; border-radius: 14px; box-shadow: var(--sombra); padding: .6rem; border-left: 5px solid var(--marino-3); }
.parada.cobrada { border-left-color: var(--verde-b); background: #F4FBF7; }
.parada-top { display: grid; grid-template-columns: auto 64px minmax(0, 1fr); gap: .6rem; align-items: center; }
.parada-n { width: 30px; height: 30px; border-radius: 50%; background: var(--marino); color: #fff; display: grid; place-items: center; font-family: var(--f-cifra); font-weight: 900; }
.cobrada .parada-n { background: var(--verde-b); }
.parada img { width: 64px; height: 52px; border-radius: 8px; object-fit: cover; }
.parada-info strong { display: block; line-height: 1.2; }
.parada-info small { color: var(--gris); font-size: .8rem; display: block; }
.parada-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.chip-prom { font-size: .72rem; font-weight: 800; border-radius: 999px; padding: .1rem .5rem; background: #DCE8FA; color: #1D4B9A; }
.chip-no { font-size: .72rem; font-weight: 800; border-radius: 999px; padding: .1rem .5rem; background: #F7D9DE; color: var(--vino); }
.parada-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .55rem; }
.parada-por { flex: 1 1 100%; font-size: .88rem; color: var(--gris); }
.parada-por b { font-family: var(--f-cifra); font-size: 1.05rem; color: var(--marino); font-variant-numeric: tabular-nums; }
.parada-cobrado { flex: 1 1 100%; font-weight: 800; color: var(--verde); }
.tc-cal { white-space: nowrap; }

/* ---------- guía ---------- */
.guia-in { background: #FFF6DD; color: var(--tinta); border: 2px solid #F5C543; border-radius: 14px; padding: .65rem .8rem; margin: .5rem 0 .6rem; position: relative; animation: sube .4s ease; }
.guia-in p { margin: .15rem 0 .2rem; font-size: .92rem; }
.guia-paso { font-family: var(--f-cifra); font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #8A5C00; }
.guia-saltar { background: none; border: 0; padding: 0; font-size: .82rem; text-decoration: underline; color: var(--gris); cursor: pointer; }

/* ---------- monedas, montos y avisos ---------- */
.monedas { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.moneda { position: fixed; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF2B3, #F5C543 45%, #C9961A); box-shadow: inset 0 0 0 2px #B88912, 0 2px 4px rgba(0, 0, 0, .3); }
.moneda::after { content: '$'; position: absolute; inset: 0; display: grid; place-items: center; font: 900 12px/1 var(--f-cifra); color: #8A5C00; }
.flota-monto { position: fixed; z-index: 81; transform: translate(-50%, -50%); font-family: var(--f-cifra); font-stretch: 112%; font-weight: 900; font-size: 1.35rem; color: #fff; background: #0F7A4E; border: 2px solid #6CE3A4; border-radius: 999px; padding: .15rem .7rem; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); pointer-events: none; animation: flotaMonto 1.8s ease forwards; white-space: nowrap; }
@keyframes flotaMonto { 0% { opacity: 0; margin-top: 10px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -70px; } }
.aviso-toast { position: fixed; left: 12px; right: 12px; margin: 0 auto; width: fit-content; max-width: 520px; bottom: calc(80px + env(safe-area-inset-bottom)); background: var(--marino); color: #fff; padding: .7rem .95rem; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); z-index: 90; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s, transform .25s; font-size: .92rem; }
.aviso-toast.visible { opacity: 1; transform: none; pointer-events: auto; }
.aviso-toast .link { color: #F5C543; margin-left: .3rem; }
.toast-frase { display: block; color: #B6C8DC; font-style: italic; font-size: .86rem; margin-top: .15rem; }

/* ---------- pestañas inferiores y contacto fijo ---------- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--linea); display: flex; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(13, 36, 64, .08); }
.tabs a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .45rem .1rem .5rem; text-decoration: none; color: var(--gris); font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.1; }
.tabs svg { width: 24px; height: 24px; }
.tabs a[aria-current="page"] { color: var(--marino); }
.tabs a[aria-current="page"] svg { background: #E4ECF6; border-radius: 10px; width: 46px; padding: 1px 11px; }
.tabs .tab-wa { color: #0F7A6E; }
.cta-fijo { display: none; }
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .tabs { position: sticky; top: var(--cab); bottom: auto; width: 100%; max-width: none; margin: 0; border: 0; box-shadow: 0 6px 12px -10px rgba(13, 36, 64, .35); background: var(--papel); padding: .55rem max(1rem, calc((100% - 1148px) / 2)) .55rem; gap: .4rem; }
  .tabs a { flex: none; flex-direction: row; gap: .4rem; font-size: .92rem; padding: .5rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--linea); }
  .tabs svg { width: 20px; height: 20px; }
  .tabs a[aria-current="page"] { background: var(--marino); color: #fff; border-color: var(--marino); }
  .tabs a[aria-current="page"] svg { background: none; width: 20px; padding: 0; }
  .tabs .tab-wa { display: none; }
  .cta-fijo { display: flex; position: fixed; right: 18px; bottom: 18px; z-index: 40; align-items: center; gap: .5rem; background: #0F7A6E; color: #fff; text-decoration: none; padding: .6rem 1rem .6rem .8rem; border-radius: 999px; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); font-size: .92rem; }
  .cta-fijo:hover { background: #0B6359; }
  .aviso-toast { bottom: 24px; left: 24px; right: auto; margin: 0; }
  .campo-wrap { margin: 0 0 1.2rem; padding: 1.2rem 1.2rem 1rem; }
}
/* en escritorio las pestañas van antes del contenido: se mueven con order vía grid */
@media (min-width: 900px) { body.pag-app { display: flex; flex-direction: column; } .cab { order: 0; } .tabs { order: 1; } .app { order: 2; width: 100%; } .pie { order: 3; } }

/* ---------- CTA, pie ---------- */
.restaurar-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.6rem 0 1rem; color: var(--gris); font-size: .88rem; }
.cta { background: var(--marino); color: #fff; border-radius: 18px; padding: 1.4rem 1.1rem; margin: 1rem 0; }
.cta h2 { color: #fff; font-size: 1.45rem; }
.cta p { color: #DCE6F1; }
.cta-ojo { font-family: var(--f-cifra); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 700; color: #F5C543 !important; margin: 0 0 .3rem; }
.cta-botones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.cta-tel { color: #fff; }
.pie { background: #0A1C33; color: #B6C8DC; padding: 1.4rem 1rem 1.6rem; text-align: center; font-size: .84rem; }
.pie p { margin: 0 auto .4rem; max-width: 70ch; }
.pie a { color: #fff; }
.pie .credito { margin-top: .8rem; color: #DCE6F1; }
@media (min-width: 900px) { .pie { padding-bottom: 1.6rem; } }
.sin-js { background: #FBEFCF; padding: 1rem; text-align: center; }

/* ---------- aviso de privacidad ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 1.2rem 1.1rem 3rem; }
.legal h1 { font-size: 1.8rem; }
.legal h2 { font-size: 1.15rem; margin-top: 1.4rem; }
.legal-meta { color: var(--gris); font-size: .86rem; }
.pag-legal { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .recorrido { stroke-dashoffset: 0; }
}

/* ajustes tras la crítica de diseño */
body.guia-activa .cta-fijo { display: none; }
.form-pago > .btn-grande { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 18px 6px var(--papel); }
@media (max-width: 759px) {
  .pin-prom { width: 11px; height: 11px; padding: 0; border-radius: 50%; display: inline-block; }
  .pin-prom span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pin-prom.prom-rota { text-decoration: none; }
  .pin-prom.prom-pendiente { background: #2F6FDE; }
  .pin-prom.prom-cumplida { background: var(--verde-b); }
  .dia { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 3px; min-height: 52px; }
  .dia-n { width: 100%; }
}