/* Matriz Ventas — identidad XentraPro: azul marino 60%, coral/cyan 30%, blanco 10% (Manual de Marca). Tipografía Metropolis (licencia OFL, se sirve desde la propia app: funciona sin señal). */
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Metropolis-400.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Metropolis-500.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Metropolis-600.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Metropolis-700.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/Metropolis-800.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/Metropolis-900.woff2') format('woff2'); }
:root {
  --surf: #ffffff;
  --tx: #000652;
  --navbg: #000652;
  --on-st: #000652;
  --navy: #000652;
  --navy-2: #0b1170;
  --coral: #FF664D;
  --coral-dark: #e2543d;
  --cyan: #70DFDF;
  --cyan-dark: #39b9b9;
  --cream: #FAF8F4;
  --white: #ffffff;
  --ink: #0D1E3A;
  --muted: #5d6280;
  --line: #e6e3dc;
  --ok: #17895c;
  --ok-bg: #e3f5ec;
  --warn: #9a6a00;
  --warn-bg: #fff1cc;
  --bad: #b3261e;
  --bad-bg: #fde7e5;
  --sold: #b3261e;
  --sold-bg: #fde7e5;
  --res: #e0a100;
  --res-txt: #7a5600;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 6, 82, .06), 0 6px 18px rgba(0, 6, 82, .06);
  /* Estado de lote: verde, amarillo y gris apagados, con texto azul marino encima. */
  --st-ok: #5FB48C;
  --st-res: #E0C46C;
  --st-ven: #B9BDC9;
  --font-title: 'Metropolis', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Metropolis', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-x: hidden; }
body { max-width: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  font-size: 15px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--font-title); color: var(--tx); margin: 0; line-height: 1.12; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Login ---------- */
.login {
  min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(30, 50, 170, .55) 0%, rgba(30, 50, 170, 0) 60%),
    linear-gradient(180deg, #060a63 0%, #000652 45%, #03072f 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 28px 18px;
  position: relative; overflow: hidden;
}
/* Textura fina de líneas horizontales, casi invisible. */
.login .fondo-lineas { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px); }
/* Formas grandes de fondo: cuadrado redondeado en contorno (arriba a la derecha), otro abajo y una mancha coral. */
.login .forma { position: absolute; pointer-events: none; border-radius: 22%; }
.login .forma.f1 { width: 125vmax; height: 125vmax; max-width: 1500px; max-height: 1500px; right: -52vmax; top: -62vmax; border: 1.5px solid rgba(112, 160, 223, .38);
  transform: rotate(20deg); animation: giro-lento 90s linear infinite; }
