/* ============================================================
   THE 99 — Panel (dark, minimal). Marca: negro, off white, rojo #FF3B1F;
   Anton (cifras), Inter (texto), IBM Plex Mono (etiquetas).
   ============================================================ */
:root {
  --bg: #0b0b0a; --s1: #121211; --s2: #191918; --s3: #222220;
  --line: rgba(244, 241, 234, .08); --line2: rgba(244, 241, 234, .14);
  --off: #F4F1EA; --soft: rgba(244, 241, 234, .62); --faint: rgba(244, 241, 234, .38);
  --red: #FF3B1F; --red-soft: rgba(255, 59, 31, .12); --wa: #25D366; --ok: #5ccf86; --warn: #f2b84b;
  --display: "Anton", Impact, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --r: 14px; --side: 248px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body { background: var(--bg); color: var(--off); font: 14px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.muted { color: var(--soft); } .sm { font-size: .82rem; } .red { color: var(--red); }
.lbl { font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
code { font: .82em var(--mono); background: var(--s3); padding: 1px 5px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- Botones y campos ---------- */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line2); background: var(--s2); font-weight: 600; font-size: .84rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .1s; }
.b:hover { background: var(--s3); border-color: rgba(244, 241, 234, .24); }
.b:active { transform: scale(.98); }
.b--red { background: var(--red); border-color: var(--red); color: #0b0b0a; } .b--red:hover { background: #ff5a41; border-color: #ff5a41; }
.b--light { background: var(--off); border-color: var(--off); color: #0b0b0a; } .b--light:hover { background: #fff; }
.b--wa { background: var(--wa); border-color: var(--wa); color: #062b12; } .b--wa:hover { background: #3ee07a; }
.b--sm { min-height: 32px; padding: 5px 10px; font-size: .78rem; border-radius: 8px; }
.b--full { width: 100%; min-height: 46px; }
.linkbtn { background: none; border: 0; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 0; }
.linkbtn:hover { color: var(--off); }
input, select, textarea { width: 100%; background: var(--s1); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; min-height: 40px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(244, 241, 234, .4); }
textarea { resize: vertical; }
input[type="datetime-local"] { width: auto; }
.fld { display: grid; gap: 6px; } .fld > span { font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.fld small { text-transform: none; letter-spacing: 0; }
.chk { display: flex; gap: 8px; align-items: center; color: var(--soft); } .chk input { width: 18px; height: 18px; min-height: 0; accent-color: var(--red); }
.stack { display: grid; gap: 12px; }
.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .inline input[type="url"] { flex: 1 1 200px; width: auto; }
.inl { display: inline; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flash { margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; background: var(--s2); border-left: 3px solid var(--red); }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(60% 50% at 50% 0%, rgba(255, 59, 31, .12), transparent 70%), var(--bg); }
.login__card { width: min(380px, 100%); display: grid; gap: 14px; padding: 28px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line); }
.login__card .lbl { text-align: center; padding-top: 4px; }
.brand { font: 400 1.6rem var(--display); text-transform: uppercase; letter-spacing: .01em; text-decoration: none; }
.brand span { color: var(--red); }

/* ---------- Estructura: barra lateral + contenido ---------- */
.app { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--s1); border-right: 1px solid var(--line); padding: 20px 14px; }
.side__top { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 22px; }
.side__menu { display: none; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav__a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--soft); font-weight: 500; transition: background-color .15s, color .15s; }
.nav__a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav__a:hover { background: var(--s2); color: var(--off); }
.nav__a.is-on { background: var(--s3); color: var(--off); box-shadow: inset 2px 0 0 var(--red); }
.nav__n { margin-left: auto; font-style: normal; font: 600 .7rem var(--mono); background: var(--red); color: #0b0b0a; border-radius: 999px; padding: 1px 7px; }
.side__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.side__links { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.side__links .lbl, .side__links .linkbtn { color: var(--soft); text-decoration: none; font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.who { display: flex; gap: 10px; align-items: center; padding: 0 4px; }
.who b { display: block; font-size: .88rem; } .who small { display: block; color: var(--soft); font-size: .75rem; }
.av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--s3); border: 1px solid var(--line2); font: 600 .78rem var(--body); }
.av--doc { border-radius: 10px; color: var(--red); }
.main { padding: 28px clamp(16px, 3vw, 40px) 60px; min-width: 0; max-width: 1400px; }

/* ---------- Encabezado de página ---------- */
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ph h1 { font: 400 clamp(2rem, 4vw, 2.8rem)/1 var(--display); text-transform: uppercase; margin-top: 6px; }
.ph__act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.intro { max-width: 80ch; margin: -8px 0 18px; }
.seg { display: inline-flex; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.seg a { padding: 7px 12px; border-radius: 9px; text-decoration: none; color: var(--soft); font-weight: 500; font-size: .84rem; }
.seg a.is-on { background: var(--s3); color: var(--off); }
.search { display: flex; gap: 6px; } .search input { width: 260px; }

/* ---------- Tarjetas y rejillas ---------- */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.card--red { border-color: rgba(255, 59, 31, .45); background: linear-gradient(var(--red-soft), transparent 60%), var(--s1); }
.card__h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.card__h h2 { font-size: .95rem; font-weight: 600; }
.card__h a { color: var(--soft); text-decoration: none; } .card__h a:hover { color: var(--off); }
.empty { text-align: center; color: var(--soft); padding: 40px; }
.grid2 { display: grid; gap: 16px; grid-template-columns: 1fr; } .grid2 > .card { margin: 0; }
.grid3 { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px; } .grid3 > .card { margin: 0; }
.grid2 { margin-bottom: 16px; }
@media (min-width: 1100px) { .grid2 { grid-template-columns: 1.7fr 1fr; } .grid2--wide { grid-template-columns: 1.5fr 1fr; } .grid3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- KPIs ---------- */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }
.kpi { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 4px; }
.kpi .lbl { color: var(--soft); }
.kpi__v { font: 400 2.6rem/1.05 var(--display); letter-spacing: .01em; }
.kpi__s { font-size: .8rem; color: var(--soft); } .kpi__s a { color: var(--off); }
.kpi--accent { border-color: rgba(255, 59, 31, .4); } .kpi--accent .kpi__v { color: var(--red); }

/* ---------- Gráficos ---------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: rgba(244, 241, 234, .07); stroke-width: 1; }
.chart .base { stroke: rgba(244, 241, 234, .25); stroke-width: 1; }
.chart .ax { fill: var(--faint); font: 500 10px var(--mono); }
.chart .bar { fill: var(--red); pointer-events: none; }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover + .bar { fill: #ff7a63; }
.hb { list-style: none; display: grid; gap: 10px; }
.hb li { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; gap: 10px; align-items: center; font-size: .84rem; }
.hb__l { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb__t { height: 8px; background: var(--s3); border-radius: 4px; overflow: hidden; }
.hb__t i { display: block; height: 100%; background: var(--red); border-radius: 0 4px 4px 0; }
.hb__v { font-weight: 600; min-width: 64px; text-align: right; } .hb__v small { color: var(--soft); font-weight: 500; }
.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--off); color: #0b0b0a; font-size: .78rem; font-weight: 600; padding: 6px 9px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }

/* ---------- Tablas ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tbl th { text-align: left; font: 500 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--line2); }
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.is-off td { opacity: .5; }
.tbl__acts { text-align: right; }
.who--row { padding: 0; }

/* ---------- Chips y pills ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); text-decoration: none; color: var(--soft); font-size: .82rem; font-weight: 500; }
.chip i { font-style: normal; color: var(--faint); font-size: .76rem; }
.chip.is-on { background: var(--off); color: #0b0b0a; border-color: var(--off); } .chip.is-on i { color: rgba(11, 11, 10, .6); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--s3); color: var(--soft); white-space: nowrap; }
.pill--nuevo, .pill--red { background: var(--red-soft); color: #ff8a75; }
.pill--agendado, .pill--asistio, .pill--propuesta { background: rgba(244, 241, 234, .1); color: var(--off); }
.pill--ganado { background: rgba(92, 207, 134, .14); color: var(--ok); }
.pill--warn, .pill--coordinar, .pill--no_asistio { background: rgba(242, 184, 75, .13); color: var(--warn); }
.pill--perdido { opacity: .6; }

/* ---------- Listas desplegables (leads, reclamos) ---------- */
.list { display: grid; gap: 8px; }
.row { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); }
.row[open] { border-color: var(--line2); }
.row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px 16px; }
.row > summary::-webkit-details-marker { display: none; }
.row > summary:hover { background: rgba(244, 241, 234, .02); }
.row__main { min-width: 0; } .row__main small { display: block; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__meta { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
@media (min-width: 900px) { .row > summary { grid-template-columns: auto 1fr auto; } .row__meta { grid-column: auto; justify-content: flex-end; } }
.row__body { display: grid; gap: 22px; padding: 18px 16px 20px; border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .row__body { grid-template-columns: 1.15fr 1fr; } }
.dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; margin-top: 14px; font-size: .88rem; }
.dl dt { font: 500 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding-top: 3px; }
.pre { white-space: pre-wrap; }
.box { margin-top: 16px; padding: 14px; border: 1px solid var(--line2); border-radius: 12px; display: grid; gap: 10px; }
.rems { list-style: none; display: grid; gap: 8px; }
.rems li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .rems .lbl { min-width: 80px; color: var(--soft); }
.hist { list-style: none; display: grid; gap: 6px; max-height: 240px; overflow: auto; font-size: .82rem; color: var(--soft); margin-top: 8px; }
.hist span { display: inline-block; min-width: 108px; color: var(--faint); font-variant-numeric: tabular-nums; }
.doc { white-space: pre-wrap; font: .84rem/1.6 var(--body); color: var(--soft); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }

/* ---------- Reuniones ---------- */
.mtl { display: grid; }
.mt { display: grid; grid-template-columns: 84px 1fr; gap: 8px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.mtl > .mt:first-child { border-top: 0; padding-top: 4px; }
.mt .acts { grid-column: 1 / -1; }
@media (min-width: 800px) { .mt { grid-template-columns: 96px 1fr auto; } .mt .acts { grid-column: auto; justify-content: flex-end; } }
.mt__when { display: grid; line-height: 1.15; } .mt__when b { font: 400 1.75rem var(--display); } .mt__when .lbl { color: var(--soft); }
.mt__who small { display: block; color: var(--soft); }
.mt.is-now { box-shadow: inset 3px 0 0 var(--red); padding-left: 12px; }
.mini { list-style: none; display: grid; }
.mini li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.mini li:first-child { border-top: 0; padding-top: 0; }
.mini__d b { display: block; font: 400 1.25rem var(--display); } .mini__d small, .mini__t small { display: block; color: var(--soft); font-size: .76rem; }
.tl { list-style: none; display: grid; gap: 10px; }
.tl li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-size: .88rem; }

/* ---------- Equipo / ajustes ---------- */
.menu { position: relative; display: inline-block; text-align: left; }
.menu > summary { list-style: none; } .menu > summary::-webkit-details-marker { display: none; }
.menu__p { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: 250px; display: grid; gap: 10px; padding: 14px; background: var(--s2); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.roles { list-style: none; display: grid; gap: 10px; margin: 18px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.roles li { display: grid; gap: 2px; }
.conn { list-style: none; display: grid; }
.conn li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.conn li:first-child { border-top: 0; } .conn small { display: block; color: var(--soft); font-size: .78rem; }

/* ---------- Tablero CRM ----------
   Todas las fases visibles a la vez: una columna por fase que comparte el ancho
   disponible (sin barra horizontal). En pantallas angostas se desplaza de lado. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filters input[type="search"] { flex: 1 1 240px; width: auto; }
.filters select { width: auto; flex: 0 1 190px; }
.filters__x { margin-left: auto; }
.board { display: grid; gap: 8px; align-items: start; }
.board--fit { grid-template-columns: repeat(var(--cols, 9), minmax(0, 1fr)); }
.col { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; min-width: 0; transition: border-color .15s, background-color .15s; }
.col.is-over { border-color: var(--red); background: linear-gradient(var(--red-soft), transparent 70%), var(--s1); }
.col--won { background: linear-gradient(rgba(92, 207, 134, .06), transparent 40%), var(--s1); }
.col--lost { opacity: .85; }
.col__h { display: flex; align-items: center; gap: 6px; padding: 2px 4px 0; min-width: 0; }
.col__h h2 { font-size: .74rem; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col__n { font: 600 .66rem var(--mono); color: var(--soft); background: var(--s3); border-radius: 999px; padding: 0 6px; flex: none; }
.col__v { font: 500 .66rem var(--mono); color: var(--faint); padding: 2px 4px 6px; min-height: 1.4em; }
.col__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--off); flex: none; }
.col__dot--nuevo { background: var(--red); } .col__dot--won { background: var(--ok); } .col__dot--lost { background: rgba(244, 241, 234, .25); }
.col__dot--contacto, .col__dot--calificado { background: var(--warn); }
.col__list { display: grid; gap: 6px; min-height: 60px; max-height: calc(100vh - 250px); overflow-y: auto; overflow-x: hidden; padding-right: 1px; }
.kc { background: var(--s2); border: 1px solid var(--line2); border-radius: 9px; padding: 8px; display: grid; gap: 3px; cursor: grab; min-width: 0;
  transition: border-color .15s, opacity .15s, box-shadow .15s; }
.kc:hover { border-color: rgba(244, 241, 234, .3); }
.kc:active { cursor: grabbing; }
.kc--late { box-shadow: inset 2px 0 0 var(--red); }
.kc.is-drag { opacity: .4; } .kc.is-saving { opacity: .6; } .kc.is-saved { box-shadow: 0 0 0 2px var(--ok); }
.kc__n { font-size: .8rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.kc__co, .kc__s { font-size: .7rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc__s { color: var(--faint); }
.kc__m { font-size: .7rem; min-height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc__f { display: flex; gap: 4px; align-items: center; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 3px; min-width: 0; }
.kc__ow { width: 22px; height: 22px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; font: 600 .56rem var(--body); color: var(--soft); flex: none; }
.ic { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line2); color: var(--soft); flex: none; }
.ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic:hover { color: var(--off); border-color: rgba(244, 241, 234, .3); }
.ic--wa:hover { color: var(--wa); border-color: var(--wa); }
.kc__mv { flex: 1 1 auto; min-width: 0; width: 0; min-height: 24px; padding: 0 4px; font-size: .66rem; border-radius: 6px; background: var(--s1); }
.warn { color: var(--warn); } .ok { color: var(--ok); }
.tbl--click tbody tr { cursor: pointer; } .tbl--click tbody tr:hover td { background: rgba(244, 241, 234, .025); }
/* Menos de ~1280 px de contenido: las columnas mantienen un ancho legible y se desplazan */
@media (max-width: 1500px) { .board--fit { grid-template-columns: repeat(var(--cols, 9), minmax(112px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 8px; } }

/* El tablero usa todo el ancho de la pantalla */
.main--leads { max-width: none; }

/* ---------- Ventana emergente (contacto / reunión) ---------- */
.dlg { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 1px solid var(--line2); border-radius: 18px; background: var(--s1); color: var(--off); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.dlg::backdrop { background: rgba(5, 5, 5, .72); backdrop-filter: blur(3px); }
.dlg[open] { animation: dlg-in .18s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.dlg__h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--s1); border-bottom: 1px solid var(--line); }
.dlg__h h2 { font: 400 1.5rem/1 var(--display); text-transform: uppercase; }
.dlg__h > div { flex: 1; min-width: 0; }
.dlg__x { width: 38px; height: 38px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line2); color: var(--off); cursor: pointer; font-size: 1rem; }
.dlg__x:hover { background: var(--s3); }
.dlg__b { padding: 16px 18px 22px; display: grid; gap: 4px; }
.dlg .box { margin-top: 14px; }
.meet-when { font-size: .95rem; }

/* ---------- Finanzas ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.costrow { display: grid; grid-template-columns: 1fr 110px; gap: 8px; }
.row--flat > summary { grid-template-columns: 1fr; }
@media (min-width: 900px) { .row--flat > summary { grid-template-columns: 1fr auto; } }
.money { display: flex; gap: 22px; flex-wrap: wrap; }
.money > span { display: grid; text-align: right; font-variant-numeric: tabular-nums; min-width: 92px; }
.money small { color: var(--faint); font-size: .7rem; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 899px) { .money { gap: 14px; } .money > span { text-align: left; min-width: 0; } }
.kpis--money .kpi__v { font-size: 2.1rem; }

/* ---------- Celular: la barra lateral pasa arriba ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .side { position: sticky; z-index: 30; height: auto; padding: 12px 16px; flex-direction: column; }
  .side__top { padding: 0; }
  .side__menu { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line2); cursor: pointer; }
  .side__menu span, .side__menu span::before, .side__menu span::after { display: block; width: 18px; height: 2px; background: var(--off); content: ""; position: relative; }
  .side__menu span::before { position: absolute; top: -6px; } .side__menu span::after { position: absolute; top: 6px; }
  .nav { display: none; padding-top: 12px; }
  .side.is-open .nav { display: flex; }
  .main { padding-top: 20px; }
  .search input { width: 100%; } .search { flex: 1 1 100%; }
  .tl li { grid-template-columns: 1fr; gap: 2px; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; } .dl dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- CRM v2: dashboard, ficha, seguimientos, configuración ---------- */
.sect { font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin: 20px 0 10px; }
.note { background: var(--s1); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 10px; padding: 10px 14px; color: var(--soft); margin-bottom: 6px; }
.note b { color: var(--off); }
.note--fold > summary { cursor: pointer; list-style: none; }
.note--fold > summary::-webkit-details-marker { display: none; }
.note--fold > summary::after { content: " +"; color: var(--red); font-weight: 700; }
.note--fold[open] > summary { margin-bottom: 6px; }
.note--fold[open] > summary::after { content: " −"; }
.kpis--8 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.kpis--6 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi--sm { padding: 12px 14px; } .kpi--sm .kpi__v { font-size: 1.9rem; }
.kpi--sm .kpi__v small { font: 500 .7rem var(--body); }
.kpi--ok .kpi__v { color: var(--ok); }
.kpi__v a { color: inherit; text-decoration: none; }
.nodata { font: 500 .78rem var(--body); color: var(--warn); letter-spacing: 0; }
.fl { display: grid; gap: 2px; } .fl span { font: 500 .6rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.fl input { width: auto; min-height: 36px; padding: 6px 8px; }
.seg--sm a { padding: 4px 9px; font-size: .76rem; }
.err { color: var(--red); font-size: .85rem; }
.b--ok { background: rgba(92, 207, 134, .14); border-color: rgba(92, 207, 134, .5); color: var(--ok); }
.b--ok:hover { background: rgba(92, 207, 134, .24); }
.b[disabled] { opacity: .45; cursor: not-allowed; }
.dlg--sm { width: min(520px, calc(100vw - 24px)); }
.dlg__b.stack { gap: 12px; }
.pill--won, .pill--ganado { background: rgba(92, 207, 134, .14); color: var(--ok); }
.pill--lost { background: var(--s3); color: var(--faint); }
.pill--contacto, .pill--calificado { background: rgba(242, 184, 75, .13); color: var(--warn); }
.pill--reunion, .pill--realizada, .pill--propuesta, .pill--negociacion { background: rgba(244, 241, 234, .1); color: var(--off); }
/* Ficha */
.ph--ficha { align-items: flex-start; }
.ph--ficha .lbl a { color: inherit; }
.ficha__sub { color: var(--soft); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stagebar { display: grid; gap: 12px; }
.steps-h { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.steps-h li { font-size: .7rem; text-align: center; padding: 7px 4px; border-radius: 7px; background: var(--s2); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps-h li.is-done { background: rgba(244, 241, 234, .1); color: var(--soft); }
.steps-h li.is-cur { background: var(--red); color: #0b0b0a; font-weight: 700; }
.steps-h li.is-won { background: rgba(92, 207, 134, .2); color: var(--ok); font-weight: 700; }
.steps-h li.is-lost { background: var(--s3); color: var(--off); font-weight: 700; }
.stagebar__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stagebar__acts select { width: auto; }
.menu__p--wide { width: min(380px, 90vw); left: 0; right: auto; }
.ficha { display: grid; gap: 16px; }
@media (min-width: 1100px) { .ficha { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; } }
.ficha__side { display: grid; gap: 0; }
.tasks { list-style: none; display: grid; gap: 6px; }
.tasks li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.tasks li:first-child { border-top: 0; }
.tasks li.is-done { opacity: .5; }
.sub { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.sub:first-of-type { border-top: 0; }
.sub--row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub--row select { width: auto; }
.dl--sm { grid-template-columns: 110px 1fr; font-size: .82rem; margin: 6px 0 12px; word-break: break-word; }
.tl2 { list-style: none; display: grid; gap: 2px; max-height: 520px; overflow: auto; }
.tl2 li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; font-size: .84rem; padding: 7px 0 7px 10px; border-left: 2px solid var(--line2); }
.tl2__t { color: var(--faint); font-variant-numeric: tabular-nums; font-size: .76rem; }
.tl2 .tl2__stage { border-left-color: var(--red); }
.tl2 .tl2__contacto { border-left-color: var(--warn); }
.tl2 .tl2__nota { border-left-color: var(--off); }
/* Seguimientos */
.tlist { list-style: none; display: grid; }
.trow { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: .86rem; }
.trow__d { font-variant-numeric: tabular-nums; color: var(--soft); }
.trow__b small { display: block; color: var(--soft); } .trow__b a { color: var(--off); }
@media (max-width: 700px) { .trow { grid-template-columns: 1fr; } }
.alist { list-style: none; display: grid; gap: 6px; margin-top: 6px; }
.alist a { text-decoration: none; } .alist small { display: block; color: var(--soft); font-size: .76rem; }
/* Configuración */
.rules { display: grid; gap: 14px; }
@media (min-width: 900px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rules > button { justify-self: start; } }
.rules fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.rules legend { padding: 0 6px; }

/* ============================================================
   Celular (≤ 900 px): barra superior fija, menú deslizable,
   barra inferior de pestañas, filtros plegables, tablas como
   tarjetas, tablero por fases deslizables y ventanas tipo hoja.
   ============================================================ */
.tabbar, .btabs, .filters__tg { display: none; }
.filters__tg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.filters__tg i { font-style: normal; font: 600 .68rem var(--mono); background: var(--red); color: #0b0b0a; border-radius: 999px; padding: 0 6px; }

@media (max-width: 900px) {
  body { font-size: 15px; }
  input, select, textarea { font-size: 16px; min-height: 46px; }   /* 16 px: el iPhone no hace zoom al escribir */
  .b { min-height: 44px; }
  .b--sm { min-height: 38px; }

  /* Barra superior */
  .side { top: 0; padding: 10px 16px; background: var(--s1); border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { font-size: 1.4rem; }
  .side__menu { width: 44px; height: 44px; }
  .side.is-open .side__menu span { background: transparent; }
  .side.is-open .side__menu span::before { top: 0; transform: rotate(45deg); }
  .side.is-open .side__menu span::after { top: 0; transform: rotate(-45deg); }
  .side__menu span::before, .side__menu span::after { transition: transform .2s, top .2s; }

  /* Menú completo: hoja que cubre la pantalla bajo la barra superior */
  .nav { position: fixed; inset: 64px 0 0; z-index: 40; padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; gap: 4px; }
  .side.is-open .nav { display: flex; animation: nav-in .18s ease-out; }
  @keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } }
  .nav__a { padding: 14px 14px; font-size: 1rem; border: 1px solid var(--line); background: var(--s1); }
  .nav__a.is-on { box-shadow: inset 3px 0 0 var(--red); }
  .side__foot { margin-top: 14px; border-top: 0; padding: 16px 4px 0; }
  .side__links .lbl, .side__links .linkbtn { font-size: .78rem; padding: 10px 0; }
  body.menu-open { overflow: hidden; }

  /* Barra inferior de pestañas */
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(18, 18, 17, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line2); }
  .tabbar__a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none; border-radius: 10px; color: var(--faint); text-decoration: none; font: 600 .68rem var(--body); cursor: pointer; }
  .tabbar__a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar__a.is-on { color: var(--off); }
  .tabbar__a.is-on svg { stroke: var(--red); }
  .tabbar__a i { position: absolute; top: 2px; left: calc(50% + 6px); font: 600 .6rem var(--mono); background: var(--red); color: #0b0b0a; border-radius: 999px; padding: 1px 5px; }
  .tabbar__a circle { fill: currentColor; stroke: none; }
  .main { padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); }

  /* Encabezado de página */
  .ph { margin-bottom: 16px; gap: 12px; align-items: stretch; flex-direction: column; }
  .ph h1 { font-size: 2.1rem; }
  .ph__act { width: 100%; }
  .ph__act > .b { flex: 1; }
  .seg { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg a { flex: 1 0 auto; text-align: center; padding: 9px 12px; }
  .ph__act .seg { width: auto; flex: 1; }
  .intro { margin-top: 0; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 8px 14px; }

  /* Filtros plegables */
  .filters { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .filters > * { grid-column: 1 / -1; width: 100% !important; flex: none !important; }
  .filters > .fkeep { grid-column: auto; }
  .filters > .filters__tg { display: inline-flex; grid-column: auto; width: auto !important; }
  .filters > .filters__tg:first-child:not(:has(~ .fkeep)) { grid-column: 1 / -1; justify-self: start; }
  .filters:not(.is-open) > :not(.fkeep):not([type="hidden"]) { display: none; }
  .filters.is-open { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
  .filters.is-open .filters__tg { background: var(--s3); }
  .filters .fl input { width: 100%; }
  .filters__x { margin-left: 0; }
  .note { font-size: .78rem; padding: 9px 12px; }

  /* Tarjetas e indicadores */
  .card { padding: 16px; border-radius: 14px; }
  .card__h { flex-wrap: wrap; row-gap: 6px; }
  .kpis, .kpis--8, .kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px 13px; border-radius: 12px; }
  .kpi__v, .kpis--money .kpi__v { font-size: 1.85rem; overflow-wrap: anywhere; }
  .kpi--sm .kpi__v { font-size: 1.6rem; }
  .kpi .lbl { font-size: .6rem; letter-spacing: .07em; }
  .kpi__s { font-size: .74rem; line-height: 1.35; }
  .nodata { font-size: .74rem; }
  .sect { margin: 18px 0 8px; }
  .hb li { grid-template-columns: minmax(84px, 38%) 1fr auto; gap: 8px; font-size: .82rem; }
  .hb__v { min-width: 0; }
  .chart .ax { font-size: 21px; }   /* unidades del gráfico (720 de ancho): ≈ 9–10 px reales en el celular */
  .chart .ax--alt { display: none; }

  /* Tablas → tarjetas */
  .tbl-wrap { overflow: visible; }
  .tbl--cards thead { display: none; }
  .tbl--cards, .tbl--cards tbody { display: block; }
  .tbl--cards tr { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tbl--cards tbody tr:first-child { padding-top: 0; }
  .tbl--cards tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .tbl--cards td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .tbl--cards td::before { content: attr(data-l); font: 500 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: left; flex: none; max-width: 45%; }
  .tbl--cards td:first-child { display: block; text-align: left; font-size: 1rem; padding-bottom: 6px; }
  .tbl--cards td:first-child::before, .tbl--cards td:not([data-l])::before, .tbl--cards td[data-l=""]::before { display: none; }
  .tbl--cards td[colspan] { display: block; text-align: left; }
  .tbl--cards td.tbl__acts { justify-content: flex-start; padding-top: 8px; }
  .tbl--cards .who--row { justify-content: flex-start; }
  /* Fases del pipeline: orden + nombre en una línea, el resto debajo */
  .tbl--stages tr { grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; }
  .tbl--stages td:first-child, .tbl--stages td:nth-child(2) { display: block; padding: 0; font-size: inherit; }
  .tbl--stages td:nth-child(2)::before { display: none; }
  .tbl--stages td:first-child input { width: 100% !important; }
  .tbl--stages td:nth-child(n+3) { grid-column: 1 / -1; }
  .tbl--stages td:last-child:empty { display: none; }

  /* Tablero CRM: pestañas de fase + una columna por pantalla, deslizable */
  .btabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 2px 16px; position: sticky; top: 64px; z-index: 5; background: var(--bg); padding-block: 8px; }
  .btabs::-webkit-scrollbar { display: none; }
  .btabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--s1); color: var(--soft); font-size: .8rem; font-weight: 500; cursor: pointer; }
  .btabs button b { font: 600 .66rem var(--mono); color: var(--faint); }
  .btabs button.is-on { background: var(--off); color: #0b0b0a; border-color: var(--off); }
  .btabs button.is-on b { color: rgba(11, 11, 10, .6); }
  .board--fit { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0 16px 10px; scroll-padding: 0 16px; scrollbar-width: none; }
  .board--fit::-webkit-scrollbar { display: none; }
  .col { scroll-snap-align: start; padding: 10px 8px; }
  .col__h h2 { font-size: .9rem; }
  .col__list { max-height: none; min-height: 120px; gap: 8px; }
  .kc { padding: 12px; gap: 4px; cursor: pointer; }
  .kc__n { font-size: .95rem; } .kc__co, .kc__s, .kc__m { font-size: .8rem; }
  .kc__f { gap: 6px; padding-top: 8px; }
  .ic { width: 36px; height: 36px; border-radius: 9px; } .ic svg { width: 16px; height: 16px; }
  .kc__ow { width: 30px; height: 30px; font-size: .64rem; }
  .kc__mv { min-height: 36px; font-size: .82rem; padding: 0 8px; }

  /* Ventanas emergentes: hoja que sube desde abajo */
  .dlg, .dlg--sm { width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .dlg[open] { animation: sheet-in .22s ease-out; }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: .4; } }
  .dlg__h { padding: 14px 16px; }
  .dlg__h h2 { font-size: 1.3rem; }
  .dlg__b { padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }

  /* Ficha, reuniones, listas */
  .steps-h { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stagebar__acts > * { flex: 1 1 auto; }
  .stagebar__acts select { width: 100%; }
  .dl--sm { grid-template-columns: 1fr; gap: 0; } .dl--sm dd { margin-bottom: 8px; }
  .tl2 li { grid-template-columns: 1fr; gap: 0; }
  .mt { grid-template-columns: 70px 1fr; }
  .mt .acts > .b { flex: 1 1 auto; }
  .mini li { grid-template-columns: 56px 1fr auto; }
  .conn li { flex-wrap: wrap; }
  .menu__p { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); width: auto; z-index: 50; }
  .money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  .search { width: 100%; }
}
@media (max-width: 520px) {
  .two, .costrow { grid-template-columns: 1fr; }
  .rems li { display: grid; grid-template-columns: 1fr 1fr; } .rems .lbl { grid-column: 1 / -1; }
}