/* Landing COI · una pantalla por idea, navegación con dock */

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.screen{
  position:relative;min-height:calc(100svh - var(--topbar));display:flex;flex-direction:column;justify-content:center;
  padding-block:56px 116px;
}
.band{position:relative;padding-block:24px 56px}
/* Entre sección y sección, siempre el mismo aire: el que hay entre el carrusel del hero y el título de Comercial
   (106 px en escritorio = 92 abajo + 14 arriba; 98 px en celular = 84 + 14). Las secciones dejan de ocupar una pantalla
   entera y miden lo que su contenido, así el espacio no depende de cuánto contenido tiene cada una (Fran, 16-09).
   El hero sigue ocupando la primera pantalla; Contacto conserva su alto, pero arranca arriba. */
.screen:not(.hero):not(.contact),.band{min-height:0}
.screen:not(.hero),.band{padding-block:14px 92px}
.contact{justify-content:flex-start}
.sec-head{display:grid;gap:12px;max-width:660px;margin-bottom:30px}
.sec-head h2{font-size:clamp(30px,3.7vw,46px);line-height:1.06}
.sec-head p{font-size:17px;color:var(--ink2);max-width:58ch}
.sec-head.row{max-width:none;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px}
.sec-head.row>div{display:grid;gap:12px;max-width:660px}

/* Entradas al hacer scroll: siempre desde un estado visible */
.rv.in{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:.35;filter:blur(4px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}

/* ---------- HERO ---------- */
/* El carrusel de clientes queda pegado abajo del hero (con lugar para el dock) y el título se centra en el espacio
   de arriba: así no queda un hueco grande entre el carrusel y Comercial (pedido de Fran, 15-09) */
.hero{padding-bottom:92px}
.hero>.wrap{position:relative;z-index:1;flex:1 0 auto;display:flex;flex-direction:column}
.hero-copy{margin-block:auto}
.hero-copy{display:grid;gap:26px;justify-items:center;text-align:center;max-width:920px;margin-inline:auto;padding-top:24px}
.hero h1{font-size:clamp(40px,6.2vw,78px);line-height:1.02;letter-spacing:-.04em}
/* «industriales» subrayado en rojo, en vez de la selección en negativo (Fran, 16-09). Se dibuja una sola vez al cargar. */
.hero h1 .u{position:relative;white-space:nowrap}
.hero h1 .u::after{content:"";position:absolute;left:.02em;right:.04em;bottom:.05em;height:.07em;border-radius:.04em;background:var(--red);transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .u::after{animation:u-draw .9s cubic-bezier(.3,.7,.2,1) .4s backwards}
  .hero h1 .u:last-of-type::after{animation-delay:1.05s}
}
@keyframes u-draw{from{transform:scaleX(0)}}
.hero-claim{font-size:clamp(19px,2.2vw,26px);font-weight:500;letter-spacing:-.02em;color:var(--ink2);max-width:none;text-wrap:balance}
.hero-claim strong{color:var(--red-ink);font-weight:700;font-variant-numeric:tabular-nums}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}

.desk{padding:20px;display:grid;gap:18px}
.desk-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.desk-top h3{font-size:22px;margin-top:6px}
.desk-top p{font-size:14px;color:var(--ink2);margin-top:2px}
.desk-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-kpi{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-card);padding:10px 12px;display:grid;gap:2px}
.mini-kpi strong{font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Íconos de app · receta app-tile.tsx del CRM: 64/17 acá, 56/15 en celular */
.apps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 8px}
.app{display:grid;justify-items:center;gap:8px;text-decoration:none;position:relative}
.app-icon{
  width:64px;height:64px;border-radius:17px;display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px rgba(0,0,0,.18);
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
.app-icon svg{width:30px;height:30px}
.app:hover .app-icon{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 14px 26px rgba(0,0,0,.22)}
.app-name{font-size:13px;font-weight:600;color:var(--ink);text-align:center;line-height:1.2}
.app .badge{position:absolute;top:-6px;right:calc(50% - 38px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red-btn);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--card-solid)}

.marquee-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:22px;margin-top:72px;padding-top:22px;border-top:1px solid var(--line)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:34px;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.mq-logo{display:flex;align-items:center;gap:10px;opacity:.72;filter:grayscale(1);transition:opacity .2s ease,filter .2s ease;flex:none}
.mq-logo:hover{opacity:1;filter:none}
.mq-logo img{height:34px;width:auto}
.mq-apex{font-weight:800;letter-spacing:.2em;font-size:15px;color:var(--ink)}
.mq-apex em{font-style:normal;color:#C0843E}
.mq-rubro{flex:none;font-size:14px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:34px}
.mq-rubro::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--faint)}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto}.marquee-track [aria-hidden="true"]{display:none}}

/* ---------- COMERCIAL · bento ---------- */
/* Pipeline y presupuestos arriba y más grande; mapa y hojas de ruta abajo; los dos a lo ancho. En celular, carrusel.
   Alto fijo, pensado para que cada maqueta se vea entera (kanban con sus tarjetas, presupuesto completo, mapa y gira):
   Fran prefirió eso a achicarlos para que la sección entre en una pantalla. Si falta lugar, el fundido de abajo corta.
   El asistente de IA está oculto por ahora (pedido de Fran, 15-09): su mosaico sigue en el HTML con hidden. */
.com{padding-block:14px 88px}
.com .sec-head{margin-bottom:18px}
/* Pedido de Fran (15-09): el kicker de Comercial, un poco más grande que el resto */
.com .sec-head .kicker{font-size:14px;letter-spacing:.16em}
/* Pipeline a lo ancho; abajo, el mapa del ancho de la maqueta del celular (360 + 40 de aire) y al lado un mosaico libre */
.cbento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:480px auto;gap:14px}
.t-pipe{grid-column:1/-1}
/* Franja fina con la pregunta, entre las dos filas del bento */
.cband{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 13px;margin:6px 0;padding:16px 20px;border:1px solid var(--line2);border-radius:var(--r-card);background:var(--card);font-size:17px;letter-spacing:-.01em;line-height:1.3}
svg.cband-i{width:23px;height:23px;flex:none;color:var(--red-ink);stroke-width:2.2}
.cband span:not(.app-sq){font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.cband b{font-weight:700;color:var(--red-ink);white-space:nowrap}
/* La franja de cierre: el ícono del asistente y dos frases, la segunda en rojo */
.cband.ia{gap:8px 14px;margin-bottom:0}
.cband.ia .app-sq{width:42px;height:42px;border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px rgba(20,22,40,.20)}
.cband.ia .app-sq svg.i{width:21px;height:21px}
.cband.ia span:not(.app-sq){font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink1)}
.cband.ia b{font-size:16.5px;white-space:normal}
/* Contorno rojo que rodea la franja para destacarla (Fran, 17-09): un borde rojo tenue en todo el perímetro y, encima, un tramo
   más intenso que lo recorre a velocidad pareja (trazo de SVG con pathLength, no un degradé cónico, que en una caja tan ancha
   correría a los saltos). Con movimiento reducido queda el borde rojo entero y quieto. */