.login .forma.f2 { width: 60vmax; height: 60vmax; left: -22vmax; bottom: -30vmax; border: 1.5px solid rgba(112, 160, 223, .16); transform: rotate(35deg); }
.login .forma.f3 { width: min(46vmin, 300px); height: min(46vmin, 300px); left: -14vmin; bottom: 4vh; transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(255, 102, 77, .20), rgba(255, 102, 77, .04)); border-radius: 26%; }
@keyframes giro-lento { to { transform: rotate(380deg); } }
@media (prefers-reduced-motion: reduce) { .login .forma.f1 { animation: none; } }
.login-caja { position: relative; z-index: 1; width: 100%; max-width: 330px; text-align: center; }
.login-marca { display: block; width: 214px; max-width: 80%; height: auto; margin: 0 auto; }
.login-nombre { margin: 0; line-height: 0; }
.login-lema { margin: 22px 0 34px; color: var(--cyan); font-weight: 600; font-size: 13px; letter-spacing: .01em; text-transform: uppercase; }
.login-card {
  text-align: left; padding: 26px 24px 26px; border-radius: 28px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .17);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 20, .35);
}
.login-card label { color: rgba(255, 255, 255, .92); font-size: 14px; margin: 0 0 8px; }
.login-card label + input { margin-bottom: 18px; }
.login-card input { width: 100%; height: 50px; padding: 0 18px; border-radius: 16px; font-size: 17px; color: #fff;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .24); }
.login-card input::placeholder { color: rgba(255, 255, 255, .45); }
.login-card input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; background: rgba(255, 255, 255, .13); }
.login-card input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #1a2370 inset; caret-color: #fff; }
.login-card .btn { height: 52px; border-radius: 999px; background: #fff; color: var(--tx); font-size: 18px; font-weight: 700; margin-top: 4px; }
.login-card .btn:hover { background: var(--cream); }
.login-card .btn:disabled { opacity: .7; }
.login-card .msg { margin: 0 0 14px; }
.login-pie { margin: 30px 0 0; color: rgba(255, 255, 255, .42); font-size: 14px; }

/* ---------- Formularios ---------- */
label { display: block; font-weight: 600; font-size: 13px; margin: 12px 0 5px; color: var(--tx); }
input, select {
  width: 100%; padding: 12px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surf); min-height: 46px;
}
input:focus, select:focus, button:focus-visible { outline: 3px solid rgba(112, 223, 223, .7); outline-offset: 1px; border-color: var(--cyan-dark); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
  font-weight: 700; background: var(--coral); color: var(--white); transition: background .15s, transform .05s;
}
.btn:hover { background: var(--coral-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.block { width: 100%; margin-top: 18px; }
.btn.navy { background: var(--navbg); }
.btn.navy:hover { background: var(--navy-2); }
.btn.ghost { background: transparent; color: var(--tx); border: 1.5px solid var(--line); }
.btn.ghost:hover { background: var(--cream); }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn.danger { background: var(--bad); }
.msg { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.msg.error { background: var(--bad-bg); color: var(--bad); }
.msg.ok { background: var(--ok-bg); color: var(--ok); }

/* ---------- Marco de la app ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--navbg); color: var(--white);
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
}
.topbar img { height: 32px; display: block; }
.topbar .quien { margin-left: auto; text-align: right; font-size: 12px; line-height: 1.25; opacity: .9; }
.topbar .quien b { display: block; font-size: 13px; }
.topbar .salir { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .32); color: #fff; font-size: 13px; font-weight: 700; flex: none; }
.topbar .salir:hover { background: var(--coral); border-color: var(--coral); }
.topbar .salir .ico { display: flex; }
.topbar .salir svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topbar .salir:focus-visible { outline-color: var(--cyan); }
@media (max-width: 420px) { .topbar .vivo span { display: none; } .topbar { gap: 8px; padding: 10px 12px; } .topbar .salir span:not(.ico) { display: none; } .topbar .salir { padding: 0 9px; } .topbar .quien { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.vivo.on i { background: var(--cyan); box-shadow: 0 0 0 0 rgba(112, 223, 223, .7); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 7px rgba(112, 223, 223, 0); } 100% { box-shadow: 0 0 0 0 rgba(112, 223, 223, 0); } }

.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--navbg);
  border-top: 0; display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom);
}
.nav button {
  flex: 1; min-width: 0; max-width: 170px; background: none; border: 0; padding: 9px 2px 8px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .68); white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 3px;
  position: relative;
}
.nav button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav button[aria-current="page"] { color: #fff; }
.nav button[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--coral); }
.nav .punto { position: absolute; top: 5px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--coral); color: #fff; font-size: 10.5px; line-height: 17px; text-align: center; }

.nav .ico { display: flex; }
.nav .l-lg { display: none; }
.nav .l-sm { display: inline; }
.nav .grupo-nav { flex: 1; min-width: 0; max-width: 170px; display: flex; }
.nav .grupo-nav > .grupo-btn { max-width: none; }
.nav .flecha { display: none; }
.nav .grupo-btn[aria-current="true"] { color: #fff; }
.nav .grupo-btn[aria-current="true"]::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--coral); }
body.bo .nav button { font-size: 10px; }
.nav .sub { display: none; position: fixed; left: 8px; right: 8px; bottom: calc(60px + env(safe-area-inset-bottom)); background: var(--surf); border-radius: 14px;
  box-shadow: 0 10px 36px rgba(0, 6, 82, .28); flex-direction: column; padding: 6px; z-index: 30; }
.nav .grupo-nav.abierto .sub { display: flex; }
.nav .sub button { flex: none; max-width: none; width: 100%; flex-direction: row; justify-content: flex-start; font-size: 15px !important; color: var(--tx); padding: 13px 14px; text-align: left; white-space: normal; border-radius: 10px; }
.nav .sub button[aria-current="page"] { background: var(--cream); }
.nav .sub button[aria-current="page"]::before { display: none; }
.nav .sub .sep { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 14px 4px; }
.nav .accion.girando svg { animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.chip.proximamente { background: var(--cream); color: var(--tx); border: 1px solid var(--line); }
ol.pasos { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.controles { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 14px; }
.controles > div { min-width: 220px; flex: 1; max-width: 420px; }
.controles label { margin-top: 0; }
.grafico { width: 100%; height: auto; display: block; }
.grafico text { font-family: var(--font-body); fill: var(--ink, #182334); }
.grafico .eje { fill: var(--muted); font-size: 11.5px; }
.grafico .val { font-size: 12px; font-weight: 700; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 10px; font-size: 13px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.torta-wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; }
.torta-wrap .leyenda { flex-direction: column; flex-wrap: nowrap; font-size: 14px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi-tile { background: var(--cream); border-radius: 12px; padding: 14px; }
.kpi-tile b { display: block; font-family: var(--font-title); font-size: 30px; color: var(--tx); line-height: 1.1; }
.kpi-tile span { font-size: 13px; color: var(--muted); }
.nota { font-size: 13px; color: var(--muted); margin-top: 10px; }

main { padding: 16px 16px 92px; max-width: 980px; margin: 0 auto; }
.pagina-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card { background: var(--surf); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.vacio { text-align: center; color: var(--muted); padding: 34px 12px; }

/* ---------- Lotes ---------- */
.resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.resumen button {
  border: 1.5px solid transparent; border-radius: var(--radius); padding: 10px 6px; text-align: center; cursor: pointer; background: var(--surf); box-shadow: var(--shadow);
}
.resumen button b { display: block; font-family: var(--font-title); font-size: 26px; line-height: 1.1; color: var(--tx); }
.resumen button span { font-size: 12px; color: var(--muted); font-weight: 600; }
.resumen button[aria-pressed="true"] { border-color: var(--navy); }
.resumen .d b { color: #2f7d5c; } .resumen .r b { color: var(--res-txt); } .resumen .v b { color: #6b7088; }
.filtros { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
@media (min-width: 640px) { .filtros { grid-template-columns: 1fr 1fr; } }
.lotes { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .lotes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .lotes { grid-template-columns: repeat(3, 1fr); } }
.lote { background: var(--surf); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; border-left: 5px solid var(--st-ok); display: flex; flex-direction: column; gap: 8px; }
.lote.reservado { border-left-color: var(--st-res); }
.lote.vendido { border-left-color: var(--st-ven); opacity: .85; }
.lote .cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.lote .nombre { font-family: var(--font-title); font-size: 19px; color: var(--tx); line-height: 1.1; }
.lote .donde { font-size: 12.5px; color: var(--muted); }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip.califica { background: var(--ok-bg); color: var(--ok); }
.chip.pendiente { background: var(--warn-bg); color: var(--res-txt); }
.chip.disponible, .chip.ok { background: var(--st-ok); color: var(--on-st); }
.chip.reservado, .chip.res { background: var(--st-res); color: var(--on-st); }
.chip.vendido, .chip.ven { background: var(--st-ven); color: var(--on-st); }
.chip.bloqueado { background: var(--bad-bg); color: var(--bad); }
.chip.no_califica, .chip.bloqueado { background: var(--bad-bg); color: var(--bad); }
.precios { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 13px; }
.precios div span { display: block; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.precios div b { font-size: 14.5px; }
.precios .grande { grid-column: 1 / -1; }
.precios .grande b { font-family: var(--font-title); font-size: 21px; color: var(--tx); }
.lote .accion { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cuenta { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--warn); font-size: 15px; }
.cuenta.mia { color: var(--tx); }
.mas { color: var(--muted); font-size: 12.5px; }

/* ---------- Listas ---------- */
.fila { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fila:last-child { border-bottom: 0; }
.fila .t { font-weight: 700; color: var(--tx); }
.fila .s { font-size: 13px; color: var(--muted); }
.fila .acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dos-cols { display: grid; gap: 14px; }
@media (min-width: 820px) { .dos-cols { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- Toast y diálogo ---------- */
.toasts { position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--navbg); color: var(--white); padding: 10px 16px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 6, 82, .3); max-width: 440px; animation: sube .2s ease-out; }
.toast.error { background: var(--bad); }
@keyframes sube { from { transform: translateY(8px); opacity: 0; } }
dialog { border: 0; border-radius: 18px; padding: 22px 20px 18px; width: min(92vw, 420px); box-shadow: 0 24px 70px rgba(0, 6, 82, .4); }
dialog::backdrop { background: rgba(0, 6, 82, .55); }
dialog h3 { margin-bottom: 4px; }
dialog .pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.instalar { background: var(--navbg); color: var(--white); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cargando { text-align: center; color: var(--muted); padding: 40px 0; }
table.simple { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.simple th, table.simple td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); }
table.simple th { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 599px) { .fila.apilada { flex-direction: column; } .fila.apilada .acciones { justify-content: flex-start; } }


/* ============ Lotes del vendedor: fracción → manzanas → lotes ============ */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-fr { flex: none; border: 1.5px solid var(--line); background: var(--surf); color: var(--tx); border-radius: 999px; padding: 9px 16px; font-weight: 700; cursor: pointer; min-height: 40px; }
.chip-fr[aria-selected="true"] { background: var(--navbg); color: var(--white); border-color: var(--navy); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ley i, .n i, .tabbtn.est i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.ley.disponible i, .n.disponible i, .est.disponible i { background: var(--st-ok); }
.ley.reservado i, .n.reservado i, .est.reservado i { background: var(--st-res); }
.ley.vendido i, .n.vendido i, .est.vendido i { background: var(--st-ven); }

.mzs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .mzs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .mzs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mz { background: var(--surf); border: 1.5px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 12px 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.mz:hover { border-color: var(--cyan-dark); }
.mz-t { font-family: var(--font-title); font-size: 18px; color: var(--tx); line-height: 1.1; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.mz-mia { font: 700 10.5px var(--font-body); background: var(--navbg); color: #fff; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.mz-s { font-size: 12px; color: var(--muted); }
.barra { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--line); }
.barra span { display: block; min-width: 4px; }
.barra .disponible { background: var(--st-ok); } .barra .reservado { background: var(--st-res); } .barra .vendido { background: var(--st-ven); }
.mz-n { display: flex; gap: 10px; font-size: 13px; font-weight: 800; color: var(--ink); }

.volver-fila { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.volver-fila h3 { font-size: 20px; }
.volver-fila .mas { margin-left: auto; }
.grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 560px) { .grilla { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 900px) { .grilla { grid-template-columns: repeat(8, 1fr); } }
.lt { border: 2px solid; border-radius: 12px; padding: 10px 2px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; background: var(--surf); min-height: 66px; }
.lt .n { font-family: var(--font-title); font-size: 21px; line-height: 1; }
.lt .e, .lt .cuenta { font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.lt.disponible { background: var(--st-ok); border-color: var(--st-ok); color: var(--on-st); }
.lt.reservado { background: var(--st-res); border-color: var(--st-res); color: var(--on-st); }
.lt.vendido { background: var(--st-ven); border-color: var(--st-ven); color: var(--on-st); }
.lt.mia { box-shadow: 0 0 0 3px var(--navy); }
.centro { text-align: center; margin-top: 14px; }

/* Ficha del lote (hoja inferior en celular) */
dialog.sheet { margin-top: auto; margin-bottom: 0; width: 100%; max-width: 520px; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; }
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 18px; } }
.ficha { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ficha .donde { font-size: 13px; color: var(--muted); }
.ficha .chip { align-self: flex-start; }
.ficha-acc { margin-top: 6px; }
.reserva-box { background: var(--warn-bg); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cuenta.grande { font-family: var(--font-title); font-size: 30px; line-height: 1; color: var(--res-txt); }
.cuenta.grande.mia { color: var(--tx); }
.nombre-califica { color: var(--ok) !important; }
.nombre-no_califica { color: var(--bad) !important; }
.msg.warn { background: var(--warn-bg); color: var(--res-txt); }
.btn.ok { background: var(--ok); }
.btn.ok:hover { background: #12714c; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.tag, .tag-demo { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; margin-left: 8px; vertical-align: 1px; }
.tag { background: var(--cream); color: var(--muted); border: 1px solid var(--line); }
.tag-demo { background: var(--coral); color: #fff; margin: 0; }

/* ============ Administración / Gerencia / Soporte ============ */
.nav-logo { display: none; }
.topbar .titulo { display: none; font-family: var(--font-title); font-size: 20px; font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.kpi { background: var(--surf); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; text-align: left; cursor: pointer; border-top: 4px solid var(--line); }
.kpi b { display: block; font-family: var(--font-title); font-size: 34px; line-height: 1.1; color: var(--tx); }
.kpi span { font-size: 13px; font-weight: 600; color: var(--muted); }
.kpi.alerta { border-top-color: var(--coral); } .kpi.alerta b { color: var(--coral-dark); }
.kpi.disponible { border-top-color: var(--st-ok); } .kpi.disponible b { color: #2f7d5c; }
.kpi.reservado { border-top-color: var(--st-res); } .kpi.reservado b { color: var(--res-txt); }
.kpi.vendido { border-top-color: var(--st-ven); } .kpi.vendido b { color: #6b7088; }
.dos-cols .card h3 { margin-bottom: 4px; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabbtn { border: 1.5px solid var(--line); background: var(--surf); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13.5px; color: var(--tx); cursor: pointer; min-height: 38px; }
.tabbtn[aria-pressed="true"] { background: var(--navbg); color: #fff; border-color: var(--navy); }
.tabbtn.est[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff; }
.barra-filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.barra-filtros input[type=search] { flex: 1 1 240px; max-width: 420px; }

/* Bandeja de solicitudes */
.md { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .md { grid-template-columns: minmax(300px, 400px) 1fr; align-items: start; } }
.md-lista { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.md-lista .item { text-align: left; background: var(--surf); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.md-lista .item:hover { border-color: var(--cyan-dark); }
.md-lista .item.sel { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; }
.i-t { font-weight: 800; color: var(--tx); }
.i-s { font-size: 12.5px; color: var(--muted); }
.i-d { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.md-detalle .detalle { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.md-detalle h2 { font-size: 28px; }
.md-volver { display: none; }
.kvs { display: grid; gap: 8px; width: 100%; }
.kv { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 8px; font-size: 14px; }
.kv span { color: var(--muted); }
.resp-botones { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.resp-botones .btn { min-width: 160px; min-height: 52px; font-size: 16px; }
@media (max-width: 899px) {
  .md .md-detalle { display: none; }
  .md.abierto .md-lista { display: none; }
  .md.abierto .md-detalle { display: block; }
  .md-volver { display: inline-flex; }
}

/* Panel de lotes */
.manzana { padding: 14px 16px; }
.mz-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1280px) { .tiles { grid-template-columns: repeat(8, 1fr); } }
.tile { border: 2px solid; border-radius: 12px; padding: 9px 8px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 72px; background: var(--surf); }
.tile .tn { font-weight: 800; font-size: 14px; }
.tile .te { font-size: 12px; font-weight: 700; }
.tile .quien { font-size: 11px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .cuenta.grande { font-size: 20px; }
.tile.disponible { background: var(--st-ok); border-color: var(--st-ok); color: var(--on-st); }
.tile.reservado { background: var(--st-res); border-color: var(--st-res); color: var(--on-st); }
.tile.vendido { background: var(--st-ven); border-color: var(--st-ven); color: var(--on-st); }

/* Tablas y grupos */
.tabla-wrap { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 8px 8px; border-bottom: 2px solid var(--line); }
.tabla td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla tr.apagado td { color: var(--muted); }
.tabla tr.sub td { background: var(--cream); font-size: 13px; }
.tabla td.acc { white-space: nowrap; display: flex; gap: 6px; justify-content: flex-end; }
.grupo { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px 8px; margin-bottom: 12px; }
.grupo-cab { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); gap: 10px; }

/* ============ Menú lateral en computadora ============ */
@media (min-width: 900px) {
  body.bo .nav { top: 0; bottom: auto; width: 236px; height: 100vh; flex-direction: column; justify-content: flex-start; background: var(--navbg); border-top: 0; padding: 20px 12px; gap: 4px; }
  body.bo .nav .nav-logo { display: block; height: 38px; margin: 0 0 22px 10px; align-self: flex-start; }
  body.bo .nav button { flex: none; width: 100%; max-width: none; flex-direction: row; justify-content: flex-start; gap: 12px; font-size: 14.5px; color: rgba(255, 255, 255, .78); padding: 12px 14px; border-radius: 10px; text-align: left; }
  body.bo .nav button:hover { background: rgba(255, 255, 255, .08); }
  body.bo .nav button[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }
  body.bo .nav button[aria-current="page"]::before { left: 0; right: auto; top: 11px; bottom: 11px; width: 3px; height: auto; border-radius: 0 3px 3px 0; background: var(--coral); }
  body.bo .nav .punto { left: auto; right: 12px; top: 50%; transform: translateY(-50%); }
  body.bo .nav .l-lg { display: inline; min-width: 0; white-space: normal; line-height: 1.2; text-align: left; flex: 1; }
  body.bo .nav button { padding-right: 34px; position: relative; }
  body.bo .nav .grupo-btn { padding-right: 14px; }
  body.bo .nav .flecha { flex: none; }
  body.bo .nav .ico { flex: none; }
  body.bo .nav .sub button { padding-right: 12px; }
  body.bo .nav .l-sm { display: none; }
  body.bo .nav .grupo-nav { display: block; max-width: none; flex: none; width: 100%; }
  body.bo .nav .grupo-btn { position: relative; }
  body.bo .nav .flecha { display: block; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
  body.bo .nav .grupo-nav.abierto .flecha { transform: rotate(-135deg); }
  body.bo .nav .grupo-btn[aria-current="true"] { color: #fff; }
  body.bo .nav .grupo-btn[aria-current="true"]::before { left: 0; right: auto; top: 11px; bottom: 11px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  body.bo .nav .sub { position: static; display: none; box-shadow: none; background: transparent; border-radius: 0; padding: 2px 0 6px 0; margin: 0 0 0 26px; border-left: 1px solid rgba(255, 255, 255, .2); }
  body.bo .nav .grupo-nav.abierto .sub { display: flex; }
  body.bo .nav .sub button { font-size: 13.5px !important; color: rgba(255, 255, 255, .75); padding: 9px 12px; }
  body.bo .nav .sub button:hover { background: rgba(255, 255, 255, .08); }
  body.bo .nav .sub button[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }
  body.bo .nav .sub .sep { color: rgba(255, 255, 255, .5); }
  body.bo .nav { overflow-y: auto; }
  body.bo .topbar { margin-left: 236px; background: var(--navbg); color: var(--white); border-bottom: 0; padding: 12px 32px; }
  body.bo .topbar img { display: none; }
  body.bo .topbar .titulo { display: inline; }
  body.bo .topbar .vivo { margin-left: auto; color: rgba(255, 255, 255, .75); }
  body.bo .topbar .quien { margin-left: 0; opacity: 1; }
  body.bo main { margin-left: 236px; max-width: none; padding: 24px 32px 48px; }
  body.bo .toasts { bottom: 24px; left: 260px; }
}

/* ============ Ventas (Entrega 2) ============ */
textarea { width: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surf); font: inherit; resize: vertical; }
textarea:focus { outline: 3px solid rgba(112, 223, 223, .7); outline-offset: 1px; border-color: var(--cyan-dark); }
.chip.vb-borrador { background: #e8ebfa; color: var(--tx); }
.chip.vb-revision { background: var(--warn-bg); color: var(--res-txt); }
.chip.vb-corregir { background: #ffe3dc; color: #a13a25; }
.chip.vb-pendiente_entrega { background: #d9f4f4; color: #0b6b6b; }
.chip.vb-aprobada { background: var(--ok-bg); color: var(--ok); }
.chip.vb-desaprobada { background: var(--bad-bg); color: var(--bad); }
.chip.vb-desistida { background: #ecebe7; color: var(--muted); }
.chip.dc-falta { background: var(--bad-bg); color: var(--bad); }
.chip.dc-pendiente, .chip.dc-en_revision { background: var(--warn-bg); color: var(--res-txt); }
.chip.dc-aprobado { background: var(--ok-bg); color: var(--ok); }
.chip.dc-a_corregir { background: #ffe3dc; color: #a13a25; }
.chip-fr.chico { min-height: 34px; padding: 6px 12px; font-size: 13px; }

/* Lista del vendedor */
.inicio-venta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ventas-lista { display: grid; gap: 12px; }
@media (min-width: 700px) { .ventas-lista { grid-template-columns: 1fr 1fr; } }
.venta-card { text-align: left; background: var(--surf); border: 1.5px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.venta-card:hover { border-color: var(--cyan-dark); }
.venta-card.alerta { border-color: var(--bad); background: #fff8f7; }
.vc-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.vc-top b { font-family: var(--font-title); font-size: 18px; color: var(--tx); line-height: 1.15; }
.vc-lote { font-weight: 700; font-size: 14px; }
.vc-paso { font-size: 13.5px; color: var(--muted); }
.vc-pie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.toca { background: var(--navbg); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.toca.mio { background: var(--coral); }

/* Detalle */
.venta-detalle .cab-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cab-paso { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-weight: 600; color: var(--tx); }
.fila-reserva { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin-top: 10px; }
.aviso { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.aviso b { font-family: var(--font-title); font-size: 17px; display: block; }
.aviso p { margin: 4px 0 0; font-size: 14px; }
.aviso .btns { margin: 10px 0 0; }
.aviso.bad { background: var(--bad-bg); color: #7d1913; }
.aviso.warn { background: var(--warn-bg); color: var(--res-txt); }
.aviso.ok { background: var(--ok-bg); color: #0f6847; }
.aviso.muted { background: #ecebe7; color: var(--muted); }

/* Línea de tiempo: 8 tarjetas horizontales */
.linea-wrap { margin: 0 -16px 14px; }
@media (min-width: 900px) { .linea-wrap { margin: 0 0 14px; } }
ol.linea { list-style: none; margin: 0; padding: 4px 16px 10px; display: flex; gap: 10px; overflow-x: auto; position: relative; scroll-snap-type: x proximity; scrollbar-width: none; }
ol.linea::-webkit-scrollbar { display: none; }
.linea-wrap { position: relative; }
.linea-flecha { position: absolute; right: 10px; top: 50%; margin-top: -22px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; background: var(--navbg, #000652); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 14px rgba(0, 6, 40, .35); z-index: 2; padding: 0; }
.linea-flecha[hidden] { display: none; }
.linea-flecha svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.linea-flecha.atras svg { transform: rotate(180deg); }
body.vend.oscuro .linea-flecha { border-color: rgba(34, 211, 238, .5); background: #152A49; }
@media (min-width: 900px) { ol.linea { padding-left: 2px; padding-right: 2px; } }
.paso { flex: 0 0 156px; scroll-snap-align: start; background: var(--surf); border-radius: 14px; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 4px; border-top: 4px solid var(--line); }
.paso b { font-size: 13.5px; line-height: 1.2; color: var(--tx); }
.paso .pd { font-size: 12px; color: var(--muted); line-height: 1.3; }
.paso .pf { font-size: 11px; color: var(--muted); }
.paso .pn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--cream); color: var(--muted); border: 1.5px solid var(--line); }
.paso.hecho { border-top-color: var(--ok); }
.paso.hecho .pn { background: var(--ok); border-color: var(--ok); color: #fff; }
.paso.actual { border-top-color: var(--coral); box-shadow: 0 0 0 2px var(--coral), var(--shadow); }
.paso.actual .pn { background: var(--coral); border-color: var(--coral); color: #fff; }
.paso.alerta { border-top-color: var(--res); box-shadow: 0 0 0 2px var(--res), var(--shadow); background: #fffaf0; }
.paso.alerta .pn { background: var(--res); border-color: var(--res); color: #fff; }
.paso.cerrado { border-top-color: var(--bad); background: #fff8f7; }
.paso.cerrado .pn { background: var(--bad); border-color: var(--bad); color: #fff; }

/* Formularios de la venta */
.form-grid { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .ancho-total { grid-column: 1 / -1; } }
.campo label { margin-top: 12px; }
.lote-linea { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 10px; }
.precios.chico { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); margin-bottom: 4px; }
.precios.chico div b { font-size: 13px; white-space: nowrap; }
.monto-box { margin-top: 12px; padding: 10px 12px; background: var(--cream); border-radius: 10px; font-weight: 700; color: var(--tx); }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 8px 0; }
label.check input[type=checkbox] { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--navy); }
.cond-fila { display: grid; gap: 8px; grid-template-columns: 1fr; padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .cond-fila { grid-template-columns: 1.3fr 1fr 1fr 1.5fr auto; align-items: center; } }
.cond-lista { margin: 6px 0 10px; }
.faltan ul { margin: 6px 0 12px; padding-left: 20px; font-size: 14px; color: var(--bad); }
.faltan b { font-size: 14px; }
.fila-guardado { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }

/* Documentos */
.doc-fila { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.doc-fila:last-child { border-bottom: 0; }
.doc-fila.corregir { background: #fff6f3; margin: 0 -8px; padding: 12px 8px; border-radius: 10px; }
.doc-info { display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex: 1; }
.doc-info .obs { color: #a13a25; font-weight: 600; font-size: 13.5px; }
.doc-info .obs-input { margin-top: 6px; }
.doc-acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.visor { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 10px; background: var(--cream); border: 0; }
iframe.visor { height: 62vh; }
dialog.ancho { max-width: 760px; width: 94vw; }

/* Historial y comentarios */
.comentar { display: flex; gap: 10px; align-items: flex-end; margin: 8px 0 14px; }
.comentar textarea { flex: 1; }
.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ev { padding: 8px 0 8px 14px; border-left: 3px solid var(--line); }
.ev-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ev-cab b { font-size: 14px; color: var(--tx); }
.ev-txt { margin-top: 2px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ev.com { border-left: 0; border-radius: 12px; padding: 10px 12px; }
.ev.com.del-vendedor { background: #e8ebfa; }
.ev.com.del-admin { background: #d9f4f4; }
.acciones-staff .btn { min-height: 48px; }
.acciones-staff { margin-bottom: 0; }

/* Listados de Administración y planilla */
.tabla.clic tbody tr { cursor: pointer; }
.tabla.clic tbody tr:hover, .tabla.clic tbody tr:focus-visible { background: var(--cream); outline: none; }
.planilla-wrap { overflow: auto; max-height: 68vh; border: 1px solid var(--line); border-radius: 10px; }
table.planilla { border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
table.planilla th { position: sticky; top: 0; background: var(--navbg); color: #fff; text-align: left; padding: 8px 10px; font-weight: 700; z-index: 1; }
table.planilla td { padding: 6px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid #f0eee8; }
table.planilla tbody tr:nth-child(even) td { background: #fbfaf7; }
table.planilla td.num { text-align: right; font-variant-numeric: tabular-nums; }
body.bo .nav .grupo-btn .punto { right: 34px; }

/* ============ Rendimiento: acciones e informe A4 ============ */
.controles .controles-acc { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; min-width: 0; flex: 1 1 100%; max-width: none; }
.informe-capa { position: fixed; inset: 0; z-index: 2000; background: #3a3f5c; display: flex; flex-direction: column; }
.informe-barra { background: var(--navbg); color: #fff; padding: 10px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.informe-scroll { overflow: auto; flex: 1; padding: 22px 12px 40px; }
.hoja { width: 210mm; min-height: 297mm; background: #fff; margin: 0 auto; padding: 14mm; box-shadow: 0 6px 30px rgba(0, 0, 0, .35); color: var(--ink); }
.hoja-cab { display: flex; gap: 18px; align-items: center; border-bottom: 3px solid var(--coral); padding-bottom: 12px; margin-bottom: 14px; }
.hoja-logo { height: 40px; width: auto; }
.hoja-cab h2 { font-size: 22px; }
.hoja-sec { margin-bottom: 18px; }
.hoja-sec h3 { font-size: 16px; margin-bottom: 4px; }
.hoja-txt { margin: 0 0 8px; font-size: 13px; }
.hoja .tabla { min-width: 0; font-size: 12px; }
.hoja .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hoja .kpi-tile { padding: 9px; }
.hoja .kpi-tile b { font-size: 20px; }
.hoja .kpi-tile span { font-size: 11px; }
.hoja-pie { margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); text-align: center; }
@page { size: A4; margin: 12mm; }
@media print {
  body.imprimiendo { background: #fff; }
  body.imprimiendo > *:not(.informe-capa) { display: none !important; }
  body.imprimiendo .informe-capa { position: static; background: #fff; display: block; }
  body.imprimiendo .informe-barra { display: none; }
  body.imprimiendo .informe-scroll { overflow: visible; padding: 0; }
  body.imprimiendo .hoja { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  body.imprimiendo .hoja-sec { break-inside: avoid; margin-bottom: 10px; }
  body.imprimiendo .hoja-pie { margin-top: 6px; }
  body.imprimiendo .hoja .nota { margin-top: 4px; }
  body.imprimiendo .hoja * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.informe-barra .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.informe-barra .btn.ghost:hover { background: rgba(255, 255, 255, .12); }
.kpi-tile b.largo { font-size: .74em; line-height: 1.4; }

.solo-movil { display: none; }
@media (max-width: 760px) { .solo-pc { display: none; } .solo-movil { display: grid; } }

/* ---------- Perfiles y permisos ---------- */
.perm-tabla { min-width: 620px; }
.perm-tabla th.centro, .perm-tabla td.centro { text-align: center; width: 112px; }
.perm-tabla .perm-txt { line-height: 1.35; }
.perm-tabla tr.grupo-fila th { background: var(--cream); color: var(--tx); font-size: 12px; letter-spacing: .05em; padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.perm-tabla input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--coral); cursor: pointer; vertical-align: middle; }
.perm-tabla input[type="checkbox"]:disabled { opacity: .5; cursor: wait; }
.perm-tabla .no-aplica { color: #b9bccf; }
.perm-tabla .fijo-si { color: var(--ok); font-weight: 800; font-size: 18px; }
.tabla td.nw { white-space: nowrap; }

/* ---- Lotes reales (3b): bloqueados, planes, promociones ---- */
.n.bloqueado i, .est.bloqueado i, .ley.bloqueado i { background: var(--muted); }
.tile.bloqueado { background: #eceef3; border-color: #9aa0b4; color: #5d6280; }
.chip.bloqueado { background: #eceef3; color: #5d6280; }
.planes-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 6px 0 8px; }
.planes-tabla th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; padding: 4px 6px; border-bottom: 1px solid var(--line, #e4e1da); }
.planes-tabla td { padding: 7px 6px; border-bottom: 1px solid var(--line, #e4e1da); vertical-align: top; }
.planes-tabla td s { display: block; font-size: 11.5px; color: var(--muted); }
.planes-tabla td.tot { font-weight: 600; white-space: nowrap; }
.planes-tabla tr.contado td { background: #f4f9f9; font-weight: 600; }
.promo-tag { display: inline-flex; gap: 4px; align-items: baseline; background: #fff0ec; color: #b23a22; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; margin: 2px 0 4px; }
a.btn.ubic { display: flex; align-items: center; justify-content: center; min-height: 40px; margin: 8px 0 2px; text-decoration: none; text-align: center; }
.promo-lista .promo { display: grid; gap: 4px; }
.promo-lista .promo .acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mz-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; }
.mz-checks label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; margin: 0; white-space: nowrap; }
.mz-checks input[type=checkbox] { width: 20px; height: 20px; margin: 0; padding: 0; flex: none; }

.solo-libres { display: block; width: 100%; text-align: left; margin: 10px 0 12px; font-size: 13px; }

/* ---------- Ajustes para Android (app instalada y Chrome) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Evita que un tirón accidental hacia abajo recargue la página y haga perder un formulario a medio llenar (hay botón "Actualizar"). */
body { overscroll-behavior-y: none; }
button, a, select, input, summary, label { touch-action: manipulation; }
/* Sin zoom con pellizco ni con doble toque: la app ya viene a un tamaño cómodo. Se sigue pudiendo desplazar hacia todos lados. */
html, body { touch-action: pan-x pan-y; }
@media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } } /* a menos de 16 px el iPhone hace zoom solo al tocar un campo */
@media (max-width: 899px) {
  input, select, textarea { font-size: 16px; }
}
/* Contraseña con botón Ver / Ocultar. */
.campo-pass { position: relative; }
.campo-pass input { padding-right: 78px; }
.campo-pass .ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--tx); font-weight: 700; font-size: 13px; cursor: pointer; }
.login .campo-pass .ojo { color: rgba(255, 255, 255, .85); }
.campo-pass .ojo:active { background: rgba(0, 6, 82, .08); }
/* Aviso para instalar la app. Va arriba de la barra inferior y respeta el borde del celular. */
.banner-instalar { position: fixed; left: 10px; right: 10px; top: calc(66px + env(safe-area-inset-top)); z-index: 45; display: flex; align-items: center; gap: 10px;
  background: var(--navbg); color: var(--white); border-radius: 14px; padding: 10px 10px 10px 16px; box-shadow: 0 10px 30px rgba(0, 6, 82, .35); font-weight: 600; font-size: 14px; }
.banner-instalar span { flex: 1; }
.banner-instalar .cerrar { min-width: 36px; min-height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--white); font-size: 20px; line-height: 1; cursor: pointer; }
@media (min-width: 900px) { .banner-instalar { left: auto; right: 24px; top: auto; bottom: 24px; max-width: 380px; } }
.instalar.ok { background: var(--surf); color: var(--tx); border: 1.5px solid var(--line); }
/* Pantalla completa instalada: la barra superior respeta la cámara / barra de estado. */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); }
  .banner-instalar { display: none; }
}
/* Diálogos: que no se tapen con el teclado ni la barra de gestos. */
dialog { max-height: 92dvh; }

/* ---------- Plazos (turnos) ---------- */
.plazo { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; font-size: 13px; margin: 10px 0; border-left: 4px solid var(--ok); background: var(--ok-bg); color: var(--ok); }
.plazo b { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.plazo span { font-weight: 700; }
.plazo.por-vencer { border-color: var(--res); background: var(--warn-bg); color: var(--res-txt); }
.plazo.vencido { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.plazo.pausa { border-color: var(--muted); background: #ecebe7; color: var(--muted); }
.plazo-mini { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ok-bg); color: var(--ok); white-space: nowrap; }
.plazo-mini.por-vencer { background: var(--warn-bg); color: var(--res-txt); }
.plazo-mini.vencido { background: var(--bad-bg); color: var(--bad); }
.plazo-mini.pausa { background: #ecebe7; color: var(--muted); }
.chip.regularizar { background: #ffe3dc; color: #a13a25; }
.chip.cancelada { background: #ecebe7; color: var(--muted); }
.nombre-regularizar { color: #a13a25 !important; }
.seg-doc { display: flex; gap: 8px; margin: 6px 0 2px; }
.seg-doc button { flex: 1; border: 1.5px solid var(--line); background: var(--surf); color: var(--tx); border-radius: 10px; min-height: 44px; font-weight: 700; cursor: pointer; }
.seg-doc button[aria-pressed="true"] { background: var(--navbg); color: var(--white); border-color: var(--navy); }
.falta { background: #fff3ef; border: 1px solid #ffd2c7; border-radius: 10px; padding: 9px 12px; margin: 8px 0; font-size: 14px; color: #7a2a18; }
ol.hist { list-style: none; margin: 8px 0 0; padding: 0; border-left: 2px solid var(--line); }
ol.hist li { position: relative; padding: 0 0 12px 14px; font-size: 13px; }
ol.hist li::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan-dark); }
ol.hist li b { display: block; color: var(--tx); }
ol.hist li small { color: var(--muted); }
.franjas { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chip-franja { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--tx); }
.chip-franja.guardia { background: #d9f4f4; border-color: #9fdede; }
.chip-franja button { border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); padding: 0 4px; }
.chip-franja button:hover { color: var(--bad); }

/* ============ Cabecera administrativa en computadora (estilo DocSync, colores Matriz) ============ */
.xp-hd { display: none; }
@media (min-width: 900px) {
  body.bo .nav, body.bo .topbar { display: none; }
  body.bo main { margin-left: auto; margin-right: auto; max-width: 1500px; padding: 22px 28px 48px; }
  body.bo .toasts { left: 12px; bottom: 24px; }
  .xp-hd { display: block; position: sticky; top: 0; z-index: 700; padding: 8px 16px 10px; border-radius: 0 0 20px 20px; color: #e6e9f3;
    background: var(--navbg); }
  .xp-wrap { max-width: 1500px; margin: 0 auto; display: flex; align-items: flex-start; gap: 10px; }
  .xp-box { flex: 1; min-width: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 6px 10px 4px; display: flex; flex-direction: column; gap: 4px; }
  .xp-r1 { display: flex; align-items: center; gap: 10px; padding: 0 2px; min-height: 36px; }
  .xp-logo { height: 30px; width: auto; display: block; flex: none; }
  .xp-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .22); flex: none; }
  .xp-prod { font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: #A9B0C2; white-space: nowrap; }
  .xp-grow { flex: 1; }
  .xp-hd .vivo { color: rgba(255, 255, 255, .7); }
  .zp-search { position: relative; display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: 0 10px; width: 250px; color: rgba(255, 255, 255, .6); margin-left: 6px; }
  .zp-search .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; display: block; }
  .zp-search input { background: transparent; border: 0; outline: none; color: #fff; font-size: 12.5px; flex: 1; min-width: 0; min-height: 30px; padding: 0; }
  .zp-search input::placeholder { color: rgba(255, 255, 255, .5); }
  .zp-search input:focus { outline: none; }
  .xp-nav { display: flex; gap: 4px; border-top: 1px solid rgba(255, 255, 255, .10); padding-top: 3px; flex-wrap: wrap; }
  .xp-grp { position: relative; }
  .xp-nb { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; color: #d4d9ec; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; font-family: inherit; }
  .xp-nb:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  .xp-nb.on { background: rgba(255, 255, 255, .10); color: #fff; font-weight: 700; }
  .xp-nb.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 3px; border-radius: 3px; background: var(--coral); box-shadow: 0 0 12px rgba(255, 102, 77, .8); }
  .xp-nb .ico svg, .xp-ib .ico svg, .zp-drop .ico svg, .xp-drop .ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
  .xp-nb .caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
  .xp-nb .zp-bd { position: static; margin-left: 2px; }
  .zp-bd { min-width: 19px; height: 19px; border-radius: 10px; background: var(--coral); color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
  .xp-ib .zp-bd { position: absolute; top: -6px; right: -6px; }
  .xp-acts { display: flex; gap: 8px; align-items: center; padding-top: 2px; }
  .xp-anc { position: relative; }
  .xp-ib { position: relative; width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
  .xp-ib:hover { background: rgba(255, 255, 255, .18); }
  .xp-ib.user { border-radius: 50%; border: 1.5px solid rgba(255, 102, 77, .85); }
  .xp-upd.girando .ico { animation: giro .8s linear infinite; }
  @keyframes giro { to { transform: rotate(360deg); } }
  .zp-av { width: 30px; height: 30px; border-radius: 50%; background: var(--coral); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: 11px; }
  .xp-pop { position: absolute; background: #fff; color: var(--ink); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); padding: 6px; display: none; z-index: 900; }
  .xp-pop.open { display: block; }
  .xp-menu { left: 0; top: calc(100% + 6px); min-width: 270px; }
  .xp-menu button, .xp-res button { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink); font-family: inherit; }
  .xp-menu button:hover, .xp-res button:hover, .xp-res button.sel { background: var(--cream); }
  .xp-menu button.on { background: var(--cream); font-weight: 800; color: var(--tx); }
  .xp-menu .sep { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 4px; }
  .xp-res { left: 0; right: 0; top: calc(100% + 6px); }
  .xp-res .ico svg { width: 16px; height: 16px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
  .xp-drop { right: 0; top: calc(100% + 8px); min-width: 290px; }
  .xp-drop .hd { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
  .xp-drop .hd span { color: var(--muted); }
  .xp-drop .role { align-self: flex-start; margin-top: 4px; background: var(--coral); color: #fff !important; font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
  .xp-drop .it { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 9px; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--ink); }
  .xp-drop .it:hover { background: var(--cream); }
  .xp-drop .it b { color: var(--tx); }
  .xp-drop .it.mal b { color: var(--bad); }
  .xp-drop .out { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 10px; border-radius: 9px; font-weight: 600; color: var(--bad); cursor: pointer; min-height: 40px; font-family: inherit; font-size: 13.5px; }
  .xp-drop .out:hover { background: var(--bad-bg); }
  .xp-drop .out.n { color: var(--ink); } .xp-drop .out.n:hover { background: var(--cream); }
}
.filtros-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filtros-fila input[type=search] { flex: 1; min-width: 200px; }
.filtros-fila input, .filtros-fila select { width: auto; }

/* ---------- Panel de lotes compartido (tarjetas) ---------- */
.pl-mzs .pl-mz { gap: 7px; }
.pl-prox { font-size: 11.5px; font-weight: 700; color: var(--res-txt); background: var(--warn-bg); border-radius: 8px; padding: 4px 8px; }
.pl-lotes { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .pl-lotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pl-lotes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .pl-lotes { grid-template-columns: repeat(4, 1fr); } }
.pl-lote { background: var(--surf); border: 2px solid var(--line); border-left-width: 6px; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 7px; min-height: 92px; }
.pl-lote.disponible { border-left-color: var(--st-ok); }
.pl-lote.reservado { border-left-color: var(--st-res); background: #fffdf5; }
.pl-lote.vendido { border-left-color: var(--st-ven); }
.pl-lote.bloqueado { border-left-color: var(--muted); }
.pl-lote.mia { box-shadow: 0 0 0 3px var(--navy); }
.pl-lote:hover { border-color: var(--cyan-dark); }
.pl-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pl-n { font-family: var(--font-title); font-size: 19px; color: var(--tx); line-height: 1.1; }
.pl-est { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 9px; background: var(--line); color: var(--ink); }
.pl-lote.disponible .pl-est { background: var(--st-ok); color: var(--on-st); }
.pl-lote.reservado .pl-est { background: var(--st-res); color: var(--on-st); }
.pl-lote.vendido .pl-est { background: var(--st-ven); color: var(--on-st); }
.pl-quien { font-size: 12.5px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-vence { display: flex; flex-direction: column; gap: 1px; }
.pl-vence b { font-family: var(--font-title); font-size: 22px; line-height: 1.05; color: var(--res-txt); font-variant-numeric: tabular-nums; }
.pl-vence.mia b { color: var(--tx); }
.pl-vence.grande b { font-size: 32px; }
.pl-cuando { font-size: 12px; font-weight: 700; color: var(--muted); }
.pl-pasos { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.pl-barra8 { display: flex; gap: 3px; height: 8px; }
.pl-barra8 i { flex: 1; border-radius: 3px; background: var(--line); }
.pl-barra8 i.on { background: var(--navbg); }
.pl-barra8 i.cur { background: var(--coral); }
.pl-paso-txt { font-size: 12px; color: var(--ink); line-height: 1.3; }
.pl-paso-txt b { color: var(--tx); }
.pl-pie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.pl-toca { font-weight: 700; color: var(--tx); }
.venta-box { margin-top: 10px; align-items: stretch; background: #f1f5ff; }

/* ---------- Informe de tiempos ---------- */
.tm-sec { margin-bottom: 14px; }
.tm-sec h3 { margin-bottom: 10px; }
.tm-svg { max-width: 760px; height: auto; display: block; }
.tm-tabla td, .tm-tabla th { white-space: normal; }
.tm-fila { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tm-quien { display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex: 1 1 220px; }
.tm-valor { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; }
.tm-valor b { min-width: 64px; text-align: right; color: var(--tx); }
.tm-barra { flex: 1; height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; display: block; }
.tm-barra i { display: block; height: 100%; border-radius: 5px; }
.hoja .tm-tabla { font-size: 11px; }
.hoja .tm-tabla th, .hoja .tm-tabla td { padding: 5px 6px; }
.hoja .planilla-wrap { overflow: visible; max-height: none; border: 0; }
.hoja .tm-svg { max-width: 100%; }

/* Blindaje móvil: nada puede ensanchar la pantalla */
.mz, .pl-lote { min-width: 0; }
.chips, .barra-filtros, .tabs { max-width: 100%; min-width: 0; }
main, :is(#pn, .pk-lotes), #tab { min-width: 0; max-width: 100%; }

/* ---------- Ventana de resumen de la venta ---------- */
.resumen-venta { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.rs-bloque { background: var(--cream); border-radius: 12px; padding: 10px 12px; }
.rs-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.rs-cab h4 { margin: 0; font-size: 14px; color: var(--tx); }
.rs-fila { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rs-fila:last-child { border-bottom: 0; }
.rs-fila span { color: var(--muted); flex: 0 0 auto; }
.rs-fila b { text-align: right; overflow-wrap: anywhere; }
.rs-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rs-doc { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink); }
.rs-thumb { height: 84px; border-radius: 10px; background: var(--surf); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); font-size: 12px; }
.rs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rs-doc.falta .rs-thumb { border-color: var(--sold); color: var(--sold); background: var(--sold-bg); }

/* Mi cuenta: datos de la persona y tarjeta de avisos */
.card > .t { font-weight: 800; font-size: 1.05rem; color: var(--navy, #0b0b4f); }
.card > .s { color: #5b5f7a; font-size: .92rem; margin-top: 2px; }
.avisos-caja .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.avisos-caja .btn.block { margin-top: 10px; }

/* ============ Cabecera: azul sólido con toques turquesa ============ */
.topbar { background: var(--navbg); border-bottom: 1px solid rgba(112, 223, 223, .28); }
.topbar img { height: 40px; }
.topbar .salir { background: rgba(112, 223, 223, .12); border-color: rgba(112, 223, 223, .55); color: var(--cyan); }
.topbar .salir:hover { background: var(--cyan); border-color: var(--cyan); color: var(--tx); }
.nav button[aria-current="page"]::before, .nav .grupo-btn[aria-current="true"]::before { background: var(--cyan); }
.nav button[aria-current="page"] { color: var(--cyan); }
.xp-logo { height: 40px; }
.xp-ib { border-color: rgba(112, 223, 223, .55); background: rgba(112, 223, 223, .12); color: var(--cyan); }
.xp-ib:hover { background: rgba(112, 223, 223, .28); color: #fff; }
.xp-ib.user { border-color: var(--coral); background: transparent; }
.xp-nb.on::after { background: var(--cyan); box-shadow: 0 0 10px rgba(112, 223, 223, .6); }
.xp-hd { border-radius: 0 !important; }
.zp-search { border-color: rgba(112, 223, 223, .3); }

/* Franja en vivo debajo de la cabecera */
.ticker { background: var(--navbg); color: #fff; display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; border-top: 1px solid rgba(112, 223, 223, .3); }
.ticker[hidden] { display: none; }
.ticker .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(255, 102, 77, .7); animation: pl 1.6s infinite; flex: none; }
.ticker b { color: var(--cyan); }
.ticker .tk-r { margin-left: auto; color: var(--cyan); font-weight: 600; white-space: nowrap; }
@keyframes pl { 70% { box-shadow: 0 0 0 9px rgba(255, 102, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 102, 77, 0); } }
@media (prefers-reduced-motion: reduce) { .ticker .pulse { animation: none; } :is(#pn, .pk-lotes) .ex { animation: none !important; } }
@media (min-width: 900px) { body.bo .ticker { padding: 9px 32px; } }
@media (max-width: 560px) { .ticker .tk-r { display: none; } }

/* ============ Panel Tablero: manzanas en miniatura que se agrandan ============ */
:is(#pn, .pk-lotes) button { font-family: inherit; color: inherit; }
:is(#pn, .pk-lotes) .selrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
:is(#pn, .pk-lotes) .selrow label { display: grid; gap: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #5a5f88; margin: 0; }
:is(#pn, .pk-lotes) select { appearance: none; -webkit-appearance: none; font-weight: 800; font-size: 14px; color: var(--tx); height: 42px; border-radius: 10px; border: 1.5px solid rgba(0, 6, 82, .25); padding: 0 30px 0 12px; width: 100%; text-transform: none; letter-spacing: 0;
  background: var(--surf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000652' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
:is(#pn, .pk-lotes, #app, main) .seg5 { display: flex; background: rgba(0, 6, 82, .07); border-radius: 11px; padding: 3px; gap: 3px; margin-bottom: 10px; }
:is(#pn, .pk-lotes, #app, main) .seg5 button { flex: 1; border: 0; background: transparent; border-radius: 9px; min-height: 36px; font-weight: 800; font-size: 13px; color: #3b3f6e; cursor: pointer; padding: 0 8px; white-space: nowrap; }
:is(#pn, .pk-lotes, #app, main) .seg5 button[aria-pressed="true"] { background: var(--navbg); color: #fff; }
:is(#pn, .pk-lotes) .legend { display: flex; gap: 2px 6px; flex-wrap: wrap; margin-bottom: 12px; }
:is(#pn, .pk-lotes) .ley-b { border: 1.5px solid transparent; background: transparent; border-radius: 999px; padding: 3px 7px 3px 4px; font-size: 11.5px; font-weight: 700; color: #3b3f6e; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; }
:is(#pn, .pk-lotes) .ley-b i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; }
:is(#pn, .pk-lotes) .ley-b[aria-pressed="true"] { border-color: var(--navy); background: var(--surf); }
:is(#pn, .pk-lotes) .ok { background: var(--st-ok); } :is(#pn, .pk-lotes) .res { background: var(--st-res); } :is(#pn, .pk-lotes) .ven { background: var(--st-ven); }
:is(#pn, .pk-lotes) .blq { background: repeating-linear-gradient(45deg, #dcdde6 0 3px, #ececf1 3px 6px); }
:is(#pn, .pk-lotes) .pl-buscar { margin-bottom: 12px; }
:is(#pn, .pk-lotes) .otras { display: grid; gap: 8px; margin-top: 12px; }
:is(#pn, .pk-lotes) .otras-t { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #5a5f88; }
:is(#pn, .pk-lotes) .minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { :is(#pn, .pk-lotes) .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { :is(#pn, .pk-lotes) .minis { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.bo :is(#pn, .pk-lotes) .minis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { body.bo :is(#pn, .pk-lotes) .minis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
:is(#pn, .pk-lotes) .mn { border: 1.5px solid rgba(0, 6, 82, .14); background: var(--surf); border-radius: 12px; padding: 9px 10px 10px; display: grid; gap: 6px; text-align: left; cursor: pointer; position: relative; box-shadow: var(--shadow); align-content: start; min-width: 0; }
:is(#pn, .pk-lotes) .mn:hover { border-color: var(--navy); }
:is(#pn, .pk-lotes) .mn.empty { opacity: .6; }
:is(#pn, .pk-lotes) .mnh { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
:is(#pn, .pk-lotes) .mnh b { font-weight: 900; font-size: 14px; color: var(--tx); }
:is(#pn, .pk-lotes) .mnh span { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--st-ok); color: var(--on-st); white-space: nowrap; }
:is(#pn, .pk-lotes) .mnh span.z { background: var(--st-ven); }
:is(#pn, .pk-lotes) .mnd { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
:is(#pn, .pk-lotes) .mnd i { aspect-ratio: 1; border-radius: 2px; display: block; }
:is(#pn, .pk-lotes) .minis.filtrado .mnd i { opacity: .16; }
:is(#pn, .pk-lotes) .minis.filtrado .mnd i.ok { opacity: 1; }
:is(#pn, .pk-lotes) .mnf { font-size: 10.5px; font-weight: 700; color: #5a5f88; }
:is(#pn, .pk-lotes) .mnf .mini { width: 10px; height: 10px; vertical-align: -1px; }
:is(#pn, .pk-lotes) .mn .pk { position: absolute; top: -7px; right: -5px; min-width: 22px; height: 20px; border-radius: 10px; background: var(--navbg); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 6px; border: 2px solid #fff; }
:is(#pn, .pk-lotes) .pl-prox { background: transparent; padding: 0; border-radius: 0; font-size: 10.5px; color: #8a6a00; }
/* manzana agrandada */
:is(#pn, .pk-lotes) .ex { border: 2px solid var(--navy); border-radius: 14px; padding: 12px; background: var(--surf); display: grid; gap: 10px; animation: grow .22s ease-out; box-shadow: var(--shadow); }
@keyframes grow { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
:is(#pn, .pk-lotes) .exh { display: flex; align-items: flex-start; gap: 10px; }
:is(#pn, .pk-lotes) .exh h4 { font-size: 21px; line-height: 1; margin: 0; font-weight: 900; color: var(--tx); }
:is(#pn, .pk-lotes) .exh small { display: block; font-size: 12px; font-weight: 700; color: #5a5f88; margin-top: 3px; }
:is(#pn, .pk-lotes) .exh .cl { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(0, 6, 82, .25); background: var(--surf); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; flex: none; }
:is(#pn, .pk-lotes) .cn { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: #3b3f6e; }
:is(#pn, .pk-lotes) .cn b { font-weight: 900; font-size: 16px; color: var(--tx); margin-right: 4px; }
:is(#pn, .pk-lotes) .exg { --cols: 6; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px; }
@media (min-width: 900px) { body.bo :is(#pn, .pk-lotes) .exg { --cols: 12; } }
:is(#pn, .pk-lotes) .exg .lt { aspect-ratio: 1; border-radius: 8px; border: 0; display: grid; place-items: center; align-content: center; font-weight: 900; font-size: 14px; position: relative; color: var(--tx); cursor: pointer; padding: 0; line-height: 1.05; min-height: 0; min-width: 0; gap: 0; overflow: visible; }
:is(#pn, .pk-lotes) .exg .lt small { display: block; font-size: 9px; font-weight: 700; opacity: .8; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
:is(#pn, .pk-lotes) .exg .lt.ven { color: rgba(0, 6, 82, .55); }
:is(#pn, .pk-lotes) .exg .lt.blq { color: rgba(0, 6, 82, .5); }
:is(#pn, .pk-lotes) .exg .lt .gl { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; stroke: var(--navy); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
:is(#pn, .pk-lotes) .exg .lt.ven .gl { opacity: .45; }
:is(#pn, .pk-lotes) .exg .lt.sel { outline: 3px solid var(--navy); outline-offset: 2px; }
:is(#pn, .pk-lotes) .exg .lt.mia { box-shadow: 0 0 0 2.5px var(--coral); }
:is(#pn, .pk-lotes) .lt .ck { position: absolute; top: -6px; left: -6px; width: 17px; height: 17px; border-radius: 50%; background: var(--navbg); display: grid; place-items: center; }
:is(#pn, .pk-lotes) .lt .ck svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
:is(#pn, .pk-lotes) .exl { --lc: 2; display: grid; grid-template-columns: repeat(var(--lc), 1fr); gap: 8px; }
@media (min-width: 700px) { :is(#pn, .pk-lotes) .exl { --lc: 4; } }
@media (min-width: 900px) { body.bo :is(#pn, .pk-lotes) .exl { --lc: 6; } }
:is(#pn, .pk-lotes) .lc { border: 1.5px solid rgba(0, 6, 82, .18); background: var(--surf); border-radius: 12px; position: relative; min-width: 0; }
:is(#pn, .pk-lotes) .lc .lcb { display: grid; gap: 2px; text-align: left; cursor: pointer; border: 0; background: none; padding: 10px 12px; width: 100%; }
:is(#pn, .pk-lotes) .lc b { font-weight: 900; font-size: 17px; color: var(--tx); }
:is(#pn, .pk-lotes) .lc span { font-size: 12px; color: #454a78; font-weight: 600; }
:is(#pn, .pk-lotes) .lc em { font-style: normal; font-size: 11.5px; font-weight: 800; margin-top: 4px; display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--st-ok); color: var(--on-st); justify-self: start; }
:is(#pn, .pk-lotes) .lc.sel { border-color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
:is(#pn, .pk-lotes) .lc.sel em { background: var(--navbg); color: #fff; }
:is(#pn, .pk-lotes) .lc .fi { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(0, 6, 82, .3); background: var(--surf); font-size: 12px; font-weight: 800; font-style: italic; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--tx); }
:is(#pn, .pk-lotes) .det { background: rgba(0, 6, 82, .05); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
:is(#pn, .pk-lotes) .det b { font-weight: 900; font-size: 15px; }
:is(#pn, .pk-lotes) .det-ficha { margin-left: auto; border: 1.5px solid var(--navy); background: var(--surf); border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 800; cursor: pointer; }
:is(#pn, .pk-lotes) .ex-ayuda { margin: 0; }
/* bandeja de selección */
:is(#pn, .pk-lotes) .bandeja-espacio { height: 96px; }
:is(#pn, .pk-lotes) .tray { position: fixed; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; z-index: 25; background: var(--navbg); color: #fff; border-radius: 16px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0, 6, 82, .4); border: 1px solid rgba(112, 223, 223, .35); }
:is(#pn, .pk-lotes) .tray .tx { display: grid; gap: 1px; min-width: 0; }
:is(#pn, .pk-lotes) .tray b { font-weight: 900; font-size: 15px; }
:is(#pn, .pk-lotes) .tray small { font-size: 11.5px; color: rgba(255, 255, 255, .8); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#pn, .pk-lotes) .tray .btn { background: var(--coral); color: var(--tx); font-weight: 800; padding: 0 14px; border-radius: 12px; min-height: 42px; margin-left: auto; font-size: 13.5px; white-space: nowrap; }
:is(#pn, .pk-lotes) .tray .tray-x { background: none; border: 0; color: var(--cyan); font-weight: 700; font-size: 12px; cursor: pointer; text-decoration: underline; padding: 6px 2px; }
@media (min-width: 900px) { body.bo :is(#pn, .pk-lotes) .tray { bottom: 24px; } }

/* ============ Compra de varios lotes ============ */
.chip.compra { background: var(--cyan); color: var(--tx); margin-left: 6px; font-size: 11px; vertical-align: 1px; }
.compra-mini { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.compra-box { border: 1.5px solid var(--cyan-dark); }
.compra-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.compra-lotes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.compra-lotes li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--cream); }
.compra-lotes li.actual { box-shadow: inset 0 0 0 2px var(--navy); }
.compra-lotes li .btn { margin-left: auto; }
.multi-box { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(112, 223, 223, .18); }
.multi-box .check { margin: 0; }
.multi-box input[type=text], .multi-box input:not([type]) { margin-top: 8px; }
.efectivo { margin: 4px 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--cream); }
.efectivo .check { margin: 0; }
.efectivo input[type=text], .efectivo input:not([type]) { margin-top: 8px; }
.doc-mas { padding: 6px 0 2px; }
.rs-bloque.con-falta { box-shadow: inset 0 0 0 2px var(--coral); }
.rs-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: var(--navbg); color: #fff; }
.rs-total b { font-size: 18px; color: var(--cyan); }
:is(#pn, .pk-lotes) .gl { stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:is(#pn, .pk-lotes) .tray .tray-total { color: var(--cyan); font-weight: 800; font-size: 12.5px; }

/* Botones con solo ícono (tablas de usuarios y promotores) */
.btn-ico { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; padding: 0; border-radius: 11px; border: 1.5px solid var(--line); background: var(--surf); color: var(--tx); cursor: pointer; transition: background .15s, border-color .15s; }
.btn-ico:hover { background: var(--cream); border-color: #cfc9bb; }
.btn-ico:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.btn-ico .ico { display: flex; }
.btn-ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.btn-ico.danger { color: var(--bad); border-color: rgba(179, 50, 31, .35); background: var(--surf); }
.btn-ico.danger:hover { background: #fbe9e5; border-color: var(--bad); }
.btn-ico.ok { color: #1f7a55; border-color: rgba(31, 122, 85, .35); }
.btn-ico.ok:hover { background: #e3f3eb; border-color: #1f7a55; }

/* Medidas y linderos del lote */
.datos-lote { margin: 10px 0 4px; }
.datos-lote h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.datos-lote .sup { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 13px; }
.datos-lote .sup span { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .02em; }
.datos-lote .sup b { font-family: var(--font-title); font-size: 17px; color: var(--tx); }
.datos-lote .lados td:first-child { font-weight: 700; width: 22%; }
.datos-lote .lados td:nth-child(2) { white-space: nowrap; width: 24%; }
.aviso-datos { margin: 8px 0; }
/* Ficha de fracciones */
.ficha-fr { margin-bottom: 14px; }
.ficha-fr .fr-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.ficha-fr .fr-cab h3 { margin: 0 0 2px; }
.ficha-fr .fr-num { text-align: right; }
.ficha-fr .fr-num span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
.ficha-fr .fr-num b { font-family: var(--font-title); font-size: 18px; color: var(--tx); letter-spacing: .02em; }
.ficha-fr .fr-estado { display: grid; gap: 6px; margin: 10px 0 12px; }
.ficha-fr .fr-estado .msg { margin: 0; }
.ficha-fr .kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 18px; }
.ficha-fr .kvs .kv { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ficha-fr .kvs .kv span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; font-weight: 600; }
.ficha-fr .kvs .kv b { font-size: 14px; }
.pk-lotes .centro { text-align: center; margin: 12px 0 0; }
/* Selector de ubicación */
.mapa-caja { height: 300px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #e8ecf3; margin: 8px 0; position: relative; z-index: 0; }
.mapa-cargando { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 14px; padding: 16px; text-align: center; }
.mapa-coord { font-variant-numeric: tabular-nums; }
/* Asistente por pasos de la venta */
.asist-pasos { display: flex; gap: 4px; list-style: none; margin: 0 -16px 12px; padding: 4px 16px 8px; overflow-x: auto; scrollbar-width: none; }
.asist-pasos::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .asist-pasos { margin: 0 0 12px; padding: 4px 0 8px; } }
.asist-pasos .ap { flex: 1 0 auto; }
.asist-pasos .ap button { display: grid; justify-items: center; gap: 4px; width: 100%; min-width: 64px; padding: 4px 6px; border: 0; background: none; cursor: pointer; color: var(--muted); font-family: inherit; }
.asist-pasos .ap button:disabled { cursor: default; opacity: .55; }
.asist-pasos .apn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: #e7e8f0; color: var(--tx); border: 2px solid transparent; }
.asist-pasos .apt { font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.asist-pasos .ap.hecho .apn { background: var(--st-ok); color: var(--on-st); }
.asist-pasos .ap.actual .apn { background: var(--navbg); color: #fff; box-shadow: 0 0 0 3px rgba(255, 99, 71, .35); }
.asist-pasos .ap.actual .apt { color: var(--tx); }
.asist-card { padding: 18px 16px; }
.asist-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.asist-cab h3 { margin: 0; }
.asist-hint { margin: 4px 0 10px; }
.asist-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.asist-nav .btn { min-width: 128px; }
.opts { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin: 6px 0; }
.opts.dos { grid-template-columns: 1fr 1fr; }
.opt { text-align: left; padding: 14px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surf); cursor: pointer; display: grid; gap: 2px; font-family: inherit; color: var(--tx); min-height: 64px; }
.opt b { font-size: 16px; font-weight: 800; }
.opt small { font-size: 12px; color: var(--muted); font-weight: 600; }
.opt.on { border-color: var(--navy); background: #eef0ff; box-shadow: inset 0 0 0 1px var(--navy); }
.ubic-fila { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ubic-fila .btns { margin: 8px 0 0; }
.lote-modalidad .lote-linea { margin-top: 4px; }
/* Promotor que gestiona (destacado) */
.gestiona { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.prom-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--navbg); color: #fff; border-radius: 999px; padding: 4px 12px 4px 8px; font-weight: 800; font-size: 13px; line-height: 1.2; }
.prom-tag i { width: 9px; height: 9px; border-radius: 50%; background: #ff6347; display: inline-block; flex: none; }
.prom-tag.propio { background: #ff6347; color: #fff; }
.prom-tag.propio i { background: #fff; }
.venta-card { position: relative; }
.vc-ojo { margin-left: auto; }
.tabla td.acc .btn-ico { width: 36px; height: 36px; }
/* Fidelización */
.fid-lista { display: grid; gap: 10px; margin-top: 10px; }
.fid-item { background: var(--surf); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.fid-item.abierto { border-color: var(--navy); }
.fid-top { display: flex; align-items: center; gap: 6px; padding-right: 10px; }
.fid-cab { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 12px; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; color: inherit; }
.fid-av { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--navbg); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.fid-quien { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fid-quien b { font-size: 15.5px; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fid-quien .mas { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fid-flecha { color: var(--muted); font-size: 11px; flex: none; }
.fid-ico { display: flex; gap: 6px; flex: none; }
.fid-ico .btn-ico:disabled { opacity: .35; cursor: default; }
a.btn-ico { text-decoration: none; }
@media (max-width: 640px) {
  .fid-top { flex-wrap: wrap; padding: 0 10px 10px; }
  .fid-cab { flex-basis: 100%; padding: 12px 0 8px; }
  .fid-ico { margin-left: 54px; }
  .fid-cab .chip { display: none; }
  .fid-quien b { white-space: normal; }
}
.fid-det { padding: 4px 16px 18px; border-top: 1px solid var(--line); background: #fcfbf8; }
.fid-det h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fid-compras { display: grid; gap: 8px; }
.fid-compra { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surf); border: 1px solid var(--line); border-radius: 12px; }
.fid-estado { margin-top: 14px; }
.opts.tres { grid-template-columns: repeat(3, 1fr); }
.opts.tres .opt { min-height: 48px; padding: 10px; text-align: center; }
.fid-notas { display: grid; gap: 8px; }
.fid-nota { padding: 10px 12px; background: var(--surf); border: 1px solid var(--line); border-radius: 12px; }
.fid-nota p { margin: 4px 0 0; white-space: pre-wrap; }
.fid-nueva { margin-top: 12px; display: grid; gap: 8px; }
.fid-nueva textarea { width: 100%; }
.fid-nueva-pie { display: flex; gap: 8px; flex-wrap: wrap; }
.fid-nueva-pie select { flex: 1; min-width: 180px; }

/* ---------- Configuración en tarjetas ---------- */
.cfg-sec { margin-bottom: 26px; }
.cfg-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.cfg-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .cfg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cfg-grid { grid-template-columns: repeat(3, 1fr); } }
.cfg-card { display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left; background: var(--surf); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); cursor: pointer; font-family: inherit; color: var(--ink); transition: transform .15s, border-color .15s, box-shadow .15s; }
.cfg-card:hover, .cfg-card:focus-visible { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 6, 82, .08), 0 12px 26px rgba(0, 6, 82, .12); outline: none; }
.cfg-ico { flex: none; width: 52px; height: 52px; border-radius: 15px; background: var(--navbg); color: #fff; display: flex; align-items: center; justify-content: center; }
.cfg-ico svg, .migas .volver svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cfg-ico svg { width: 26px; height: 26px; }
.cfg-card:hover .cfg-ico { background: var(--coral); }
.cfg-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cfg-tx b { font-size: 15px; line-height: 1.25; }
.cfg-tx span { font-size: 13px; line-height: 1.35; color: var(--muted); }
.cfg-ir { flex: none; font-size: 26px; color: var(--muted); line-height: 1; }
.migas { padding: 12px 16px 0; max-width: 980px; margin: 0 auto; }
@media (min-width: 900px) { body.bo .migas { max-width: 1500px; padding: 16px 28px 0; } body.bo .migas:not([hidden]) + main { padding-top: 6px; } }
.migas .volver { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 10px 6px 4px; border-radius: 10px; color: var(--tx); font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; }
.migas .volver:hover { background: rgba(0, 6, 82, .06); }
.migas .volver svg { width: 18px; height: 18px; }

/* ---------- Personal de ventas: fotos, supervisores y ventana de promotores ---------- */
.mv-av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--navbg); color: #fff; font-weight: 800; line-height: 1; }
.mv-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-campo { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; }
.foto-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sup-lista, .prom-lista { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sup-fila, .prom-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surf); }
.sup-fila:last-child, .prom-fila:last-child { border-bottom: 0; }
.sup-fila.apagado, .prom-fila.apagado { background: var(--cream); }
.sup-fila.apagado .sup-q b, .prom-fila.apagado .prom-q b { color: var(--muted); }
.prom-fila.propia { background: #f3f5ff; }
.sup-q, .prom-q { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sup-q b, .prom-q b { color: var(--tx); }
.sup-fila .acciones, .prom-fila .acciones { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; margin-left: auto; }
.btn.con-ico { display: inline-flex; align-items: center; gap: 8px; height: 40px; white-space: nowrap; }
.btn.con-ico .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.prom-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
dialog.ancho .prom-lista { max-height: 56vh; overflow: auto; }
@media (max-width: 599px) {
  .sup-fila, .prom-fila { flex-wrap: wrap; }
  .sup-fila .acciones, .prom-fila .acciones { width: 100%; justify-content: flex-end; }
}

/* ---------- Ranking con reconocimientos ---------- */
.rk-podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; margin: 6px 0 18px; }
.rk-pod { background: var(--surf); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 10px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--shadow); }
.rk-pod.p1 { border-color: #d9a400; background: linear-gradient(#fff9e6, #fff); padding-top: 20px; }
.rk-pod .pos { font-weight: 900; font-size: 22px; color: var(--tx); }
.rk-pod.p1 .pos { color: #a87900; }
.rk-pod b { color: var(--tx); }
.rk-pod .num { font-size: 13px; color: var(--muted); }
.rk-lista { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rk-fila { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surf); }
.rk-fila:last-child { border-bottom: 0; }
.rk-fila .pos { width: 26px; text-align: center; font-weight: 900; color: var(--tx); flex: none; }
.rk-q { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-q b { color: var(--tx); }
.rk-cifra { text-align: right; flex: none; }
.rk-cifra b { display: block; color: var(--tx); }
.rk-insignias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.insignia { display: inline-flex; align-items: center; gap: 5px; background: #fff4cf; color: #7a5600; border: 1px solid #ecd37a; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.insignia::before { content: '★'; color: #d9a400; }
.rk-reco { margin-top: 18px; }
.rk-reco-fila { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rk-reco-fila:last-child { border-bottom: 0; }
@media (max-width: 599px) { .rk-podio { grid-template-columns: 1fr; } .rk-pod { flex-direction: row; text-align: left; gap: 12px; padding: 10px 14px; } }

/* ---------- Fidelización compacta y ventana de seguimiento ---------- */
.fid-tabla { display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.fid-f { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) 110px auto; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.fid-f:last-child { border-bottom: 0; }
.fid-f:hover { background: var(--cream); }
.fid-f .quien { display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit; color: inherit; }
.fid-f .quien > span:not(.mv-av) { min-width: 0; display: flex; flex-direction: column; }
.fid-f .quien b { color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fid-f .quien .mas, .fid-f .fid-lote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--muted); }
.fid-f .fid-lote b { display: block; color: var(--text); font-weight: 600; }
.fid-f .fid-ico { display: flex; gap: 6px; }
.fid-f .btn-ico { width: 34px; height: 34px; }
.fid-f .btn-ico svg { width: 17px; height: 17px; }
@media (max-width: 760px) { .fid-f { grid-template-columns: 1fr auto; } .fid-f .fid-lote, .fid-f .est { display: none; } }
.fid-ven .fid-ven-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.fid-ven .fid-ven-cab h3 { margin: 0; }
.fid-msg { margin: 14px 0 4px; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--cream); }
.fid-msg textarea { width: 100%; margin-top: 6px; }
.fid-msg .fid-envio { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fid-msg .mas.pie { margin-top: 8px; font-size: 12px; }
a.btn.apagado, .btn.apagado { opacity: .45; cursor: not-allowed; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mv-av .ico svg { width: 55%; height: 55%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mv-av .ico { display: flex; }
.fid-ven .fid-det { padding: 8px 0 4px; border-top: 0; background: none; }
.fid-ven .fid-ven-cab { padding: 6px 0 10px; }

/* ============ Inicio (tablero), Informe explicado y Plazos (dos canchas) ============ */
.kpis.k4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .kpis.k4 { grid-template-columns: repeat(4, 1fr); } }
.kpi b .delta { font-family: var(--font-body); font-size: 13px; font-weight: 800; margin-left: 8px; vertical-align: 4px; }
.kpi b .delta.sube { color: var(--ok); }
.kpi b .delta.baja { color: var(--bad); }
.leyenda-lotes { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.leg-lote { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; font: inherit; color: var(--ink); min-height: 44px; }
.leg-lote:hover { background: var(--cream); }
.leg-lote i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.leg-lote b { font-family: var(--font-title); font-size: 18px; color: var(--tx); }
.leg-lote .mas { min-width: 38px; text-align: right; }
.resumen-expl { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.expl { margin-bottom: 14px; }
.expl h3 { margin-bottom: 4px; }
.lectura { margin: 2px 0 12px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.lectura b { color: var(--tx); }
.hoja .lectura { font-size: 12.5px; }
.cancha-cab { display: flex; gap: 16px; align-items: center; margin-bottom: 6px; }
.anillo { width: 96px; height: 96px; flex: none; }
.cancha-t { display: block; font-family: var(--font-title); font-size: 21px; color: var(--tx); }
.cancha-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.cancha-sub { margin: 16px 0 2px; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.plazo-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 11px 2px; cursor: pointer; font: inherit; color: inherit; min-height: 52px; }
.plazo-fila:hover { background: var(--cream); }
.plazo-fila:last-of-type { border-bottom: 0; }
.pf-txt b { display: block; color: var(--tx); }
.pf-txt span { font-size: 13px; color: var(--muted); }
.aviso-pro { display: flex; gap: 12px; align-items: center; background: var(--warn-bg); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; }
.aviso-pro .ico { font-size: 22px; }
.aviso-pro .grow { flex: 1; min-width: 0; }
.aviso-pro .mas { display: block; }
@media (max-width: 599px) { .cancha-cab { flex-direction: column; align-items: flex-start; } .aviso-pro { flex-wrap: wrap; } }
@media (min-width: 820px) { .dos-cols.estira { align-items: stretch; } }

/* ============ Fidelización: ventana de seguimiento (ancha, sin scroll) ============ */
dialog.fid-ven { width: min(96vw, 960px); max-width: 960px; padding: 0; overflow: hidden; max-height: 96dvh; }
dialog.fid-ven > form { display: flex; flex-direction: column; max-height: 96dvh; }
.fv-cab { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; }
.fv-cab .mv-av { flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
.fv-id { flex: 1; min-width: 0; }
.fv-id h3 { margin: 0; color: #fff; font-size: 21px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, .88); }
.fv-sub .punto { opacity: .6; }
.fv-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.fv-x:hover { background: rgba(255, 255, 255, .28); }
.fv-cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 22px; padding: 14px 20px 4px; overflow: auto; }
.fv-col { min-width: 0; }
.fv-bloque { margin-bottom: 14px; }
.fv-bloque h4 { margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fv-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.fv-datos .kv { display: block; border: 0; padding: 0; }
.fv-datos .kv span { display: block; font-size: 11.5px; }
.fv-datos .kv b { font-size: 15px; color: var(--tx); }
.fv-mas { margin-top: 10px; }
.fv-col .fid-compra { padding: 9px 12px; }
.fv-col .gestiona { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.fv-bloque textarea { width: 100%; resize: none; font-size: 14.5px; line-height: 1.4; }
.fv-barra { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.fv-ib { position: relative; width: 46px; height: 46px; flex: none; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surf); color: var(--tx); display: inline-grid; place-items: center; cursor: pointer; text-decoration: none; }
.fv-ib svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fv-ib:hover { border-color: var(--navy); background: var(--cream); }
.fv-ib.wa { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.fv-ib.wa:hover { background: #178045; border-color: #178045; }
.fv-ib.apagado { opacity: .4; cursor: not-allowed; }
.fv-sep { width: 1.5px; height: 28px; background: var(--line); margin: 0 2px; }
.fv-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.fv-badge[hidden] { display: none; }
.fv-aviso { margin: 8px 0 0; font-size: 12.5px; }
.fv-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fv-r { border: 1.5px solid var(--line); background: var(--surf); color: var(--ink); border-radius: 12px; padding: 9px 6px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 44px; }
.fv-r:disabled { cursor: default; opacity: .7; }
.fv-r:not(:disabled):hover { border-color: var(--navy); }
.fv-r.on { border-width: 2px; box-shadow: 0 0 0 3px rgba(0, 6, 82, .08); }
.fv-r.pendiente.on { background: var(--warn-bg); border-color: var(--res); color: var(--res-txt); }
.fv-r.califica.on { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.fv-r.f-consulta.on { background: #e1e8ff; border-color: #3b5bdb; color: #2a3f9e; }
.fv-r.f-volver.on { background: #ffe9d6; border-color: #e8590c; color: #a23f06; }
.fv-r.bloqueado.on { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.fv-r.f-invalido.on { background: #ecebe7; border-color: #6b6f86; color: #3c4058; }
.chip.f-consulta { background: #e1e8ff; color: #2a3f9e; }
.chip.f-volver { background: #ffe9d6; color: #a23f06; }
.chip.f-invalido { background: #ecebe7; color: #3c4058; }
.fv-cab .chip { font-size: 12px; }
dialog.fid-ven .msg { margin: 0 20px; }
dialog.fid-ven .pie { margin: 0; padding: 10px 20px 14px; border-top: 1px solid var(--line); background: var(--surf); }
@media (max-width: 760px) {
  dialog.fid-ven { width: 100vw; max-width: 100vw; }
  .fv-cuerpo { grid-template-columns: 1fr; }
  .fv-res { grid-template-columns: repeat(2, 1fr); }
}
/* Ventanitas encima (más detalles, observación, historial) */
dialog.fid-mini { width: min(92vw, 440px); }
.fid-frases { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.frase { border: 1.5px solid var(--line); background: var(--cream); color: var(--tx); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 38px; }
.frase:hover { border-color: var(--navy); background: var(--surf); }
.fid-mini textarea { width: 100%; resize: none; }
.fid-cuenta { text-align: right; margin-top: 2px; }
.fid-hist { max-height: 56vh; overflow: auto; }
.fid-nota-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fid-nota.res { background: var(--cream); padding: 7px 12px; }
.fid-mini .kvs .kv { border-bottom: 1px solid var(--line); }
.chip.obs { background: #e8ebfa; color: var(--tx); }
.fid-hist { padding: 2px 6px 2px 2px; box-sizing: border-box; }
.fid-hist .fid-nota { min-width: 0; box-sizing: border-box; }
.card-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card .kpis.k4 { margin-top: 10px; }

/* ============ Cédula con la cámara (Etapa 2) ============ */
dialog.cam { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; background: #070a24; color: #fff; overflow: hidden; }
dialog.cam[open] { display: flex; flex-direction: column; }
dialog.cam::backdrop { background: rgba(0, 0, 0, .8); }
@media (min-width: 900px) { dialog.cam { width: min(920px, 96vw); height: min(780px, 94dvh); margin: auto; border-radius: 20px; } }
.cam-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255, 255, 255, .06); }
.cam-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cam-t { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-sub { font-size: 13px; color: rgba(255, 255, 255, .72); }
.cam-x { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.cam-escena { position: relative; flex: 1; min-height: 0; background: #000; overflow: hidden; }
.cam-video, .cam-previa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-previa { object-fit: contain; background: #000; }
.cam-video[hidden], .cam-previa[hidden], .cam-marco[hidden], .cam-guia[hidden], .cam-aviso[hidden] { display: none; }
.cam-marco { position: absolute; border-radius: 16px; box-shadow: 0 0 0 100vmax rgba(0, 0, 10, .55); border: 2px solid rgba(255, 255, 255, .55); pointer-events: none; }
.cam-marco i { position: absolute; width: 26px; height: 26px; border: 4px solid var(--coral); }
.cam-marco .c1 { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; }
.cam-marco .c2 { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-top-right-radius: 16px; }
.cam-marco .c3 { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-bottom-left-radius: 16px; }
.cam-marco .c4 { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; }
.cam-guia { position: absolute; left: 16px; right: 16px; margin: 0; text-align: center; font-size: 14.5px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.cam-aviso { position: absolute; left: 16px; right: 16px; top: 18px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 241, 204, .96); color: #5a3d00; font-size: 14px; z-index: 2; }
.cam-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .06); }
.cam-esp { flex: 1 1 0; min-width: 0; }
.cam-sec { flex: 1 1 0; min-width: 0; min-height: 48px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; font: inherit; font-weight: 700; padding: 0 12px; cursor: pointer; }
.cam-sec.fuerte { background: var(--coral); border-color: var(--coral); flex: 2 1 0; }
.cam-ok { flex: 1 1 0; min-width: 0; min-height: 48px; border-radius: 14px; border: 0; background: var(--coral); color: #fff; font: inherit; font-weight: 800; padding: 0 12px; cursor: pointer; }
.cam-disp { flex: none; width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 4px; cursor: pointer; }
.cam-disp span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.cam-disp:active span { background: var(--coral); }

/* Bloque de cédulas dentro de Documentos */
.cedulas { display: grid; gap: 10px; margin: 4px 0 12px; }
.ced-fila { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surf); }
.ced-fila.corregir { background: #fff6f3; border-color: #f2c4b8; }
.ced-quien { display: flex; flex-direction: column; gap: 4px; min-width: 190px; flex: 1; }
.ced-lados { display: flex; gap: 6px; flex-wrap: wrap; }
.ced-acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ced-ok { color: var(--ok); font-weight: 700; }

/* Acuerdo de seña (Etapa 3) */
.acuerdo-card { border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--surf); display: grid; gap: 8px; }
.acuerdo-card.vigente { border-color: #9ad3b5; background: #f2fbf6; }
.acuerdo-num { font-family: var(--font-title); font-size: 24px; color: var(--tx); letter-spacing: .02em; }
.acuerdo-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.acuerdo-lista { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
.aviso-prov { font-size: 12.5px; color: #7a5600; background: var(--warn-bg); border-radius: 10px; padding: 8px 10px; }
.bloqueado-aviso { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: #eef1ff; border: 1.5px solid #c9d2ff; color: var(--tx); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.form-venta.bloqueado { opacity: .72; }
.form-venta.bloqueado .bloqueado-aviso { opacity: 1; }
.bloqueado-aviso > div { flex: 1 1 200px; }
.bloqueado-aviso .btn { flex: none; white-space: nowrap; }
.acu-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acuerdo-hist summary { cursor: pointer; font-size: 13.5px; color: var(--muted); }

/* Panel de lotes: primera vista con una tarjeta por loteamiento */
.fr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 8px; }
@media (min-width: 640px) { .fr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fr-card { text-align: left; font: inherit; color: var(--ink); background: var(--surf); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: transform .12s, border-color .12s; }
.fr-card:hover { border-color: var(--navy); transform: translateY(-1px); }
.fr-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.fr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fr-top h3 { margin: 0 0 2px; font-size: 19px; color: var(--tx); }
.fr-ir { font-size: 28px; line-height: 1; color: var(--coral); }
.fr-libres { display: flex; align-items: baseline; gap: 8px; }
.fr-libres b { font-family: var(--font-title); font-size: 38px; line-height: 1; color: var(--tx); }
.fr-libres span { color: var(--muted); font-weight: 600; }
.fr-barra { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #eceae4; gap: 2px; }
.fr-barra i { display: block; height: 100%; }
.fr-barra i.ok, .fr-nums i.ok { background: var(--st-ok); }
.fr-barra i.res, .fr-nums i.res { background: var(--st-res); }
.fr-barra i.ven, .fr-nums i.ven { background: var(--st-ven); }
.fr-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.fr-nums span { display: inline-flex; align-items: center; gap: 6px; }
.fr-nums i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.fr-mias { font-size: 13px; font-weight: 700; color: var(--res-txt); background: var(--warn-bg); border-radius: 10px; padding: 5px 10px; align-self: flex-start; }
.fr-actual { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-actual b { font-size: 17px; color: var(--tx); }
.mn-int { font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--tx); background: #dfe4ff; border-radius: 8px; padding: 2px 7px; align-self: flex-start; margin: 2px 0 4px; }

/* Configuración: acceso a fracciones y manzanas */
.ac-grupo { display: grid; gap: 10px; margin-top: 10px; }
.ac-vend { display: grid; gap: 10px; }
.ac-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.ac-quien { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1 1 200px; min-width: 0; }
.ac-res { flex: 2 1 220px; font-size: 14px; color: var(--muted); }
.ac-res.alerta { color: var(--bad); font-weight: 700; }
.ac-proms { display: grid; gap: 6px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ac-prom { padding-left: 10px; border-left: 3px solid var(--line); }
.ac-lista { display: grid; gap: 8px; margin: 10px 0; }
.ac-lista.apagada { opacity: .5; }
.ac-todas { font-weight: 700; margin: 10px 0 4px; }
.ac-mzs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .ac-mzs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ac-mzs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ac-mz { font: inherit; text-align: left; border: 1.5px solid var(--line); background: var(--surf); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; color: var(--ink); }
.ac-mz b { color: var(--tx); font-size: 16px; }
.ac-mz span { font-size: 12.5px; color: var(--muted); }
.ac-mz i { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; color: transparent; }
.ac-mz.on { background: #eef1ff; border-color: var(--navy); }
.ac-mz.on i { color: var(--tx); }
.selrow-uno { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--tx); max-width: 420px; }

/* ======================================================================
   DISEÑO DEL VENDEDOR · "Isla" con rombo · paleta Índigo (claro) y azul noche (oscuro)
   Solo se aplica con body.vend. Administración, Gerencia y Soporte conservan su diseño.
   ====================================================================== */
body.vend {
  --tx: #111D2E; --ink: #111D2E; --muted: #5F6D86; --line: #D8E2EF; --cream: #E9F0F9; --surf: #ffffff;
  --navbg: #142236; --navy-2: #213450; --navy: #111D2E; --on-st: #0C1626;
  --st-ok: #45B97C; --st-res: #F5B942; --st-ven: #E0505A;
  --ok: #247F52; --ok-bg: #DDF3E8; --bad: #B3262F; --bad-bg: #FDE3E4; --sold: #B3262F; --sold-bg: #FDE3E4;
  --shadow: 0 6px 18px rgba(24, 32, 50, .13);
  background: linear-gradient(180deg, #D5E0EE 0, #E6EEF7 340px, #F6F9FD 760px) fixed no-repeat; background-color: #E6EEF7;
  color-scheme: light;
}
body.vend main { padding-bottom: 128px; max-width: 980px; }
body.vend .card, body.vend .mz, body.vend .venta-card, body.vend .lote { border: 1px solid rgba(24, 32, 50, .08); }
body.vend .card { border-radius: 22px; }
body.vend .resumen .v b { color: #C0353F; }
body.vend .resumen .d b { color: #247F52; }

/* ---- Cabecera A: fija, fondo sólido, con punta hacia abajo ---- */
html, body.vend { scrollbar-width: none; } html::-webkit-scrollbar, body.vend::-webkit-scrollbar { display: none; }
body.vend .vend-hdw { position: sticky; top: 0; z-index: 40; filter: drop-shadow(0 8px 10px rgba(24, 32, 50, .25)); }
body.vend .topbar.vend-hd { position: relative; height: 96px; max-width: none; margin: 0; border: 0; gap: 8px; align-items: center;
  padding: 12px max(14px, calc((100% - 980px) / 2 + 14px)) 30px;
  background: linear-gradient(135deg, #142236, #213450); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 60% calc(100% - 16px), 50% 100%, 40% calc(100% - 16px), 0 calc(100% - 16px)); }
body.vend .vend-hd .iso { height: 34px; width: auto; flex: none; }
body.vend .vend-hd .iso-c { display: none; } body.vend .vend-hd .iso-b { display: block; }
.vend-hd .hola { flex: 1; line-height: 1.15; min-width: 0; }
.vend-hd .hola small { display: block; font-size: 12px; color: rgba(255, 255, 255, .72); font-weight: 600; }
.vend-hd .hola b { font-size: 21px; font-weight: 900; letter-spacing: -.3px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
body.vend .vend-hd .vivo { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; padding: 6px 11px; font-weight: 700; color: #fff; box-shadow: none; white-space: nowrap; flex: none; }
body.vend .vend-hd .vivo.on i { background: #22D3EE; box-shadow: 0 0 0 0 rgba(34, 211, 238, .6); }
body.vend .vend-hd .tag-demo { flex: none; }
body.vend .vend-hd .salir { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); color: #fff; width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; box-shadow: none; flex: none; }
body.vend .vend-hd .salir span:not(.ico) { display: none; }
body.vend .vend-hd .salir:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
@media (max-width: 420px) { body.vend .vend-hd .vivo span { display: none; } body.vend .vend-hd .vivo { padding: 8px; } }
body.vend .ticker { background: var(--surf); color: var(--tx); border: 1px solid var(--line); border-radius: 999px; margin: 10px 16px 0; padding: 8px 14px; box-shadow: var(--shadow); max-width: 948px; }
@media (min-width: 1012px) { body.vend .ticker { margin-left: auto; margin-right: auto; } }
body.vend .ticker .pulse { background: #22D3EE; }

/* ---- Menú flotante ---- */
body.vend .nav { left: 50%; right: auto; transform: translateX(-50%); width: min(calc(100% - 20px), 440px); bottom: calc(14px + env(safe-area-inset-bottom)); height: 64px; padding: 0 7px; border-radius: 32px;
  background: linear-gradient(135deg, #142236, #213450); box-shadow: 0 14px 30px rgba(24, 32, 50, .42); display: flex; align-items: center; justify-content: flex-start; }
body.vend .nav .g { flex: 1; display: flex; justify-content: space-around; align-items: center; }
body.vend .nav .hueco { flex: none; width: 62px; }
body.vend .nav button { flex: none; max-width: none; min-width: 40px; height: 46px; border-radius: 23px; flex-direction: row; justify-content: center; gap: 5px; padding: 0 10px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .76); }
body.vend .nav button .l-sm { display: none; }
body.vend .nav button[aria-current="page"] { background: rgba(34, 211, 238, .26); color: #fff; }
body.vend .nav button[aria-current="page"] .l-sm { display: inline; }
body.vend .nav button[aria-current="page"]::before { display: none; }
body.vend .nav .rombo { position: absolute; left: 50%; top: -22px; width: 46px; height: 46px; margin-left: -23px; padding: 0; min-width: 0; border-radius: 10px; background: var(--coral); color: #fff; transform: rotate(45deg); box-shadow: 0 8px 20px rgba(255, 102, 77, .5); display: grid; place-items: center; transition: transform .15s; }
body.vend .nav .rombo[aria-current] { background: var(--coral); }
body.vend .nav .rombo:hover { transform: rotate(45deg) scale(1.06); }
body.vend .nav .rombo:active { transform: rotate(45deg) scale(.96); }
body.vend .nav .rombo .ico { transform: rotate(-45deg); display: flex; }
body.vend .nav .rombo svg { width: 23px; height: 23px; stroke-width: 2.1; }
body.vend .nav .rlab { position: absolute; left: 50%; bottom: 7px; width: 80px; margin-left: -40px; text-align: center; font-size: 10px; font-weight: 800; color: var(--coral); pointer-events: none; letter-spacing: .02em; }
body.vend .nav .punto { top: 3px; }
body.vend :is(#pn, .pk-lotes) .tray { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---- Ventana "Pedir calificación" ---- */
dialog.sheet.pedir { padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); }
.pedir-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pedir-cab h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; letter-spacing: -.4px; margin: 0; }
.pedir-cab .rmb { display: inline-block; width: 12px; height: 12px; background: var(--coral); transform: rotate(45deg); border-radius: 3px; }
.pedir-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--cream); color: var(--tx); font-size: 22px; line-height: 1; cursor: pointer; }
dialog.sheet.pedir > .mas { margin: 4px 0 8px; }
dialog.sheet.pedir form .btn.block { height: 50px; border-radius: 999px; font-size: 15px; }
body.vend dialog { border-radius: 24px; }
body.vend dialog.sheet { border-radius: 30px 30px 0 0; }
@media (min-width: 700px) { body.vend dialog.sheet { border-radius: 24px; } }
body.vend .btn { border-radius: 999px; }
body.vend .btn:not(.ghost):not(.ok):not(.danger):not(.navy) { background: #16348A; color: #fff; }
body.vend .btn:not(.ghost):not(.ok):not(.danger):not(.navy):hover { background: #097A96; }
body.vend .btn.small { border-radius: 999px; }
body.vend input, body.vend select, body.vend textarea { border-radius: 14px; background-color: var(--cream); border-color: transparent; }
body.vend input:focus, body.vend select:focus, body.vend textarea:focus { background-color: var(--surf); border-color: #16348A; outline-color: rgba(14, 165, 196, .3); }
body.vend .seg-doc button { border-radius: 999px; }

/* ---- Apariencia (Cuenta) ---- */
.ap-opc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.ap-opc button { border: 1.5px solid var(--line); background: var(--surf); border-radius: 16px; padding: 10px 6px; font: inherit; font-weight: 700; font-size: 13px; color: var(--tx); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ap-opc button[aria-pressed="true"] { border-color: #16348A; box-shadow: 0 0 0 1px #16348A inset; }
.ap-opc .mu { display: block; width: 100%; height: 34px; border-radius: 9px; border: 1px solid rgba(0, 0, 0, .1); }
.ap-opc .mu.claro { background: linear-gradient(180deg, #D5E0EE, #F6F9FD); }
.ap-opc .mu.oscuro { background: linear-gradient(180deg, #060D17, #0D1A2E); }
.ap-opc .mu.auto { background: linear-gradient(90deg, #E6E9FF 50%, #07123A 50%); }

/* ======================== MODO OSCURO (azul tirando a negro) ======================== */
body.vend.oscuro {
  --tx: #E6F0FF; --ink: #E6F0FF; --muted: #93A6C6; --line: rgba(34, 211, 238, .2); --cream: #091424; --surf: #102037;
  --navbg: #102038; --navy-2: #152A49; --navy: #22D3EE; --on-st: #0C1626; --white: #ffffff;
  --ok: #7FDDB0; --ok-bg: rgba(69, 185, 124, .18); --warn: #F5D898; --warn-bg: rgba(245, 185, 66, .16); --res-txt: #F5D898; --res: #F5B942;
  --bad: #F2A3B0; --bad-bg: rgba(217, 128, 143, .2); --sold: #F2A3B0; --sold-bg: rgba(217, 128, 143, .2);
  --shadow: 0 0 0 1px rgba(34, 211, 238, .10);
  background: linear-gradient(180deg, #040910 0, #08111F 360px, #0D1A2E 100%) fixed no-repeat; background-color: #060D17;
  color-scheme: dark; color: var(--ink);
}
body.vend.oscuro .card, body.vend.oscuro .mz, body.vend.oscuro .venta-card, body.vend.oscuro .lote { border-color: rgba(34, 211, 238, .14); }
body.vend.oscuro .resumen .d b { color: #7FDDB0; } body.vend.oscuro .resumen .v b { color: #F0A5B3; }
body.vend.oscuro .vend-hdw { filter: drop-shadow(1.5px 0 0 rgba(34, 211, 238, .5)) drop-shadow(-1.5px 0 0 rgba(34, 211, 238, .5)) drop-shadow(0 1.5px 0 rgba(34, 211, 238, .5)) drop-shadow(0 -1.5px 0 rgba(34, 211, 238, .5)); }
body.vend.oscuro .topbar.vend-hd { background: #040910; color: var(--tx); }
body.vend.oscuro .vend-hd .hola small { color: var(--muted); } body.vend.oscuro .vend-hd .hola b { color: var(--tx); }
body.vend.oscuro .vend-hd :is(.vivo, .salir) { background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .32); color: var(--tx); }
body.vend.oscuro .vend-hd .salir:hover { background: #E2765F; border-color: #E2765F; }
body.vend.oscuro .ticker .pulse { background: #22D3EE; }
body.vend.oscuro .nav { background: rgba(20, 32, 52, .96); box-shadow: 0 14px 30px rgba(0, 0, 0, .5); border: 1px solid rgba(34, 211, 238, .22); backdrop-filter: blur(14px); }
body.vend.oscuro .nav button { color: rgba(214, 226, 255, .62); }
body.vend.oscuro .nav button[aria-current="page"] { background: rgba(34, 211, 238, .22); color: #EAF1FF; }
body.vend.oscuro .nav .rombo { background: #FF664D; box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
body.vend.oscuro .nav .rlab { color: #FF8A73; }
body.vend.oscuro .btn:not(.ghost):not(.ok):not(.danger):not(.navy) { background: #0E9DBF; }
body.vend.oscuro .btn:not(.ghost):not(.ok):not(.danger):not(.navy):hover { background: #0B8FAE; }
body.vend.oscuro .btn.ghost { color: var(--tx); border-color: var(--line); } body.vend.oscuro .btn.ghost:hover { background: var(--cream); }
body.vend.oscuro dialog { background: linear-gradient(180deg, #101F35, #091424); color: var(--ink); border: 1px solid rgba(34, 211, 238, .22); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
body.vend.oscuro dialog::backdrop { background: rgba(2, 6, 28, .7); }
body.vend.oscuro input, body.vend.oscuro select, body.vend.oscuro textarea { background-color: rgba(34, 211, 238, .09); color: var(--tx); border-color: rgba(34, 211, 238, .16); }
body.vend.oscuro input:focus, body.vend.oscuro select:focus, body.vend.oscuro textarea:focus { background-color: rgba(34, 211, 238, .14); border-color: #22D3EE; outline-color: rgba(34, 211, 238, .35); }
body.vend.oscuro input::placeholder, body.vend.oscuro textarea::placeholder { color: rgba(190, 205, 245, .45); }
body.vend.oscuro select option { background: #102037; color: #E6F0FF; }
body.vend.oscuro .pedir-x { background: rgba(34, 211, 238, .12); color: var(--tx); }
body.vend.oscuro .pedir-cab .rmb { background: #FF664D; }
body.vend.oscuro .seg-doc button[aria-pressed="true"], body.vend.oscuro .tabbtn[aria-pressed="true"], body.vend.oscuro .chip-fr[aria-selected="true"] { color: #fff; }
body.vend.oscuro .ap-opc button[aria-pressed="true"] { border-color: #22D3EE; box-shadow: 0 0 0 1px #22D3EE inset; }
body.vend.oscuro .falta, body.vend.oscuro .doc-fila.corregir, body.vend.oscuro .ced-fila.corregir, body.vend.oscuro .venta-card.alerta, body.vend.oscuro .paso.cerrado { background: rgba(217, 128, 143, .13); border-color: rgba(217, 128, 143, .4); color: #F4C2CB; }
body.vend.oscuro .paso.alerta, body.vend.oscuro .pl-lote.reservado { background: rgba(245, 185, 66, .11); }
body.vend.oscuro .opt.on, body.vend.oscuro .ac-mz.on { background: rgba(34, 211, 238, .14); }
body.vend.oscuro .promo-tag { background: rgba(222, 111, 91, .16); color: #F2B4A8; }
body.vend.oscuro .insignia { background: rgba(245, 185, 66, .14); color: #F5D898; border-color: rgba(245, 185, 66, .4); }
body.vend.oscuro .toast { background: #162C4C; border: 1px solid rgba(34, 211, 238, .3); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos > div { min-width: 0; }

/* Modo oscuro: pastillas y textos con colores fijos que había que adaptar */
body.vend.oscuro .chip.vb-borrador { background: rgba(34, 211, 238, .2); color: #D3E2FF; }
body.vend.oscuro :is(.chip.vb-corregir, .chip.dc-a_corregir, .chip.regularizar, .chip.f-volver) { background: rgba(222, 111, 91, .22); color: #F6BBAE; }
body.vend.oscuro .chip.vb-pendiente_entrega { background: rgba(80, 200, 200, .2); color: #A4EAEA; }
body.vend.oscuro :is(.chip.vb-desistida, .chip.bloqueado, .chip.f-invalido, .tile.bloqueado) { background: rgba(160, 172, 205, .18); color: var(--muted); border-color: rgba(160, 172, 205, .35); }
body.vend.oscuro :is(.chip.f-consulta) { background: rgba(120, 150, 255, .22); color: #C4D4FF; }
body.vend.oscuro .chip.pendiente { background: rgba(245, 185, 66, .18); color: #F5D898; }
body.vend.oscuro .aviso.bad { color: #F6C0C9; } body.vend.oscuro .aviso.ok { color: #A6EBC8; }
body.vend.oscuro :is(.doc-info .obs, .nombre-regularizar) { color: #F6BBAE !important; }
body.vend.oscuro .card > .s { color: var(--muted); }
body.vend.oscuro .card > .t { color: var(--tx); }
body.vend.oscuro .aviso-prov { color: #F5D898; }
body.vend.oscuro :is(#pn, .pk-lotes) :is(.selrow label, .otras-t, .mnf, .exh small) { color: var(--muted); }
body.vend.oscuro :is(#pn, .pk-lotes) :is(.cn, .lc span, .ley-b) { color: #C9D6F5; }
body.vend.oscuro :is(#pn, .pk-lotes, #app, main) .seg5 button { color: #C9D6F5; }
body.vend.oscuro :is(#pn, .pk-lotes, #app, main) .seg5 button[aria-pressed="true"] { color: #fff; }
body.vend.oscuro :is(#pn, .pk-lotes) .pl-prox { color: #F5D898; }
body.vend.oscuro :is(#pn, .pk-lotes) :is(.mn, .lc, .exh .cl, .lc .fi) { border-color: rgba(34, 211, 238, .24); }
body.vend.oscuro :is(#pn, .pk-lotes) .seg5, body.vend.oscuro .seg5 { background: rgba(34, 211, 238, .1); }
body.vend.oscuro :is(.plazo.pausa, .plazo-mini.pausa, .chip.cancelada, .aviso.muted) { background: rgba(160, 172, 205, .16); color: var(--muted); }
body.vend.oscuro .plazo.por-vencer, body.vend.oscuro .plazo-mini.por-vencer { color: #F5D898; }
body.vend.oscuro .reserva-box { background: rgba(245, 185, 66, .13); }

/* ---- Buscador rápido de manzanas (vendedor) ---- */
:is(#pn, .pk-lotes) .selrow.uno { grid-template-columns: 1fr; margin-bottom: 8px; }
.mz-bus { display: flex; gap: 8px; margin-bottom: 10px; }
.mz-in { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--surf); border: 1.5px solid var(--line); border-radius: 999px; padding: 0 14px; height: 48px; }
.mz-in:focus-within { border-color: #16348A; box-shadow: 0 0 0 3px rgba(14, 165, 196, .25); }
.mz-in input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; outline: 0 !important; box-shadow: none !important; height: 100%; padding: 0; font: inherit; font-weight: 700; font-size: 16px; color: var(--tx); border-radius: 0 !important; }
.mz-in .ico, .mz-todas .ico { display: flex; flex: none; }
.mz-in .ico svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; }
.mz-todas { flex: none; height: 48px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surf); color: var(--tx); font: inherit; font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.mz-todas svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mz-todas:hover { background: var(--cream); }
body.vend.oscuro .mz-in:focus-within { border-color: #22D3EE; box-shadow: 0 0 0 3px rgba(34, 211, 238, .25); }

.mz-bus { align-items: center; } .mz-in { margin: 0; }
@keyframes plv { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .6); } 70% { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); } }
body.vend .ticker .pulse, body.vend .vend-hd .vivo.on i { animation-name: plv; }

/* ======================================================================
   GAMA GRAFITO — login y área administrativa (Administración, Gerencia, Soporte)
   Login oscuro (opción 1, solo el logo). Menú: isla flotante arriba (computadora) e isla inferior con hoja "Más" (celular).
   ====================================================================== */
.login { background: linear-gradient(180deg, #040910 0, #08111F 45%, #111F34 100%); }
.login .fondo-lineas { opacity: .35; }
.login .forma.f1 { border-color: rgba(34, 211, 238, .22); }
.login .forma.f2 { border-color: rgba(34, 211, 238, .12); }
.login .forma.f3 { background: none; border: 1.5px solid rgba(34, 211, 238, .14); }
.login-marca { width: 200px; margin-bottom: 38px; }
.login-card { border-radius: 30px; background: rgba(20, 31, 51, .78); border: 1px solid rgba(34, 211, 238, .28); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.login-card label { color: #E6F0FF; font-weight: 700; }
.login-card input { border-radius: 999px; padding: 0 20px; background: rgba(34, 211, 238, .07); border: 1px solid rgba(34, 211, 238, .28); color: #E6F0FF; }
.login-card input::placeholder { color: rgba(190, 210, 235, .5); }
.login-card input:focus { outline: 2px solid #22D3EE; background: rgba(34, 211, 238, .12); }
.login-card input:-webkit-autofill { -webkit-text-fill-color: #E6F0FF; -webkit-box-shadow: 0 0 0 40px #0E213E inset; }
.login-card .btn { background: #22D3EE; color: #05202A; font-weight: 900; box-shadow: 0 10px 22px rgba(34, 211, 238, .28); }
.login-card .btn:hover { background: #4FE0F3; }
.login .campo-pass .ojo { color: #E6F0FF; }
.login-pie { color: rgba(190, 210, 235, .5); }

/* ---- Paleta del área administrativa ---- */
body.bo {
  --tx: #111D2E; --ink: #111D2E; --muted: #5F6D86; --line: #D8E2EF; --cream: #E9F0F9; --navbg: #142236; --navy: #142236; --navy-2: #213450; --on-st: #0C1626;
  --st-ok: #45B97C; --st-res: #F5B942; --st-ven: #E0505A; --shadow: 0 1px 2px rgba(24, 32, 50, .06), 0 6px 18px rgba(24, 32, 50, .07);
  background: linear-gradient(180deg, #D5E0EE 0, #E6EEF7 340px, #F6F9FD 760px) fixed no-repeat; background-color: #E6EEF7;
  scrollbar-width: none;
}
body.bo::-webkit-scrollbar { display: none; }
body.bo .ticker { background: var(--surf); color: var(--tx); border: 1px solid var(--line); border-radius: 999px; margin: 8px 16px 0; padding: 8px 14px; box-shadow: var(--shadow); }
body.bo .ticker .pulse { background: #22D3EE; }
body.bo .ticker b { color: #16348A; }
body.bo .btn:not(.ghost):not(.ok):not(.danger):not(.navy) { background: #16348A; color: #fff; }
body.bo .btn:not(.ghost):not(.ok):not(.danger):not(.navy):hover { background: #097A96; }

/* ---- Isla superior (computadora) ---- */
.xp-isla-wrap { display: none; }
.xp-movil { display: none; }
@media (min-width: 900px) {
  .xp-hd { position: sticky; top: 0; z-index: 700; padding: 14px 16px 6px; border-radius: 0 !important; background: transparent !important; }
  .xp-isla-wrap { display: flex; justify-content: center; }
  .xp-isla { display: flex; align-items: center; gap: 2px; height: 58px; padding: 0 10px 0 20px; border-radius: 999px; color: #fff; white-space: nowrap; max-width: 100%;
    background: linear-gradient(90deg, #142236, #213450); box-shadow: 0 14px 28px rgba(24, 32, 50, .32); }
  .xp-isla .xp-logo { height: 30px; width: auto; margin-right: 12px; flex: none; }
  .xp-isla .xp-nav { display: flex; gap: 2px; flex-wrap: nowrap; border: 0; padding: 0; }
  .xp-isla .xp-nb { height: 42px; min-height: 0; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .74); gap: 7px; }
  .xp-isla .xp-nb:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .xp-isla .xp-nb.on { background: rgba(34, 211, 238, .24); color: #fff; }
  .xp-isla .xp-nb.on::after { display: none; }
  .xp-isla .xp-nb .zp-bd { background: #E0505A; }
  .xp-sepv { width: 1px; height: 26px; background: rgba(255, 255, 255, .22); margin: 0 8px; flex: none; }
  .xp-isla .vivo { padding: 0 6px; margin-right: 2px; } .xp-isla .vivo > span { display: none; }
  .xp-isla .vivo.on i { background: #22D3EE; box-shadow: 0 0 0 0 rgba(34, 211, 238, .6); }
  .xp-isla .tag-demo { margin: 0 6px; }
  .xp-isla .xp-ib { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; margin-left: 2px; }
  .xp-isla .xp-ib:hover { background: rgba(255, 255, 255, .2); }
  .xp-isla .xp-ib.user { background: #22D3EE; color: #05202A; }
  .xp-isla .xp-ib .zp-bd { background: #E0505A; top: -4px; right: -4px; }
  .xp-isla .zp-av { background: transparent; color: #05202A; font-weight: 900; }
  .xp-isla .xp-menu { top: calc(100% + 12px); }
  .xp-isla .xp-drop { top: calc(100% + 12px); }
  .xp-isla .xp-busq { right: 0; left: auto; width: 320px; top: calc(100% + 12px); padding: 10px; }
  .xp-busq .zp-search { margin: 0 0 6px; width: auto; background: #E9F0F9; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 0 14px; min-height: 40px; }
  .xp-busq .zp-search input { color: var(--tx); font-size: 14px; }
  .xp-busq .zp-search input::placeholder { color: var(--muted); }
  body.bo main { padding-top: 14px; }
  body.bo .nav { display: none; }
}

/* ---- Celular: encabezado con punta + isla inferior + hoja "Más" ---- */
@media (max-width: 899.98px) {
  .xp-hd { display: block; position: sticky; top: 0; z-index: 700; padding: 0; background: transparent; }
  .xp-movil { display: block; filter: drop-shadow(0 8px 10px rgba(24, 32, 50, .25)); }
  .xp-movil-in { position: relative; height: 66px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #fff; background: linear-gradient(135deg, #142236, #213450); }
  .xp-movil-in::after { content: ''; position: absolute; left: 50%; bottom: -14px; margin-left: -34px; border-left: 34px solid transparent; border-right: 34px solid transparent; border-top: 14px solid #1C2D46; }
  .xp-movil .xp-logo { height: 32px; width: auto; flex: none; }
  .xp-movil .xp-tit { font-weight: 900; font-size: 17px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .xp-movil .xp-grow { flex: 1; }
  .xp-movil .tag-demo { margin: 0; flex: none; }
  .xp-movil .xp-ib { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .12); color: #fff; flex: none; }
  .xp-movil .xp-upd { display: none; }
  .xp-movil .xp-ib.user { background: #22D3EE; color: #05202A; border-color: #22D3EE; }
  .xp-movil .zp-av { background: transparent; color: #05202A; font-weight: 900; }
  .xp-movil .xp-ib .zp-bd { background: #E0505A; top: -5px; right: -5px; }
  .xp-movil .xp-pop { position: fixed; left: 10px; right: 10px; top: 74px; width: auto; min-width: 0; }
  .xp-movil .xp-busq { padding: 10px; }
  .xp-busq .zp-search { margin: 0 0 6px; width: auto; background: #E9F0F9; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 0 14px; min-height: 42px; display: flex; align-items: center; gap: 8px; }
  .xp-busq .zp-search input { color: var(--tx); font-size: 16px; background: transparent; border: 0; outline: 0; flex: 1; min-width: 0; }
  .xp-busq .zp-search .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; display: block; }
  .xp-busq .xp-lista button { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--ink); font-family: inherit; }
  .xp-busq .xp-lista .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
  .xp-busq .xp-lista .vacio { padding: 10px 12px; color: var(--muted); font-size: 13.5px; }
  .xp-ib .zp-bd { position: absolute; }
  body.bo main { padding-bottom: 120px; }
  body.bo .ticker { margin-top: 22px; }
  body.bo .nav { left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); width: auto; height: 64px; padding: 0 8px; border-radius: 32px; border: 0;
    background: linear-gradient(90deg, #142236, #213450); box-shadow: 0 14px 28px rgba(24, 32, 50, .4); display: flex; justify-content: space-around; align-items: center; }
  body.bo .nav button { flex: none; max-width: none; min-width: 44px; height: 46px; border-radius: 23px; flex-direction: row; justify-content: center; gap: 6px; padding: 0 9px; font-size: 12.5px; font-weight: 800; color: rgba(255, 255, 255, .72); }
  body.bo .nav button .l-sm { display: none; }
  body.bo .nav button[aria-current="page"] { background: rgba(34, 211, 238, .26); color: #fff; padding: 0 13px; }
  body.bo .nav button[aria-current="page"] .l-sm { display: inline; }
  body.bo .nav button[aria-current="page"]::before { display: none; }
  body.bo .nav .punto { top: 2px; left: auto; right: 0; background: #E0505A; }
  body.bo .nav button[aria-current="page"] .punto { right: -2px; }
}
.bo-vel { position: fixed; inset: 0; background: rgba(5, 8, 15, .55); z-index: 800; }
.bo-hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 810; background: #fff; border-radius: 30px 30px 0 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px rgba(0, 0, 0, .3); max-height: 82vh; overflow-y: auto; animation: hoja-sube .22s ease-out; }
@keyframes hoja-sube { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.bo-hoja .agarre { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.bo-hoja h4 { font-size: 18px; font-weight: 900; margin: 0 2px 12px; color: var(--tx); }
.bo-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bo-grilla .mt { position: relative; background: #E9F0F9; border: 2px solid transparent; border-radius: 18px; padding: 14px 6px 12px; min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 12px; font-weight: 800; line-height: 1.15; text-align: center; color: var(--tx); cursor: pointer; }
.bo-grilla .mt .ico svg { width: 24px; height: 24px; stroke: #213450; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
.bo-grilla .mt.on { border-color: #16348A; background: #DDF3F8; }
.bo-grilla .mt.mal { color: #B3262F; } .bo-grilla .mt.mal .ico svg { stroke: #B3262F; }
.bo-grilla .punto { position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; border-radius: 9px; background: #E0505A; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }
@media (max-width: 899.98px) {
  .xp-anc { position: relative; }
  .xp-ib { position: relative; display: grid; place-items: center; cursor: pointer; padding: 0; }
  .xp-ib .ico { display: flex; }
  .xp-ib .ico svg, .xp-drop .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
  .xp-upd.girando .ico { animation: giro .8s linear infinite; }
  .zp-av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: 11px; }
  .zp-bd { min-width: 19px; height: 19px; border-radius: 10px; color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
  .xp-pop { background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); padding: 8px; display: none; z-index: 900; }
  .xp-pop.open { display: block; }
  .xp-drop .hd { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
  .xp-drop .hd span { color: var(--muted); }
  .xp-drop .role { align-self: flex-start; margin-top: 4px; background: #142236; color: #fff !important; font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
  .xp-drop .it { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 11px 10px; border-radius: 10px; font-size: 13.5px; cursor: pointer; font-family: inherit; color: var(--ink); }
  .xp-drop .it b { color: var(--tx); } .xp-drop .it.mal b { color: var(--bad); }
  .xp-drop .out { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 12px 10px; border-radius: 10px; font-weight: 600; color: var(--bad); cursor: pointer; font-family: inherit; font-size: 14px; }
  .xp-drop .out.n { color: var(--ink); }
}

/* PIN de 4 números: puntitos sin ser campo de contraseña (el navegador no lo autocompleta). */
.pin-oculto { -webkit-text-security: disc; text-security: disc; letter-spacing: .25em; }

/* Lista de precios y planes elegible: la fila tocada queda marcada en oscuro; si se toca otra, cambia la selección. */
.planes-tabla tr.elegible { cursor: pointer; }
.planes-tabla tr.elegible:hover td { background: rgba(24, 32, 50, .06); }
.planes-tabla tr.elegible:focus-visible { outline: 2px solid var(--navbg); outline-offset: -2px; }
.planes-tabla tr.sel td, .planes-tabla tr.sel:hover td { background: var(--navbg); color: #fff; }
.planes-tabla tr.sel td s { color: rgba(255, 255, 255, .7); }
.precios .elegible { cursor: pointer; border-radius: 10px; padding: 6px 8px; border: 1.5px solid transparent; }
.precios .elegible.sel { background: var(--navbg); color: #fff; }
.precios .elegible.sel span { color: rgba(255, 255, 255, .75); }

/* Zona de acciones que no se pueden deshacer. */
.zona-peligro { margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--bad, #B3262F); }
.zona-peligro h3 { color: var(--bad, #B3262F); font-size: 15px; }

/* Menú ⋯ de las tarjetas de ventas y botón de cierre. */
.vc-wrap { position: relative; }
.vc-wrap > .venta-card { width: 100%; }
.vc-mas { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(24, 32, 50, .07); color: var(--tx, #111D2E); font-size: 22px; line-height: 1; font-weight: 800; cursor: pointer; }
.vc-mas:hover, .vc-mas:focus-visible { background: rgba(24, 32, 50, .16); }
.vc-wrap .vc-top { padding-right: 40px; }
.menu-acciones { display: grid; gap: 10px; margin: 10px 0 4px; }
.btn.danger-txt { color: var(--bad, #B3262F); border-color: var(--bad, #B3262F); }

/* ---- Reservas de lotes sin cliente ---- */
.seg-doc.tres button { font-size: 13px; padding: 6px 4px; line-height: 1.15; }
.lote-pedido { margin: 8px 0 4px; }
.lote-pedido select { width: 100%; }
.lote-pedido .mas { margin: 6px 0 0; }
.lote-elegido { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surf); }
.ficha-reserva { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---- Tarjetas que parpadean (Administración) y campanita del vendedor ---- */
/* coral = hay que atender; cian = el vendedor está trabajando ahora; ámbar fijo = pendiente de seguir el progreso */
@keyframes mv-parpadeo { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 99, 71, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 99, 71, .38); } }
@keyframes mv-parpadeo-fuerte { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 99, 71, 0); background-color: inherit; } 50% { box-shadow: 0 0 0 6px rgba(255, 99, 71, .6); } }
@keyframes mv-trabajando { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 190, 225, 0); } 50% { box-shadow: 0 0 0 4px rgba(0, 190, 225, .38); } }
.parpadea { animation: mv-parpadeo 1.6s ease-in-out infinite; outline: 2px solid rgba(255, 99, 71, .55); outline-offset: -2px; }
.parpadea.fuerte { animation: mv-parpadeo-fuerte 1s ease-in-out infinite; outline-color: var(--coral); }
.trabajando { animation: mv-trabajando 2.4s ease-in-out infinite; outline: 2px solid rgba(0, 190, 225, .5); outline-offset: -2px; }
.pend-progreso { outline: 2px solid rgba(224, 160, 40, .55); outline-offset: -2px; }
tr.parpadea, tr.trabajando, tr.pend-progreso { outline-offset: -2px; }
.chip.trabajando-chip { background: rgba(0, 190, 225, .16); color: #006a80; }
.chip.chip-bases { background: rgba(245, 185, 66, .22); color: #7a5300; }
body.oscuro .chip.chip-bases, body.vend.oscuro .chip.chip-bases { background: rgba(245, 185, 66, .18); color: #F5D898; }
.chip.pend-chip { background: rgba(224, 160, 40, .2); color: #7a5300; }
body.oscuro .chip.trabajando-chip, body.vend.oscuro .chip.trabajando-chip { color: #7fe3f5; }
body.oscuro .chip.pend-chip, body.vend.oscuro .chip.pend-chip { color: #f0c36a; }
@media (prefers-reduced-motion: reduce) { .parpadea, .parpadea.fuerte, .trabajando { animation: none; } .parpadea.fuerte { outline-width: 3px; } }

.vend-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .25); color: #fff; }
.vend-bell .ico { display: flex; }
.vend-bell svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vend-bell .bd { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.vend-bell .bd[hidden] { display: none; }
.avisos-lista { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.aviso-fila { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; border: 0; background: transparent; color: var(--tx); padding: 10px 6px; border-radius: 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.aviso-fila i { flex: 0 0 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: transparent; }
.aviso-fila.nuevo i { background: var(--coral); }
.aviso-fila.nuevo b { font-weight: 800; }
.aviso-fila b, .aviso-fila span, .aviso-fila small { display: block; }
.aviso-fila span { font-size: 14px; color: var(--muted); }
.aviso-fila small { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Acuerdo de seña: control previo */
.acu-chk { display: grid; gap: 8px; margin: 6px 0 10px; }
.acu-q { align-items: flex-start; font-size: 14px; line-height: 1.35; padding: 8px 10px; border: 1px solid var(--line, #d9dde3); border-radius: 10px; }
.acu-q input { margin-top: 3px; }
.acu-chk-tit { margin: 12px 0 2px; }

/* Contratos: bandeja del Director */
.ctr-tabs { display: flex; gap: 6px; margin: 4px 0 12px; flex-wrap: wrap; }
.ctr-tab { border: 1px solid var(--line); background: var(--surf); color: var(--tx); border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.ctr-tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.punto-chico { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.ctr-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.ctr-lista { padding: 0; }
.ctr-fila { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ctr-fila:last-child { border-bottom: 0; }
.ctr-fila.pend { background: color-mix(in srgb, var(--coral) 5%, transparent); }
.ctr-chk { padding-top: 3px; }
.ctr-dato { flex: 1 1 280px; min-width: 0; }
.ctr-dato .t { font-weight: 700; }
.ctr-dato .s { font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.ctr-acc { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip.ctr-pendiente_firma { background: #fff1d6; color: #8a5a00; }
.chip.ctr-firmado { background: #dff3e8; color: #17653f; }
.chip.ctr-devuelto { background: #fde2df; color: #9b2c22; }
@media (max-width: 640px) { .ctr-acc { width: 100%; } }

/* Firma electrónica del acuerdo (App Cliente) */
.firmas-bloque { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.firma-fila { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; list-style: none; margin-left: -18px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--tx); }
.firma-fila > div:last-child { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip.dc-rechazado { background: var(--bad-bg); color: var(--bad); }

/* Elección papel / firma electrónica (piloto) */
.chip-btn { border: 0; cursor: pointer; font: inherit; }
.chip-btn:hover { filter: brightness(.96); }
.modo-cards { display: grid; gap: 8px; margin: 6px 0 10px; }
.modo-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surf); cursor: pointer; }
.modo-card:has(input:checked) { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(232, 85, 61, .14); }
.modo-card input[type=radio] { flex: none; width: 22px; height: 22px; min-height: 0; padding: 0; margin: 2px 0 0; accent-color: var(--coral); }
.modo-txt { min-width: 0; flex: 1; }
.modo-txt { display: grid; gap: 2px; }
.modo-txt small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.chip-prueba { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #fff3d6; color: #7a5600; vertical-align: 1px; }
.piloto-lista { display: grid; gap: 6px; margin: 8px 0; }
.piloto-lista label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 12px; }
.piloto-res { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; font-size: 13.5px; color: var(--muted); }
.piloto-res b { color: var(--tx); font-size: 17px; margin-right: 4px; }
.modo-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.modo-tit .chip-prueba { margin-left: 4px; }

/* Escrituración */
.esc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.esc-k { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: grid; gap: 2px; box-shadow: var(--shadow); }
.esc-k b { font-size: 24px; color: var(--tx); line-height: 1.1; }
.esc-k span { font-size: 13px; color: var(--muted); }
.esc-k small { font-size: 11.5px; color: var(--muted); opacity: .85; }
.esc-tabla .fid-f { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.8fr) 150px auto; }
.esc-fecha { justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.esc-fecha.vencido .mas { color: var(--bad); font-weight: 700; }
.esc-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .esc-dos { grid-template-columns: 1fr; } .esc-tabla .fid-f { grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; } .esc-tabla .fid-f .fid-lote { display: block; } .esc-tabla .fid-f .est { display: block; } .esc-fecha { justify-content: flex-start; flex-wrap: wrap; } }
.esc-imp { margin-top: 10px; display: grid; gap: 8px; }
.esc-res li b { font-size: 16px; }
.esc-imp .msg ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.msg.warn { background: var(--warn-bg); color: #7a5600; border-radius: 10px; padding: 8px 10px; }

/* Escrituración: lotes del expediente editables */
.esc-lote { display: block; padding: 0; }
.esc-lote > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.esc-lote > summary::-webkit-details-marker { display: none; }
.esc-lote > summary b { display: block; }
.esc-lote > summary .chip { flex: none; }
.esc-lote[open] > summary { border-bottom: 1px solid var(--line); }
.esc-lote-form { padding: 10px 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.esc-lote-form .campo { margin: 0; min-width: 0; }
.esc-lote-form .msg, .esc-lote-form .btn { grid-column: 1 / -1; }
@media (max-width: 420px) { .esc-lote-form { grid-template-columns: 1fr; } }

/* ===== Áreas de gestión de clientes (Escrituración y Fidelización): panel y ventana de gestión ===== */
.gx-hdr { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; border-radius: 16px; padding: 14px 16px 14px; margin: 4px 0 12px; }
.gx-tit { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gx-tit h2 { margin: 0; color: #fff; font-size: 21px; }
.gx-tit .gx-cnt { color: rgba(255, 255, 255, .72); font-size: 13px; }
.gx-mas { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 14px; background: var(--cyan); color: var(--navy); border-radius: 12px; padding: 9px 16px; }
.gx-mas .pl { display: none; } .gx-mas .pl svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; display: block; }
.gx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gx-kpi { text-align: left; font: inherit; color: #fff; cursor: pointer; background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 10px 14px; }
.gx-kpi b { display: block; font-size: 26px; line-height: 1.1; color: #fff; }
.gx-kpi span { font-size: 13px; color: rgba(255, 255, 255, .78); }
.gx-kpi .cr { display: none; }
.gx-kpi.rojo { background: rgba(255, 102, 77, .2); border-color: rgba(255, 102, 77, .38); } .gx-kpi.rojo b { color: #ffa294; }
.gx-kpi.amar { background: rgba(241, 194, 79, .17); border-color: rgba(241, 194, 79, .34); } .gx-kpi.amar b { color: #f6cf6a; }
.gx-kpi[aria-pressed="true"] { outline: 2.5px solid var(--cyan); outline-offset: 1px; }
.gx-fil { display: flex; gap: 8px; margin-bottom: 4px; }
.gx-buscar { flex: 1 1 auto; min-width: 0; font: inherit; color: var(--tx); background: var(--surf); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.gx-sel { display: none; flex: 0 0 46%; min-width: 0; font: inherit; font-weight: 700; color: var(--tx); background: var(--surf); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; }
.gx-chips { margin-top: 8px; }
.gx-lista { margin-top: 4px; }
.gx-grp { margin-bottom: 14px; }
.gx-gh { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 2px 6px; }
.gx-gh .n { background: #eceef6; color: #4a4f73; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.gx-gh.cl { cursor: pointer; user-select: none; } .gx-gh.cl::after { content: '▸'; margin-left: auto; font-size: 14px; } .gx-gh.cl[aria-expanded="true"]::after { content: '▾'; }
.gx-f { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 1.5fr) 150px auto; gap: 12px; align-items: center; background: var(--surf); border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; }
.gx-f.g-hoy { border-left-color: #b3261e; } .gx-f.g-proximo { border-left-color: #e0a100; } .gx-f.g-nuevo { border-left-color: #2f6fed; } .gx-f.g-tramite { border-left-color: #17895c; } .gx-f.g-cerrado { border-left-color: #9aa0c4; }
.gx-f .quien { display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit; color: inherit; }
.gx-f .quien > span:not(.mv-av) { min-width: 0; display: flex; flex-direction: column; }
.gx-f .quien b { color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-f .quien .mas { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--muted); }
.gx-lo { min-width: 0; } .gx-lo b { display: block; font-size: 14px; color: var(--tx); } .gx-lo .mas { font-size: 12.5px; }
.gx-es { display: flex; flex-wrap: wrap; gap: 4px; }
.gx-pr { font-weight: 700; font-size: 13px; } .gx-pr.mut { color: var(--muted); font-weight: 500; } .gx-pr.v { color: var(--bad); } .gx-pr.h { color: var(--warn); }
.gx-acc { display: flex; gap: 5px; justify-self: end; }
.gx-ib { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surf); color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; padding: 0; text-decoration: none; font: inherit; }
.gx-ib .ico, .gx-ib svg { width: 17px; height: 17px; } .gx-ib svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gx-ib.ll { color: #1d4f91; background: #e6f1fb; border-color: transparent; } .gx-ib.wa { color: #0f7a3c; background: #e1f6ea; border-color: transparent; } .gx-ib.em { color: #4a3fae; background: #ece9fb; border-color: transparent; }
.gx-ib.off { opacity: .35; cursor: not-allowed; }
@media (max-width: 720px) {
  .gx-hdr { padding: 12px 12px 10px; margin-top: 0; } .gx-tit { margin-bottom: 8px; } .gx-tit h2 { font-size: 19px; }
  .gx-mas { width: 38px; height: 38px; padding: 0; border-radius: 50%; } .gx-mas .pl { display: grid; } .gx-mas .tx { display: none; }
  .gx-kpis { gap: 6px; } .gx-kpi { padding: 6px 8px; border-radius: 11px; } .gx-kpi b { font-size: 20px; } .gx-kpi .lg { display: none; } .gx-kpi .cr { display: block; font-size: 10.5px; line-height: 1.15; margin-top: 1px; white-space: nowrap; }
  .gx-chips { display: none; } .gx-sel { display: block; }
  .gx-f { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q acc" "lo lo" "es px"; row-gap: 4px; padding: 10px 10px 8px 12px; }
  .gx-f > .quien { grid-area: q; } .gx-f > .gx-acc { grid-area: acc; } .gx-f > .gx-lo { grid-area: lo; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; } .gx-f > .gx-es { grid-area: es; } .gx-f > .gx-px { grid-area: px; text-align: right; align-self: center; }
  .gx-lo b { display: inline; } .gx-ib { width: 30px; height: 30px; } .gx-acc { gap: 4px; }
}

/* Ventana de gestión del cliente */
dialog.gx-ven { width: min(96vw, 1040px); max-width: 1040px; padding: 0; overflow: hidden; max-height: 96dvh; }
dialog.gx-ven > form { display: flex; flex-direction: column; max-height: 96dvh; margin: 0; }
dialog.gx-ven .pie { display: none; }
dialog.gx-ven .msg { margin: 0; }
.gx-cab { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; }
.gx-cab .mv-av { flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
.gx-id { flex: 1 1 220px; min-width: 0; }
.gx-id h3 { margin: 0; color: #fff; font-size: 20px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; opacity: .92; margin-top: 3px; }
.gx-ctc { display: flex; gap: 8px; flex: none; }
.gx-ctc .gx-ib { width: auto; min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; font-size: 14px; background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .26); border-radius: 12px; }
.gx-ctc .gx-ib .ico, .gx-ctc .gx-ib svg { width: 19px; height: 19px; }
.gx-ctc .gx-ib.wa { background: #1fae5b; border-color: #1fae5b; }
.gx-ctc .gx-ib.off { background: rgba(255, 255, 255, .06); }
.gx-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.gx-x:hover { background: rgba(255, 255, 255, .3); }
.gx-cuerpo { display: grid; grid-template-columns: 310px minmax(0, 1fr); height: min(640px, calc(96dvh - 92px)); min-height: 0; }
.gx-lado { background: var(--cream); border-right: 1px solid var(--line); padding: 14px; overflow: auto; min-height: 0; }
.gx-lado > summary { display: none; list-style: none; font-weight: 800; cursor: pointer; align-items: center; gap: 8px; }
.gx-lado > summary::-webkit-details-marker { display: none; } .gx-lado > summary::after { content: '›'; margin-left: auto; font-size: 20px; color: var(--muted); } .gx-lado[open] > summary::after { transform: rotate(90deg); }
.gx-ladoin { display: flex; flex-direction: column; gap: 14px; }
.gx-bl h4 { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gx-pen { border: 1px solid var(--line); background: var(--surf); color: var(--muted); border-radius: 8px; padding: 2px 9px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; text-transform: none; letter-spacing: 0; }
.gx-d { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.gx-d:last-child { border-bottom: 0; } .gx-d span { color: var(--muted); flex: none; } .gx-d b { text-align: right; min-width: 0; overflow-wrap: anywhere; font-size: 13px; color: var(--tx); }
.gx-d b.falta { color: var(--warn); }
.gx-lado .campo { margin-bottom: 8px; } .gx-lado .campo label { font-size: 12.5px; }
.gx-lado .campo input, .gx-lado .campo select { width: 100%; min-width: 0; }
.gx-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.gx-busq { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.gx-busq input { flex: 1; min-width: 0; font: inherit; color: var(--tx); background: var(--cream); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 11px; }
.gx-cuenta { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.gx-feed { flex: 1; min-height: 120px; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.gx-sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.gx-sep::before, .gx-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.gx-n { max-width: 88%; align-self: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; background: var(--surf); }
.gx-n.sys { background: var(--cream); border-style: dashed; }
.gx-n.mio { align-self: flex-end; background: #e6edfb; border-color: transparent; }
.gx-n[hidden], .gx-sep[hidden] { display: none; }
.gx-nt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; } .gx-nt .gx-m { margin-left: auto; font-size: 12px; color: var(--muted); }
.gx-n p { margin: 0; font-size: 14px; } .gx-n .gx-px { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.gx-vacio { text-align: center; color: var(--muted); padding: 24px 10px; font-size: 14px; }
.gx-comp { border-top: 1px solid var(--line); padding: 10px 14px 12px; display: grid; gap: 8px; background: var(--surf); }
.gx-f3 { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; } .gx-comp.sin-estado .gx-f3 { grid-template-columns: 1.4fr 1fr; }
.gx-comp .campo { margin: 0; min-width: 0; } .gx-comp .campo label { font-size: 12.5px; } .gx-comp select, .gx-comp input, .gx-comp textarea { width: 100%; min-width: 0; }
.gx-comp textarea { min-height: 52px; resize: vertical; }
.gx-env { display: flex; gap: 8px; align-items: flex-end; } .gx-env .gx-obs { flex: 1; } .gx-send { height: 52px; flex: none; }
@media (max-width: 720px) {
  dialog.gx-ven { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  dialog.gx-ven > form { height: 100dvh; max-height: 100dvh; }
  .gx-cab { padding: 12px 52px 12px 14px; gap: 10px; } .gx-x { position: absolute; right: 12px; top: 12px; }
  .gx-ctc { width: 100%; flex-wrap: wrap; } .gx-ctc .gx-ib { flex: 1 1 auto; min-width: 0; padding: 0 6px; gap: 4px; font-size: 12.5px; white-space: nowrap; }
  .gx-env { flex-direction: column; align-items: stretch; } .gx-send { width: 100%; height: 44px; }
  .gx-cuerpo { display: flex; flex-direction: column; height: auto; flex: 1; min-height: 0; }
  .gx-lado { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; max-height: 55%; } .gx-lado > summary { display: flex; } .gx-lado[open] > .gx-ladoin { margin-top: 10px; }
  .gx-f3 { grid-template-columns: 1fr 1fr; } .gx-comp.sin-estado .gx-f3 { grid-template-columns: 1fr; } .gx-f3 > .campo:first-child { grid-column: 1 / -1; }
}

/* Gestión: ajustes finales */
.gx-lado .esc-lote-form{grid-template-columns:1fr}
.gx-bot{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.gx-lado .kvs{display:grid;gap:6px}
.gx-msj summary{cursor:pointer;font-weight:700;font-size:.9rem;padding:4px 0}
.gx-msj textarea{width:100%;margin-top:6px}
@media (min-width:721px){.gx-chips{flex-wrap:wrap;overflow:visible}}
@media (max-width:720px){.gx-ctc .gx-ib.msj{flex:none;width:40px;min-width:40px;padding:0}.gx-ctc .gx-ib.msj .gx-tx{display:none}}

/* Filtros del panel: nombre, código, estado (siempre lista desplegable) y límite de 10 filas */
.gx-fil{flex-wrap:wrap}
.gx-cod{flex:0 1 210px;min-width:0;font:inherit;color:var(--tx);background:var(--surf);border:1.5px solid var(--line);border-radius:12px;padding:11px 14px}
.gx-sel{display:block !important;flex:0 1 270px}
.gx-chips{display:none !important}
.gx-limpiar{border:0;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:13px;text-decoration:underline;cursor:pointer;padding:0 6px}
.gx-pag{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;padding:14px 0 6px}
.gx-pag-filas{display:flex;align-items:center;gap:8px}
.gx-sel-fil{font:inherit;font-weight:700;color:var(--tx);background:var(--surf);border:1.5px solid var(--line);border-radius:10px;padding:6px 8px}
.gx-pag-nav{display:flex;align-items:center;gap:8px}
.gx-pag-nav .btn[disabled]{opacity:.4;pointer-events:none}
@media (max-width:560px){.gx-pag{justify-content:center}.gx-pag-info{order:3;flex:1 1 100%;text-align:center}}
@media (max-width:720px){.gx-fil .gx-buscar{flex:1 1 100%}.gx-cod{flex:1 1 40%}.gx-sel{flex:1 1 50%}}
@media (min-width:721px){.gx-fil{flex-wrap:nowrap;align-items:center}.gx-fil .gx-buscar{flex:1 1 340px}}

/* Seguridad, altas oficiales y «ver como» */
.ver-como{position:sticky;top:0;z-index:60;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#7a2e00;color:#fff;padding:9px 16px;font-size:13.5px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.ver-como .btn{background:#fff;color:#7a2e00;border:0}
body.ver-como-on .topbar{top:var(--vc-h,0)}
.estado-cuenta{display:flex;flex-wrap:wrap;gap:4px;min-width:150px}
.acciones-fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.seg-tabs{margin:4px 0 14px}
.seg-cuerpo{min-width:0}
.seg-cuerpo h3{margin:6px 0 8px}
.seg-kpi{text-align:left;border:0;cursor:pointer;font:inherit;border-top:4px solid var(--line)}
.seg-kpi.alerta{border-top-color:var(--coral)}.seg-kpi.alerta b{color:var(--coral-dark)}
.seg-tabla{font-size:13px}.seg-tabla td{vertical-align:top}
.seg-tabla-sec{margin-top:18px}.seg-tabla-sec h4{margin:0 0 4px;color:var(--tx)}
.seg-inf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:10px}
.seg-puerta{max-width:420px}
.nw{white-space:nowrap}
.qr-2fa{display:block;margin:6px auto;border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff}
.secreto-2fa{font-family:"Courier New",monospace;letter-spacing:1px;word-break:break-all}
.cred-ventana{display:grid;gap:10px;min-width:0}
.cred-card{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--cream)}
.cred-nombre{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.cred-lista{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:4px 14px;margin:0}
.cred-lista dt{color:var(--muted);font-size:13px}.cred-lista dd{margin:0;font-family:"Courier New",monospace;font-weight:700;font-size:16px;word-break:break-all;color:var(--tx)}
.cred-lista dt.cred-tit{grid-column:1/-1;font-weight:800;color:var(--tx)}.cred-lista dt.cred-tit + dd{display:none}
.alta-equipo h4{margin:14px 0 4px}
.alta-proms{display:grid;gap:8px;margin:6px 0}
.alta-prom{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:6px;align-items:center}
.imp-pasos{margin:8px 0;padding-left:20px}.imp-pasos li{margin:8px 0}
.imp-tabla{max-height:46vh;overflow:auto;margin-top:10px}
.imp-tabla .fila-error td{background:var(--bad-bg)}
@media (max-width:720px){.alta-prom{grid-template-columns:1fr 1fr}.alta-prom input:first-child{grid-column:1/-1}.alta-prom .btn-ico,.alta-prom button{justify-self:end}.cred-lista{grid-template-columns:1fr}.ver-como{font-size:12.5px}}

/* Modo control / modo soporte (Soporte) */
.modo-banda{position:relative;z-index:59;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:6px 16px;font-size:12.5px;color:#fff}
.modo-banda.control{background:#253958}
.modo-banda.soporte{background:#b34700;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.modo-banda .btn{background:#fff;color:#162945;border:0;padding:3px 10px;min-height:0}
body.ver-como-on .modo-banda{display:none}

/* ===== Usuarios y permisos (estilo cobranzas) ===== */
.adm-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.adm-sp { flex: 1; }
.adm-tabs { display: inline-flex; background: color-mix(in srgb, var(--navy) 9%, var(--surf)); border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; margin: 0 0 14px; max-width: 100%; }
.adm-tabs button { border: 0; background: transparent; padding: 8px 16px; border-radius: 9px; font: inherit; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; }
.adm-tabs button.on { background: var(--surf); color: var(--tx); box-shadow: 0 1px 4px rgba(0, 6, 82, .14); }
.adm-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.adm-card { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.adm-ulist { padding: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 76vh; overflow: auto; }
.adm-uh { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 2px 4px; }
.adm-n { background: color-mix(in srgb, var(--navy) 9%, var(--surf)); border-radius: 10px; padding: 1px 8px; margin-left: 4px; }
.adm-ulist input[type=search] { border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13px; margin-bottom: 2px; width: 100%; background: var(--surf); color: var(--ink); }
.adm-uc { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--line); background: var(--surf); border-radius: 12px; padding: 8px 10px; text-align: left; width: 100%; cursor: pointer; font: inherit; color: var(--ink); }
.adm-uc:hover { border-color: var(--cyan-dark); }
.adm-uc.on { border-color: var(--navy); background: color-mix(in srgb, var(--navy) 6%, var(--surf)); box-shadow: inset 3px 0 0 var(--navy); }
.adm-uc.apagado { opacity: .6; }
.adm-av { width: 34px; height: 34px; border-radius: 10px; background: var(--navbg); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.adm-av.big { width: 48px; height: 48px; font-size: 15px; border-radius: 12px; }
.adm-un { min-width: 0; flex: 1; }
.adm-un b { display: block; font-size: 13.5px; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-un small { color: var(--muted); font-size: 11.5px; }
.adm-pers { flex: none; min-width: 22px; text-align: center; background: var(--coral); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 6px; }
.adm-detail { overflow: hidden; }
.adm-dh { padding: 14px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--navy) 5%, var(--surf)), var(--surf)); }
.adm-dn { min-width: 0; flex: 1 1 220px; }
.adm-dh h2 { margin: 0; font-size: 18px; color: var(--tx); }
.adm-dh small { color: var(--muted); }
.adm-ch-r { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.adm-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.adm-sel { display: flex; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); align-items: flex-end; }
.adm-sel label { display: flex; flex-direction: column; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); gap: 4px; margin: 0; }
.adm-sel select, .adm-sel input { border: 1.5px solid var(--line); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; min-width: 210px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 600; background: var(--surf); width: auto; }
.adm-body { padding: 14px 18px 8px; }
.adm-bh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.adm-bh h3 { margin: 0; font-size: 15px; color: var(--tx); }
.adm-bh small { color: var(--muted); font-size: 13px; }
.adm-ro { padding: 18px; text-align: center; color: var(--muted); }
.adm-acc { border: 1.5px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: var(--surf); }
.adm-acc-h { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: color-mix(in srgb, var(--navy) 4%, var(--surf)); padding: 11px 14px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.adm-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--navy) 10%, var(--surf)); color: var(--tx); display: grid; place-items: center; }
.adm-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.adm-acc-t { flex: 1; min-width: 0; }
.adm-acc-t b { font-size: 14px; color: var(--tx); }
.adm-acc-t small { display: block; color: var(--muted); font-size: 12px; }
.adm-ct { margin-left: auto; font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 12px; background: color-mix(in srgb, var(--navy) 9%, var(--surf)); color: var(--muted); white-space: nowrap; }
.adm-ct.all { background: var(--ok-bg); color: var(--ok); }
.adm-ct.none { background: color-mix(in srgb, var(--muted) 12%, var(--surf)); color: color-mix(in srgb, var(--muted) 70%, var(--surf)); }
.adm-ch { color: var(--muted); transition: transform .15s; }
.adm-acc.open .adm-ch { transform: rotate(90deg); }
.adm-acc-b { display: none; padding: 4px 14px 8px; border-top: 1px solid var(--line); }
.adm-acc.open .adm-acc-b { display: block; }
.adm-tools { display: flex; gap: 14px; justify-content: flex-end; padding: 6px 0 0; }
.adm-tools button { border: 0; background: transparent; color: var(--cyan-dark); font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.adm-marca { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 800; color: var(--coral-dark); background: color-mix(in srgb, var(--coral) 14%, var(--surf)); border-radius: 8px; padding: 1px 7px; }
.adm-gente { padding: 10px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.adm-chipu { border: 1.5px solid var(--line); background: var(--surf); color: var(--tx); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.adm-chipu:hover { border-color: var(--navy); }
.adm-zonas { margin: 10px 18px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-zonas > div { border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.adm-zonas .z2 { background: color-mix(in srgb, #f0b429 12%, var(--surf)); border-color: #f0d29a; }
.adm-zonas .z3 { background: color-mix(in srgb, var(--bad) 8%, var(--surf)); border-color: #f1b9b0; }
.adm-zonas h5 { margin: 0 0 3px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.adm-zonas .z2 h5 { color: #b54708; } .adm-zonas .z3 h5 { color: var(--bad); }
.adm-zonas p { margin: 0 0 9px; font-size: 12.5px; color: var(--muted); }
.adm-zonas .btn { display: inline-flex; align-items: center; gap: 6px; }
.adm-zonas .btn-i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.adm-zonas .btn.ghost.danger { background: var(--surf); color: var(--bad); border: 1.5px solid #f1b9b0; }
.adm-zonas .btn.ghost.danger:hover { background: var(--bad-bg); }
/* Interruptores */
.sw-row { display: flex; margin: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 2px; font-size: 13.5px; font-weight: 600; color: var(--tx); cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--navy) 8%, transparent); position: relative; }
.sw-row:last-of-type { border-bottom: 0; }
.sw-row .sw-txt { flex: 1; min-width: 0; line-height: 1.35; }
.sw-row input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sw-track { display: block; flex: none; width: 40px; height: 23px; border-radius: 23px; background: #c7cedd; position: relative; transition: background .15s ease; }
.sw-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 6, 82, .3); transition: transform .15s ease; }
.sw-row input:checked + .sw-track { background: var(--ok); }
.sw-row input:checked + .sw-track::after { transform: translateX(17px); }
.sw-row input:focus-visible + .sw-track { outline: 2px solid var(--cyan-dark); outline-offset: 2px; }
.sw-row input:disabled + .sw-track { opacity: .5; }
.sw-row.sw-lock { cursor: default; }
/* Seguridad: pestañas tipo segmentado, igual que las de arriba */
.seg-tabs { display: inline-flex; background: color-mix(in srgb, var(--navy) 9%, var(--surf)); border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; margin-bottom: 14px; }
.seg-tabs .tabbtn { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--muted); min-height: 0; }
.seg-tabs .tabbtn[aria-pressed="true"] { background: var(--surf); color: var(--tx); box-shadow: 0 1px 4px rgba(0, 6, 82, .14); }
/* Pastillas de Configuración */
.cfg-pills { display: flex; align-items: center; gap: 8px; background: var(--navbg); color: #fff; border-radius: 14px; padding: 8px 10px; margin: 10px 16px 0; max-width: 1400px; box-shadow: var(--shadow); }
.cfg-pills-h { flex: none; border: 0; background: transparent; color: rgba(255, 255, 255, .7); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 6px 8px; }
.cfg-pills-l { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px; min-width: 0; }
.cfg-pill { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid transparent; background: transparent; color: #fff; border-radius: 999px; padding: 4px 14px 4px 5px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cfg-pill:hover { background: rgba(255, 255, 255, .08); }
.cfg-pill.on { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); }
.cfg-pill-i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.cfg-pill-i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 820px) {
  .adm-layout { grid-template-columns: 1fr; }
  .adm-ulist { max-height: 260px; }
  .adm-zonas { grid-template-columns: 1fr; }
  .adm-ch-r { align-items: flex-start; margin-left: 0; }
  .cfg-pills { margin: 8px 10px 0; }
  .adm-sel select, .adm-sel input { min-width: 0; width: 100%; }
  .adm-sel label { flex: 1 1 100%; }
}

/* ---- Barra de íconos (opción B): solo el activo muestra su nombre; el resto, al pasar el mouse ---- */
@media (min-width: 900px) {
  .xp-isla .xp-dock { gap: 4px; }
  .xp-isla .xp-dock .xp-nb { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 8px; color: rgba(255, 255, 255, .78); }
  .xp-isla .xp-dock .xp-nb .ico svg { width: 20px; height: 20px; }
  .xp-isla .xp-dock .xp-nb.on { width: auto; padding: 0 16px 0 14px; background: rgba(34, 211, 238, .26); color: #fff; }
  .xp-nt { font-size: 13px; font-weight: 800; letter-spacing: .01em; }
  .xp-isla .xp-dock .xp-nb .zp-bd { position: absolute; top: 1px; right: 0; margin: 0; min-width: 17px; height: 17px; font-size: 10px; line-height: 17px; padding: 0 4px; border: 2px solid #1B2B43; box-sizing: content-box; }
  .xp-isla .xp-dock .xp-nb.on .zp-bd { top: -2px; right: -4px; }
  /* Globito con el nombre */
  .xp-dock .xp-nb[data-tip]:not(.on)::before { content: attr(data-tip); position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-3px); background: #0B1729; color: #fff; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; z-index: 900; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
  .xp-dock .xp-nb[data-tip]:not(.on):hover::before, .xp-dock .xp-nb[data-tip]:not(.on):focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
  .xp-dock .xp-nb:focus-visible { outline: 2px solid #22D3EE; outline-offset: 2px; }
}

/* ---- Segunda barra: pastillas de color sobre fondo claro ---- */
.cfg-pills { background: var(--surf); color: var(--tx); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 14px; margin: 8px 16px 0; box-shadow: 0 4px 14px rgba(24, 32, 50, .07); }
.cfg-pills-h { color: var(--muted); padding: 6px 8px 6px 0; }
.cfg-pills-h:hover { color: var(--tx); }
.cfg-pills-l { gap: 4px; }
.cfg-pill { color: var(--tx); border-color: transparent; padding: 3px 14px 3px 4px; font-size: 13px; position: relative; }
.cfg-pill:hover { background: color-mix(in srgb, var(--navy) 7%, var(--surf)); }
.cfg-pill.on { border-color: transparent; background: color-mix(in srgb, var(--navy) 10%, var(--surf)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--navy) 28%, transparent); }
.cfg-pill-i { width: 28px; height: 28px; }
.cfg-pill .zp-bd { position: static; margin-left: 2px; }
@media (max-width: 899px) { .cfg-pills { margin: 8px 10px 0; padding-left: 10px; } .cfg-pills-h { display: none; } }

/* ---- Configuración: pestañas verticales en el borde derecho ---- */
.cfg-secs { display: none; }
.cfg-rail { display: none; }
@media (min-width: 900px) {
  .cfg-rail { display: flex; flex-direction: column; gap: 8px; position: fixed; right: 0; top: 190px; z-index: 650; }
  .cfg-rt { writing-mode: vertical-rl; display: flex; align-items: center; justify-content: flex-start; gap: 9px; border: 0; background: #142236; color: rgba(255, 255, 255, .82); border-radius: 14px 0 0 14px; padding: 14px 9px 14px 8px; min-width: 38px; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .02em; cursor: pointer; box-shadow: -3px 4px 14px rgba(24, 32, 50, .22); transition: padding .12s, background .12s; }
  .cfg-rt .ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
  .cfg-rt:hover { background: #213450; color: #fff; padding-right: 12px; }
  .cfg-rt.on { background: #16348A; color: #fff; padding-right: 14px; }
  .cfg-rt:focus-visible { outline: 2px solid #22D3EE; outline-offset: -2px; }
  body.has-rail main, body.has-rail .cfg-pills { margin-right: 54px; }
  body.has-rail .cfg-pills { max-width: none; }
  body.has-rail main { margin-right: 0; padding-right: 54px; }
}
@media (max-width: 899px) {
  .cfg-secs { display: flex; gap: 6px; overflow-x: auto; margin: 8px 10px 0; scrollbar-width: none; }
  .cfg-secs::-webkit-scrollbar { display: none; }
  .cfg-sec-b { flex: none; border: 1px solid var(--line); background: var(--surf); color: var(--tx); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
  .cfg-sec-b.on { background: #142236; color: #fff; border-color: #142236; }
}
/* Las pastillas ya no necesitan barra de desplazamiento visible */
.cfg-pills-l { scrollbar-width: none; }
.cfg-pills-l::-webkit-scrollbar { display: none; }

/* ---- Entrega 18: personas por categoría y fuerza de ventas interna ---- */
.adm-cat { border: 1.5px solid var(--line); border-radius: 14px; background: var(--surf); overflow: hidden; }
.adm-cat + .adm-cat { margin-top: 2px; }
/* Corrige el recorte de la lista de personas: con overflow oculto, las cajas se achicaban dentro del contenedor con scroll */
.adm-ulist > *, .adm-cat-b > * { flex-shrink: 0; }
.adm-cat, .adm-sub { flex-shrink: 0; }
.adm-cat-h { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 10px 12px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.adm-cat-h:hover { background: color-mix(in srgb, var(--navy) 5%, var(--surf)); }
.adm-cat-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-cat-t b { font-size: 14px; }
.adm-cat-t small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.adm-cat .adm-ch { transition: transform .15s; color: var(--muted); }
.adm-cat.open .adm-ch { transform: rotate(90deg); }
.adm-cat-b { display: flex; flex-direction: column; gap: 6px; padding: 4px 8px 10px; border-top: 1px solid var(--line); }
.adm-sub { display: flex; flex-direction: column; gap: 6px; }
.adm-sub-h { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 8px 4px 0; }
.adm-int { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cyan-dark) 14%, var(--surf)); color: var(--cyan-dark); border: 1px solid color-mix(in srgb, var(--cyan-dark) 35%, transparent); }
.adm-int + .adm-pers { margin-left: 4px; }
.adm-interna { margin: 4px 0 10px; padding: 10px 14px; border: 1.5px dashed var(--line); border-radius: 14px; background: var(--surf); }
.adm-interna.on { border-style: solid; border-color: color-mix(in srgb, var(--cyan-dark) 55%, var(--line)); background: color-mix(in srgb, var(--cyan-dark) 6%, var(--surf)); }
.adm-interna .sw-txt { display: flex; flex-direction: column; gap: 2px; }
.adm-interna .mas { margin: 6px 0 0; }
.adm-proms { margin: 4px 0 12px; }
.adm-proms .prom-lista { border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }

/* Vender desde la oficina */
.of-pasos { list-style: none; display: flex; gap: 10px; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
.of-paso { display: flex; align-items: center; gap: 10px; flex: 1 1 180px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surf); color: var(--muted); font-weight: 700; }
.of-paso.on { border-color: var(--cyan-dark); color: var(--ink); background: color-mix(in srgb, var(--cyan-dark) 7%, var(--surf)); }
.of-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: var(--ink); font-size: 13px; font-weight: 800; flex: none; }
.of-paso.on .of-n { background: var(--cyan-dark); color: #fff; }
.of-t { flex: 1; }
.of-c { background: #E5484D; color: #fff; border-radius: 999px; min-width: 22px; text-align: center; padding: 1px 7px; font-size: 12px; }
.of-form { display: flex; flex-direction: column; gap: 10px; }
.of-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.of-envio { display: flex; justify-content: flex-end; }
.of-sub { margin: 18px 0 4px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.of-prev { margin-top: 10px; }
.of-prev summary { cursor: pointer; color: var(--muted); font-weight: 700; padding: 6px 0; }
.adm-interna-d { font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.35; }
.adm-interna .sw-row { align-items: center; }
.adm-proms { padding: 0 18px; }
@media (max-width: 899px) { .adm-proms { padding: 0 10px; } }

/* ---- Entrega 20: foto en la ficha de cada persona ---- */
.adm-foto { position: relative; border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; flex: none; line-height: 0; }
.adm-foto .mv-av { box-shadow: 0 0 0 2px var(--surf), 0 0 0 3.5px var(--line); }
.adm-foto-c { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--surf); color: var(--tx); border: 1.5px solid var(--line); display: grid; place-items: center; }
.adm-foto-c svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adm-foto:hover .adm-foto-c { border-color: var(--cyan-dark); color: var(--cyan-dark); }
.adm-uc .mv-av { font-size: 12px; }

/* ---- Entrega 20: perfiles adicionales y suplencias ---- */
.suplencia-banda { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--cyan-dark) 12%, var(--surf)); color: var(--tx); border-bottom: 1px solid color-mix(in srgb, var(--cyan-dark) 35%, var(--line)); padding: 8px 16px; font-size: 13px; }
.suplencia-banda svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--cyan-dark); }
.adm-extra, .adm-supl { margin: 4px 0 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surf); }
.adm-extra h4, .adm-supl h4 { margin: 0 0 2px; font-size: 14px; color: var(--tx); }
.adm-extra > small, .adm-supl > small { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 8px; line-height: 1.35; }
.adm-extra.on { border-color: color-mix(in srgb, var(--cyan-dark) 55%, var(--line)); background: color-mix(in srgb, var(--cyan-dark) 6%, var(--surf)); }
.adm-sup-fila { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.adm-sup-fila:first-of-type { border-top: 0; }
.adm-sup-t { flex: 1 1 220px; min-width: 0; font-size: 13.5px; color: var(--tx); }
.adm-sup-t small { display: block; color: var(--muted); font-size: 12px; }
.adm-sup-e { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 9%, var(--surf)); color: var(--muted); }
.adm-sup-e.vigente { background: var(--ok-bg); color: var(--ok); }
.adm-sup-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.adm-heredado { margin: 4px 0 10px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--cyan-dark) 8%, var(--surf)); font-size: 12.5px; color: var(--tx); }
.adm-xp { margin-left: 4px; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 9%, var(--surf)); color: var(--muted); }
.adm-extra .sw-txt { display: flex; flex-direction: column; gap: 2px; }
.adm-extra .adm-interna-d { font-weight: 400; }

/* ---- Entrega 22: tarjetas de personas sin textos apretados ---- */
.adm-un small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.adm-tags .adm-int, .adm-tags .adm-xp { margin: 0; white-space: nowrap; }
.adm-uc { align-items: flex-start; }
.adm-uc .adm-pers { align-self: center; }
.adm-uc .mv-av { margin-top: 1px; }

/* Tarjetas de ventas: las etiquetas pasan a la línea de abajo en vez de ensanchar la pantalla en el celular */
.vc-top { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.vc-top b { min-width: 0; overflow-wrap: anywhere; flex: 1 1 140px; }
.vc-wrap, .venta-card { min-width: 0; max-width: 100%; }

/* Menú del botón Correo (Orden de escrituración / Nuevo correo) */
.gx-menu { position: fixed; z-index: 2147483000; min-width: 230px; max-width: min(92vw, 300px); background: var(--surf, #fff); color: var(--tx, #16263E); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 6, 82, .28); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.gx-mi { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.gx-mi b { font-size: 14px; font-weight: 700; } .gx-mi small { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.3; }
.gx-mi:hover, .gx-mi:focus-visible { background: var(--bg2, #f1efe9); outline: none; } .gx-mi[disabled] { opacity: .4; cursor: not-allowed; }
/* Vista previa de la orden por correo */
.ord-fila { display: flex; gap: 8px; font-size: 13.5px; padding: 5px 0; border-bottom: 1px solid var(--line); } .ord-fila > span { flex: none; width: 62px; color: var(--muted); font-weight: 700; } .ord-fila > b { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.ord-cuerpo { margin: 8px 0; padding: 10px 12px; max-height: 34vh; overflow: auto; white-space: pre-wrap; font: 13px/1.5 inherit; background: var(--bg2, #f6f4ee); border-radius: 10px; overflow-wrap: anywhere; }
.ord-aviso { margin: 8px 0 0; }
.ord-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gx-imp { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .gx-imp:last-child { border-bottom: 0; }
.gx-imp span { color: var(--muted); min-width: 0; overflow-wrap: anywhere; } .gx-imp b { text-align: right; font-size: 13px; flex: none; }
.gx-imp.tot { font-weight: 800; } .gx-imp.tot span { color: var(--tx); }


/* ======================================================================
   DISEÑO D · "Mapa y Android" · app del vendedor (grafito y petróleo; verde / amarillo / rojo solo para los lotes)
   Va al final a propósito: reemplaza los colores y el menú anteriores del vendedor. Administración, Gerencia y Soporte no cambian.
   ====================================================================== */
body.vend {
  --bg: #F5F8FB; --tx: #152032; --ink: #152032; --muted: #5A6877; --line: #D9E3EA; --cream: #EAF1F6; --surf: #ffffff; --surf2: #E4EEF4;
  --pri: #16348A; --pri-h: #102A70; --onp: #ffffff; --cont: #E3EAF8; --oncont: #0F2565; --mapbg: #E4EBF1; --blk: #CFD9E3;
  --navbg: #16348A; --navy-2: #102A70; --navy: #16348A; --on-st: #0C1626;
  --ok: #1D7A4E; --ok-bg: #DDF3E8; --bad: #B3303B; --bad-bg: #FDE3E4; --sold: #B3303B; --sold-bg: #FDE3E4; --res-txt: #8A5D00;
  --shadow: 0 4px 14px rgba(20, 28, 43, .12);
  background: var(--bg); color-scheme: light;
}
body.vend.oscuro {
  --bg: #0C121B; --tx: #E6EEF4; --ink: #E6EEF4; --muted: #9DB0BF; --line: #24334A; --cream: #1B2739; --surf: #131C29; --surf2: #1B2739;
  --pri: #7FD1E8; --pri-h: #9BDCEE; --onp: #06303D; --cont: #164B5D; --oncont: #CDE9F2; --mapbg: #0A1422; --blk: #17263C;
  --navbg: #1F6F88; --navy-2: #1A5F76; --navy: #7FD1E8; --on-st: #0C1626;
  --ok: #6FE0A3; --ok-bg: rgba(69, 185, 124, .18); --bad: #FF8F98; --bad-bg: rgba(224, 80, 90, .18); --sold: #FF8F98; --sold-bg: rgba(224, 80, 90, .18); --res-txt: #FFD27A;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .04); background: var(--bg); color-scheme: dark;
}
body.vend main { padding-bottom: 190px; }
body.vend .card, body.vend .mz, body.vend .venta-card, body.vend .lote { border: 0; box-shadow: var(--shadow); }
body.vend.oscuro .card, body.vend.oscuro .mz, body.vend.oscuro .venta-card, body.vend.oscuro .lote { border: 1px solid var(--line); box-shadow: none; }
body.vend .card { border-radius: 20px; }

/* Cabecera: plana, sin barra de color */
body.vend .vend-hdw, body.vend.oscuro .vend-hdw { filter: none; background: var(--bg); }
body.vend .topbar.vend-hd, body.vend.oscuro .topbar.vend-hd { height: auto; min-height: 64px; clip-path: none; background: var(--bg); color: var(--tx); padding: 10px max(16px, calc((100% - 980px) / 2 + 16px)) 6px; }
body.vend .vend-hd .iso { height: 30px; }
body.vend .vend-hd .iso-c { display: block; } body.vend .vend-hd .iso-b { display: none; }
body.vend.oscuro .vend-hd .iso-c { display: none; } body.vend.oscuro .vend-hd .iso-b { display: block; }
body.vend .vend-hd .hola small, body.vend.oscuro .vend-hd .hola small { color: var(--muted); }
body.vend .vend-hd .hola b, body.vend.oscuro .vend-hd .hola b { color: var(--tx); font-size: 20px; }
body.vend .vend-hd .vivo, body.vend.oscuro .vend-hd .vivo { background: var(--surf2); border: 0; color: var(--tx); }
body.vend .vend-hd .vivo.on i, body.vend.oscuro .vend-hd .vivo.on i { background: var(--pri); }
body.vend .vend-bell, body.vend.oscuro .vend-bell { background: var(--surf2); border: 0; color: var(--tx); }
body.vend .ticker, body.vend.oscuro .ticker { background: var(--cont); color: var(--oncont); border: 0; box-shadow: none; }
body.vend .ticker .pulse, body.vend.oscuro .ticker .pulse { background: var(--pri); }

/* Menú inferior estilo Android + botón flotante Calificar */
body.vend .nav, body.vend.oscuro .nav {
  position: fixed; left: 0; right: 0; bottom: 0; transform: none; width: auto; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; backdrop-filter: none;
  padding: 10px 6px calc(12px + env(safe-area-inset-bottom)); background: var(--surf2); box-shadow: 0 -1px 0 var(--line);
  display: flex; justify-content: space-around; align-items: flex-start; z-index: 45; }
body.vend .nav button, body.vend.oscuro .nav button { flex: 1; max-width: 110px; min-width: 0; height: auto; min-height: 0; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 0; border-radius: 0;
  background: none; color: var(--muted); font-size: 11.5px; font-weight: 700; }
body.vend .nav button .l-sm { display: block; }
body.vend .nav button .pill { width: 58px; height: 30px; border-radius: 15px; display: grid; place-items: center; transition: background .15s; }
body.vend .nav button .pill .ico { display: flex; }
body.vend .nav button[aria-current="page"], body.vend.oscuro .nav button[aria-current="page"] { background: none; color: var(--tx); }
body.vend .nav button[aria-current="page"] .pill { background: var(--cont); color: var(--oncont); }
body.vend .nav button[aria-current="page"]::before { display: none; }
body.vend .nav .fab-cal, body.vend.oscuro .nav .fab-cal { position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); left: auto; top: auto; flex: none; max-width: none; height: 56px; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  padding: 0 20px 0 16px; border-radius: 18px; background: var(--pri); color: var(--onp); font-size: 14.5px; font-weight: 800; box-shadow: 0 8px 20px rgba(11, 110, 138, .38); z-index: 46; }
body.vend .nav .fab-cal svg { width: 22px; height: 22px; }
body.vend:has(#pn .tray) .nav .fab-cal { bottom: calc(172px + env(safe-area-inset-bottom)); }
body.vend :is(#pn, .pk-lotes) .tray { bottom: calc(86px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { body.vend .nav .fab-cal { right: max(16px, calc((100vw - 980px) / 2)); } }

/* Botones, campos y ventanas */
body.vend .btn:not(.ghost):not(.ok):not(.danger):not(.navy), body.vend.oscuro .btn:not(.ghost):not(.ok):not(.danger):not(.navy) { background: var(--pri); color: var(--onp); }
body.vend .btn:not(.ghost):not(.ok):not(.danger):not(.navy):hover, body.vend.oscuro .btn:not(.ghost):not(.ok):not(.danger):not(.navy):hover { background: var(--pri-h); }
body.vend .btn.ghost, body.vend.oscuro .btn.ghost { color: var(--tx); border: 1.5px solid var(--line); background: var(--surf); }
body.vend .btn.ghost:hover, body.vend.oscuro .btn.ghost:hover { background: var(--surf2); }
body.vend input, body.vend select, body.vend textarea, body.vend.oscuro input, body.vend.oscuro select, body.vend.oscuro textarea { background-color: var(--cream); border-color: transparent; color: var(--tx); }
body.vend input:focus, body.vend select:focus, body.vend textarea:focus, body.vend.oscuro input:focus, body.vend.oscuro select:focus, body.vend.oscuro textarea:focus { background-color: var(--surf); border-color: var(--pri); outline-color: rgba(11, 110, 138, .3); }
body.vend.oscuro select option { background: var(--surf); color: var(--tx); }
body.vend.oscuro dialog { background: var(--surf); color: var(--tx); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
body.vend.oscuro .toast { background: var(--surf2); border: 1px solid var(--line); }
body.vend.oscuro .btn.ghost { border-color: var(--line); }
body.vend .pedir-x, body.vend.oscuro .pedir-x { background: var(--surf2); color: var(--tx); }
body.vend .pedir-cab .rmb, body.vend.oscuro .pedir-cab .rmb { background: var(--pri); }
body.vend .seg-doc button[aria-pressed="true"], body.vend .tabbtn[aria-pressed="true"], body.vend .chip-fr[aria-selected="true"], body.vend.oscuro .seg-doc button[aria-pressed="true"], body.vend.oscuro .tabbtn[aria-pressed="true"], body.vend.oscuro .chip-fr[aria-selected="true"] { background: var(--pri); color: var(--onp); border-color: var(--pri); }
body.vend.oscuro .ap-opc button[aria-pressed="true"] { border-color: var(--pri); box-shadow: none; }

/* Apariencia: control de tres opciones */
body.vend .ap-opc, body.vend.oscuro .ap-opc { display: flex; gap: 0; background: var(--surf2); border-radius: 999px; padding: 4px; margin-top: 10px; }
body.vend .ap-opc button, body.vend.oscuro .ap-opc button { flex: 1; flex-direction: row; justify-content: center; gap: 0; border: 0; background: transparent; border-radius: 999px; padding: 10px 6px; box-shadow: none; color: var(--tx); }
body.vend .ap-opc button[aria-pressed="true"], body.vend.oscuro .ap-opc button[aria-pressed="true"] { background: var(--pri); color: var(--onp); box-shadow: none; border: 0; }
body.vend .ap-opc .mu { display: none; }

/* Loteamientos */
body.vend .fr-card { border-radius: 22px; border: 0; box-shadow: var(--shadow); background: var(--surf); }
body.vend.oscuro .fr-card { border: 1px solid var(--line); box-shadow: none; }
body.vend .fr-libres b { color: var(--pri); }
body.vend .fr-mias { background: var(--cont); color: var(--oncont); }

/* Mapa: plano esquemático */
.mp-top { display: flex; align-items: center; gap: 8px; }
.mp-back, .mp-zoom { width: 40px; height: 40px; flex: none; border: 0; border-radius: 14px; background: var(--surf); color: var(--tx); display: grid; place-items: center; box-shadow: var(--shadow); cursor: pointer; padding: 0; }
.mp-zoom:disabled { opacity: .4; cursor: default; }
.mp-back .ico, .mp-zoom .ico, .mp-bus .ico { display: flex; }
.mp-back svg, .mp-zoom svg, .mp-bus svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.mp-tit { flex: 1; min-width: 0; }
.mp-tit b { display: block; font-size: 18px; font-weight: 900; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-tit small { display: block; color: var(--muted); font-weight: 700; font-size: 12px; }
.mp-bus { display: flex; align-items: center; gap: 10px; background: var(--surf); border-radius: 16px; height: 48px; padding: 0 14px; margin: 10px 0 8px; box-shadow: var(--shadow); color: var(--muted); }
body.vend .mp-bus input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; outline: 0 !important; box-shadow: none !important; padding: 0; height: 100%; font: inherit; font-weight: 700; font-size: 15px; color: var(--tx); border-radius: 0; }
.mp-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; }
.mp-chips::-webkit-scrollbar { display: none; }
.mp-chip { flex: none; border: 0; border-radius: 999px; padding: 8px 13px; background: var(--surf); color: var(--tx); font: inherit; font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow); cursor: pointer; }
.mp-chip.on { background: var(--pri); color: var(--onp); }
.mp-chip i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.mp-chip.c-ok i { background: var(--st-ok); } .mp-chip.c-res i { background: var(--st-res); }
.mp-chip em { font-style: normal; font-weight: 700; opacity: .72; }
.mp-ley { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 2px 10px; }
.mp-ley span { display: inline-flex; align-items: center; gap: 6px; }
.mp-ley i { width: 11px; height: 11px; border-radius: 4px; display: block; }
.mp-ley i.ok { background: var(--st-ok); } .mp-ley i.res { background: var(--st-res); } .mp-ley i.ven { background: var(--st-ven); } .mp-ley i.blq { background: #9AA7B3; }
.mp-vacio { margin: 6px 2px 10px; }
.mp-plano { background: var(--mapbg); border-radius: 22px; padding: 14px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.mp-blk { background: var(--blk); border-radius: 12px; padding: 8px; max-width: 100%; overflow-x: auto; width: calc(var(--cols) * (var(--c) + 3px) + 13px); scrollbar-width: none; transition: opacity .15s; }
.mp-blk::-webkit-scrollbar { display: none; }
.mp-blk header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 2px 6px; white-space: nowrap; }
.mp-blk header b { font-size: 13px; font-weight: 900; }
.mp-blk header small { font-size: 11px; font-weight: 700; color: var(--muted); }
.mp-blk.dim { opacity: .3; }
.mp-blk.hit { box-shadow: 0 0 0 2.5px var(--pri); }
.mp-g { display: grid; grid-template-columns: repeat(var(--cols), var(--c)); gap: 3px; }
.mp-l { width: var(--c); height: var(--c); border: 0; border-radius: calc(var(--c) / 5); padding: 0; font: inherit; font-weight: 800; font-size: calc(var(--c) * .38); color: var(--on-st); cursor: pointer; display: grid; place-items: center; transition: opacity .15s, transform .1s; }
.mp-l:active { transform: scale(.92); }
.mp-l.ok { background: var(--st-ok); } .mp-l.res { background: var(--st-res); } .mp-l.ven { background: var(--st-ven); color: #fff; } .mp-l.blq { background: #9AA7B3; }
.mp-l.mia { box-shadow: inset 0 0 0 2.5px var(--surf); outline: 2px solid var(--tx); outline-offset: -1px; }
.mp-l.sel { outline: 3px solid var(--tx); outline-offset: 1px; z-index: 1; position: relative; }
.mp-l.hit { outline: 3px solid var(--pri); outline-offset: 1px; position: relative; z-index: 1; }
.mp-l.off { opacity: .18; }
.mp-plano.chico .mp-l { font-size: 0; }

/* Hoja inferior del lote */
.mp-sheet-w { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.mp-vel { position: absolute; inset: 0; background: rgba(10, 18, 28, .45); }
.mp-sheet { position: relative; width: 100%; max-width: 560px; background: var(--surf); color: var(--tx); border-radius: 26px 26px 0 0; padding: 8px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px rgba(0, 0, 0, .3); animation: mpSube .18s ease-out; }
@keyframes mpSube { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.mp-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 10px; }
.mp-sh1 { display: flex; align-items: center; gap: 10px; }
.mp-sh1 > div { flex: 1; min-width: 0; }
.mp-sh1 small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.mp-sh1 b { font-size: 24px; font-weight: 900; letter-spacing: -.3px; }
.mp-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surf2); color: var(--tx); font-size: 22px; line-height: 1; cursor: pointer; }
.mp-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.mp-kv > div { background: var(--bg); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.mp-kv small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.mp-kv b { font-size: 14px; font-weight: 900; overflow-wrap: anywhere; }
.mp-multi { margin: 0 0 10px; } .mp-multi span { display: inline-block; background: var(--cont); color: var(--oncont); border-radius: 9px; padding: 5px 11px; font-size: 12px; font-weight: 800; }
.mp-acts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.mp-acts .btn { height: 48px; margin: 0; }
.mp-link { display: block; width: 100%; margin-top: 6px; padding: 12px 8px; border: 0; background: none; color: var(--pri); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; text-align: center; }
body.vend:has(.mp-sheet-w) .nav .fab-cal { display: none; }

/* Calificación: semáforo (verde / amarillo / rojo) */
body.vend .chip.califica { background: rgba(69, 185, 124, .2); color: var(--ok); }
body.vend .chip.pendiente, body.vend .chip.regularizar { background: rgba(245, 185, 66, .24); color: var(--res-txt); }
body.vend .chip.no_califica { background: rgba(224, 80, 90, .16); color: var(--bad); }

/* Los botones dentro de #pn heredan el color (regla con id): se fija aquí el color propio de cada uno */
body.vend #pn .mp-chip { color: var(--tx); } body.vend #pn .mp-chip.on { color: var(--onp); }
body.vend #pn .mp-l { color: var(--on-st); } body.vend #pn .mp-l.ven { color: #fff; }
body.vend #pn .mp-acts .btn:not(.ghost) { color: var(--onp); } body.vend #pn .mp-acts .btn.ghost { color: var(--tx); }
body.vend #pn .mp-link { color: var(--pri); } body.vend #pn .mp-x, body.vend #pn .mp-back, body.vend #pn .mp-zoom { color: var(--tx); }
body.vend .ticker .pl-resto, body.vend.oscuro .ticker .pl-resto { color: inherit; }

/* Venta: avance en 5 tramos */
.vc-seg { display: flex; gap: 4px; margin: 10px 0 2px; }
.vc-seg i { flex: 1; height: 6px; border-radius: 3px; background: var(--surf2); }
.vc-seg i.on { background: var(--pri); }
.vc-seg i.cur { background: var(--cont); box-shadow: inset 0 0 0 1.5px var(--pri); }
body.vend dialog::backdrop { background: rgba(10, 18, 28, .5); }
body.vend .chip.pend-chip, body.vend .chip.trabajando-chip { background: rgba(245, 185, 66, .24); color: var(--res-txt); }
body.vend .chip.trabajando-chip { background: var(--cont); color: var(--oncont); }
body.vend .chip.compra, body.vend.oscuro .chip.compra { background: var(--cont); color: var(--oncont); }
.asist-seg { margin: 4px 0 12px; }

/* Bandeja de lotes elegidos (vendedor) */
body.vend :is(#pn, .pk-lotes) .tray, body.vend.oscuro :is(#pn, .pk-lotes) .tray { background: var(--surf); color: var(--tx); border-radius: 20px; box-shadow: 0 8px 28px rgba(20, 28, 43, .28); border: 1px solid var(--line); left: 12px; right: 12px; }
body.vend :is(#pn, .pk-lotes) .tray small { color: var(--muted); }
body.vend :is(#pn, .pk-lotes) .tray .tray-total { color: var(--pri); }
body.vend :is(#pn, .pk-lotes) .tray .tray-x { color: var(--muted); }
body.vend :is(#pn, .pk-lotes) .tray .btn { background: var(--pri); color: var(--onp); border-radius: 999px; min-height: 44px; padding: 0 18px; }
body.vend .mp-l.mia { outline: 0; box-shadow: inset 0 0 0 3px var(--surf); }
body.vend .mp-l.sel::after { content: '✓'; position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--tx); color: var(--surf); font-size: 10px; line-height: 16px; text-align: center; font-weight: 900; }

/* Cerrar sesión: botón redondo en la cabecera del vendedor */
body.vend .vend-hd .salir, body.vend.oscuro .vend-hd .salir { background: var(--surf2); border: 0; color: var(--tx); width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; box-shadow: none; flex: none; border-radius: 999px; }
body.vend .vend-hd .salir span:not(.ico) { display: none; }
body.vend .vend-hd .salir:hover, body.vend.oscuro .vend-hd .salir:hover { background: var(--bad-bg); color: var(--bad); }

/* ---- Ajuste 2026-11-03: encabezado grafito (opción 2) y menú inferior en isla oscura (opción C) ---- */
body.vend { --hdr: #152032; --hdr-tx: #FFFFFF; --hdr-mut: #9DB0BF; --isla: #152032; --isla-line: transparent; }
body.vend.oscuro { --hdr: #152032; --isla: #1B2739; --isla-line: #293951; }
body.vend .vend-hdw, body.vend.oscuro .vend-hdw, body.vend .topbar.vend-hd, body.vend.oscuro .topbar.vend-hd { background: var(--hdr); color: var(--hdr-tx); }
body.vend .vend-hd .iso-c, body.vend.oscuro .vend-hd .iso-c { display: none; } body.vend .vend-hd .iso-b, body.vend.oscuro .vend-hd .iso-b { display: block; }
body.vend .vend-hd .hola small, body.vend.oscuro .vend-hd .hola small { color: var(--hdr-mut); }
body.vend .vend-hd .hola b, body.vend.oscuro .vend-hd .hola b { color: var(--hdr-tx); }
body.vend .vend-hd .vivo, body.vend.oscuro .vend-hd .vivo, body.vend .vend-bell, body.vend.oscuro .vend-bell, body.vend .vend-hd .salir, body.vend.oscuro .vend-hd .salir { background: rgba(255, 255, 255, .12); color: var(--hdr-tx); }
body.vend .vend-hd .vivo.on i, body.vend.oscuro .vend-hd .vivo.on i { background: #7FD1E8; }
body.vend .vend-hd .salir:hover, body.vend.oscuro .vend-hd .salir:hover { background: rgba(224, 80, 90, .35); color: #fff; }
body.vend .vend-hdw { box-shadow: 0 6px 16px rgba(20, 28, 43, .18); }

body.vend .nav, body.vend.oscuro .nav { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; border-radius: 28px; background: var(--isla);
  border: 1px solid var(--isla-line); box-shadow: 0 10px 28px rgba(0, 0, 0, .4); padding: 9px 6px; }
body.vend .nav button, body.vend.oscuro .nav button { color: #9DB0BF; }
body.vend .nav button[aria-current="page"], body.vend.oscuro .nav button[aria-current="page"] { color: #fff; }
body.vend .nav button[aria-current="page"] .pill, body.vend.oscuro .nav button[aria-current="page"] .pill { background: #7FD1E8; color: #06303D; }
body.vend .nav .fab-cal, body.vend.oscuro .nav .fab-cal { bottom: calc(98px + env(safe-area-inset-bottom)); }
body.vend:has(#pn .tray) .nav .fab-cal { bottom: calc(184px + env(safe-area-inset-bottom)); }
body.vend :is(#pn, .pk-lotes) .tray, body.vend.oscuro :is(#pn, .pk-lotes) .tray { bottom: calc(98px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { body.vend .nav { left: 50%; right: auto; transform: translateX(-50%); width: 520px; } body.vend .nav .fab-cal { position: fixed; transform: translateX(0); } }

/* Actualizar datos (vendedor): botón redondo junto a la campanita */
body.vend .vend-hd .vend-upd, body.vend.oscuro .vend-hd .vend-upd { width: 38px; height: 38px; min-height: 38px; padding: 0; flex: none; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--hdr-tx, #fff); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
body.vend .vend-upd .ico { display: flex; }
body.vend .vend-upd svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.vend .vend-upd.girando .ico { animation: gira .8s linear infinite; }
.mp-ocultas { margin: 0 2px 10px; font-weight: 600; }

/* ===== PIN para continuar (pantalla completa del vendedor) ===== */
.pin-gate { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: #152032; color: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.oscuro .pin-gate { background: #0C121B; }
.pin-gate h2 { margin: 6px 0 0; font-size: 22px; font-weight: 800; letter-spacing: .01em; text-align: center; }
.pin-gate .pg-iso { width: 54px; height: 54px; object-fit: contain; margin-bottom: 4px; }
.pin-gate .pg-sub { margin: 0; color: rgba(255,255,255,.72); font-size: 15px; text-align: center; max-width: 320px; }
.pin-gate .pg-puntos { display: flex; gap: 16px; margin: 14px 0 4px; }
.pin-gate .pg-puntos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); transition: background .12s, transform .12s; }
.pin-gate .pg-puntos i.on { background: #fff; border-color: #fff; transform: scale(1.1); }
.pin-gate .pg-puntos.mal { animation: pgSacudir .35s; }
.pin-gate .pg-puntos.mal i { border-color: #ff8a80; }
@keyframes pgSacudir { 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.pin-gate .pg-msg { min-height: 20px; margin: 0; color: #ffb4a9; font-size: 14px; font-weight: 600; text-align: center; max-width: 300px; }
.pin-gate .pg-teclado { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; margin-top: 4px; }
.pin-gate .pg-k { width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pin-gate .pg-k:active { background: rgba(255,255,255,.3); }
.pin-gate .pg-k.borrar { background: transparent; font-size: 24px; }
.pin-gate .pg-pie { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.pin-gate .pg-link { background: none; border: 0; color: rgba(255,255,255,.75); font: inherit; font-size: 14px; text-decoration: underline; padding: 8px; cursor: pointer; }
.pin-gate .pg-form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.pin-gate .pg-form label { color: rgba(255,255,255,.85); }
.pin-gate .pg-form input { width: 100%; }
.pin-gate .pg-form .msg.error { color: #ffb4a9; }
@media (max-height: 640px) { .pin-gate .pg-k { width: 60px; height: 60px; font-size: 22px; } .pin-gate .pg-teclado { grid-template-columns: repeat(3, 60px); gap: 8px; } .pin-gate .pg-iso { display: none; } }
body .pin-gate h2 { color: #fff; }
body .pin-gate .pg-form label { color: rgba(255,255,255,.85); }

/* ===== Entrega 27: estilo «banco» para el vendedor (encabezado delgado, barra con el botón adentro, Inicio, Más, Cuenta) ===== */
body.vend { --acc: #7FD1E8; }
/* Encabezado: banda delgada con isotipo */
body.vend .vend-hdw, body.vend.oscuro .vend-hdw { border-radius: 0 0 18px 18px; }
body.vend .topbar.vend-hd, body.vend.oscuro .topbar.vend-hd { min-height: 0; height: auto; gap: 8px; border-radius: 0 0 18px 18px; padding: 8px max(14px, calc((100% - 980px) / 2 + 14px)) 10px; }
body.vend .vend-hd .iso { height: 24px; }
body.vend .vend-hd .hola b, body.vend.oscuro .vend-hd .hola b { font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
body.vend .vend-hd .vivo, body.vend.oscuro .vend-hd .vivo { display: none; }
body.vend .vend-hd .vend-upd, body.vend.oscuro .vend-hd .vend-upd, body.vend .vend-bell, body.vend.oscuro .vend-bell { width: 36px; height: 36px; min-height: 36px; }
body.vend .vend-avatar, body.vend.oscuro .vend-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; padding: 0; background: var(--acc); color: #0B1728; font: inherit; font-size: 12px; font-weight: 900; display: grid; place-items: center; cursor: pointer; }
body.vend .vend-avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Barra inferior: isla oscura, el botón Calificar va dentro */
body.vend .nav, body.vend.oscuro .nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 62px minmax(0, 1fr) minmax(0, 1fr); align-items: center; height: 62px; padding: 0 6px; border-radius: 999px; bottom: calc(12px + env(safe-area-inset-bottom)); }
body.vend .nav button, body.vend.oscuro .nav button { flex: none; width: 100%; max-width: none; height: 100%; min-width: 0; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 0; border-radius: 0; font-size: 10.5px; }
body.vend .nav button .l-sm { display: block; font-size: 10.5px; font-weight: 700; line-height: 1; }
body.vend .nav button .pill { width: 46px; height: 26px; border-radius: 13px; }
body.vend .nav button .pill svg { width: 21px; height: 21px; }
body.vend .nav .fab-cal, body.vend.oscuro .nav .fab-cal, body.vend:has(#pn .tray) .nav .fab-cal { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; transform: none; width: 46px; height: 46px; min-width: 0; padding: 0; justify-self: center; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; gap: 0; box-shadow: 0 4px 12px rgba(255, 102, 77, .45); }
body.vend .nav .fab-cal svg { width: 24px; height: 24px; }
body.vend .nav .fab-cal:active { transform: scale(.94); }
body.vend:has(.mp-sheet-w) .nav .fab-cal { display: grid; visibility: hidden; }
@media (min-width: 700px) { body.vend .nav .fab-cal { position: relative; right: auto; transform: none; } }
body.vend :is(#pn, .pk-lotes) .tray, body.vend.oscuro :is(#pn, .pk-lotes) .tray { bottom: calc(86px + env(safe-area-inset-bottom)); }
body.vend main { padding-bottom: 150px; }

/* Forma general: más redondeo; cerrar y volver en círculo con borde fino */
body.vend .card, body.vend .login-card { border-radius: 24px; }
.pedir-x, body.vend .pedir-x, body.vend.oscuro .pedir-x { width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 1.5px solid var(--line); color: var(--tx); }
body.vend .volver-fila .btn, body.vend .fr-volver { border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--tx); }
.redond { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--tx); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.redond svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.redond .ico { display: flex; }

/* Inicio */
.ini { display: grid; gap: 14px; padding-top: 14px; }
.ini-card { background: var(--surf); border-radius: 24px; padding: 16px; box-shadow: var(--shadow); }
.ini-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 2px 12px; }
.ini-sec b { font-size: 17px; font-weight: 900; letter-spacing: -.2px; }
.ini-sec small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ini-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ini-cifra { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background: var(--surf2); border: 0; border-radius: 20px; padding: 12px 6px; text-align: center; color: var(--tx); font: inherit; cursor: pointer; }
.ini-cifra b { display: block; font-size: 26px; line-height: 1; font-weight: 900; letter-spacing: -.5px; }
.ini-cifra span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; margin-top: 6px; line-height: 1.2; min-height: 2.4em; }
.ini-venc { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); font-weight: 600; }
.ini-venc b { color: var(--tx); }
.ini-venc .ico { display: flex; } .ini-venc svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ini-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ini-atajo { background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--tx); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.ini-atajo .c { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--surf2); color: var(--pri); display: grid; place-items: center; }
.ini-atajo .c .ico { display: flex; } .ini-atajo .c svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ini-atajo .n { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; border-radius: 999px; background: #E0505A; color: #fff; font-style: normal; font-size: 11px; font-weight: 900; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--surf); }
.ini-car { position: relative; border-radius: 28px; overflow: hidden; height: 250px; box-shadow: var(--shadow); background: #152032; }
.ini-car .sl { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s; }
.ini-car .sl.on { opacity: 1; pointer-events: auto; }
.ini-car .tono-a { background: linear-gradient(135deg, #152032, #2A5468); }
.ini-car .tono-b { background: linear-gradient(135deg, #122C75, #152032); }
.ini-car .tono-c { background: linear-gradient(135deg, #8A4B14, #2B1A10); }
.ini-car .gran { position: absolute; right: 20px; top: 30px; color: #fff; opacity: .16; }
.ini-car .gran .ico { display: flex; } .ini-car .gran svg { width: 84px; height: 84px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ini-car .segs { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; gap: 6px; z-index: 3; }
.ini-car .segs i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .4); overflow: hidden; cursor: pointer; }
.ini-car .segs i b { display: block; height: 100%; width: 0; background: #fff; }
.ini-car .segs i.hecho b { width: 100%; }
.ini-car .segs i.va b { animation: iniLleno 5.2s linear forwards; }
@keyframes iniLleno { to { width: 100%; } }
.ini-car .ov { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--surf); color: var(--tx); border-radius: 22px; padding: 14px 16px; }
.ini-car .ov b { display: block; font-size: 18px; line-height: 1.2; letter-spacing: -.3px; font-weight: 800; }
.ini-car .ov p { margin: 4px 0 10px; color: var(--muted); font-size: 13.5px; }
.ini-car .prog { height: 6px; border-radius: 6px; background: var(--surf2); margin: 0 0 12px; overflow: hidden; }
.ini-car .prog i { display: block; height: 100%; background: var(--pri); border-radius: 6px; }
.ini-tag { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 8px 8px 14px; background: var(--hdr); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
body.vend.oscuro .ini-tag { background: var(--acc); color: #0B1728; }
.ini-tag .ico { display: flex; } .ini-tag svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ini-franja { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 999px; padding: 10px 14px 10px 10px; background: linear-gradient(90deg, #FBE3A6, #F0B22E); color: #2B2208; font: inherit; font-weight: 700; font-size: 13.5px; line-height: 1.25; text-align: left; cursor: pointer; }
.ini-franja .ic { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .55); display: grid; place-items: center; flex: none; }
.ini-franja .tx { flex: 1; }
.ini-franja svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ini-franja .ico { display: flex; }
.ini-consejo { background: var(--hdr); color: #fff; border-radius: 28px; padding: 16px; }
.ini-consejo .who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .8); font-weight: 700; }
.ini-consejo .who .ico { display: flex; } .ini-consejo .who svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ini-frase { margin: 12px 0 14px; font-size: 20px; line-height: 1.22; letter-spacing: -.3px; font-weight: 800; color: #fff; }
.ini-frase em { font-style: normal; color: var(--acc); }
.ini-consejo .fant { display: flex; align-items: center; justify-content: center; width: 100%; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-weight: 800; font-size: 15px; padding: 13px; cursor: pointer; }
body.vend.oscuro .ini-consejo { background: #1B2739; }
@media (prefers-reduced-motion: reduce) { .ini-car .sl { transition: none; } }

/* Menú «Más» a pantalla completa */
.mas-full { position: fixed; inset: 0; z-index: 80; background: var(--bg); color: var(--tx); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mas-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: calc(12px + env(safe-area-inset-top)) 16px 10px; background: var(--bg); }
.mas-cab h2 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.3px; }
.mas-cuerpo { max-width: 520px; margin: 0 auto; padding: 4px 16px calc(32px + env(safe-area-inset-bottom)); }
.mas-full .tit { font-size: 12.5px; font-weight: 900; letter-spacing: .06em; margin: 20px 4px 6px; text-transform: uppercase; color: var(--tx); }
.mas-full .lista { background: var(--surf); border-radius: 24px; padding: 2px 16px; box-shadow: var(--shadow); }
.mas-full .fl { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--tx); font: inherit; font-size: 16px; font-weight: 500; text-align: left; cursor: pointer; }
.mas-full .fl:last-child { border-bottom: 0; }
.mas-full .fl > span:not(.ico):not(.bd):not(.estado) { flex: 1; min-width: 0; }
.mas-full .fl > .estado { margin-left: auto; }
.mas-full .fl > .bd, .mas-full .fl > .estado { flex: none; }
.mas-full .fl .ico { display: flex; flex: none; }
.mas-full .fl svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mas-full .fl > .ico:last-child svg { width: 18px; height: 18px; color: var(--muted); }
.mas-full .fl .sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 1px; }
.mas-full .fl .bd { background: #E0505A; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 900; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; }
.mas-full .fl .estado { color: var(--muted); font-size: 13px; font-weight: 600; }
.mas-perfil { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; border-radius: 24px; padding: 14px 16px; background: var(--surf); box-shadow: var(--shadow); color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.mas-perfil .qn { flex: 1; min-width: 0; display: grid; }
.mas-perfil .qn b { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mas-perfil .qn small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mas-perfil .ico { display: flex; } .mas-perfil svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.av-big { width: 48px; height: 48px; border-radius: 50%; background: var(--acc); color: #0B1728; display: grid; place-items: center; font-size: 17px; font-weight: 900; flex: none; }
body.vend .salir-pill, body.vend .btn.ghost.block.salir-pill { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 18px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--bad); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.salir-pill .ico { display: flex; } .salir-pill svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mas-version { text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0 4px; }

/* Mi cuenta (vendedor): tarjeta de perfil con iniciales */
body.vend .card.perfil { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; background: var(--surf2); box-shadow: none; }
body.vend .card.perfil .av-big { grid-row: 1 / span 5; width: 56px; height: 56px; font-size: 20px; align-self: start; }
body.vend .card.perfil .t { font-size: 18px; font-weight: 800; }

/* ===== Entrega 28: encabezado 4 (sin banda, botones oscuros), Clientes con resultado, pasos en vertical, resumen de la venta ===== */
body.vend { --btn: #152032; --btn-tx: #fff; --res-ok-bg: #DDF3E8; --res-ok-tx: #14513A; --res-mal-bg: #FDE3E4; --res-mal-tx: #7A1F27; --res-amb-bg: #FBE9BD; --res-amb-tx: #5C4000; }
body.vend.oscuro { --btn: #24344D; --res-ok-bg: #15342A; --res-ok-tx: #BDF0D6; --res-mal-bg: #3A1D21; --res-mal-tx: #FFC9CD; --res-amb-bg: #3B3115; --res-amb-tx: #F5D898; }
body.vend .vend-hdw, body.vend.oscuro .vend-hdw { background: var(--bg); box-shadow: none; border-radius: 0; filter: none; }
body.vend .topbar.vend-hd, body.vend.oscuro .topbar.vend-hd { background: var(--bg); color: var(--tx); border-radius: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px max(14px, calc((100% - 980px) / 2 + 14px)) 8px; }
.vend-persona { justify-self: start; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 3px 8px 3px 3px; background: var(--btn); color: var(--btn-tx); cursor: pointer; font: inherit; }
.vend-persona .av { width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: #0B1728; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.vend-persona .ico { display: flex; } .vend-persona svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vend-marca { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 13px; letter-spacing: -.1px; color: var(--tx); white-space: nowrap; }
body.vend .vend-hd .vend-marca .iso { height: 17px; }
body.vend .vend-hd .iso-c { display: block; } body.vend .vend-hd .iso-b { display: none; }
body.vend.oscuro .vend-hd .iso-c { display: none; } body.vend.oscuro .vend-hd .iso-b { display: block; }
.vend-marca .tag-demo { margin-left: 2px; }
.vend-acc { justify-self: end; display: flex; gap: 8px; }
body.vend .vend-hd .vend-upd, body.vend.oscuro .vend-hd .vend-upd, body.vend .vend-hd .vend-bell, body.vend.oscuro .vend-hd .vend-bell { background: var(--btn); color: var(--btn-tx); width: 36px; height: 36px; min-height: 36px; }
body.vend .vend-hd .vivo, body.vend.oscuro .vend-hd .vivo { display: none; }
.ini-saludo { font-size: 13.5px; color: var(--muted); font-weight: 700; margin: -2px 2px 10px; }
.ini-saludo b { color: var(--tx); font-size: 19px; letter-spacing: -.3px; }
body.vend .ini { padding-top: 6px; }

/* Clientes: resultado destacado */
.cl-res-w { margin-bottom: 12px; display: grid; gap: 10px; }
.cl-res { display: flex; gap: 14px; align-items: center; border-radius: 26px; padding: 16px; background: var(--res-ok-bg); color: var(--res-ok-tx); }
.cl-res.mal { background: var(--res-mal-bg); color: var(--res-mal-tx); }
.cl-res.amb { background: var(--res-amb-bg); color: var(--res-amb-tx); }
.cl-res-ic { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: #2FA971; color: #fff; }
.cl-res.mal .cl-res-ic { background: #D9475A; } .cl-res.amb .cl-res-ic { background: #D9962B; }
.cl-res-ic .ico { display: flex; } .cl-res-ic svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cl-res-tx { min-width: 0; display: grid; gap: 1px; }
.cl-res-tx small { font-size: 12px; font-weight: 700; opacity: .8; }
.cl-res-tx b { font-size: 21px; line-height: 1.15; font-weight: 900; letter-spacing: -.3px; color: inherit; }
.cl-res-tx span { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.cl-res-tx .quien { margin-top: 3px; font-weight: 600; }
body.vend .cl-res-btn { margin: 0; min-height: 54px; border-radius: 999px; font-size: 16px; font-weight: 800; background: var(--pri); color: var(--onp); }
/* Clientes: pestañas y lista con iniciales */
.cl-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 10px; border-bottom: 1px solid var(--line); }
.cl-tabs::-webkit-scrollbar { display: none; }
.cl-tabs button { flex: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 800; padding: 10px 12px; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.cl-tabs button[aria-selected="true"] { color: var(--tx); border-bottom-color: var(--pri); }
.cl-lista { padding: 4px 12px; }
.cl-item { border-bottom: 1px solid var(--line); } .cl-item:last-child { border-bottom: 0; }
.cl-fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.cl-av { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--cont); color: var(--oncont); display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.cl-nom { flex: 1; min-width: 0; display: grid; }
.cl-nom b { font-size: 15.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-nom small { color: var(--muted); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; background: var(--surf2); color: var(--muted); }
.cl-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cl-chip.ok { background: var(--res-ok-bg); color: var(--res-ok-tx); } .cl-chip.mal { background: var(--res-mal-bg); color: var(--res-mal-tx); } .cl-chip.amb { background: var(--res-amb-bg); color: var(--res-amb-tx); }
.cl-det { padding: 0 0 10px; }
.cl-det[hidden] { display: none; }
.cl-det .fila { border: 0; padding: 0; }
.cl-det .fila .t, .cl-det .fila .acciones .chip { display: none; }

/* Pasos de la venta en vertical (vendedor) */
body.vend .linea-wrap { margin: 0 0 14px; background: var(--surf); border-radius: 24px; padding: 16px 16px 2px; box-shadow: var(--shadow); }
body.vend ol.linea { display: block; overflow: visible; padding: 0; margin: 0; }
body.vend .linea-flecha { display: none !important; }
body.vend .paso, body.vend.oscuro .paso, body.vend .paso.alerta, body.vend.oscuro .paso.alerta, body.vend.oscuro .paso.cerrado, body.vend .paso.cerrado { flex: none; position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 0 0 16px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tx); }
body.vend .paso > :not(.pn) { grid-column: 2; }
body.vend .paso .pn { grid-column: 1; grid-row: 1 / span 5; width: 32px; height: 32px; font-size: 14px; z-index: 1; background: var(--surf); }
body.vend .paso::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
body.vend .paso:last-child::before { display: none; }
body.vend .paso b { font-size: 16px; line-height: 1.25; }
body.vend .paso .pd { font-size: 13px; }
body.vend .paso.hecho .pn { background: #2FA971; border-color: #2FA971; color: #fff; }
body.vend .paso.hecho::before { background: #2FA971; opacity: .5; }
body.vend .paso.actual .pn { background: var(--pri); border-color: var(--pri); color: var(--onp); box-shadow: none; }
body.vend .paso.actual .pd, body.vend .paso.alerta .pd { color: var(--res-txt); font-weight: 800; }
body.vend .paso.alerta .pn { background: #D9962B; border-color: #D9962B; color: #fff; }
body.vend .paso.cerrado .pn { background: #D9475A; border-color: #D9475A; color: #fff; }
body.vend .paso:not(.hecho):not(.actual):not(.alerta):not(.cerrado) .pn { background: var(--surf); border: 2px solid var(--line); color: var(--muted); }

/* Resumen de la venta (ficha oscura y secciones que se abren) */
.rv { display: grid; gap: 10px; margin-bottom: 14px; }
.rv-ficha { background: var(--hdr, #152032); color: #fff; border-radius: 28px; padding: 16px 16px 14px; display: grid; gap: 14px; }
body.vend.oscuro .rv-ficha { background: #1B2739; border: 1px solid rgba(255, 255, 255, .09); }
.rv-ficha .top { display: flex; gap: 12px; align-items: center; }
.rv-av { flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--acc, #7FD1E8); color: #0B1728; display: grid; place-items: center; font-weight: 900; font-size: 19px; }
.rv-ficha .top > div { min-width: 0; display: grid; justify-items: start; gap: 2px; }
.rv-ficha .top b { font-size: 17px; line-height: 1.15; color: #fff; overflow-wrap: anywhere; }
.rv-ficha .top small { color: rgba(255, 255, 255, .72); font-weight: 600; font-size: 13px; }
.rv-est { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; margin-top: 4px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .14); color: #fff; }
.rv-est i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rv-est.ok { background: rgba(111, 224, 163, .2); color: #7FE3AE; } .rv-est.mal { background: rgba(255, 138, 144, .2); color: #FF9AA0; } .rv-est.amb { background: rgba(245, 198, 90, .2); color: #F5C65A; }
.rv-accs { display: flex; gap: 8px; }
.rv-acc { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255, 255, 255, .12); color: #fff; border-radius: 16px; padding: 9px 4px; font-size: 11.5px; font-weight: 800; text-decoration: none; }
.rv-acc .ico { display: flex; } .rv-acc svg, .rv-go svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-chip { background: rgba(255, 255, 255, .12); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 800; }
.rv-chip.p { background: var(--acc, #7FD1E8); color: #0B1728; }
.rv-ac { background: var(--surf); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.rv-ac > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: none; color: var(--tx); font: inherit; font-weight: 800; font-size: 15px; text-align: left; cursor: pointer; }
.rv-ac > button .ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surf2); color: var(--pri); display: grid; place-items: center; }
.rv-ac > button .ico { display: flex; } .rv-ac > button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rv-ac > button .res { flex: 1; min-width: 0; display: grid; }
.rv-ac > button .res small { color: var(--muted); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-ac.on > button .res small { display: none; }
.rv-ac > button > .ico:last-child { color: var(--muted); transition: transform .2s; } .rv-ac > button > .ico:last-child svg { width: 18px; height: 18px; }
.rv-ac.on > button > .ico:last-child { transform: rotate(90deg); }
.rv-ac .cu { display: none; padding: 0 16px 10px; } .rv-ac.on .cu { display: block; }
.rv-f { padding: 9px 0; border-bottom: 1px solid var(--line); }
.rv-f span, .rv-ln span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.rv-f b { display: block; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.rv-g { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rv-ln { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rv-ln > div { flex: 1; min-width: 0; }
.rv-ln b { display: block; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.rv-ln small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.rv-go { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--pri); }
.rv-go .ico { display: flex; }

/* ===== Entrega 29: cliente listo que titila, fotos institucionales, cédula sin puntos + Copiar ===== */
body.vend { --late: 47, 169, 113; }
.ini-listos { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; border-radius: 26px; padding: 14px 16px 14px 14px; background: var(--res-ok-bg); color: var(--res-ok-tx); font: inherit; text-align: left; cursor: pointer; position: relative; animation: iniLate 1.9s ease-out infinite; }
.ini-listos .ini-lc { flex: none; width: 52px; height: 52px; border-radius: 17px; background: #2FA971; color: #fff; display: grid; place-items: center; animation: iniLatePop 1.9s ease-in-out infinite; }
.ini-listos .ini-lc .ico { display: flex; } .ini-listos .ini-lc svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ini-listos .ini-lt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ini-listos .ini-lt b { font-size: 17px; line-height: 1.2; font-weight: 900; letter-spacing: -.2px; color: inherit; }
.ini-listos .ini-lt small { font-size: 12.5px; font-weight: 700; opacity: .85; overflow-wrap: anywhere; }
.ini-listos > .ico { display: flex; flex: none; } .ini-listos > .ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ini-atajo.late .c { animation: iniLateC 1.9s ease-out infinite; background: rgba(var(--late), .2); color: #2FA971; }
@keyframes iniLate { 0% { box-shadow: 0 0 0 0 rgba(var(--late), .55); } 70% { box-shadow: 0 0 0 14px rgba(var(--late), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--late), 0); } }
@keyframes iniLateC { 0% { box-shadow: 0 0 0 0 rgba(var(--late), .6); } 70% { box-shadow: 0 0 0 11px rgba(var(--late), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--late), 0); } }
@keyframes iniLatePop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) {
  .ini-listos, .ini-listos .ini-lc, .ini-atajo.late .c { animation: none; }
  .ini-listos { outline: 3px solid #2FA971; outline-offset: -3px; }
  .ini-atajo.late .c { outline: 3px solid #2FA971; }
}

/* Carrusel con fotos */
.ini-car .sl.foto { background: #152032; }
.ini-car .sl.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ini-car .sl.foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .6) 100%); pointer-events: none; }
.ini-car .sl.foto .cap { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; color: #fff; display: grid; gap: 2px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.ini-car .sl.foto .cap b { font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.3px; }
.ini-car .sl.foto .cap span { font-size: 13.5px; font-weight: 600; opacity: .95; }
.ini-car .sl.foto.sin-foto { background: linear-gradient(135deg, #152032, #2A5468); }
.ini-car .sl.foto.sin-foto img { display: none; }

/* Cédula sin puntos con botoncito «Copiar» */
.campo-copia { position: relative; }
.campo-copia input { padding-right: 78px; width: 100%; }
.campo-copia .copiar-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.copiar-btn { border: 1.5px solid var(--line, #d5dde3); background: var(--surf2, #eef3f6); color: var(--pri, #16348A); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 800; line-height: 1.2; cursor: pointer; vertical-align: middle; }
.copiar-btn:active { transform: scale(.96); }
.campo-copia .copiar-btn:active { transform: translateY(-50%) scale(.96); }
.cl-res-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cl-res .copiar-btn { background: rgba(255, 255, 255, .55); color: inherit; border-color: rgba(0, 0, 0, .15); }
body.vend.oscuro .cl-res .copiar-btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.kv-copia { display: inline-flex; align-items: center; gap: 8px; }

/* ===== Entrega 30: Inicio «lo que sigue», cuántos lotes compra, indicador de carga ===== */
.ini-hola { font-size: 15px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.ini-hola b { color: var(--tx); font-weight: 900; font-size: 17px; }
.ini-hero { display: grid; gap: 8px; border-radius: 28px; padding: 18px; color: #fff; background: linear-gradient(135deg, #122C75, #152032); box-shadow: var(--shadow); }
.ini-hero small { opacity: .8; font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.ini-hero b { font-size: 22px; line-height: 1.15; font-weight: 900; letter-spacing: -.3px; overflow-wrap: anywhere; }
.ini-hero > span { opacity: .88; font-size: 14px; font-weight: 600; }
.ini-go { margin-top: 4px; width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: #FF5A45; color: #fff; font: inherit; font-size: 16.5px; font-weight: 900; cursor: pointer; }
.ini-go.late { animation: iniLateCor 1.9s ease-out infinite; }
.ini-mas { margin-top: 2px; align-self: start; background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 999px; padding: 8px 12px 8px 14px; font: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ini-mas .ico { display: flex; } .ini-mas svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ini-c3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ini-c3 .ini-cifra { background: var(--surf); box-shadow: var(--shadow); }
.ini-c3 .ini-cifra.on { background: var(--res-ok-bg); color: var(--res-ok-tx); }
.ini-c3 .ini-cifra.on span { color: var(--res-ok-tx); }
.ini-a3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ini-acc { background: var(--surf); border: 0; border-radius: 22px; padding: 14px 4px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--tx); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow); }
.ini-acc .c { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--surf2); color: var(--pri); display: grid; place-items: center; }
.ini-acc .c .ico { display: flex; } .ini-acc .c svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ini-acc .n { position: absolute; top: -4px; right: -6px; min-width: 22px; height: 22px; border-radius: 999px; background: #E0505A; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 900; display: grid; place-items: center; padding: 0 6px; border: 2px solid var(--surf); }
.ini-acc .n.late { background: #2FA971; } .ini-acc .n.info { background: var(--pri); color: var(--onp); }
.ini-acc.late .c { background: rgba(var(--late), .2); color: #2FA971; animation: iniLateC 1.9s ease-out infinite; }
.ini-car.fotos { height: 200px; }
@keyframes iniLateCor { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 69, .65); } 70% { box-shadow: 0 0 0 14px rgba(255, 90, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 69, 0); } }
@media (prefers-reduced-motion: reduce) { .ini-go.late, .ini-acc.late .c { animation: none; } .ini-go.late { outline: 3px solid #fff; outline-offset: 2px; } .ini-acc.late .c { outline: 3px solid #2FA971; } }

/* Cuántos lotes compra / con cuál sigue */
.cant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.cant-op { border: 2px solid var(--line); background: var(--surf); color: var(--tx); border-radius: 18px; padding: 14px 8px; font: inherit; text-align: center; cursor: pointer; display: grid; gap: 2px; }
.cant-op b { font-size: 18px; font-weight: 900; } .cant-op small { color: var(--muted); font-size: 12px; font-weight: 600; }
.cant-op.sel { border-color: var(--pri); background: var(--cont); color: var(--oncont); }
.cant-op.sel small { color: inherit; opacity: .8; }
.cual { display: grid; gap: 8px; margin: 6px 0 10px; }
.cual-op { display: flex; align-items: center; gap: 12px; border: 2px solid var(--line); background: var(--surf); color: var(--tx); border-radius: 18px; padding: 12px; font: inherit; text-align: left; cursor: pointer; }
.cual-op .rd { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); }
.cual-op .qt { display: grid; gap: 1px; min-width: 0; } .cual-op b { font-size: 15px; font-weight: 800; } .cual-op small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.cual-op.sel { border-color: var(--pri); background: var(--cont); color: var(--oncont); }
.cual-op.sel .rd { border-color: var(--pri); background: radial-gradient(var(--pri) 45%, transparent 50%); }
.aviso-lib { background: #FBEFD2; color: #5E3E00; border-radius: 14px; padding: 10px 12px; font-weight: 700; font-size: 13px; }
.mv-ocupado { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 3000; display: flex; align-items: center; gap: 10px; background: #152032; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.mv-ocupado i { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: mvGira .8s linear infinite; }
@keyframes mvGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mv-ocupado i { animation-duration: 2.4s; } }
.snd { display: grid; gap: 10px; margin: 6px 0 12px; }
.sw-fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; border: 0; background: var(--surf2, #eef3f6); color: var(--tx, inherit); border-radius: 18px; padding: 13px 14px; font: inherit; text-align: left; cursor: pointer; }
.sw-fila .sw-tx { display: grid; gap: 2px; } .sw-fila b { font-size: 15px; font-weight: 800; } .sw-fila small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.sw-tg { flex: none; width: 46px; height: 28px; border-radius: 999px; background: #B7C3CC; position: relative; transition: background .2s; }
.sw-tg::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sw-fila.on .sw-tg { background: #2FA971; } .sw-fila.on .sw-tg::after { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .sw-tg, .sw-tg::after { transition: none; } }

/* Entrega 31 — Escrituración: cargar la planilla en modo «actualizar» */
.esc-actualizar { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line, #d8dde2); border-radius: 12px; cursor: pointer; }
.esc-actualizar input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.esc-actualizar span { display: grid; gap: 2px; } .esc-actualizar small { color: var(--muted, #6b7782); font-weight: 600; font-size: 12.5px; }

/* ===== Entrega 32: Administración y Gerencia con el estilo del vendedor; acuerdo en el paso 9 ===== */
.asist-card .acuerdo-card { margin-top: 16px; }
.asist-card .docs-interno[hidden] { display: none; }

/* Inicio de Administración */
.adm-hola { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.adm-hola .adm-fecha { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
.adm-arriba { display: grid; gap: 14px; margin-bottom: 14px; }
@media (min-width: 900px) { .adm-arriba { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; } }
.adm-hero, .ger-frase { display: grid; gap: 8px; border-radius: 28px; padding: 20px; color: #fff; background: linear-gradient(135deg, #122C75, #142236); box-shadow: var(--shadow); align-content: center; }
.adm-hero small, .ger-frase small { opacity: .8; font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.adm-hero b, .ger-frase b { font-size: 24px; line-height: 1.15; font-weight: 900; letter-spacing: -.3px; overflow-wrap: anywhere; }
.adm-hero > span, .ger-frase > span { opacity: .9; font-size: 14.5px; font-weight: 600; }
.adm-hero.rojo { background: linear-gradient(135deg, #B8404A, #142236); }
.adm-hero.amar { background: linear-gradient(135deg, #B07A12, #142236); }
.adm-hero.ok { background: linear-gradient(135deg, #2B8A62, #142236); }
.adm-go { margin-top: 6px; justify-self: start; min-height: 50px; padding: 0 28px; border: 0; border-radius: 999px; background: #FF664D; color: #fff; font: inherit; font-size: 16.5px; font-weight: 900; cursor: pointer; }
.adm-go:hover { background: #F2563C; }
.adm-a3 .ini-acc .n.amar { background: #D99A1E; }
.kpi.cif { border-top-width: 5px; }
.kpi.cif-ok { border-top-color: #2FA971; } .kpi.cif-ok b { color: #1E7A53; }
.kpi.cif-amar { border-top-color: #E0A526; } .kpi.cif-amar b { color: #8A5E00; }
.kpi.cif-rojo { border-top-color: #E0505A; } .kpi.cif-rojo b { color: #B3261E; }
.kpi.cif-neutro { border-top-color: #16348A; }

/* Inicio de Gerencia (sin avisos que laten) */
.ger-frase.baja { background: linear-gradient(135deg, #6C4A86, #142236); }
.rk-barras { display: grid; gap: 12px; }
.rk-fila { display: flex; align-items: center; gap: 12px; }
.rk-pos { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surf2, #EAF1F7); font-weight: 900; font-size: 13px; display: grid; place-items: center; color: var(--muted); }
.rk-fila:first-child .rk-pos { background: #FF664D; color: #fff; }
.rk-cuerpo { flex: 1; min-width: 0; display: grid; gap: 5px; }
.rk-nom { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .rk-nom span { color: var(--muted); font-weight: 700; font-size: 13px; }
.rk-barra { height: 10px; border-radius: 999px; background: #E3EBF3; overflow: hidden; } .rk-barra i { display: block; height: 100%; border-radius: 999px; background: #16348A; }
.rk-fila:first-child .rk-barra i { background: #FF664D; }

/* Calificaciones: ya verificada, botones grandes */
.chip.ya-verif { background: #DDEFF5; color: #0B5F78; font-weight: 800; }
.ya-verif-caja { display: grid; gap: 3px; border-radius: 14px; padding: 12px 14px; margin: 6px 0 10px; background: #E3F1F6; color: #0B4F63; border-left: 5px solid #16348A; font-size: 13.5px; }
.ya-verif-caja b { font-size: 15px; font-weight: 900; }
.ya-verif-caja.no_califica { background: #FBE6E8; color: #7D2029; border-left-color: #E0505A; }
.detalle .resp-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detalle .resp-botones .btn { min-height: 54px; font-size: 16px; font-weight: 900; border-radius: 999px; }
.detalle .resp-botones .btn.ghost { grid-column: 1 / -1; min-height: 44px; font-size: 14.5px; }

/* Ventas para revisar */
.vr-bloque { margin-bottom: 18px; }
.vr-bloque h3 { margin: 0 0 10px; }
.vr-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.vr-card { display: grid; gap: 8px; background: var(--surf); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); border-top: 5px solid #16348A; align-content: start; }
.vr-card.nueva { border-top-color: #FF664D; }
.vr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .vr-top b { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.vr-lote { font-weight: 800; font-size: 14px; }
.vr-barra { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } .vr-barra i { height: 7px; border-radius: 999px; background: #D8E2EF; }
.vr-barra i.on { background: #16348A; } .vr-barra i.cur { background: #9FD6E4; }
.vr-falta { display: grid; gap: 1px; font-size: 13px; } .vr-falta span { color: var(--muted); font-weight: 700; font-size: 12px; } .vr-falta b { font-weight: 800; }
.vr-go { width: 100%; min-height: 46px; border-radius: 999px; font-weight: 900; margin-top: 2px; }

/* ===== Entrega 33: buscador de lote en 2 toques y «Mis reservas» ===== */
.ini-q-w { position: relative; display: grid; gap: 6px; }
.ini-q-ic { position: absolute; left: 14px; top: 14px; width: 22px; height: 22px; color: #16348A; pointer-events: none; display: flex; }
.ini-q-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
input.ini-q { width: 100%; min-height: 50px; border-radius: 999px; border: 2px solid #CFE0EA; background: #fff; padding: 0 18px 0 46px; font: inherit; font-size: 16px; font-weight: 700; color: var(--tx); box-shadow: var(--shadow); }
input.ini-q:focus { outline: none; border-color: #16348A; box-shadow: 0 0 0 4px rgba(11, 143, 174, .18); }
.ini-q-res { display: grid; gap: 6px; background: #fff; border-radius: 20px; padding: 8px; box-shadow: var(--shadow); }
.ini-q-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 54px; border: 0; border-radius: 14px; padding: 8px 12px; background: #F2F7FA; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.ini-q-fila:active { background: #DDEFF5; }
.ini-q-fila > span:first-child, .ini-q-fila > b { display: grid; gap: 1px; min-width: 0; }
.ini-q-fila b { font-size: 15.5px; font-weight: 900; }
.ini-q-fila .mas { font-size: 12.5px; }
.ini-q-fila .chip { flex: none; }
.ini-q-vacio { padding: 12px; font-size: 13.5px; color: var(--muted); font-weight: 700; }

.ini-franja.ini-res { background: linear-gradient(90deg, #D4EEE0, #8FD3AE); color: #0F3A27; }
.ini-franja.ini-res.urge { background: linear-gradient(90deg, #FBD3D6, #EE8A92); color: #5A1219; }

.rsv-pag { display: grid; gap: 14px; }
.rsv-info { margin: 0; }
.rsv-lista { display: grid; gap: 14px; }
.rsv { display: grid; gap: 10px; background: var(--surf); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); border-top: 6px solid #2FA971; }
.rsv-amar { border-top-color: #E0A526; }
.rsv-rojo { border-top-color: #E0505A; }
.rsv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.rsv-top > div { display: grid; gap: 1px; min-width: 0; }
.rsv-lote { font-size: 18px; font-weight: 900; }
.rsv-tono { flex: none; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 900; background: #DDF3E8; color: #0F5A38; }
.rsv-amar .rsv-tono { background: #FBEBC4; color: #6B4A06; }
.rsv-rojo .rsv-tono { background: #FBDADD; color: #8A1B25; }
.rsv-reloj { display: grid; gap: 1px; }
.rsv-reloj small { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rsv-cuenta { font-size: 34px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; color: #0F6B43; }
.rsv-amar .rsv-cuenta { color: #8A5E06; }
.rsv-rojo .rsv-cuenta { color: #B3202C; }
.rsv-barra { height: 8px; border-radius: 999px; background: #E3EBF3; overflow: hidden; }
.rsv-barra i { display: block; height: 100%; border-radius: 999px; background: #2FA971; }
.rsv-amar .rsv-barra i { background: #E0A526; }
.rsv-rojo .rsv-barra i { background: #E0505A; }
.rsv-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rsv-acc .btn { min-height: 46px; border-radius: 999px; font-weight: 900; }
.rsv-vacio { text-align: center; display: grid; gap: 8px; padding: 22px 16px; }

/* ===== Entrega 34: ficha de gestión (Escrituración y Fidelización): franja, categorías que se contraen, botones con íconos ===== */
.gx-ctc { gap: 10px; }
.gx-ctc .gx-ib { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 14px; }
.gx-ctc .gx-ib .ico, .gx-ctc .gx-ib svg { width: 22px; height: 22px; }
.gx-ctc .gx-ib.wa:hover, .gx-ctc .gx-ib.wa:focus-visible { background: #17984e; }
.gx-ctc .gx-ib.off { opacity: .45; }
.gx-ladoin > .gx-bl { display: grid; gap: 10px; align-content: start; }
.gx-fr { display: grid; gap: 10px; border-radius: 18px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, #122C75, #142236); box-shadow: var(--shadow); }
.gx-fr.falta { background: linear-gradient(135deg, #C74A38, #142236); }
.gx-fr-t small { display: block; font-size: 11.5px; letter-spacing: .07em; font-weight: 800; opacity: .85; }
.gx-fr-t b { display: block; font-size: 25px; line-height: 1.15; font-weight: 900; letter-spacing: -.3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gx-fr.falta .gx-fr-t b { font-size: 18px; letter-spacing: 0; }
.gx-fr-b { justify-self: start; border: 0; border-radius: 999px; background: #FF664D; color: #fff; font: inherit; font-weight: 800; font-size: 13.5px; padding: 10px 18px; min-height: 40px; cursor: pointer; }
.gx-fr-l { display: grid; gap: 4px; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 8px; font-size: 13px; }
.gx-fr-l > div { display: flex; justify-content: space-between; gap: 12px; } .gx-fr-l span { opacity: .85; min-width: 0; overflow-wrap: anywhere; } .gx-fr-l b { flex: none; } .gx-fr-l b.falta { color: #FFD2C9; }
details.gx-ac { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
details.gx-ac > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; padding: 11px 12px; min-height: 56px; }
details.gx-ac > summary::-webkit-details-marker { display: none; }
details.gx-ac > summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.gx-ac-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--surf2, #EAF1F7); color: #16348A; display: grid; place-items: center; }
.gx-ac-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gx-ac-t { min-width: 0; display: grid; gap: 1px; } .gx-ac-t b { font-size: 14.5px; font-weight: 800; }
.gx-ac-r { color: var(--muted); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.gx-ac > summary .chip { font-size: 11.5px; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.gx-ac-f { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
details.gx-ac[open] > summary .gx-ac-f { transform: rotate(-135deg); }
details.gx-ac[open] > summary { border-bottom: 1px solid var(--line); }
.gx-ac-b { padding: 4px 12px 10px; }
.gx-ac-b > .fid-compras { margin-top: 6px; }

/* ===== Entrega 34: «Mi mes» y WhatsApp con mensaje armado ===== */
.cl-wa { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #0F6B43; border-color: #8FD3AE; }
.cl-wa svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-pag { display: grid; gap: 14px; }
.mm-cab { border-radius: 24px; padding: 18px; color: #fff; background: linear-gradient(135deg, #122C75, #152032); box-shadow: var(--shadow); display: grid; gap: 4px; }
.mm-cab small { font-size: 12px; font-weight: 800; letter-spacing: .08em; opacity: .85; }
.mm-cab h2 { margin: 0; color: #fff; font-size: 26px; font-weight: 900; }
.mm-cab p { margin: 4px 0 0; font-size: 15px; line-height: 1.35; opacity: .95; }
.mm-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-c { background: var(--surf); border-radius: 20px; padding: 14px 16px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.mm-c b { font-size: 32px; line-height: 1.05; font-weight: 900; font-variant-numeric: tabular-nums; }
.mm-c span { font-size: 13px; font-weight: 700; color: var(--muted); }
.mm-c.prin { background: #FF664D; } .mm-c.prin b, .mm-c.prin span { color: #fff; }
.mm-bl { display: grid; gap: 10px; margin: 0; }
.mm-bl h3 { margin: 0; font-size: 16px; font-weight: 900; }
.mm-barras { display: flex; align-items: flex-end; gap: 12px; height: 140px; padding-top: 8px; }
.mm-b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.mm-b i { display: block; width: 100%; max-width: 54px; border-radius: 10px 10px 4px 4px; background: #9FD6E4; }
.mm-b.hoy i { background: #16348A; }
.mm-n { font-size: 14px; font-weight: 900; } .mm-b small { font-size: 12px; font-weight: 700; color: var(--muted); }
.mm-cmp { display: grid; gap: 2px; }
.mm-cmp > div, .mm-ir { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; }
.mm-cmp > :first-child { border-top: 0; }
.mm-cmp span { color: var(--muted); font-weight: 600; font-size: 14px; } .mm-cmp b { font-size: 15px; font-weight: 900; }
.mm-ir { cursor: pointer; min-height: 48px; }
.cl-wa.block { display: flex; justify-content: center; min-height: 48px; border-radius: 999px; font-weight: 800; margin-top: 8px; }

/* ===== Desistir / cancelar (cliente apto sin venta y venta en curso) ===== */
.ini-extras { display: grid; gap: 4px; }
.ini-desiste { border: 0; background: none; color: rgba(255, 255, 255, .82); font: inherit; font-weight: 700; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; cursor: pointer; text-align: center; }
.btn.danger-txt { color: #B3202C; border-color: #E8A9AF; }

/* ===== Entrega 35: depósito de la seña en efectivo ===== */
.chip.dc-espera { background: var(--warn-bg); color: var(--res-txt); }
.chip.chip-dep-venc { background: var(--bad-bg); color: var(--bad); }
body.vend.oscuro .chip.chip-dep-venc { background: rgba(222, 111, 91, .22); color: #F6BBAE; }
.efectivo > .mas { margin: 6px 0 0; }
.venta-detalle .cab-top { flex-wrap: wrap; justify-content: flex-start; }
.venta-detalle .cab-top h2 { flex: 1 1 100%; margin: 0; }


/* ===== Entrega 36: estética más limpia (mismos colores y menú): aviso superior, atajos, cifras, tarjetas ===== */
.ini-aviso { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 560px; z-index: 90; box-sizing: border-box; padding: calc(18px + env(safe-area-inset-top, 0px)) 24px 14px; border-radius: 0 0 26px 26px; color: #fff; text-align: center; display: grid; justify-items: center; gap: 6px; box-shadow: 0 10px 24px rgba(24, 34, 46, .3); animation: avEntra .28s ease-out; transition: transform .22s ease, opacity .22s ease; }
.ini-aviso.ver { background: #247F52; } .ini-aviso.roj { background: #B3262F; } .ini-aviso.amar { background: #F5B942; color: #152032; }
.ini-aviso.sale { transform: translate(-50%, -110%); opacity: 0; }
.ini-av-x { position: absolute; top: calc(6px + env(safe-area-inset-top, 0px)); right: 6px; width: 44px; height: 44px; border: 0; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ini-av-x svg, .ini-av-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ini-av-x .ico, .ini-av-ic .ico { display: flex; }
.ini-av-ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #1C6A43; display: grid; place-items: center; }
.ini-aviso.roj .ini-av-ic { color: #B3262F; } .ini-aviso.amar .ini-av-ic { background: #152032; color: #fff; }
.ini-aviso b { font-size: 20px; line-height: 1.2; font-weight: 900; letter-spacing: -.2px; }
.ini-av-s { font-size: 13px; line-height: 1.35; font-weight: 600; max-width: 290px; }
.ini-av-go { margin-top: 4px; min-height: 44px; padding: 0 28px; border: 0; border-radius: 999px; background: #fff; color: #1C6A43; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.ini-aviso.roj .ini-av-go { color: #B3262F; } .ini-aviso.amar .ini-av-go { background: #152032; color: #fff; }
.ini-av-mas { min-height: 44px; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-bottom: -10px; }
.ini-av-asa { width: 44px; height: 5px; border-radius: 3px; background: currentColor; opacity: .4; margin-top: 2px; }
.ini-aviso-esp { height: 0; }
@keyframes avEntra { from { transform: translate(-50%, -100%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ini-aviso { animation: none; transition: none; } }

/* «Lo que sigue»: tarjeta clara con un solo botón principal */
.ini-hero { background: var(--surf); color: var(--tx); border: 1px solid var(--line); box-shadow: none; border-radius: 20px; padding: 16px; }
.ini-hero small { color: var(--pri); opacity: 1; letter-spacing: .1em; }
.ini-hero b { font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.ini-hero > span { opacity: 1; color: var(--muted); font-size: 13px; font-weight: 600; }
.ini-go { background: var(--pri); color: var(--onp); border-radius: 14px; min-height: 50px; font-size: 16px; font-weight: 700; }
.ini-go.late { animation: none; }
.ini-mas { background: var(--surf2); color: var(--tx); }
.ini-desiste { color: var(--muted); }
/* Cifras: una sola tarjeta con divisores */
.ini-c3 { gap: 0; background: var(--surf); border: 1px solid var(--line); border-radius: 18px; padding: 10px 0; }
.ini-c3 .ini-cifra, .ini-c3 .ini-cifra.on { background: none; box-shadow: none; border-radius: 0; padding: 4px 6px; color: var(--tx); }
.ini-c3 .ini-cifra + .ini-cifra { border-left: 1px solid var(--line); }
.ini-c3 .ini-cifra b { font-size: 24px; font-weight: 800; }
.ini-c3 .ini-cifra.on b { color: var(--pri); } .ini-c3 .ini-cifra.on span { color: var(--tx); }
.ini-c3 .ini-cifra span { min-height: 0; margin-top: 4px; font-size: 12px; }
/* Atajos: círculo con ícono y el nombre abajo, en una sola tarjeta */
.ini-a4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--surf); border: 1px solid var(--line); border-radius: 20px; padding: 22px 4px 10px; }
.ini-a4 .ini-acc { position: relative; background: none; box-shadow: none; border-radius: 14px; padding: 4px 0 2px; min-width: 0; }
.ini-a4 .ini-acc .c { width: 58px; height: 58px; background: var(--pri); color: var(--onp); }
.ini-a4 .ini-acc.late .c { color: #fff; }
.ini-a4 .ini-acc .l { font-size: 13px; line-height: 1.2; text-align: center; font-weight: 700; }
.ini-a4 .ini-acc .n { border-color: var(--surf); }
.ini-acc .nuevo { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #FF8A3D; color: #152032; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }

/* Mis clientes: tarjeta de resultado plegable (se abre con un toque) y acciones dentro */
.cl-res { flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: 24px; overflow: hidden; }
.cl-res-cab { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 14px 14px 14px 16px; cursor: pointer; min-height: 64px; }
.cl-res-cab:focus-visible { outline: 3px solid var(--pri); outline-offset: -3px; border-radius: 24px; }
.cl-res-cab .cl-res-ic { width: 48px; height: 48px; border-radius: 15px; } .cl-res-cab .cl-res-ic svg { width: 26px; height: 26px; }
.cl-res-cab .cl-res-tx { flex: 1; } .cl-res-cab .cl-res-tx b { font-size: 19px; }
.cl-res.abierta .cl-res-cab { padding-top: 16px; } .cl-res.abierta .cl-res-cab .cl-res-ic { width: 58px; height: 58px; border-radius: 18px; } .cl-res.abierta .cl-res-cab .cl-res-ic svg { width: 32px; height: 32px; }
.cl-res.abierta .cl-res-cab .cl-res-tx b { font-size: 21px; }
.cl-res-fl { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .6); display: grid; place-items: center; transition: transform .2s; }
body.vend.oscuro .cl-res-fl { background: rgba(255, 255, 255, .14); }
.cl-res-fl .ico { display: flex; } .cl-res-fl svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
.cl-res.abierta .cl-res-fl svg { transform: rotate(-90deg); }
.cl-res-nom { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.cl-res-det { display: grid; gap: 4px; padding: 0 16px 16px 16px; }
.cl-res-det[hidden] { display: none; }
.cl-res-det > span { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-res-det .quien { font-weight: 600; opacity: .8; font-size: 12px; }
.cl-res-acc { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.cl-res-acc .cl-res-btn { flex: 1; min-height: 48px; border-radius: 14px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cl-wa-ic { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; }
.cl-wa-ic svg { width: 26px; height: 26px; }
.cl-res-desiste { margin-top: 2px; min-height: 44px; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Mis ventas: pestañas con subrayado en vez de píldoras */
body.vend .chips[role="tablist"] { gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.vend .chips[role="tablist"]::-webkit-scrollbar { display: none; }
body.vend .chips[role="tablist"] .chip-fr, body.vend .chips[role="tablist"] .chip-fr[aria-selected="true"] { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 12px; min-height: 44px; margin-bottom: -1px; color: var(--muted); font-weight: 700; font-size: 14px; white-space: nowrap; }
body.vend .chips[role="tablist"] .chip-fr[aria-selected="true"] { color: var(--pri); font-weight: 800; border-bottom-color: var(--pri); }
/* Tarjetas con borde fino y sin sombra fuerte */
body.vend .card { box-shadow: none; }

/* ===== Entrega 36 · Administración, Gerencia, Escrituración y Soporte: la misma limpieza (sin tocar colores ni el menú) ===== */
/* Filtros de listas: pestañas con subrayado en vez de píldoras (la selección Lista/Planilla y los filtros de color quedan como están) */
body.bo .md-lista > .tabs, body.bo .tabs[aria-label="Filtrar ventas"] { gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); align-items: flex-end; }
body.bo .md-lista > .tabs .tabbtn:not(.est), body.bo .tabs[aria-label="Filtrar ventas"] .tabbtn:not(.est) { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 9px; min-height: 42px; margin-bottom: -1px; color: var(--muted); font-weight: 700; font-size: 13px; }
body.bo .md-lista > .tabs .tabbtn:not(.est)[aria-pressed="true"], body.bo .tabs[aria-label="Filtrar ventas"] .tabbtn:not(.est)[aria-pressed="true"] { background: none; color: var(--tx); font-weight: 800; border-bottom-color: #16348A; }
/* Tarjetas con borde fino y sombra suave */
body.bo .card, body.bo .md-lista, body.bo .md-det { border: 1px solid var(--line); box-shadow: none; }
/* Jerarquía de botones: el principal lleno, el secundario con borde, el terciario como texto */
body.bo .btn.ghost { background: var(--surf); color: #16348A; border: 1.5px solid #16348A; }
body.bo .btn.ghost:hover { background: rgba(11, 110, 138, .08); }
body.bo .btn.ghost.danger-txt, body.bo .btn.ghost.danger { color: var(--bad); border-color: rgba(179, 38, 47, .45); }

/* Consejo del día: misma estética limpia (tarjeta clara, borde fino, botón secundario) */
.ini-consejo { background: var(--surf); color: var(--tx); border: 1px solid var(--line); border-radius: 20px; padding: 16px; }
.ini-consejo .who { color: var(--pri); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ini-frase { margin: 10px 0 12px; font-size: 18px; line-height: 1.3; letter-spacing: -.2px; font-weight: 800; color: var(--tx); }
.ini-frase em { color: var(--pri); }
.ini-consejo .fant { background: var(--surf); color: var(--pri); border: 1.5px solid var(--pri); border-radius: 14px; min-height: 44px; font-size: 14px; font-weight: 700; }
body.vend.oscuro .ini-consejo { background: var(--surf); }
/* Franjas de aviso del Inicio: planas, sin degradé */
.ini-franja { background: var(--res-amb-bg); color: var(--res-amb-tx); border-radius: 16px; min-height: 52px; }
.ini-franja .ic { background: rgba(255, 255, 255, .6); }
.ini-franja.ini-res { background: var(--res-ok-bg); color: var(--res-ok-tx); }
.ini-franja.ini-res.urge { background: var(--res-mal-bg); color: var(--res-mal-tx); }

/* ===== Entrega 37 ===== */
/* Clientes: una tarjeta de color por cliente dentro de cada pestaña; se abre al tocarla. */
.cl-lista { display: grid; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; }
.cl-res.gris { background: var(--surf2); color: var(--muted); }
.cl-res.gris .cl-res-ic { background: #8693A0; }
.cl-res-cab .cl-res-tx b { font-size: 17px; overflow-wrap: anywhere; }
.cl-res-cab .cl-res-nom { font-size: 13px; font-weight: 700; opacity: .9; }
.cl-res.abierta .cl-res-cab .cl-res-tx b { font-size: 18px; }
/* Loteamientos: cuadros chicos, dos por fila (tres en pantallas anchas). */
.fr-grid.chicos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .fr-grid.chicos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fr-chico { padding: 14px 12px; gap: 4px; border-radius: 18px; min-width: 0; }
.fr-chico h3 { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; }
.fr-chico .mas { font-size: 12px; }
.fr-cod { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--pri); background: var(--surf2); border-radius: 999px; padding: 3px 9px; margin-bottom: 4px; }
.fr-chico .fr-libres { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.fr-chico .fr-libres b { font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.5px; }
.fr-chico .fr-libres span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.fr-tot { font-size: 11.5px; font-weight: 600; color: var(--muted); }
/* Lotes en lista compacta */
.ls-modos { margin: 8px 0 4px; }
.ls-wrap { display: grid; gap: 10px; margin-top: 8px; }
.ls-lista { background: var(--surf); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.ls-fila { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 8px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.ls-fila:first-child { border-top: 0; }
.ls-fila:focus-visible { outline: 3px solid var(--pri); outline-offset: -3px; }
.ls-id { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.ls-id b { font-size: 15px; font-weight: 800; }
.ls-id small { flex-basis: 100%; font-size: 12px; font-weight: 500; color: var(--muted); }
.ls-promo { font-style: normal; font-size: 10.5px; font-weight: 800; background: #FFF1CC; color: #7A5600; border-radius: 9px; padding: 2px 6px; }
.ls-pr { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ls-pr b { font-size: 15px; font-weight: 800; color: var(--pri); font-variant-numeric: tabular-nums; }
.ls-pr b i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); }
.ls-pr small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.ls-fila.e-reservado .ls-pr b { color: #B26B00; }
/* Reservados: lista con el tiempo corriendo */
.rv-lista { background: none; border: 0; overflow: visible; display: grid; gap: 10px; }
.rv-item { background: var(--surf); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.rv-item.rsv-rojo { border-color: #E9B4B8; }
.rv-fila { min-height: 64px; border-top: 0 !important; padding-bottom: 6px; }
.rv-cuenta { font-size: 20px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; color: #0F6B43; }
.rsv-amar .rv-cuenta { color: #8A5E06; } .rsv-rojo .rv-cuenta { color: #B3202C; }
.rv-barra { height: 6px; margin: 0 14px 10px; border-radius: 3px; background: #E3EBF3; overflow: hidden; }
.rv-barra i { display: block; height: 100%; border-radius: 3px; background: #2FA971; }
.rsv-amar .rv-barra i { background: #E0A526; } .rsv-rojo .rv-barra i { background: #E0505A; }
.rv-det { display: grid; gap: 6px; padding: 0 14px 14px; }
.rv-det[hidden] { display: none; }
.rv-det .rsv-acc { grid-template-columns: 1fr 1fr 1fr; }
.rv-det .rsv-acc .btn { min-height: 42px; font-size: 13px; padding: 0 8px; }
/* Ventas (vendedor): tarjeta «Iniciar venta» arriba y listas resumidas que se abren al tocar */
.vf-iniciar { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; border: 0; border-radius: 24px; background: var(--res-ok-bg); color: var(--res-ok-tx); font: inherit; cursor: pointer; padding: 10px 16px; margin: 0 0 12px; }
.vf-iniciar b { font-size: 19px; font-weight: 900; letter-spacing: -.2px; }
.vf-ic { width: 44px; height: 44px; border-radius: 14px; background: #2FA971; color: #fff; display: grid; place-items: center; flex: none; }
.vf-ic .ico, .vf-fl .ico { display: flex; } .vf-ic svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vf-iniciar .vf-fl { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .6); display: grid; place-items: center; }
.vf-fl svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.vf-lista { display: grid; gap: 8px; }
.vf-item { background: var(--surf); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.vf-item.alerta { border-color: #E9B4B8; }
.vf-cab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 10px 12px 10px 14px; border: 0; background: none; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.vf-cab:focus-visible { outline: 3px solid var(--pri); outline-offset: -3px; }
.vf-id { flex: 1; min-width: 0; display: grid; gap: 1px; }
.vf-id b { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; } .vf-id small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.vf-der { display: flex; align-items: center; gap: 6px; flex: none; }
.vf-item .vf-fl svg { transform: rotate(90deg); color: var(--muted); } .vf-item.abierta .vf-fl svg { transform: rotate(-90deg); }
.vf-det { display: grid; gap: 8px; padding: 0 14px 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.vf-det[hidden] { display: none; }
.vf-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.iv-ops { display: grid; gap: 10px; }
.iv-op { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surf); color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.iv-op:disabled { opacity: .5; cursor: default; }
.iv-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--pri); color: var(--onp); display: grid; place-items: center; flex: none; }
.iv-ic .ico { display: flex; } .iv-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.iv-tx { flex: 1; display: grid; gap: 1px; } .iv-tx b { font-size: 15px; font-weight: 800; } .iv-tx small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.iv-op > .ico { display: flex; } .iv-op > .ico svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2.4; }
/* Inicio: perfil destacado (fecha, nombre, foto, anillo del mes) y accesos con dato */
.ini-perfil { display: grid; gap: 14px; border-radius: 26px; padding: 18px; color: #fff; background: linear-gradient(135deg, #122C75, #132136); box-shadow: var(--shadow); }
.ini-pf-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ini-fecha { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .88; }
.ini-linea { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.ini-linea i { width: 9px; height: 9px; border-radius: 50%; background: #45D68F; display: block; }
.ini-pf-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ini-pf-av { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #7CD3E8; color: #152032; display: grid; place-items: center; font-size: 23px; font-weight: 800; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
.ini-pf-nom { display: grid; gap: 2px; min-width: 0; }
.ini-pf-nom small { font-size: 13px; font-weight: 600; opacity: .88; }
.ini-pf-nom b { font-size: 22px; line-height: 1.1; font-weight: 800; letter-spacing: -.3px; overflow-wrap: anywhere; }
.ini-pf-nom span { font-size: 12.5px; font-weight: 600; opacity: .88; }
.ini-pf-mes { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; border-top: 1px solid rgba(255, 255, 255, .18); background: none; color: inherit; font: inherit; text-align: left; padding: 12px 0 0; cursor: pointer; }
.ini-anillo { position: relative; flex: none; width: 88px; height: 88px; display: grid; place-items: center; }
.ini-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ini-anillo b { font-size: 26px; font-weight: 800; line-height: 1; margin-top: -8px; }
.ini-anillo small { position: absolute; bottom: 20px; font-size: 10px; font-weight: 600; opacity: .85; }
.ini-pf-tx { display: grid; gap: 3px; min-width: 0; }
.ini-pf-tx b { font-size: 16px; font-weight: 800; line-height: 1.25; }
.ini-pf-tx span { font-size: 12.5px; font-weight: 600; opacity: .88; line-height: 1.35; }
.ini-acc .s { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.25; }
.ini-acc .s.urge { color: #B3262F; font-weight: 800; }
.ini-a4 .ini-acc { gap: 6px; }
.ini-acc .n.urge { background: #E5543B; }
/* Mi tablero */
.tb-pag { display: grid; gap: 12px; }
.tb-cab small { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--pri); } .tb-cab h2 { margin: 2px 0 0; font-size: 22px; font-weight: 800; }
.tb-seg { display: flex; background: var(--surf2); border-radius: 12px; padding: 3px; gap: 2px; }
.tb-seg button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tb-seg button[aria-selected="true"] { background: var(--surf); color: var(--pri); font-weight: 800; box-shadow: 0 1px 2px rgba(24, 34, 46, .12); }
.tb-card { background: var(--surf); border: 1px solid var(--line); border-radius: 22px; padding: 16px; display: grid; gap: 10px; }
.tb-gran { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tb-gran b { font-size: 52px; line-height: 1; font-weight: 800; color: var(--pri); letter-spacing: -2px; }
.tb-gran span { font-size: 15px; font-weight: 700; }
.tb-gran em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 13px; background: var(--surf2); color: var(--muted); }
.tb-gran em.ok { background: #DDF3E8; color: #247F52; } .tb-gran em.mal { background: #FDE3E4; color: #B3262F; }
.tb-bars { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }
.tb-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: flex-end; }
.tb-bar b { font-size: 12px; font-weight: 800; } .tb-bar small { font-size: 11px; font-weight: 600; color: var(--muted); }
.tb-bar i { display: block; width: 100%; max-width: 38px; border-radius: 8px 8px 4px 4px; background: #B7D3DE; } .tb-bar.hoy i { background: var(--pri); }
.tb-bars.muchas { gap: 3px; } .tb-bars.muchas .tb-bar b { font-size: 10px; } .tb-bars.muchas .tb-bar small { font-size: 9.5px; }
.tb-ks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tb-k { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; padding: 11px 12px; display: grid; gap: 2px; min-width: 0; }
.tb-k b { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; } .tb-k span { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.tb-et { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--pri); }
.tb-f { display: flex; align-items: center; gap: 10px; } .tb-f > span { width: 112px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.tb-fb { flex: 1; height: 14px; border-radius: 7px; background: var(--surf2); overflow: hidden; } .tb-fb i { display: block; height: 100%; border-radius: 7px; }
.tb-fb .c1 { background: #B7D3DE; } .tb-fb .c2 { background: #7FB8CB; } .tb-fb .c3 { background: #3F95AE; } .tb-fb .c4 { background: #16348A; }
.tb-f b { width: 24px; text-align: right; font-size: 14px; font-weight: 800; }
.tb-ps { display: grid; }
.tb-p { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.tb-p:first-child { border-top: 0; }
.tb-p i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #2FA971; } .tb-p i.rojo { background: #E5543B; } .tb-p i.amar { background: #F5B942; }
.tb-p span { flex: 1; display: grid; gap: 1px; } .tb-p b { font-size: 14px; font-weight: 700; } .tb-p small { font-size: 12px; color: var(--muted); font-weight: 500; }
.tb-p > .ico { display: flex; } .tb-p > .ico svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2.4; }

/* ===== Entrega 39: forma definitiva del Inicio del vendedor (decidida con Jonny, 2026-11-09) =====
   Grafito con tinte azul noche (arriba, en los colores base); botones del encabezado claros; íconos de acceso claros;
   bienvenida en azul de la marca más oscuro; iniciales (CV) en naranja de la marca. La barra inferior sigue oscura. */
body.vend .vend-persona, body.vend .vend-upd, body.vend .vend-bell { background: #fff !important; color: #0B1170 !important; border: 1px solid #D5DEEA !important; box-shadow: 0 1px 3px rgba(0, 6, 82, .10) !important; }
body.vend .vend-persona .av { background: #FF664D !important; color: #fff !important; }
.ini-acc .c, .ini-atajo .c { background: #E4EEF9 !important; color: #16348A !important; box-shadow: inset 0 0 0 1px #D2E1F1; }
.ini-perfil { background: linear-gradient(135deg, #122C75 0%, #070E5E 55%, #00043A 100%) !important; }
.ini-pf-av { background: #FF664D !important; color: #fff !important; }
body.vend .vend-avatar { background: #FF664D !important; color: #fff !important; }
/* Mismo criterio para Administración, Gerencia, Escrituración y Soporte: iniciales en naranja de la marca */
.xp-isla .xp-ib.user, .xp-movil .xp-ib.user { background: #FF664D !important; border-color: #FF664D !important; }
.xp-isla .zp-av, .xp-movil .zp-av { color: #fff !important; }
.ger-frase { background: linear-gradient(135deg, #122C75 0%, #070E5E 55%, #00043A 100%) !important; }

body.vend:not(.oscuro), body:not(.oscuro) { --cont: #E3EAF8; --oncont: #0F2565; }
.ini-acc .c, .ini-atajo .c { color: #16348A !important; background: #E3EAF8 !important; box-shadow: inset 0 0 0 1px #CFDAF1 !important; }
body.vend .vend-persona .av { background: #152032 !important; color: #fff !important; }
.card.perfil { background: #E3EAF8 !important; }
.av-big { background: #FF664D !important; color: #fff !important; }
body.vend .vend-persona, body.vend .vend-upd, body.vend .vend-bell { background: #152032 !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
body.vend .vend-persona .av { background: #FF664D !important; color: #fff !important; }

/* ===== Entrega 38d: marca de agua leve (isotipo) solo en «Todo al día» (el «Consejo del día» va sin marca), con un velo azul muy suave para que no quede todo pálido ===== */
.ini-hero, .ini-consejo { position: relative; overflow: hidden; isolation: isolate; }
.ini-hero:not(.late)::after { content: ""; position: absolute; right: -16px; bottom: -20px; width: 168px; height: 120px; background: url('/isotipo-color.png') no-repeat center / contain; opacity: .09; z-index: -1; pointer-events: none; transform: rotate(-8deg); }
body:not(.oscuro) .ini-consejo, body:not(.oscuro) .ini-hero:not(.late) { background-image: linear-gradient(135deg, rgba(22, 52, 138, .00) 35%, rgba(22, 52, 138, .07) 100%); }
body.oscuro .ini-hero:not(.late)::after { background-image: url('/isotipo-blanco.png'); opacity: .07; }

/* Entrega 39: Mi equipo (invitación de promotores) */
.tit-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 6px; }
.tit-fila h2 { margin: 0; }
.inv-card { padding: 14px; margin: 10px 0; }
.inv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.inv-qr { display: flex; justify-content: center; margin: 10px 0 4px; }
.inv-qr img { background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--line, #dde2ee); max-width: 100%; height: auto; }
.inv-link input { width: 100%; }