.cband.ia{position:relative;border:0;padding:17px 21px}
.cband-ring{position:absolute;inset:.75px;width:calc(100% - 1.5px);height:calc(100% - 1.5px);overflow:visible;pointer-events:none;fill:none}
.cband-ring .r-base{stroke:var(--red);stroke-width:1.5;opacity:.38}
.cband-ring .r-run{stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-dasharray:16 84;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--red) 70%,transparent));animation:cband-run 7s linear infinite}
@keyframes cband-run{to{stroke-dashoffset:-100}}
@media (prefers-reduced-motion:reduce){.cband-ring .r-run{display:none}.cband-ring .r-base{opacity:.9}}
/* Media fila cada uno: el mapa a la izquierda y el asistente a la derecha */
.t-map{grid-column:1;gap:11px;padding-top:17px}
.t-ia{grid-column:2;gap:11px;padding-top:17px}
.ctile{position:relative;overflow:hidden;min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;padding:20px 20px 0;container-type:inline-size}
.ctile-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.ctile-head h3{font-size:20px;line-height:1.2}
.ctile-head p{grid-column:1/-1;font-size:14px;line-height:1.45;color:var(--ink2)}
.ctile-note{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ctile-apps{display:flex;gap:4px}
/* Cuadrado de app del escritorio del CRM, en chico */
.app-sq{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--a);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.1),0 4px 10px rgba(0,0,0,.14)}
.ctile-vis{position:relative;min-width:0;min-height:0;overflow:hidden}
.ctile-vis.bleed{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
/* Mosaico ancho: la bajada va en el mismo renglón que el título, así la maqueta gana alto */
@container (min-width:820px){
  .ctile-head{grid-template-columns:auto auto minmax(0,1fr) auto;column-gap:14px}
  .ctile-head p{grid-column:3;grid-row:1;padding-left:14px;border-left:1px solid var(--line)}
  .ctile-head .pill{grid-column:4}
}

/* Selector de mosaico: solo en celular */
.cdots{display:none;gap:4px;padding:4px;margin-bottom:12px;border-radius:12px;background:var(--chip);width:max-content;max-width:100%}
.cdot{border:0;background:transparent;cursor:pointer;padding:7px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.cdot[aria-current="true"]{background:var(--card-solid);color:var(--ink);box-shadow:var(--shadow-card)}

/* Pipeline y presupuestos */
.pipe{display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,38%,360px);gap:12px;align-items:start}
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kcol{background:var(--card2);border:1px solid var(--line2);border-top:3px solid var(--k);border-radius:var(--r-card);padding:10px;display:grid;gap:8px;align-content:start;min-width:0}
.kcol-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.kcol-head b{font-size:13px}
.kcount{font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px;background:color-mix(in srgb,var(--k) 16%,transparent);color:var(--ink1)}
.ktotal{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.deal{position:relative;background:var(--card-solid);border:1px solid var(--line2);border-radius:10px;padding:9px 10px;display:grid;gap:3px;transition:transform .2s ease,box-shadow .2s ease}
.deal:hover{transform:translateY(-2px)}
.deal b{font-size:13px;line-height:1.25}
.deal>span{font-size:11.5px;color:var(--muted)}
.deal strong{font-size:13px;font-variant-numeric:tabular-nums}
.deal .pill{justify-self:start}
/* Pie de la tarjeta, como en el CRM: monto a la izquierda; avioncito y avatar del vendedor a la derecha, los dos de 24 px */
.deal-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}
.deal-acts{position:relative;display:flex;align-items:center;gap:6px;flex:none}
.send{position:relative;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid var(--avbd);background:var(--card-solid);color:var(--ink2);display:grid;place-items:center;cursor:pointer;transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.send svg.i{width:13px;height:13px;stroke-width:2}
.send:hover,.send[aria-expanded="true"]{border-color:var(--red);color:var(--red-ink);background:var(--red-tint)}
/* Avatar del vendedor con su color, como InitialsAvatar del CRM: fondo del color al 18 % e iniciales del mismo color
   (un poco más oscuras para que se lean). Sin color asignado, queda en gris. */
.av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:700;letter-spacing:.02em;background:color-mix(in srgb,var(--t,#8A8D95) 18%,transparent);color:color-mix(in srgb,var(--t,#8A8D95) 78%,var(--ink))}
/* Oportunidad destacada por el recorrido automático: anillo del color de su etapa y el avioncito encendido */
.deal.spot{transform:translateY(-2px);box-shadow:0 0 0 2px var(--k),var(--shadow-float)}
.deal.spot .send{border-color:var(--red);color:var(--red-ink);background:var(--red-tint)}
.deal.open{z-index:5}
/* Mientras pasa de columna, la tarjeta se levanta */
.deal.drag{z-index:6;box-shadow:0 16px 34px rgba(20,22,40,.24);border-color:color-mix(in srgb,var(--k) 45%,transparent);transition:box-shadow .25s ease,border-color .25s ease}

/* «Enviar mensaje» sobre la misma tarjeta: los canales del CRM (card-send-menu.tsx) sin borronear la página.
   Arranca en la esquina de la tarjeta y la tapa; si la tarjeta es angosta, se ensancha hacia adentro del kanban. */
.dsend{position:absolute;top:-1px;left:-1px;z-index:1;width:max(calc(100% + 2px),232px);display:grid;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--card-solid);box-shadow:var(--shadow-float);transform-origin:top right;animation:dsendin .18s ease both}
.kcol:nth-child(n+2) .dsend{left:auto;right:-1px}
@keyframes dsendin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.dsend-head{display:flex;align-items:flex-start;gap:8px;padding:9px 8px 8px 12px;border-bottom:1px solid var(--line2)}
.dsend-head>div{flex:1;min-width:0;display:grid}
.dsend-head b{font-size:12.5px;font-weight:600;color:var(--ink)}
.dsend-head span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsend-x{display:grid;place-items:center;width:22px;height:22px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.dsend-x:hover{background:var(--chip);color:var(--ink)}
.dsend-x svg.i{width:14px;height:14px}
.dsend-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:0;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease}
.dsend-row+.dsend-row{border-top:1px solid var(--line2)}
.dsend-row:hover,.dsend-row.on{background:var(--hoverbg)}
.dsend-ic{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--chip);color:var(--ink2);transition:transform .15s ease}
.dsend-row.on .dsend-ic{transform:scale(1.1)}
.dsend-ic.wa{background:rgba(52,199,89,.16);color:#1f9d4a}
:root[data-theme="dark"] .dsend-ic.wa{color:#30d158}
.dsend-ic svg.i{width:14px;height:14px}
.dsend-txt{min-width:0;display:grid;gap:1px}
.dsend-txt b{font-size:12.5px;font-weight:600;color:var(--ink)}
.dsend-txt>span{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:11px;color:var(--muted)}
.dsend-txt>span.mail{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsend-txt em{padding:0 5px;border-radius:5px;background:var(--chip);font-style:normal;font-size:10px;font-weight:600;color:var(--ink2)}
.dsend-txt em:empty{display:none}
.dsend-done{display:grid;gap:8px;padding:10px 12px 12px}
.dsend-done p{font-size:12px;line-height:1.45;color:var(--ink2)}
.dsend-done b{color:var(--ink)}
.dsend-back{justify-self:start;padding:0;border:0;background:none;font-size:12px;font-weight:600;color:var(--red-ink);cursor:pointer}

/* Botón «PDF con logo y CUIT»: se enciende igual que el avioncito cuando el recorrido lo destaca */
.pdf-btn{border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.pdf-btn:hover,.pdf-btn.spot,.pdf-btn[aria-expanded="true"]{background:var(--red-tint);color:var(--red-ink)}
.pdf-btn.spot{box-shadow:0 0 0 2px var(--red)}

/* Vista previa del PDF sobre el mismo presupuesto: barra de visor oscura y la hoja en blanco, como sale impresa.
   La hoja no cambia con el tema: es papel. El recorrido la baja sola hasta el total; a mano, se scrollea. */
.pdfv{position:absolute;inset:-1px;z-index:6;container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);overflow:hidden;border-radius:var(--r-card);border:1px solid var(--line);background:#48484b;box-shadow:var(--shadow-float);transform-origin:bottom left;animation:dsendin .2s ease both}
.pdfv-bar{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 11px;background:#2c2c2e;color:#f2f2f7}
.pdfv-name{flex:1;min-width:0;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdfv-btn{width:26px;height:26px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background-color .15s ease}
.pdfv-btn:hover{background:rgba(255,255,255,.22)}
.pdfv-btn svg.i{width:14px;height:14px}
.pdfv-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px}
.pdfv.auto .pdfv-scroll{overflow:hidden}
.pdf-page{position:relative;overflow:hidden;padding:15px 14px 10px;border-radius:2px;background:#fff;color:#1a1b1f;box-shadow:0 2px 12px rgba(0,0,0,.35);font-size:8.5px;line-height:1.45;text-align:left}
.pdf-page::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#C0272D}
.pdf-page p{margin:0}
.pdf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
/* La hoja es blanca en los dos temas: el logo lleva los colores del papel, no los del tema. */
.pdf-head .coi-logo{height:24px;fill:#C0272D;--coi-oi:#1a1b1f}
.pdf-co{display:grid;text-align:right;font-size:7.5px;color:#5c5e66}
.pdf-co b{font-size:8.5px;color:#1a1b1f}
.pdf-title{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-bottom:9px;padding-bottom:6px;border-bottom:1.5px solid #1a1b1f}
.pdf-t{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.1}
.pdf-t em{font-style:normal;color:#C0272D;white-space:nowrap}
.pdf-meta{display:grid;text-align:right;font-size:7.5px;color:#5c5e66}
.pdf-meta b{color:#1a1b1f}
.pdf-boxes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.pdf-box{display:grid;align-content:start;padding:6px 8px;border-radius:3px;background:#f4f4f5;border-left:2.5px solid #C0272D}
.pdf-box.site{border-left-color:#1a1b1f}
.pdf-box i{font-style:normal;font-size:6.5px;letter-spacing:.14em;text-transform:uppercase;color:#5c5e66}
.pdf-box b{font-size:8.5px}
.pdf-box span{font-size:7.5px;color:#5c5e66}
.pdf-sec{margin-bottom:9px}
.pdf-h{display:block;margin-bottom:4px;padding-bottom:2px;border-bottom:1px solid #e2e2e6;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pdf-h em{font-style:normal;color:#C0272D}
.pdf-nave{display:block;width:100%;height:auto;margin-top:6px;border-radius:3px;background:#f4f4f5}
.pdf-chips{display:flex;flex-wrap:wrap;gap:4px}
.pdf-chips span{padding:2px 6px;border-radius:3px;border:1px solid #e2e2e6;background:#f4f4f5;font-weight:600}
.pdf-sec.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pdf-table{display:grid;overflow:hidden;border-radius:2px}
.pdf-th,.pdf-tr{display:grid;grid-template-columns:minmax(0,1fr) auto 76px;gap:6px;padding:4px 6px}
.pdf-th{background:#1a1b1f;color:#fff;font-size:6.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pdf-tr{border-bottom:1px solid #e2e2e6;font-variant-numeric:tabular-nums}
.pdf-th span+span,.pdf-tr span+span{text-align:right}
.pdf-tot{display:grid;gap:1px;width:min(100%,max(64%,190px));margin:6px 0 0 auto;font-variant-numeric:tabular-nums}
.pdf-tot div{display:flex;justify-content:space-between;gap:6px;color:#5c5e66;white-space:nowrap}
.pdf-tot .grand{margin-top:3px;padding-top:4px;border-top:1.5px solid #C0272D;color:#1a1b1f;font-size:10px;font-weight:800}
.pdf-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:5px;border-top:1px solid #e2e2e6;font-size:6.5px;color:#5c5e66}
/* Hoja angosta (tablet y celular): los datos del presupuesto pasan abajo del título, en un renglón */
@container (max-width:300px){
  .pdf-title{flex-direction:column;align-items:flex-start;gap:3px}
  .pdf-meta{display:flex;flex-wrap:wrap;gap:0 8px;text-align:left}
}

.quote{position:relative;padding:14px;display:grid;gap:10px;min-width:0}
.quote-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.quote-head h4{font-size:15px;letter-spacing:-.01em}
.quote-head p{font-size:12px;color:var(--muted)}
/* El total va arriba: si el mosaico corta la maqueta, el número que importa sigue a la vista */
.qgrand{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 11px;border-radius:10px;background:var(--card2);border:1px solid var(--line2)}
.qgrand span{font-size:12px;font-weight:600;color:var(--muted)}
.qgrand strong{font-size:16px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.qrows{display:grid;gap:8px;font-size:12.5px}
.qrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
.qrow b{font-weight:600}
.qrow small{grid-column:1;color:var(--muted);font-size:11.5px}
.qrow .amt{grid-row:1/span 2;grid-column:2;align-self:center;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.qtot{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:4px;font-size:12.5px;font-variant-numeric:tabular-nums}
.qtot div{display:flex;justify-content:space-between;gap:10px;color:var(--ink2)}
.quote-actions{display:flex;gap:8px;flex-wrap:wrap}
@container (max-width:720px){
  .kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kcol:nth-child(3){display:none}
}
/* Angosto: una tarjeta por columna y el presupuesto debajo, así se ven los dos */
/* En la tarjeta angosta no entran monto, avioncito y avatar: se va el avatar y el monto queda en un renglón */
@container (max-width:440px){.pipe{grid-template-columns:minmax(0,1fr)}.kcol .deal+.deal,.ktotal,.deal>span:not(.pill),.deal .av{display:none}}
.deal-foot strong{white-space:nowrap}

/* ---------- Mapa y hojas de ruta: el mosaico mide lo que la maqueta del celular ---------- */
/* Mapa: la maqueta al medio y, al lado, la función que está mostrando, una por vez */
/* La maqueta se achica a escala para entrar en media fila, y la ficha de la función va debajo */
.mapwrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-items:center;row-gap:12px;padding-bottom:10px}
.mapph,.chatph{grid-row:1}
.fx{grid-row:2;align-self:stretch}
.mapph{--s:.88;width:calc(360px * var(--s));height:calc(520px * var(--s));display:block}
.mapph .mph{width:360px;transform:scale(var(--s));transform-origin:top left}
.fx{width:100%;display:grid;gap:10px}
.fx>.fx-card{height:100%}
.fx-card{display:grid;align-content:center;min-height:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card-solid);box-shadow:var(--shadow-card)}
.fx-list{display:grid;margin:0;padding:0;list-style:none}
.fx-item{grid-area:1/1;display:grid;gap:6px;align-content:start;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.fx-item.on{opacity:1;transform:none}
.fx-top{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fx-top i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--red-ink);box-shadow:0 0 0 4px var(--red-tint)}
.fx-top svg.i{width:15px;height:15px;color:var(--red-ink)}
.fx-item b{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.fx-item span:not(.fx-top){font-size:14px;line-height:1.5;color:var(--ink2)}
.fx.all .fx-list{gap:14px}
.fx.all .fx-item{grid-area:auto;opacity:1;transform:none;pointer-events:auto}
.fx.all .fx-item b{font-size:16px}


/* Maqueta de la app de Mapa en el celular (prototipo de Fran, 15-09). Es una pantalla del producto: mantiene la paleta
   cálida del prototipo y no cambia con el tema; el acento pasa al rojo COI. Los pasos se muestran según data-step
   (main.js pone hidden a lo que no corresponde) y los pines y la ruta cambian con CSS. */
.mph{--mph-red:#C0272D;position:relative;justify-self:center;width:min(360px,100%);height:520px;display:flex;flex-direction:column;overflow:hidden;border-radius:28px;border:1px solid #E1DFDA;background:#fff;box-shadow:0 12px 32px rgba(30,31,34,.10);color:#1E1F22;font-size:14px;line-height:1.35;text-align:left}
.mph button{font:inherit;color:inherit;cursor:pointer}
.mph-map{position:relative;flex:1;min-height:0;overflow:hidden;background:#EEEBE5}
/* Mapa real (OpenStreetMap, Córdoba norte, 5 px por km): la capa tiene el mismo alto/ancho que el viewBox 360 × 550,
   así los pines en % caen justo sobre el SVG. La genera scratchpad/mapa/gen-mapa.js. */
.mph-geo{position:absolute;left:0;top:0;width:100%;aspect-ratio:360/550;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mph-geo-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.g-city{fill:#E4DFD5;stroke:#D8D1C4;stroke-width:.8}
.g-lake{fill:#C7DAEA;stroke:#B4CBE0;stroke-width:.6}
.g-riv{fill:none;stroke:#B9D0E4;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.g-sec{fill:none;stroke:#FBFAF7;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.g-pri-c,.g-pri,.g-hw-c,.g-hw{fill:none;stroke-linecap:round;stroke-linejoin:round}
.g-pri-c{stroke:#D5CEC1;stroke-width:3.4}
.g-pri{stroke:#FFFFFF;stroke-width:2}
.g-hw-c{stroke:#D3B880;stroke-width:4.4}
.g-hw{stroke:#F3E0AE;stroke-width:2.8}
.g-dot{fill:#9A9B9F}
.g-lbl{font-size:8.5px;font-weight:500;fill:#85868A;paint-order:stroke;stroke:#EEEBE5;stroke-width:2.6px;stroke-linejoin:round}
.g-lbl.big{font-size:12px;font-weight:700;fill:#5E5F63}
.mph-attr{position:absolute;right:10px;top:10px;z-index:3;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.78);font-size:8.5px;color:#6B6C70}
.mph-chip{position:absolute;left:14px;top:14px;z-index:3;height:32px;padding:0 13px 0 11px;display:flex;align-items:center;gap:6px;border-radius:999px;border:1px solid #E1DFDA;background:#fff;font-size:12.5px;font-weight:500;box-shadow:0 2px 8px rgba(30,31,34,.06)}
.mph-chip svg{width:15px;height:15px;flex:none;fill:none;stroke:#6B6C70;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* La ruta de OSRM: borde blanco y línea roja, solo en «Hoja» */
.mph-route{display:none}
.mph[data-step="4"] .mph-route{display:inline}
.mph-route polyline{fill:none;stroke-linejoin:round;stroke-linecap:round}
.mph-route-case{stroke:#fff;stroke-width:5.5}
.mph-route-line{stroke:var(--mph-red);stroke-width:3}
/* Pin de obra: relleno del vendedor y anillo de la etapa. En Destinos y Hoja, las paradas pasan a rojo con su número. */
.mph-pin{position:absolute;left:var(--x);top:var(--y);z-index:1;width:18px;height:18px;margin:-9px;display:grid;place-items:center;border-radius:50%;background:var(--v);border:3px solid var(--s);box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.2);transition:background-color .25s ease,border-color .25s ease,width .2s ease,height .2s ease,margin .2s ease,opacity .35s ease,transform .35s ease}
.mph-pin i{display:none;font-style:normal;font-size:12px;font-weight:700;color:#fff}
/* .on la pone main.js: en los pasos 2 a 4 a mano, y de a una cuando la animación toca la obra */
.mph-pin.on{z-index:2;width:26px;height:26px;margin:-13px;background:var(--mph-red);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.mph-pin.on i{display:block}
.mph[data-step="4"] .mph-pin:not([data-n]):not(.sug){opacity:0;transform:scale(.4)}
.mph-pin.sug{opacity:0;transform:scale(.4);width:22px;height:22px;margin:-11px;background:#fff;border:2px solid #9A9B9F;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.mph-pin.sug i{display:block;color:#3E3F43}
/* Las sugerencias del camino se muestran según la solapa abierta: clientes de la cartera u obras del pipeline */
.mph[data-step="4"] .mph-pin.sug{transition-delay:var(--pd,0s)}
.mph[data-step="4"][data-mini="clientes"] .mph-pin.sug.cli,
.mph[data-step="4"][data-mini="ia"] .mph-pin.sug.cli,
.mph[data-step="4"][data-mini="obras"] .mph-pin.sug.obra,
.mph[data-step="4"] .mph-pin.sug.stop{opacity:1;transform:none}
.mph-pin.sug.obra{border-color:var(--s)}
/* Punto de salida (el nombre ya lo pone el mapa) */
.mph-origin{position:absolute;left:var(--x);top:var(--y);z-index:2;display:none;width:14px;height:14px;margin:-7px;border-radius:50%;background:#1E1F22;border:3px solid #fff;box-shadow:0 0 0 4px rgba(30,31,34,.12)}
.mph.has-origin .mph-origin{display:block;animation:mphpop .35s ease both}
/* Hoja inferior */
.mph-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;max-height:92%;display:flex;flex-direction:column;overflow:hidden;border-radius:20px 20px 0 0;background:#fff;box-shadow:0 -8px 24px rgba(30,31,34,.10);transition:transform .6s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1)}
/* Hoja plegada: solo asoman la manija y las pestañas, el mapa queda de fondo */
.mph[data-sheet="peek"] .mph-sheet{transform:translateY(calc(100% - 60px))}
/* Alto de la hoja por paso: en Destinos y en Hoja deja ver las paradas del mapa */
.mph[data-step="3"] .mph-sheet,.mph[data-tab="saved"] .mph-sheet{height:70%}
.mph[data-step="1"] .mph-sheet{height:69%}
.mph[data-step="2"] .mph-sheet{height:56%}
.mph[data-step="4"] .mph-sheet{height:59%}
.mph-grab{flex:none;display:block;width:40px;height:4px;margin:10px auto 4px;border-radius:2px;background:#D5D3CE}
.mph-tabs{flex:none;display:flex;align-items:stretch;padding:0 8px;border-bottom:1px solid #E6E4DF}
.mph-tabs button{display:flex;align-items:center;gap:6px;margin-bottom:-1px;padding:11px 10px;border:0;border-bottom:2px solid transparent;background:none;font-size:14px;color:#6B6C70}
.mph-tabs>span{flex:1}
.mph-tabs em{padding:1px 7px;border-radius:999px;background:#F3F1EE;font-style:normal;font-size:11px;font-weight:600;color:#3E3F43}
.mph[data-tab="plan"] [data-tabgo="plan"],.mph[data-tab="saved"] [data-tabgo="saved"]{border-bottom-color:#1E1F22;color:#1E1F22;font-weight:600}
.mph-tabs .mph-reset{align-self:center;padding:0 8px;border:0;font-size:12px;color:var(--mph-red)}
.mph-plan,.mph-saved{flex:1;min-height:0;display:flex;flex-direction:column}
.mph-steps{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px 18px 0}
.mph-steps button{padding:0;border:0;background:none;text-align:left;font-size:11px;color:#9A9B9F}
.mph-steps i{display:block;height:4px;margin-bottom:6px;border-radius:2px;background:#E6E4DF}
.mph[data-step="2"] .mph-steps [data-go="1"] i,.mph[data-step="3"] .mph-steps [data-go="1"] i,.mph[data-step="3"] .mph-steps [data-go="2"] i,
.mph[data-step="4"] .mph-steps [data-go="1"] i,.mph[data-step="4"] .mph-steps [data-go="2"] i,.mph[data-step="4"] .mph-steps [data-go="3"] i{background:#1E1F22}
.mph[data-step="1"] .mph-steps [data-go="1"],.mph[data-step="2"] .mph-steps [data-go="2"],.mph[data-step="3"] .mph-steps [data-go="3"],.mph[data-step="4"] .mph-steps [data-go="4"]{color:#1E1F22;font-weight:600}
.mph[data-step="1"] .mph-steps [data-go="1"] i,.mph[data-step="2"] .mph-steps [data-go="2"] i,.mph[data-step="3"] .mph-steps [data-go="3"] i,.mph[data-step="4"] .mph-steps [data-go="4"] i{background:var(--mph-red)}
.mph-head{flex:none;padding:10px 18px 0}
.mph-head.row{display:flex;align-items:flex-start;gap:10px}
.mph-head.row>div{flex:1;min-width:0}
.mph-head b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.mph-head p{margin:3px 0 0;font-size:12.5px;color:#6B6C70}
.mph-body{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;padding:12px 18px 14px;scrollbar-width:none}
.mph-body::-webkit-scrollbar{display:none}
.mph-stack{display:grid;gap:12px}
.mph-row{display:flex;align-items:center;gap:8px}
.mph-input{flex:1;min-width:0;height:42px;display:flex;align-items:center;padding:0 13px;border:1px solid #CFCDC8;border-radius:8px;font-size:13.5px;color:#9A9B9F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mph-input.val{color:#1E1F22}
.mph-btn{flex:none;height:40px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #CFCDC8;border-radius:8px;background:#fff;font-size:13px;font-weight:500;color:#1E1F22;white-space:nowrap}
.mph-btn.sm{height:30px;padding:0 11px;font-size:12px}
.mph-btn.wide{width:100%}
.mph-ring{width:10px;height:10px;border-radius:50%;border:2px solid #1E1F22;box-sizing:border-box}
.mph-seg{flex:none;display:flex;gap:2px;padding:3px;border-radius:8px;background:#F3F1EE}
.mph-seg>*{height:34px;padding:0 11px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:12.5px;font-weight:500;color:#6B6C70}
.mph-seg>b{background:#fff;color:#1E1F22;box-shadow:0 1px 3px rgba(30,31,34,.12)}
.mph-seg.full>*{flex:1}
.mph-seg.sm{justify-self:start}
.mph-seg.sm>*{height:28px;font-size:12px}
.mph-list{overflow:hidden;border:1px solid #E6E4DF;border-radius:10px}
.mph-item{display:flex;align-items:center;gap:11px;padding:8px 14px 8px 13px;border-bottom:1px solid #E6E4DF}
.mph-item:last-child{border-bottom:0}
.mph-item>div{flex:1;min-width:0}
.mph-item b{display:block;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mph-item>div span{font-size:11.5px;color:#6B6C70}
.mph-item>i{font-style:normal;font-size:13px;color:#9A9B9F}
.mph-n{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--mph-red);color:#fff;font-size:12px;font-weight:700}
.mph-hint{margin:0;font-size:11.5px;line-height:1.45;color:#8A8B8F}
.mph-note{margin:0;font-size:11px;color:#9A9B9F}
.mph-box{display:grid;gap:9px;padding:13px;border:1px solid #E6E4DF;border-radius:12px;background:#FAF9F7}
.mph-box.dashed{border-style:dashed;border-color:#CFCDC8}
.mph-box>b{font-size:13px;font-weight:600}
.mph-box>b em{font-style:normal;font-weight:400;color:#8A8B8F}
.mph-box>p{margin:0;font-size:12px;line-height:1.5;color:#6B6C70}
.mph-field{display:grid;gap:6px;min-width:0}
.mph-field>span:first-child{font-size:12.5px;font-weight:500;color:#3E3F43}
.mph-field em{font-style:normal;font-weight:400;color:#9A9B9F}
.mph-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mph-more{display:flex;justify-content:space-between;gap:8px;padding:11px 13px;border:1px solid #E6E4DF;border-radius:10px;background:#FAF9F7;font-size:12.5px;color:#3E3F43}
.mph-more em,.mph-more i{font-style:normal;color:#8A8B8F}
.mph-card{display:grid;gap:11px;padding:13px;border:1px solid #E6E4DF;border-radius:12px}
.mph-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mph-kpis b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.mph-kpis span{display:block;margin-top:2px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6B6C70}
.mph-card hr{margin:0;border:0;border-top:1px solid #E6E4DF}
.mph-card>p{margin:0;font-size:12.5px;color:#3E3F43}
.mph-tags{display:flex;flex-wrap:wrap;gap:5px}
.mph-tags span{padding:3px 9px;border-radius:999px;background:#F3F1EE;font-size:10.5px;font-weight:500;color:#3E3F43}
.mph-sug{display:flex;align-items:center;gap:10px}
.mph-sug>i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}
.mph-sug>div{flex:1;min-width:0}
.mph-sug>div b{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mph-sug>div span{font-size:11.5px;color:#6B6C70}
.mph-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A8B8F}
.mph-card.iti{gap:0}
.mph-card.iti .mph-label{margin-bottom:12px}
.mph-leg{position:relative;display:flex;gap:12px;padding-bottom:16px}
.mph-leg::before{content:"";position:absolute;left:11px;top:26px;bottom:3px;width:2px;background:#E1DFDA}
.mph-leg.end{padding-bottom:0}
.mph-leg.end::before{display:none}
.mph-leg>i{flex:none;width:24px;display:grid;justify-items:center}
.mph-leg>i::after{content:"";width:12px;height:12px;margin-top:3px;border-radius:50%;background:#1E1F22}
.mph-leg>div{flex:1;min-width:0;display:grid;gap:1px}
.mph-leg p{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mph-leg p b{font-size:13.5px;font-weight:600}
.mph-leg p em{font-style:normal;font-size:11.5px;color:#6B6C70;white-space:nowrap}
.mph-leg.start b,.mph-leg.end b{font-size:12.5px;font-weight:500}
.mph-leg>div>span{font-size:11.5px;color:#6B6C70}
.mph-leg strong{margin-top:2px;font-size:11.5px;font-weight:500;color:var(--mph-red)}
.mph-acts{display:flex;gap:6px;margin-top:6px}
.mph-leg .mph-acts span{height:28px;padding:0 10px;display:inline-flex;align-items:center;border:1px solid #CFCDC8;border-radius:7px;font-size:11.5px;font-weight:500;color:#1E1F22}
.mph-foot{flex:none;display:flex;gap:9px;padding:11px 18px 20px;border-top:1px solid #E6E4DF;background:#FAF9F7}
.mph-cta{flex:1;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:var(--mph-red);color:#fff;font-size:14.5px;font-weight:600}
.mph .mph-cta{color:#fff}
.mph-saved>.mph-stack{flex:1;min-height:0;overflow-y:auto;align-content:start;padding:14px 18px;scrollbar-width:none}
.mph-trip{display:grid;gap:10px;padding:13px;border:1px solid #E6E4DF;border-radius:10px}
.mph-trip.on{border-color:#1E1F22;background:#FAF9F7}
.mph-trip-h{display:flex;justify-content:space-between;gap:8px}
.mph-trip-h b{display:block;font-size:13.5px;font-weight:600}
.mph-trip-h span{font-size:11.5px;color:#6B6C70}
.mph-trip-h em{font-style:normal;font-size:11.5px;color:#8A8B8F;white-space:nowrap}
.mph-dark{flex:1;height:38px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:#1E1F22;font-size:12.5px;font-weight:600}
.mph .mph-dark{color:#fff}
/* Piezas que usa la animación (main.js): resultado de búsqueda, salida elegida, cursor, cálculo, aviso de guardado */
.mph-res{display:flex;align-items:center;gap:10px;padding:11px 13px;background:#fff;font-size:13.5px;transition:background-color .15s ease}
.mph-res i{flex:none;width:8px;height:8px;border-radius:50%;background:#9A9B9F}
.mph-res.hover{background:#F3F1EE}
.mph-chosen{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid #E6E4DF;border-radius:10px;background:#FAF9F7;animation:mphin .3s ease both}
.mph-chosen>i{flex:none;width:12px;height:12px;border-radius:50%;background:#1E1F22}
.mph-chosen>div{flex:1;min-width:0}
.mph-chosen span{display:block;font-size:11.5px;color:#8A8B8F}
.mph-chosen b{font-size:13.5px;font-weight:500}
.mph-chosen em{font-style:normal;font-size:12.5px;color:var(--mph-red)}
.mph-input.typing::after{content:"";flex:none;width:1.5px;height:17px;margin-left:1px;background:#1E1F22;animation:mphcaret 1s steps(1) infinite}
@keyframes mphcaret{50%{opacity:0}}
.mph-armar .l1,.mph-armar .mph-spin{display:none}
.mph-armar.busy .l0{display:none}
.mph-armar.busy .l1{display:inline}
.mph-armar.busy .mph-spin{display:block}
.mph-spin{flex:none;width:14px;height:14px;margin-right:8px;border-radius:50%;border:2px solid #fff;border-top-color:transparent;animation:mphspin .8s linear infinite}
@keyframes mphspin{to{transform:rotate(360deg)}}
.mph-ok{padding:10px 13px;border:1px solid #CFE6D6;border-radius:10px;background:#EAF5EE;font-size:12.5px;color:#2F7A46;animation:mphin .3s ease both}
.mph-cta,.mph-btn{transition:transform .12s ease,filter .12s ease}
.mph .press{transform:scale(.95);filter:brightness(.9)}
.mph-pin.tap::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--mph-red);animation:mphtap .5s ease-out forwards}
@keyframes mphtap{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(1.25)}}
.mph-item.in{animation:mphin .3s ease both}
@keyframes mphin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mphpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* ---- Parámetros de la gira (paso 3): la fila se abre y la hoja crece hasta arriba ---- */
.mph{--mini:240px}
.mph[data-sheet="full"] .mph-sheet{height:92%}
.mph-veh,.mph-veh-open{display:grid;gap:10px}
.mph-veh-open{animation:mphin .3s ease both}
.mph-more i{transition:transform .25s ease}
.mph-veh.open .mph-more i{transform:rotate(180deg)}
.mph-input.bump{animation:mphbump .4s ease}
@keyframes mphbump{40%{transform:scale(1.03);border-color:var(--mph-red);color:var(--mph-red)}}

/* ---- Hoja plegada: los totales de la gira quedan a la vista ---- */
.mph-peekbar{display:none;flex:none;align-items:center;justify-content:center;gap:4px;padding:4px 16px 0;font-size:12.5px;color:#6B6C70}
.mph-peekbar b{font-size:13.5px;font-weight:600;color:#1E1F22}
.mph[data-step="4"][data-sheet="peek"] .mph-peekbar{display:flex}
.mph[data-step="4"][data-sheet="peek"] .mph-tabs{display:none}
.mph-peekbar b{transition:color .4s ease}
.mph-peekbar.flash b{color:var(--mph-red)}

/* ---- Tarjeta chica: muestra una función sin tapar el mapa ---- */
.mph-mini{display:none;flex:1;min-height:0;flex-direction:column;gap:9px;padding:8px 16px 14px}
.mph[data-sheet="mini"] .mph-sheet{height:var(--mini);transform:none}
/* Con la tarjeta chica abierta el mapa sube un poco para que la gira entera siga entrando */
.mph[data-sheet="mini"] .mph-geo{transform:translateY(-30px)}
.mph[data-sheet="mini"] .mph-tabs,.mph[data-sheet="mini"] .mph-plan,.mph[data-sheet="mini"] .mph-saved{display:none}
.mph[data-sheet="mini"] .mph-mini{display:flex}
.mph-mini-h{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.mph-mini-h b{font-size:14px;font-weight:600}
.mph-mini-h em{font-style:normal;font-size:11.5px;color:#8A8B8F}
.mph-mtabs{align-self:start}
.mph[data-mini="ia"] .mph-mtabs{display:none}
.mph-seg>.on{background:#fff;color:#1E1F22;box-shadow:0 1px 3px rgba(30,31,34,.12)}
.mph-seg small{margin-left:5px;font-size:11px;color:#9A9B9F}
.mph-seg>.on small{color:#6B6C70}
.mph-mp{flex:1;min-height:0;display:grid;gap:9px;align-content:start;overflow:hidden;padding-inline:5px;margin-inline:-5px}
.mph-mini-t{margin:0;display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.45;color:#6B6C70}
.mph-mini-t.busy{color:#3E3F43}
.mph-spin.red{margin:0;border-color:var(--mph-red);border-top-color:transparent}
.mph-sug{padding:2px 5px;margin:0 -5px;border-radius:8px;transition:background-color .15s ease,opacity .25s ease,transform .25s ease}
.mph-sug.hover{background:#F3F1EE}
.mph-sug>i.dash{background:none;border:2px dashed var(--mph-red);box-sizing:border-box}
.mph-sug.in{animation:mphin .3s ease both}
.mph-sug.out{opacity:0;transform:translateX(12px)}
.mph-ai-l{margin:0;font-size:11.5px;line-height:1.45;color:#3E3F43;opacity:0;transform:translateY(6px)}
.mph-ai-l.in{opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}
.mph-ai-l b{font-weight:600;color:#1E1F22}
.mph-mini-f{flex:none;display:flex;align-items:center;min-height:30px;font-size:11.5px;color:#6B6C70}
.mph-mini-f>span{flex:1;min-width:0;display:flex;align-items:center;gap:7px}
.mph-mini-f b{font-weight:600;color:#1E1F22}
.mph-mini-f .mph-dirty{flex:1;min-width:0;font-style:normal;color:var(--mph-red)}
.mph-btn.dark{border-color:#1E1F22;background:#1E1F22}
.mph .mph-btn.dark{color:#fff}
.mph-recalc .l1,.mph-recalc .mph-spin{display:none}
.mph-recalc.busy .l0{display:none}
.mph-recalc.busy .l1{display:inline}
.mph-recalc.busy .mph-spin{display:block}

/* ---- Pines nuevos: el prospecto de la web y la ruta vieja mientras se recalcula ---- */
.mph-pin.add{opacity:0;transform:scale(.4)}
.mph[data-step="4"] .mph-pin.add.on{opacity:1;transform:none}
.mph-pin.sug.stop{width:26px;height:26px;margin:-13px}
.mph-pin.dash.on{background:#fff;border:2px dashed var(--mph-red);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.2)}
.mph-pin.dash.on i{display:block;color:var(--mph-red)}
.mph-pin.drop{animation:mphdrop .45s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes mphdrop{from{opacity:0;transform:translateY(-22px) scale(.6)}to{opacity:1;transform:none}}
.mph-pin.flip i{animation:mphflip .3s ease}
@keyframes mphflip{40%{transform:scale(1.35)}}
.mph-pin.halo::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--mph-red);animation:mphtap .7s ease-out forwards}
.mph-route-ghost{fill:none;stroke:#9A9B9F;stroke-width:2;stroke-dasharray:5 5;opacity:.75;transition:opacity .5s ease}
.mph-route-ghost.fade{opacity:0}
.mph-scan{position:absolute;left:var(--x);top:var(--y);z-index:1;width:14px;height:14px;margin:-7px;border-radius:50%;border:2px solid var(--mph-red);opacity:0}
.mph-scan.on{animation:mphscan .9s ease-out var(--d,0s) 2 both}
@keyframes mphscan{from{opacity:.75;transform:scale(.3)}to{opacity:0;transform:scale(4.5)}}

/* Asistente: la charla queda pegada abajo, como en un chat de verdad; lo viejo se va por arriba */
/* El chat va en un marco del mismo tamaño que la maqueta del mapa */
.chatph{--s:.88;width:calc(360px * var(--s));height:calc(520px * var(--s));display:block}
.chatph .chatv{width:360px;height:520px;transform:scale(var(--s));transform-origin:top left;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border-radius:28px;border:1px solid #E1DFDA;background:var(--card-solid);box-shadow:0 12px 32px rgba(30,31,34,.10)}
/* Tres mini chats debajo del grande: la misma pregunta y respuesta, en chico */
.exs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-flow:column;gap:6px 12px;width:100%}
.ex{display:contents}
.exs .msg{width:100%;max-width:none;padding:6px 9px;border-radius:11px;font-size:11.5px;line-height:1.35}
.exs .msg.me{grid-row:1;text-align:right;border-bottom-right-radius:4px}
.exs .msg.bot{grid-row:2;align-self:stretch;border-bottom-left-radius:4px}
.exs .msg b{font-variant-numeric:tabular-nums}
.ex-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ex-pills em{font-style:normal;padding:2px 7px;border-radius:999px;background:var(--red-tint);color:var(--red-ink);font-size:10px;font-weight:600}
.ex-bars{display:block;width:100%;height:16px;margin-top:5px}
.ex-bars rect{fill:var(--red-tint)}
.ex-bars rect.on{fill:var(--red-ink)}
.ex-prog{display:block;height:6px;margin-top:6px;border-radius:3px;background:var(--chip);overflow:hidden}
.ex-prog i{display:block;height:100%;width:var(--w);border-radius:3px;background:var(--red-ink)}
.chat-body{position:relative;min-height:0;overflow:hidden}
.chat-stack{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px}
.msg{flex:none;max-width:90%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.4}
.msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:var(--card-solid);border:1px solid var(--line2);border-bottom-left-radius:5px}
.debts{display:grid;gap:5px;margin-top:7px}
.debt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:6px 9px;border-radius:9px;background:var(--card2)}
.debt b{font-size:13px}
.debt strong{font-size:13px;font-variant-numeric:tabular-nums}
.debt .pill{grid-column:1/-1;justify-self:start}
.confirm{display:flex;gap:8px;margin-top:8px}
/* Piezas que el asistente devuelve dentro de la burbuja: el presupuesto en chiquito y las métricas */
.mini-doc{position:relative;overflow:hidden;display:grid;gap:4px;min-width:215px;margin-top:8px;padding:9px 10px 8px;border:1px solid var(--line2);border-radius:8px;background:var(--card-solid);font-size:10.5px;line-height:1.35}
.mini-doc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red-ink)}
.mini-doc-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-top:2px}
.mini-doc-h b{font-size:11.5px}
.mini-doc-h span{color:var(--muted)}
.mini-doc-r,.mini-doc-t{display:flex;justify-content:space-between;gap:10px;color:var(--ink2);font-variant-numeric:tabular-nums}
.mini-doc-t{margin-top:2px;padding-top:4px;border-top:1px solid var(--line2);color:var(--ink);font-weight:600}
.mini-vend{display:grid;gap:5px;min-width:225px;margin-top:8px}
.mini-vend>div{display:grid;grid-template-columns:8px 58px minmax(0,1fr) auto;align-items:center;gap:7px;font-size:10.5px}
.mini-vend i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.mini-vend span{color:var(--ink2);white-space:nowrap}
.mini-vend em{height:7px;border-radius:4px;background:var(--c);width:var(--w);justify-self:start;min-width:6px}
.mini-vend b{font-variant-numeric:tabular-nums;font-size:11px}
.mini-ruta{display:grid;gap:5px;min-width:235px;margin-top:8px}
.mr-svg{width:100%;height:50px;display:block;border-radius:10px;background:var(--chip);padding:5px 6px}
.mr-path{fill:none;stroke:var(--red-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mr-dots circle{fill:#fff;stroke:var(--red-ink);stroke-width:3}
.mr-org{fill:#1E1F22}
.mr-fin{fill:var(--red-ink)}

.mr-tot{font-size:11px;color:var(--ink2);font-variant-numeric:tabular-nums}
.mr-tot b{color:var(--ink)}
.mini-ruta .chat-acts{margin-top:3px}
.chat-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chat-acts span{padding:4px 9px;border-radius:8px;border:1px solid var(--line);background:var(--card-solid);font-size:12px;font-weight:600;color:var(--ink2)}
.chat-foot{display:grid;padding:11px 12px;border-top:1px solid var(--line2);background:var(--card2)}
.chat-row{display:flex;align-items:center;gap:8px}
.chat-input{flex:1;min-width:0;height:36px;display:flex;align-items:center;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--field);font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-send{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--red-btn);color:#fff}

/* Vida al entrar: tarjetas del kanban, ruta que se dibuja y charla en orden. Siempre desde un estado visible. */
/* backwards y no both: al terminar, la tarjeta vuelve a su estilo y puede subir al pasar el mouse o al destacarse */
.ctile.in .deal,.ctile.in .quote{animation:rise .5s cubic-bezier(.2,.7,.2,1) backwards}
.ctile.in .kcol:nth-child(2) .deal{animation-delay:.12s}
.ctile.in .kcol:nth-child(3) .deal{animation-delay:.24s}
.ctile.in .quote{animation-delay:.3s}
/* La charla se arma sola al entrar (main.js). Sin JS o con movimiento reducido se ve completa desde el principio. */
.chat-stack.play .msg:not(.show){display:none}
.msg.show{animation:msgin .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.typing{display:flex;gap:4px;padding:12px 14px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:blink 1s ease-in-out infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}
.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* Notebooks: casi todas tienen menos de 800 px de alto útil. Título más chico, menos aire y sin la nota de WhatsApp. */
@media (max-height:800px) and (min-width:900px){
  .com{padding-block:12px 84px}
  .com .sec-head{margin-bottom:12px;gap:6px}
  .com .sec-head h2{font-size:clamp(28px,2.6vw,36px)}
  .ctile{padding-top:16px;gap:10px}
  .ctile-note{display:none}
}
@keyframes deal-in{from{opacity:0;transform:translateX(-12px)}}
@keyframes kbump{40%{transform:scale(1.25)}}
/* Celular: un mosaico por pantalla, se desliza de costado */
@media (max-width:720px){
  .com{padding-block:28px 96px}
  .com .sec-head{margin-bottom:14px}
  .cdots{display:flex}
  .cband{display:none}
  .cbento{
    /* Alto del mosaico: el título, las pestañas y el mosaico entran en una pantalla, por encima del dock (18-09).
       Antes el dock pisaba el final del presupuesto y de la maqueta del mapa. */
    --tileh:clamp(430px,calc(100svh - 321px),560px);
    display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:-16px;padding:4px 16px 18px;scroll-padding-inline:16px;
  }
  .cbento::-webkit-scrollbar{display:none}
  .ctile{flex:0 0 min(86%,420px);height:var(--tileh);scroll-snap-align:start;padding:18px 18px 0}
  .ctile-head h3{font-size:18px}
  .ctile-head p{font-size:13.5px}
  /* Mapa: en celular va sin la ficha de funciones de abajo (Fran, 18-09): la maqueta ocupa todo el mosaico.
     El Asistente comparte el mismo armado y, con el mosaico más bajo, su ficha quedaba cortada: también va sin ella. */
  .t-map .fx,.t-ia .fx{display:none}
  .mapwrap{grid-template-rows:minmax(0,1fr);row-gap:0;padding-bottom:0;justify-items:stretch}
  .mapph{--s:1;width:100%;height:100%}
  .mapph .mph{width:100%;transform:none}
  /* En el celular manda el chat grande: los mini chats no entran y se ocultan */
  .exs{display:none}
  .chatph{--s:1;width:100%;height:100%}
  .chatph .chatv{width:100%;height:100%;transform:none;border-radius:20px}
  .fx{gap:0}
  .fx-card{padding:11px 13px;border-radius:12px}

  .fx-item{gap:4px}
  .fx-top{font-size:10.5px;gap:7px}
  .fx-item b{font-size:15px}
  .fx-item span:not(.fx-top){font-size:12.5px}
  .fx.all .fx-list{gap:10px}
  /* Pipeline: en celular manda lo legible. Un negocio por columna (arriba) y el presupuesto sin desgloses ni subtotales,
     con el total y los tres renglones en letra más grande (Fran, 17-09: muy legible, sin tanta carga) */
  .qrow small,.qtot{display:none}
  /* Nada se pisa (Fran, 18-09: «se traspone todo demasiado»). El tablero tiene alto fijo para que el presupuesto no salte,
     los títulos van a dos renglones y «Enviar mensaje» se abre como una hoja que cubre justo el tablero, no como un
     recuadro flotando sobre dos tarjetas. El recorrido automático en celular no lo abre: pasa la oportunidad de columna
     con un fundido (ver main.js) y muestra el PDF. */
  .t-pipe .kanban{position:relative;height:160px}
  .t-pipe .ctile-vis.bleed{-webkit-mask-image:none;mask-image:none}
  .t-pipe .deal{position:static}
  .t-pipe .deal:hover,.t-pipe .deal.spot{transform:none}
  .t-pipe .deal b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .t-pipe .dsend,.t-pipe .kcol:nth-child(n+2) .dsend{top:0;left:0;right:0;width:auto;max-height:100%;z-index:7}
  .t-pipe .deal.leave{opacity:0;transform:translateX(12px);transition:opacity .26s ease,transform .26s ease}
  .t-pipe .deal.swap-in{animation:deal-in .34s cubic-bezier(.2,.7,.2,1) both}
  .t-pipe .kcount.bump{animation:kbump .4s ease}
  .quote{padding:11px 12px}
  .qgrand{padding:6px 11px}
  .quote{gap:6px}
  .qrows{font-size:13.5px;gap:7px}
  .qgrand strong{font-size:18px}
  /* Mapa: sin los nombres chicos de los pueblos, que a este tamaño no se leen; quedan los grandes */
  .g-lbl:not(.big){display:none}
  .mph{width:100%;height:100%}
  /* En el celular angosto el chip queda solo con el ojo, para no tapar la parada de Ascochinga */
  .mph{--mini:232px}
  /* La maqueta en celular es más baja: las hojas necesitan más alto, y el marco (pestañas, pasos, pie) menos */
  .mph[data-step="1"]:not([data-sheet="mini"]):not([data-sheet="full"]) .mph-sheet{height:75%}
  .mph[data-step="3"]:not([data-sheet="mini"]):not([data-sheet="full"]) .mph-sheet,
  .mph[data-step="4"]:not([data-sheet="mini"]):not([data-sheet="full"]) .mph-sheet{height:64%}
  /* Destinos y Detalles (18-09): sin la fila de pestañas, para que entren las paradas de la lista; y en Destinos la hoja
     baja un poco, así la parada 1 no queda escondida detrás del borde */
  .mph[data-step="2"]:not([data-sheet="mini"]):not([data-sheet="full"]) .mph-sheet{height:60%}
  .mph[data-step="2"] .mph-tabs,.mph[data-step="3"] .mph-tabs{display:none}
  .mph-tabs button{padding:9px 9px}
  .mph-steps{padding-top:9px}
  .mph-head{padding-top:8px}
  .mph-head b{font-size:16px}
  .mph-head p{display:none}
  .mph-foot{padding:9px 16px 12px}
  .mph-cta{height:40px}
  .mph-mini{gap:7px;padding:6px 14px 12px}
  .mph-mini-f .mph-btn.sm{padding:0 7px}
  .mph-chip{width:32px;padding:0;justify-content:center}
  .mph-chip [data-s]{display:none}
}
/* Celulares muy bajos: mandan las maquetas y se ocultan las bajadas de los mosaicos */
@media (max-width:720px) and (max-height:700px){.ctile-head p{display:none}}

/* ---------- ¿QUIÉN SOS? ---------- */
.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.who-btn{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;cursor:pointer;text-align:left;
  background:var(--card);border:1.5px solid var(--line2);box-shadow:var(--shadow-card);font-size:15px;font-weight:600;
  transition:border-color .15s ease,transform .15s ease;
}
.who-btn:hover{transform:translateY(-2px)}
.who-btn[aria-checked="true"]{border-color:var(--red);background:color-mix(in srgb,var(--red) 7%,var(--card-solid))}
.who-btn[aria-checked="true"] .icon-chip{background:var(--red-btn);color:#fff}
/* El rol que sigue al elegido late suave: un anillo rojo que se abre y se apaga, para que se note que se toca (pedido de Fran, 16-09) */
/* Late solo con las pestañas a la vista: arranca de cero apenas aparecen, sin esperar la vuelta (Fran, 16-09) */
.who.live .who-btn.next{animation:who-next 1.9s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes who-next{
  0%{border-color:color-mix(in srgb,var(--red) 45%,var(--line2));box-shadow:var(--shadow-card),0 0 0 0 color-mix(in srgb,var(--red) 30%,transparent)}
  60%,100%{border-color:var(--line2);box-shadow:var(--shadow-card),0 0 0 10px color-mix(in srgb,var(--red) 0%,transparent)}
}
@media (prefers-reduced-motion:reduce){.who-btn.next{animation:none;border-color:color-mix(in srgb,var(--red) 35%,var(--line2))}}
.who-panel{padding:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:18px;align-items:center}
.gain{display:grid;gap:8px;align-content:start;align-self:start}
.gain b{font-size:16px;letter-spacing:-.01em}
.gain span{font-size:14px;color:var(--ink2)}
.who-cta{display:grid;gap:8px;justify-items:start;padding-left:18px;border-left:1px solid var(--line)}
.who-cta small{font-size:12.5px;color:var(--muted);max-width:22ch}

/* ---------- ADMINISTRACIÓN · Contabilidad y Reportes ---------- */
/* Las dos apps del grupo Administración del CRM, con maquetas animadas (pedido de Fran, 16-09).
   Todo se ve completo y quieto por defecto; las animaciones corren solo con .anim, que pone el JS
   cuando hay movimiento permitido. */
.abento{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:520px;gap:14px}
.abento .ctile{padding-bottom:18px}

/* Contabilidad: el escritorio con sus seis apps y la ventana de la que está abierta */
/* El globito de Cobranzas sobresale 6 px del ícono (y 2 más cuando la app está elegida y sube): el recorte del mosaico
   le comía la punta (Fran, 18-09). Se le da ese aire arriba sin mover nada: margen negativo y relleno del mismo tamaño. */
.conta{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;margin-top:-10px;padding-top:10px}
.cdesk{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.capp{position:relative;display:grid;justify-items:center;gap:6px;padding:6px 2px 10px;border:0;border-radius:14px;background:none;color:inherit;font:inherit;cursor:pointer}
.capp-ic{position:relative;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px rgba(0,0,0,.16);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.capp-ic svg.i{width:24px;height:24px}
.capp-name{font-size:12px;font-weight:600;line-height:1.2;color:var(--ink1);white-space:nowrap}
.capp::after{content:"";position:absolute;left:50%;bottom:1px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ink1);opacity:0;transform:scale(.3);transition:opacity .2s ease,transform .2s ease}
.capp[aria-selected="true"]::after{opacity:.6;transform:none}
.capp[aria-selected="true"] .capp-ic{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 20px rgba(0,0,0,.2)}
.capp:hover .capp-ic{filter:brightness(1.06)}
.capp:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.capp-badge{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;display:grid;place-items:center;background:var(--red-btn);color:#fff;font-style:normal;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.capp-lock{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:var(--card-solid);color:var(--ink1);box-shadow:0 1px 4px rgba(0,0,0,.22)}
.capp-lock svg.i{width:11px;height:11px;stroke-width:2.2}

.cwin{position:relative;min-height:0;border:1px solid var(--line2);border-radius:14px;background:var(--card2);overflow:hidden}
.cv{position:absolute;inset:0;display:grid;align-content:start;gap:12px;padding:14px 16px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.cv.on{opacity:1;visibility:visible;transition:opacity .3s ease}
.cv-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.cv-top b{font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.cv-top>span{min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-chip{margin-left:auto;align-self:center;font-style:normal;font-variant-numeric:tabular-nums}
.pill.plain{background:var(--chip);color:var(--ink2)}
.cv-foot{position:absolute;left:16px;right:16px;bottom:12px;display:flex;align-items:center;gap:6px;margin:0;font-size:11.5px;color:var(--muted)}
.cv-foot svg.i{width:14px;height:14px;flex:none}

/* Estados de cada fila */
.st{justify-self:end;padding:3px 7px;border-radius:6px;font-style:normal;font-size:11px;font-weight:700;white-space:nowrap}
.st.ok{background:var(--green-tint);color:var(--green)}
.st.bad{background:var(--crit-tint);color:var(--crit)}
.st.warn{background:var(--amber-tint);color:var(--amber)}
.st.info{background:var(--blue-tint);color:var(--blue-ink)}
.st.cart{background:var(--chip);color:var(--ink2)}

/* Cobranzas */
.age{display:grid;gap:7px}
.age-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--ink2)}
.age-head b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.age-bar{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;background:var(--chip)}
.age-bar i{width:var(--w);background:var(--c);transform-origin:left center}
.age-leg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--ink2)}
.age-leg span{display:inline-flex;align-items:center;gap:5px}
.age-leg span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}
.dlist,.chqs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dlist li,.chqs li{display:grid;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--card-solid)}
.dlist li{grid-template-columns:28px minmax(0,1fr) 72px 84px 64px}
.dlist .co{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--t);background:color-mix(in srgb,var(--t) 18%,transparent)}
.dlist b,.chqs b{min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlist .mini{display:flex;gap:1px;height:6px;border-radius:3px;overflow:hidden;background:var(--chip)}
.dlist .mini i{width:var(--w);background:var(--c);transform-origin:left center}
.dlist strong,.chqs strong{font-size:13px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Cheques */
.toast{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:10px;background:var(--amber-tint);color:var(--ink1);font-size:12.5px;line-height:1.35}
.toast svg.i{flex:none;color:var(--amber);transform-origin:50% 10%}
.chqs li{grid-template-columns:36px minmax(0,1fr) auto 84px}
.chqs li>div{display:grid;min-width:0}
.chqs li>div span{font-size:11.5px;color:var(--muted)}
.chq{width:36px;height:24px;padding:0 5px;border-radius:5px;display:grid;align-content:center;gap:3px;border:1.5px solid color-mix(in srgb,#0e9f8a 55%,transparent);background:color-mix(in srgb,#0e9f8a 10%,var(--card-solid))}
.chq i{height:2px;border-radius:1px;background:color-mix(in srgb,#0e9f8a 60%,transparent)}
.chq i:last-child{width:55%;justify-self:end}
.chqs li.done .st{background:var(--green-tint);color:var(--green)}
.chqs .st{justify-self:stretch;text-align:center}

/* Gastos */
.gx{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.ticket{position:relative;display:grid;gap:1px;padding:10px 12px 12px;border:1px solid var(--line2);border-bottom:0;border-radius:10px 10px 0 0;background:var(--card-solid)}
.ticket::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-6px;height:6px;
  background:linear-gradient(135deg,var(--card-solid) 4px,transparent 0) 0 0/8px 6px repeat-x,linear-gradient(-135deg,var(--card-solid) 4px,transparent 0) 0 0/8px 6px repeat-x}
.tk-cat{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#d86a1e}
.ticket b{font-size:13.5px}
.ticket strong{font-size:19px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tk-iva{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.gx-arrow{width:22px;height:22px;color:var(--faint)}
.gx-dest{display:grid;gap:3px;padding:10px 12px;border:1.5px dashed color-mix(in srgb,#e87a2e 50%,transparent);border-radius:10px;background:color-mix(in srgb,#e87a2e 7%,var(--card-solid))}
.gx-dest span{font-size:11px;color:var(--muted)}
.gx-dest b{font-size:13px;line-height:1.3}
.margin{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--card-solid)}
.mg-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;color:var(--ink2)}
.mg-row b{color:var(--ink);font-variant-numeric:tabular-nums}
.mg-pct b{color:var(--green)}
.mg-bar{height:10px;border-radius:5px;overflow:hidden;background:color-mix(in srgb,#4fa97a 24%,transparent)}
.mg-bar i{display:block;width:64%;height:100%;border-radius:5px;background:#e87a2e;transform-origin:left center}

/* Finanzas */
.cv[data-v="finanzas"]{grid-template-rows:auto auto minmax(0,1fr);align-content:stretch}
.cv-seg{margin-left:auto;align-self:center;display:inline-flex;padding:2px;border-radius:7px;background:var(--chip);font-style:normal}
.cv-seg i{padding:2px 7px;border-radius:5px;font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted)}
.cv-seg i.on{background:var(--card-solid);color:var(--ink);box-shadow:var(--shadow-card)}
.kpis3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.kpis3 div{display:grid;gap:1px;padding:7px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--card-solid)}
.kpis3 span{font-size:11px;color:var(--muted)}
.kpis3 b{font-size:16px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpis3 b.g{color:var(--green)}
.kpis3 b.o{color:#d86a1e}
.fchart{min-height:0;padding:12px 14px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--card-solid)}
.fplot{position:relative;width:100%;height:100%;min-height:90px}
.fplot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.f-line{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.f-eq{position:absolute;left:0;right:0;top:40.8%;border-top:1.5px dashed color-mix(in srgb,var(--ink2) 55%,transparent)}
.f-eq-lbl{position:absolute;left:0;top:calc(40.8% - 19px);font-size:10.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.f-dot{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,#4fa97a 32%,transparent)}
.f-hit{position:absolute;transform:translate(-50%,calc(-100% - 12px));padding:3px 8px;border-radius:6px;background:var(--green);color:var(--card-solid);font-size:10.5px;font-weight:700;white-space:nowrap}

/* Sueldos y Personal: solo el candado */
.cv-lock{align-content:center;justify-items:center;gap:8px;text-align:center}
.lock-big{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#c084ea,#a66ad0);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px rgba(0,0,0,.18)}
.lock-big svg.i{width:26px;height:26px}
.cv-lock b{font-size:16px}
.cv-lock>span:last-child{max-width:38ch;font-size:13px;color:var(--ink2)}

/* Animaciones de cada app, cada vez que se abre */
@keyframes mock-in{from{opacity:0;transform:translateY(6px)}}
@keyframes grow-x{from{transform:scaleX(0)}}
@keyframes fade-in{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px)}}
@keyframes ring{15%{transform:rotate(16deg)}30%{transform:rotate(-13deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}}
@keyframes slide-in{from{opacity:0;transform:translateX(-18px) rotate(-2deg)}}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}}
@keyframes hit-in{from{opacity:0;transform:translate(-50%,calc(-100% - 4px))}}
@keyframes shake{20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.conta.anim .cv.play .age-bar i{animation:grow-x .7s cubic-bezier(.2,.7,.2,1) backwards}
.conta.anim .cv.play .age-bar i:nth-child(2){animation-delay:.12s}
.conta.anim .cv.play .age-bar i:nth-child(3){animation-delay:.24s}
.conta.anim .cv.play .age-bar i:nth-child(4){animation-delay:.36s}
.conta.anim .cv.play .dlist li,.conta.anim .cv.play .chqs li{animation:mock-in .45s cubic-bezier(.2,.7,.2,1) backwards}
.conta.anim .cv.play :is(.dlist,.chqs) li:nth-child(2){animation-delay:.15s}
.conta.anim .cv.play :is(.dlist,.chqs) li:nth-child(3){animation-delay:.3s}
.conta.anim .cv.play .dlist .mini i{animation:grow-x .6s ease backwards;animation-delay:.55s}
.conta.anim .cv.play .dlist .st.bad{animation:pop .4s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:1.1s}
.conta.anim .cv.play .cv-chip{animation:pop .4s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:1.4s}
.conta.anim .cv.play .toast{animation:toast-in .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:.9s}
.conta.anim .cv.play .toast svg.i{animation:ring .9s ease;animation-delay:1.4s}
.conta.anim .cv.play .ticket{animation:slide-in .55s cubic-bezier(.2,.7,.2,1) backwards}
.conta.anim .cv.play .gx-arrow{animation:fade-in .4s ease backwards;animation-delay:.6s}
.conta.anim .cv.play .gx-dest{animation:pop .45s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:.9s}
.conta.anim .cv.play .margin{animation:mock-in .45s ease backwards;animation-delay:1.25s}
.conta.anim .cv.play .mg-bar i{animation:grow-x 1s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:1.55s}
.conta.anim .cv.play .mg-pct{animation:pop .4s ease backwards;animation-delay:2.4s}
.conta.anim .cv.play .kpis3 div{animation:mock-in .4s ease backwards}
.conta.anim .cv.play .kpis3 div:nth-child(2){animation-delay:.08s}
.conta.anim .cv.play .kpis3 div:nth-child(3){animation-delay:.16s}
.conta.anim .cv.play .fplot svg{animation:reveal 1.7s cubic-bezier(.45,0,.25,1) backwards;animation-delay:.35s}
.conta.anim .cv.play .f-dot{animation:pop .4s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:1.4s}
.conta.anim .cv.play .f-hit{animation:hit-in .4s ease backwards;animation-delay:1.55s}
.conta.anim .cv.play .lock-big{animation:shake .6s ease;animation-delay:.25s}

/* Reportes a medida: datos, columnas y filtro; la tabla se llena y sale el Excel */
.rep{display:grid;min-height:0}
.rep-mock{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;min-height:0}
/* Desplegables, como los filtros del CRM (Fran, 16-09: desplegables y no píldoras) */
.rb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;border:1px solid var(--line2);border-radius:14px;background:var(--card2)}
.dd{position:relative;display:grid;gap:4px;min-width:0}
.dd.open{z-index:3}
.dd-lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dd-box{display:flex;align-items:center;gap:6px;height:32px;padding:0 9px 0 10px;border:1px solid var(--line);border-radius:9px;background:var(--card-solid);font-size:12.5px;font-weight:600;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.dd-box svg.i{flex:none;width:14px;height:14px;margin-left:auto;color:var(--muted);transition:transform .2s ease}
.dd-val{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-val.ph{font-weight:500;color:var(--faint)}
.dd.open .dd-box{border-color:#8a6d3b;box-shadow:0 0 0 3px color-mix(in srgb,#8a6d3b 18%,transparent)}
.dd.open .dd-box svg.i{transform:rotate(180deg)}
.dd-menu{position:absolute;left:0;right:0;top:calc(100% + 4px);display:grid;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--card-solid);box-shadow:var(--shadow-float);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.dd-menu i{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;font-style:normal;font-size:12px;font-weight:500;color:var(--ink1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s ease}
.dd-menu i.hi{background:color-mix(in srgb,#8a6d3b 15%,transparent);color:var(--ink)}
.dd-menu.multi i::before{content:"";flex:none;width:13px;height:13px;border:1.5px solid var(--faint);border-radius:4px;background:var(--card-solid) center/10px no-repeat;transition:background-color .15s ease,border-color .15s ease}
.dd-menu.multi i.ck::before{border-color:#8a6d3b;background-color:#8a6d3b;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27/%3E%3C/svg%3E")}
.rt{display:grid;align-content:start;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--card-solid);font-size:12px}
.rt-h,.rt-r,.rt-t{display:grid;grid-template-columns:42px minmax(0,1.35fr) minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:8px;padding:7px 10px}
.rt-h{background:var(--card2);font-size:11px;font-weight:700;color:var(--muted)}
.rt-r{border-top:1px solid var(--line2)}
.rt-t{border-top:1px solid var(--line);font-weight:700}
.rt-h span,.rt-r span,.rt-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-h span:nth-child(n+3),.rt-r span:nth-child(n+3),.rt-t span:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}
.rb-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rb-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;background:#1f7a45;color:#fff;font-size:12.5px;font-weight:700;transition:transform .15s ease,filter .15s ease}
.rb-btn.press{transform:scale(.94);filter:brightness(1.12)}
.rb-file{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card-solid);font-size:12px;font-weight:600;color:var(--ink1)}
.rb-file svg.i{color:#1f7a45}
.rb-saved{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.rt-h span,.rt-r,.rt-t,.rb-file,.rb-saved{transition:opacity .3s ease,transform .3s ease}
/* Con .anim, lo que todavía no se eligió arranca apagado */
.rep.anim .dd-menu.multi i.ck:not(.on)::before{border-color:var(--faint);background-color:var(--card-solid);background-image:none}
.rep.anim .rt-h span:not(.on){opacity:0}
.rep.anim :is(.rt-r,.rt-t):not(.on),.rep.anim :is(.rb-file,.rb-saved):not(.on){opacity:0;transform:translateY(5px)}

@media (prefers-reduced-motion:reduce){
  .cv,.cv.on{transition:none}
}
/* Notebooks (poco alto): mosaicos más bajos, para que el pie de Reportes no quede debajo del dock */
@media (max-height:800px) and (min-width:1021px){
  #finanzas .sec-head{margin-bottom:16px;gap:6px}
  #finanzas .sec-head h2{font-size:clamp(28px,2.6vw,36px)}
  .abento{grid-template-rows:470px}
  .rb{padding:9px}
  .rb-saved,.cv-foot{display:none}
  .rt-h,.rt-r,.rt-t{padding-block:5px}
}
/* Tableta: un mosaico abajo del otro */
@media (max-width:1020px){
  .abento{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .t-conta{height:520px}
  .t-rep{height:480px}
}
/* Celular: el escritorio en dos filas de tres y cada vista más angosta */
@media (max-width:720px){
  .t-conta,.t-rep{height:auto}
  .conta{grid-template-rows:auto 350px}
  .cdesk{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px}
  .cv{padding:12px}
  .cv-top>span{display:none}
  .dlist li{grid-template-columns:28px minmax(0,1fr) auto 64px}
  .dlist .mini{display:none}
  .chqs li{grid-template-columns:minmax(0,1fr) auto 74px}
  .chq{display:none}
  .gx{grid-template-columns:minmax(0,1fr);gap:6px}
  .gx-arrow{justify-self:center;transform:rotate(90deg)}
  .rep-mock{grid-template-rows:auto auto auto}
  .rb{gap:8px;padding:10px}
  .cv[data-v="gastos"] .cv-foot{display:none}
  /* Reportes en celular: solo Reporte y Período, sin menús abiertos que se pisen entre sí (los valores cambian solos),
     y la tabla con tres columnas legibles: fecha, cliente y total (Fran, 17-09) */
  .rb .dd:nth-child(2),.rb .dd:nth-child(4),.dd-menu{display:none}
  .rt{font-size:12.5px}
  .rt-h,.rt-r,.rt-t{grid-template-columns:44px minmax(0,1fr) auto;padding:8px 10px}
  .rt-h span:nth-child(3),.rt-r span:nth-child(3),.rt-t span:nth-child(3){display:none}
  /* Etiquetas que se leen como contenido, un poco más grandes */
  .dd-lbl{font-size:11px}
  .cv-foot{font-size:12px}
}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:48px;align-items:center}
.fin{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px}
.ledger{grid-row:span 2;padding:16px;display:grid;gap:12px;align-content:start}
.ledger h4,.fcard h4{font-size:14px;letter-spacing:-.01em}
.ledger-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cur{background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:11px;display:grid;gap:8px;align-content:start}
.cur .label{font-size:10px}
.cur .bal{font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mov{display:grid;gap:1px;font-size:12px;border-top:1px solid var(--line2);padding-top:7px}
.mov span{color:var(--muted)}
.mov strong{font-variant-numeric:tabular-nums;font-weight:600}
.ledger-note{font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:8px}
.fcard{padding:16px;display:grid;gap:10px;align-content:start}
.aging{display:grid;gap:8px}
.aging-row{display:grid;grid-template-columns:86px minmax(0,1fr) 62px;gap:8px;align-items:center;font-size:12.5px}
.aging-row span{color:var(--ink2)}
.aging-row strong{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--chip);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px}
.fcard-actions{display:flex;gap:6px}
.margin-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font-size:12px}
.margin-nums div{display:grid;gap:1px}
.margin-nums span{color:var(--muted)}
.margin-nums strong{font-size:14px;font-variant-numeric:tabular-nums}

/* ---------- SIGNOS VITALES · tablero del gerente ---------- */
/* Maqueta animada (Fran, 16-09): perfil que cambia solo, comparativa por vendedor, rentabilidad por zona y, al final,
   el tablero se achica a la izquierda y entra el celular. Quieto (sin JS o con movimiento reducido) se ve el Resumen. */
.mxw{position:relative}
.mx{position:relative;z-index:1;padding:16px;border-radius:var(--r-hi);transform-origin:left center;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.mxw.phoned .mx{transform:scale(.74)}
.mx-stage{position:relative;height:420px;overflow:hidden}
.mx-desk{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px}

/* Barra: título, pestañas y perfil */
.mx-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}
.mx-title{display:flex;align-items:baseline;gap:8px}
.mx-title b{font-size:18px;letter-spacing:-.02em}
.mx-title span{font-size:13px;color:var(--muted)}
.mx-tabs{justify-self:center;display:inline-flex;padding:3px;border-radius:10px;background:var(--chip)}
.mx-tab{border:0;background:transparent;padding:6px 14px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.mx-tab[aria-selected="true"]{background:var(--card-solid);color:var(--ink);box-shadow:var(--shadow-card)}
.mx-who{position:relative;display:flex;align-items:center;gap:8px}
.mx-who-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mx-dd{display:inline-flex;align-items:center;gap:8px;min-width:212px;height:36px;padding:0 10px 0 5px;border:1px solid var(--line);border-radius:10px;background:var(--card-solid);font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.mx-dd .mx-chev{margin-left:auto;width:14px;height:14px;color:var(--muted);transition:transform .2s ease}
.mx-dd[aria-expanded="true"]{border-color:var(--ink2);box-shadow:0 0 0 3px var(--hoverbg)}
.mx-dd[aria-expanded="true"] .mx-chev{transform:rotate(180deg)}
.mx-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:4;width:100%;min-width:212px;display:grid;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--card-solid);box-shadow:var(--shadow-float);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.mx-dd[aria-expanded="true"] + .mx-menu{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.mx-menu button{display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--ink1);text-align:left;cursor:pointer}
.mx-menu button:hover,.mx-menu button.hi{background:var(--hoverbg);color:var(--ink)}
.mx-menu button[aria-selected="true"]{font-weight:700}
.mx-av{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--t);background:color-mix(in srgb,var(--t) 18%,transparent)}
.mx-av.all{color:var(--ink2);background:var(--chip)}
.mx-av.all svg.i{width:14px;height:14px}

/* Las tres vistas */
.mx-views{position:relative;min-height:0}
.mx-view{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.mx-view.on{opacity:1;visibility:visible;transition:opacity .3s ease}

/* Resumen */
.mx-view[data-view="resumen"]{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.mx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mk{position:relative;display:grid;align-content:start;gap:6px;min-height:118px;padding:13px 14px;border:1px solid var(--line2);border-radius:14px;background:var(--card-solid);overflow:hidden}
.mk-lbl{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.mk-lbl i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.mk-val{font-size:26px;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.mk-trend{justify-self:start;transition:background-color .3s ease,color .3s ease}
.mk-spark{position:absolute;right:10px;bottom:10px;width:96px;height:34px}
.mx-chart{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;padding:14px 16px 10px;border:1px solid var(--line2);border-radius:14px;background:var(--card-solid)}
.mx-chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px}
.mx-chart-head b{font-size:14px}
.mx-leg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.mx-leg i{width:10px;height:10px;border-radius:3px;margin-left:8px}
.mx-leg i.q,.mc-bars i.q{background:color-mix(in srgb,var(--blue) 70%,var(--card-solid))}
.mx-leg i.a,.mc-bars i.a{background:var(--red)}
.mx-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;min-height:0;border-bottom:1px solid var(--line2);background:repeating-linear-gradient(0deg,var(--line2) 0 1px,transparent 1px 25%)}
.mc{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px;min-height:0}
.mc-bars{display:flex;align-items:flex-end;justify-content:center;gap:5px;min-height:0}
.mc-bars i{width:min(34%,30px);height:var(--h,0%);border-radius:5px 5px 0 0;transition:height .6s cubic-bezier(.3,.7,.2,1)}
.mc span{padding-bottom:2px;font-size:11.5px;text-align:center;color:var(--muted)}
.mc.now span{font-weight:700;color:var(--ink1)}

/* Por vendedor */
.mr{display:grid;align-content:start;gap:8px}
.mr-head,.mr-row{display:grid;grid-template-columns:26px 150px minmax(0,1fr) 160px 70px 150px;align-items:center;gap:12px}
.mr-head{padding:0 14px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mr-head span:first-child{grid-column:1 / span 2}
.mr-head span:last-child{grid-column:5 / span 2}
.mr-row{padding:14px;border:1px solid var(--line2);border-radius:14px;background:var(--card-solid)}
.mr-row b{font-size:14px;white-space:nowrap}
.mr-bars{display:grid;gap:4px}
.mr-bars i{display:block;width:var(--w);height:10px;border-radius:5px;transform-origin:left center}
.mr-bars i.q{background:color-mix(in srgb,var(--blue) 70%,var(--card-solid))}
.mr-bars i.a{background:var(--red)}
.mr-nums{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.mr-nums em{font-style:normal;color:var(--red-ink)}
.mr-conv{font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mr-tag{justify-self:start}
.mr-row{transition:border-color .3s ease,box-shadow .3s ease}
.mr-row.sel{border-color:color-mix(in srgb,var(--blue) 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent)}
.mr-foot{display:flex;align-items:center;gap:7px;margin:4px 0 0;padding:0 14px;font-size:12.5px;color:var(--muted)}

/* Rentabilidad por zona: una fila por zona con su margen (verde, ámbar o rojo) y lo vendido */
.mz{display:grid;align-content:start;gap:10px}
.zl-head{margin:0 0 2px;font-size:14px;font-weight:700}
.zr{display:grid;grid-template-columns:200px minmax(0,1fr) 64px 130px;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line2);border-radius:14px;background:var(--card-solid)}
.zr span{font-size:14px;font-weight:600;white-space:nowrap}
.zr span em{font-style:normal;font-weight:500;color:var(--muted);margin-left:4px}
.zr-bar{height:12px;border-radius:6px;background:var(--chip);overflow:hidden}
.zr-bar i{display:block;width:var(--w);height:100%;border-radius:6px;background:#4fa97a}
.zr-bar i.mid{background:#d9a03c}
.zr-bar i.low{background:#c8523f}
.zr b{font-size:20px;letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums}
.zr small{font-size:12.5px;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Celular: sale de atrás del costado derecho del recuadro mientras el recuadro se achica */
.mx-phone{position:absolute;top:50%;right:0;z-index:0;width:226px;height:448px;padding:8px;border-radius:38px;background:#1C1C1E;box-shadow:0 24px 50px rgba(20,22,40,.26);opacity:0;transform:translate(-90px,-50%);transition:transform .6s cubic-bezier(.3,.7,.2,1),opacity .35s ease}
.mxw.phoned .mx-phone{opacity:1;transform:translate(0,-50%)}
.mxp{position:relative;height:100%;border-radius:30px;background:var(--card-solid);overflow:hidden}
.mxm{position:absolute;inset:0;display:grid;align-content:start;gap:5px;padding:16px 10px 10px;background:var(--bg);transition:transform .45s cubic-bezier(.3,.7,.2,1)}
/* Chat del celular, con el diseño del chat del asistente: burbuja blanca para quien escribe, azul para quien contesta,
   el informe como la ficha del presupuesto y el campo de abajo con el botón rojo. El pedido del dueño es lo que manda.
   Es un chat cualquiera entre dos personas: no se presenta como WhatsApp ni como algo que COI manda solo (Fran, 16-09). */
.mxc{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--card-solid);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .45s cubic-bezier(.3,.7,.2,1),visibility 0s linear .45s}
.mxw.chat .mxc{opacity:1;visibility:visible;transition:opacity .3s ease,transform .45s cubic-bezier(.3,.7,.2,1)}
.mxw.chat .mxm{transform:translateX(105%)}
.mxw.chat.open .mxc{opacity:0;visibility:hidden;transform:translateX(-30%);transition:opacity .35s ease,transform .45s cubic-bezier(.3,.7,.2,1),visibility 0s linear .45s}
.mxw.chat.open .mxm{transform:none}
.mxc-head{display:flex;align-items:center;gap:8px;padding:16px 12px 9px;border-bottom:1px solid var(--line2);background:var(--card2)}
.mxc-head>span:last-child{display:grid;line-height:1.2}
.mxc-head b{font-size:13.5px}
.mxc-head small{font-size:10.5px;color:var(--muted)}
.mxc-body{position:relative;min-height:0;overflow:hidden}
.mxc-stack{position:absolute;left:9px;right:9px;bottom:9px;display:flex;flex-direction:column;gap:7px}
.mxc-stack .msg{font-size:12.5px;padding:8px 11px;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .3s ease,transform .35s cubic-bezier(.3,1.2,.5,1)}
.mxc-stack .mxc-hero{max-width:100%;padding:13px 14px;border-radius:18px;border-bottom-left-radius:6px;font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.18;color:var(--ink);box-shadow:var(--shadow-card);transform:translateY(14px) scale(.86);transform-origin:left bottom;transition:opacity .35s ease,transform .5s cubic-bezier(.3,1.35,.5,1)}
.mxc-att{padding:4px!important;transform-origin:right bottom}
.mxc-att .mini-doc{min-width:0;width:150px;margin-top:0;color:var(--ink)}
.mxc-bars{display:flex;align-items:flex-end;gap:3px;height:34px;margin:2px 0 3px;padding-bottom:1px;border-bottom:1px solid var(--line2)}
.mxc-bars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--blue) 70%,var(--card-solid))}
.mxc-bars i.a{background:var(--red)}
.mxw.c1 .mxc-stack .m1,.mxw.c2 .mxc-stack .m2,.mxw.c3 .mxc-stack .m3{opacity:1;transform:none}
.mxw.c3.tap .mxc-stack .m3{transform:scale(.95)}
.mxc .chat-foot{padding:8px 9px}
.mxc .chat-input{height:30px;padding:0 10px;font-size:12px}
.mxc .chat-send{width:30px;height:30px;border-radius:9px}
.mxp-top{display:grid;gap:1px;margin-bottom:4px}
.mxp-lbl{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink)}
.mxp-who{font-size:17px;letter-spacing:-.02em;line-height:1.2}
.mxp-month{font-size:11.5px;color:var(--muted)}
.mxp-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 8px;padding:6px 9px;border:1px solid var(--line2);border-radius:12px;background:var(--card-solid)}
.mxp-tile span{grid-column:1;font-size:10.5px;font-weight:600;color:var(--muted)}
.mxp-tile b{grid-column:1;font-size:16.5px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mxp-tile em{grid-column:2;grid-row:1 / span 2;font-style:normal}
.mxp-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line2);border-radius:12px;background:var(--card-solid)}
.mxp-row>span:last-child{display:grid;font-size:10px;font-weight:600;color:var(--muted)}
.mxp-row b{font-size:12.5px;color:var(--ink)}
.mxp-zone{flex:none;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,#4fa97a 22%,transparent);border:1.5px solid color-mix(in srgb,#4fa97a 50%,transparent)}
.mxp-dock{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-around;padding:7px;border:1px solid var(--line2);border-radius:14px;background:var(--card)}
.mxp-dock i{width:18px;height:18px;border-radius:6px;background:var(--chip)}
.mxp-dock i.home{background:linear-gradient(180deg,#6366f1,#4338ca)}

/* Tableta: sin el celular al costado (no entra); el tablero ocupa todo */
@media (max-width:1020px){
  .mx-stage{height:auto;min-height:500px}
  .mx-desk{position:relative;inset:auto;min-height:500px}
  .mxw.phoned .mx{transform:none}
  .mx-phone{display:none}
  .mx-bar{grid-template-columns:minmax(0,1fr) auto}
  .mx-tabs{grid-column:1 / -1;grid-row:2;justify-self:start}
  .mx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mr-head,.mr-row{grid-template-columns:26px minmax(0,1fr) minmax(0,1.2fr) 64px}
  .mr-head span:nth-child(2),.mr-nums,.mr-tag{display:none}
  .mr-head span:last-child{grid-column:4}
  .zr{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 52px}
  .zr small{display:none}
}
/* Celular: solo la versión del celular, quieta en el centro, que igual cambia de perfil */
@media (max-width:720px){
  .mxw .mx{display:none}
  .mx-phone{display:block;position:relative;top:auto;right:auto;margin:0 auto;opacity:1;transform:none;width:250px;height:480px}
  .mxw.phoned .mx-phone{transform:none}
  /* Las métricas del teléfono, con letra un poco más grande (hay aire antes del dock) */
  .mxp-lbl{font-size:10.5px}
  .mxp-tile span{font-size:11.5px}
  .mxp-tile b{font-size:18px}
  .mxp-row>span:last-child{font-size:11px}
  .mxp-row b{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .mx,.mx-phone,.mx-view,.mc-bars i{transition:none}
}

/* ---------- SEGURIDAD ---------- */
/* Seguridad de la información (Fran, 16 y 17-09). A la izquierda los anillos de acceso (del borde al centro, información
   más sensible); a la derecha el equipo, una persona por rol, con los puntos de a qué llega. La lista se recorre sola: la
   persona activa se abre y muestra sus permisos, área por área, y los anillos se prenden a la par. Se puede tocar. */
.sg{display:grid;grid-template-columns:380px minmax(0,1fr);gap:48px;align-items:center;padding:28px 36px}
/* Anillos: verde es a lo que llega la persona, gris punteado a lo que no, y el centro oscuro queda bajo llave */
.sg-ring-box{position:relative;width:100%}
.rings{width:100%;height:auto;display:block;overflow:visible}
.rings .band-c{stroke-width:1.5;transition:fill .4s ease,stroke .4s ease}
.rings .band-c[data-state="none"]{fill:var(--card2);stroke:var(--line);stroke-dasharray:3 5}
.rings .band-c[data-state="edit"]{fill:color-mix(in srgb,var(--green-dot) 30%,var(--card-solid));stroke:var(--green);stroke-width:2}
.rings .band-c[data-state="lock"]{fill:var(--ink);stroke:var(--ink)}
.rings text{font-family:var(--font);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;fill:var(--muted);text-anchor:middle;transition:fill .4s ease,opacity .4s ease}
.rings text[data-state="none"]{opacity:.6}
.rings text[data-state="edit"]{fill:color-mix(in srgb,var(--green) 80%,var(--ink))}
.rings .core-t{fill:var(--card-solid)}
.rings .core-lock{fill:none;stroke:var(--card-solid);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rings .core-pulse{fill:none;stroke:var(--red);stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center}
.sg.pulse .rings .core-pulse{animation:sg-core 1.3s ease-out 2}
@keyframes sg-core{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
.sg-off{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:10px;background:var(--red-btn);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-card);opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .3s ease,transform .35s cubic-bezier(.3,1.3,.5,1);pointer-events:none}
.sg-off svg.i{width:14px;height:14px}
.sg.off .sg-off{opacity:1;transform:translate(-50%,-50%)}
/* El equipo: una fila por persona, con sus puntos; la activa se abre */
.sg-side{display:grid;gap:12px;min-width:0}
.sg-people{display:grid;gap:6px}
.sg-p{border:1px solid var(--line2);border-radius:14px;background:var(--card-solid);overflow:hidden;transition:border-color .35s ease,box-shadow .35s ease}
.sg-p.on{border-color:color-mix(in srgb,var(--red) 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 10%,transparent)}
.sg-ph{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;margin:0;padding:10px 14px;border:0;border-radius:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.sg-ph:hover{background:var(--hoverbg)}
.sg-ph:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.sg-ph .mx-av{width:36px;height:36px;font-size:12px;transition:filter .35s ease,opacity .35s ease}
.sg-nm{display:grid;min-width:0;line-height:1.25}
.sg-nm b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-nm small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-p.gone .mx-av{filter:grayscale(1);opacity:.6}
/* Puntos: de afuera hacia adentro, los mismos colores que los anillos */
.sg-dots{display:flex;gap:4px}
.sg-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);background:var(--card2)}
.sg-dots i[data-s="e"]{background:color-mix(in srgb,var(--green-dot) 35%,var(--card-solid));border-color:var(--green)}
.sg-dots i[data-s="l"]{background:var(--ink);border-color:var(--ink)}
/* Permisos de la persona activa: la fila se abre y los renglones entran desde la derecha */
.sg-pd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.3,.7,.2,1)}
.sg-p.on .sg-pd{grid-template-rows:1fr}
.sg-pdi{min-height:0;overflow:hidden}
.sg-pdi>p{margin:0;padding:0 14px 8px;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.sg-perms{display:grid;gap:4px;margin:0;padding:0 10px 10px;list-style:none}
.sg-perms li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:32px;padding:0 12px;border-radius:9px;background:var(--card2);opacity:0;transform:translateX(14px);transition:opacity .3s ease,transform .35s ease}
.sg-p.on .sg-perms li{opacity:1;transform:none}
.sg-p.on .sg-perms li:nth-child(2){transition-delay:.05s}
.sg-p.on .sg-perms li:nth-child(3){transition-delay:.1s}
.sg-p.on .sg-perms li:nth-child(4){transition-delay:.15s}
.sg-p.on .sg-perms li:nth-child(5){transition-delay:.2s}
.sg-perms i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line);background:var(--card2)}
.sg-perms b{min-width:0;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-perms li[data-state="edit"]{background:color-mix(in srgb,var(--green-dot) 16%,var(--card-solid))}
.sg-perms li[data-state="edit"] i{background:color-mix(in srgb,var(--green-dot) 35%,var(--card-solid));border:2px solid var(--green)}
.sg-perms li[data-state="lock"] i{background:var(--ink);border-color:var(--ink)}
.sg-perms li[data-state="edit"] b,
.sg-perms li[data-state="lock"] b{color:var(--ink)}
.sg-st{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--muted)}
.sg-st svg.i{width:13px;height:13px}
.sg-perms li[data-state="edit"] .sg-st{color:var(--green)}
.sg-perms li[data-state="lock"] .sg-st{color:var(--ink2)}
.sg-note{display:flex;align-items:center;gap:8px;margin:0;padding:0 2px;font-size:13px;color:var(--muted)}
.sg-note svg.i{flex:none;width:16px;height:16px;color:var(--ink2)}
/* Tableta y celular: los anillos arriba y el equipo abajo (mismo corte que los otros módulos) */
@media (max-width:1020px){
  .sg{grid-template-columns:minmax(0,1fr);gap:22px;padding:22px 20px}
  .sg-ring-box{justify-self:center;max-width:340px}
}
@media (max-width:720px){
  .sg{padding:18px 14px}
  .sg-ring-box{max-width:280px}
  /* Las etiquetas curvas de los anillos, más grandes: a 280 px se leen a 9,5 px */
  .rings text{font-size:15px}
  .sg-ph{gap:9px;padding:9px 10px}
  .sg-nm small{white-space:normal;line-height:1.3}
  .sg-perms{padding:0 6px 6px}
  .sg-perms li{padding:0 9px;gap:8px}
  .sg-perms b{font-size:12.5px;white-space:normal;line-height:1.2}
  .sg-st{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .rings .band-c,.rings text,.sg-off,.sg-p,.sg-ph .mx-av,.sg-pd,.sg-perms li{transition:none}
}

/* ---------- PLANES ---------- */
/* Mismo ancho que los otros módulos. Cada tarjeta mide lo que su contenido: el Emprendedor queda más chico y el
   Industrial, con el bonus, más alto (Fran, 17-09) */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.plan{position:relative;padding:26px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:18px}
.plan-body{display:grid;gap:16px;align-content:start}
.plan--hi{border:1.5px solid var(--red)}
.plan-flag{position:absolute;top:-11px;right:20px;background:var(--red-btn);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:3px 9px}
.plan h3{font-size:24px}
.plan-sub{font-size:14.5px;color:var(--ink2)}
.plan-price{font-size:15px;font-weight:600;color:var(--ink);padding:10px 0;border-block:1px solid var(--line2)}
.plan-price small{display:block;font-size:12.5px;font-weight:500;color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{color:var(--green);margin-top:2px}
.plan-more{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.plan .btn{margin-top:4px}
/* Bonus del Plan Industrial, con protagonismo: servicios que van con el plan (carga inicial de datos y acompañamiento) */
.plan-bonus{display:grid;gap:10px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--red) 35%,transparent);border-radius:14px;background:var(--red-tint)}
.plan-bonus-lbl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink)}
.plan-bonus-lbl svg.i{width:14px;height:14px}
.plan-bonus li{align-items:center;font-size:15px;font-weight:600;color:var(--ink)}
.plan-bonus li .icon-chip{width:30px;height:30px;border-radius:9px;background:var(--card-solid);color:var(--red-ink)}
.plan-bonus li svg{color:inherit;margin-top:0}
.compare{margin-top:16px}
.compare-group th{padding-top:18px;text-align:left!important}
.compare summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:8px;list-style:none}
.compare summary::-webkit-details-marker{display:none}
.compare summary::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--chip);font-weight:700}
.compare[open] summary::before{content:"–"}
.compare-wrap{overflow-x:auto;margin-top:12px;border-radius:var(--r-card)}
.compare table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.compare th,.compare td{padding:10px 14px;border-bottom:1px solid var(--line2);text-align:left}
.compare th{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center;width:150px}
.compare td small{display:block;color:var(--muted);font-size:11.5px}
.compare .yes{color:var(--green)} .compare .no{color:var(--faint)}
.demo-line{margin-top:18px;font-size:15px;color:var(--ink2)}
.demo-line a{color:var(--red-ink);font-weight:600}

/* ---------- SOBRE NOSOTROS (nosotros.html) ---------- */
/* Página propia, enlazada desde la barra de arriba (Fran, 16-09). El texto es de Fran; las tarjetas del equipo salieron
   de la landing. Entre bloque y bloque, el mismo aire que entre las secciones de la landing. */
.person{padding:22px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:start}
.avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:700;letter-spacing:-.02em;color:#fff;background:linear-gradient(160deg,#3A3A3C,#1C1C1E);box-shadow:inset 0 0 0 2px var(--line)}
.avatar.red{background:linear-gradient(160deg,#E04A50,#C0272D)}
.person h3{font-size:20px}
.person .pill{margin:6px 0 10px}
.person p{font-size:14.5px;color:var(--ink2)}
.ab-hero{padding-block:64px 72px}
.ab-hero .wrap{display:grid;gap:16px}
.ab-hero h1{max-width:1000px;font-size:clamp(34px,4.3vw,56px);line-height:1.06;letter-spacing:-.035em}
/* Cada oración en su renglón: la primera dice qué hacemos y la segunda, en qué negocio estamos */
.ab-hero h1 .ab-s{display:block;text-wrap:balance}
.ab-hero h1 .u{position:relative;white-space:nowrap}
.ab-hero h1 .u::after{content:"";position:absolute;left:.02em;right:.04em;bottom:.02em;height:.07em;border-radius:.04em;background:var(--red);transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
  .ab-hero h1 .u::after{animation:u-draw .9s cubic-bezier(.3,.7,.2,1) .4s backwards}
  .ab-hero h1 .u:last-of-type::after{animation-delay:1.05s}
}
.ab-sec{padding-block:14px 92px}
.ab-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.ab-text{display:grid;gap:18px;max-width:62ch}
.ab-text p{font-size:17px;line-height:1.65;color:var(--ink2)}
.ab-text .ab-lead{font-size:clamp(20px,2vw,24px);line-height:1.45;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.ab-team{display:grid;gap:14px}
.ab-mission{display:grid;gap:18px;padding:40px}
.ab-mission h2{max-width:920px;font-size:clamp(28px,3.3vw,42px);line-height:1.1}
.ab-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 44px;margin-top:10px}
.ab-col{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start}
.ab-col .icon-chip{width:40px;height:40px;border-radius:11px}
.ab-col p{font-size:16px;line-height:1.65;color:var(--ink2)}
.ab-values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ab-values li{display:grid;align-content:start;gap:18px;padding:22px}
.ab-values .icon-chip{width:46px;height:46px;border-radius:13px}
.ab-values .icon-chip svg.i{width:23px;height:23px}
.ab-values b{font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.foot.plain{padding-bottom:36px}
@media (max-width:1020px){
  .ab-intro{grid-template-columns:minmax(0,1fr);gap:36px}
  .ab-values{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .ab-hero{padding-block:36px 56px}
  .ab-hero h1{font-size:clamp(30px,8.6vw,36px)}
  .ab-sec{padding-block:14px 84px}
  .ab-text p{font-size:16px}
  .ab-mission{padding:26px 20px}
  .ab-cols{grid-template-columns:minmax(0,1fr)}
  .ab-values{grid-template-columns:minmax(0,1fr);gap:10px}
  .ab-values li{grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;padding:16px}
  .ab-values .icon-chip{width:44px;height:44px}
  .ab-values b{font-size:16px}
}

/* ---------- CONTACTO ---------- */
.contact{min-height:calc(78svh - var(--topbar))}
.contact-card{padding:40px;display:grid;justify-items:center;text-align:center;gap:14px;max-width:760px;margin-inline:auto}
.contact-card h2{font-size:clamp(32px,4vw,50px);line-height:1.05}
.contact-card p{font-size:17px;color:var(--ink2);max-width:46ch}
.contact-card .btn{min-height:50px;padding:0 26px;font-size:16px;margin-top:6px}
.foot{padding:28px 0 104px;border-top:1px solid var(--line2)}
.foot .wrap{display:grid;justify-items:center;gap:14px;font-size:11px;color:var(--faint);text-align:center}

/* ---------- DOCK ---------- */
/* El lenguaje de la barra del CRM (components/app-shell.tsx), con sus medidas (Fran, 17-09: «más fiel a la barra del sistema»).
   Caja de 48 con radio 13; adentro, chip de 30 con radio 9 en el color de la app e ícono blanco de 16. La casa índigo lleva
   chip de 34 con radio 11, 4 px más arriba y con su sombra; al pasar el mouse sube 2 px. Activo: caja gris y punto rojo abajo.
   Inicio va primero, a la izquierda. Sin lanzador de secciones ni botón de tema: Fran los sacó (17-09). */
.dock{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:4px;padding:8px;
  border-radius:18px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow-float);
  -webkit-backdrop-filter:saturate(1.6) blur(24px);backdrop-filter:saturate(1.6) blur(24px);
}
.dock a{
  position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:13px;
  text-decoration:none;transition:background-color .15s ease,transform .15s ease;
}
.dock a:hover{background:var(--hoverbg)}
.dock a[aria-current="true"]{background:var(--navactive)}
.dock a[aria-current="true"]::before{content:"";position:absolute;left:50%;bottom:3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--red)}
.dock-chip{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--a);color:#fff}
.dock-chip svg.i{width:16px;height:16px}
.dock .home{margin-right:2px}
.dock .home:hover{transform:translateY(-2px)}
.dock .home .dock-chip{
  width:34px;height:34px;border-radius:11px;margin-bottom:4px;background:linear-gradient(180deg,#6366f1,#4338ca);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),0 8px 16px rgba(79,70,229,.42);transition:transform .15s ease;
}
.dock .home:hover .dock-chip{transform:scale(1.06)}
.dock .home .dock-chip svg.i{width:18px;height:18px}
.dock a::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;padding:5px 9px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;
}
.dock a:hover::after,.dock a:focus-visible::after{opacity:1;transform:translateX(-50%)}
/* En pantallas táctiles no hay hover: el cartel quedaba pegado después de tocar. */
@media (hover:none){.dock a::after{display:none}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1020px){
  .split{grid-template-columns:1fr}
  .who{grid-template-columns:repeat(2,minmax(0,1fr))}
  .who-panel{grid-template-columns:1fr}
  .who-cta{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:16px}
}
@media (max-width:720px){
  .wrap{padding-inline:16px}
  .screen{padding-block:40px 104px}
  .screen:not(.hero),.band{padding-block:14px 84px}
  /* después de .screen para ganarle: menos aire entre el carrusel y Comercial */
  .hero{padding-bottom:84px}
  .com{padding-top:18px}
  .apps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .app-icon{width:56px;height:56px;border-radius:15px}
  .app-icon svg{width:26px;height:26px}
  .app-name{font-size:11px}
  .app .badge{right:calc(50% - 34px)}
  .fin{grid-template-columns:1fr}
  .ledger{grid-row:auto}
  .plans{grid-template-columns:1fr}
  .marquee-row{grid-template-columns:1fr;gap:12px}
  .sec-head.row{grid-template-columns:1fr}
  .contact-card{padding:28px 20px}
  /* Dock compacto del CRM: caja de 47 y chip de 34 con radio 10 (el dedo necesita más superficie que el mouse). Acá van las
     siete, así que la caja se achica con la pantalla: 47 px desde 375 de ancho, 45 en 360 y 39 en 320. */
  .dock{--dk:clamp(38px,calc((100vw - 44px) / 7),47px);bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:2px;padding:6px}
  .dock a{width:var(--dk);height:var(--dk)}
  .dock .home{margin-right:0}
  .dock-chip{width:min(34px,calc(var(--dk) - 9px));height:min(34px,calc(var(--dk) - 9px));border-radius:10px}
  .dock-chip svg.i{width:18px;height:18px}
  .dock .home .dock-chip{width:min(36px,calc(var(--dk) - 8px));height:min(36px,calc(var(--dk) - 8px))}
  .dock .home .dock-chip svg.i{width:20px;height:20px}
}
@media (max-width:420px){
  .who{grid-template-columns:1fr}
  .desk-kpis{grid-template-columns:1fr}
}