/* Radar: el sistema de diseño del panel.
   Colores, medidas y sombras van en variables (claro y oscuro); los componentes solo usan variables.
   Tres tamaños: celular (barra arriba, menú que se desliza y pasos abajo), tablet y escritorio (menú lateral fijo). */

/* ---------- variables ---------- */
:root {
  color-scheme: light;
  --fondo: #F5F5F2;
  --lateral-fondo: #FAFAF8;
  --superficie: #FFFFFF;
  --superficie-2: #FAFAF8;
  --hundido: #EFEFEB;
  --hover: #F4F4F1;
  --linea: #E5E5DF;
  --linea-fuerte: #D0D0C8;
  --tinta: #17181C;
  --tinta-2: #585B63;
  --tinta-3: #878A92;
  --marca: #3451D1;
  --marca-hover: #2B44B5;
  --marca-suave: #EEF1FD;
  --marca-tinta: #2A43B3;
  --sobre-marca: #FFFFFF;
  --acento: #F2B53A;
  --sobre-acento: #2B2000;
  --ok: #1D7F4F;
  --ok-hover: #186A42;
  --peligro: #C2382E;
  --invertido: #17181C;
  --sobre-invertido: #F5F5F2;
  --mana: #56B3F2;

  /* Familias de color para chips y etiquetas: fondo (bg) y texto (tx). */
  --azul-bg: #EBF0FD;      --azul-tx: #2846B8;
  --violeta-bg: #F1ECFB;   --violeta-tx: #6236B5;
  --ambar-bg: #FDF3DC;     --ambar-tx: #855600;
  --turquesa-bg: #E2F4F3;  --turquesa-tx: #0D6B6B;
  --celeste-bg: #E3F2FC;   --celeste-tx: #0A5A8C;
  --naranja-bg: #FDEEE4;   --naranja-tx: #AD4A16;
  --verde-bg: #E4F4EB;     --verde-tx: #16724A;
  --rojo-bg: #FBEAE8;      --rojo-tx: #B02E28;
  --gris-bg: #EFEFEB;      --gris-tx: #585B63;
  /* Un color fuerte por etapa (puntos del tablero y del embudo). */
  --e-nuevo: #4C6EF5; --e-elegido: #7C4DDB; --e-demo: #E0A100; --e-lista: #12A3A3; --e-contactado: #2E9BE6;
  --e-respondio: #F07A2E; --e-llamada: #F07A2E; --e-propuesta: #E8590C; --e-ganado: #1D9F5F; --e-referidos: #56B3F2;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23878A92' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --radio-chico: 7px;
  --radio: 10px;
  --radio-grande: 14px;
  --sombra-1: 0 1px 2px rgba(20, 22, 28, .05);
  --sombra-2: 0 1px 2px rgba(20, 22, 28, .04), 0 6px 20px rgba(20, 22, 28, .07);
  --sombra-3: 0 24px 60px rgba(12, 14, 20, .22), 0 2px 8px rgba(12, 14, 20, .08);
  --anillo: 0 0 0 3px color-mix(in srgb, var(--marca) 26%, transparent);
  --fuente: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ancho-lateral: 16.25rem;
  --alto-abajo: 0px;
  --alto-arriba: 0px;
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0E0F12; --lateral-fondo: #121317; --superficie: #17181C; --superficie-2: #1B1C21; --hundido: #222329; --hover: #1F2026;
  --linea: #2A2B32; --linea-fuerte: #3A3C45; --tinta: #ECEDEF; --tinta-2: #A5A8B0; --tinta-3: #777B84;
  --marca: #7B91FF; --marca-hover: #93A5FF; --marca-suave: #1D2342; --marca-tinta: #AEBCFF; --sobre-marca: #0E0F12;
  --ok: #34B277; --ok-hover: #46C287; --peligro: #F0796F; --invertido: #ECEDEF; --sobre-invertido: #0E0F12;
  --azul-bg: #1C2546; --azul-tx: #A9B9FF; --violeta-bg: #281F42; --violeta-tx: #CDB6FF; --ambar-bg: #382B0F; --ambar-tx: #F3C969;
  --turquesa-bg: #102E2D; --turquesa-tx: #7DD6D0; --celeste-bg: #102A3D; --celeste-tx: #8ECBF4; --naranja-bg: #382115; --naranja-tx: #F5A878;
  --verde-bg: #122E1F; --verde-tx: #7DD4A4; --rojo-bg: #391917; --rojo-tx: #F39B93; --gris-bg: #24252B; --gris-tx: #A5A8B0;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A5A8B0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --sombra-3: 0 24px 60px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #0E0F12; --lateral-fondo: #121317; --superficie: #17181C; --superficie-2: #1B1C21; --hundido: #222329; --hover: #1F2026;
    --linea: #2A2B32; --linea-fuerte: #3A3C45; --tinta: #ECEDEF; --tinta-2: #A5A8B0; --tinta-3: #777B84;
    --marca: #7B91FF; --marca-hover: #93A5FF; --marca-suave: #1D2342; --marca-tinta: #AEBCFF; --sobre-marca: #0E0F12;
    --ok: #34B277; --ok-hover: #46C287; --peligro: #F0796F; --invertido: #ECEDEF; --sobre-invertido: #0E0F12;
    --azul-bg: #1C2546; --azul-tx: #A9B9FF; --violeta-bg: #281F42; --violeta-tx: #CDB6FF; --ambar-bg: #382B0F; --ambar-tx: #F3C969;
    --turquesa-bg: #102E2D; --turquesa-tx: #7DD6D0; --celeste-bg: #102A3D; --celeste-tx: #8ECBF4; --naranja-bg: #382115; --naranja-tx: #F5A878;
    --verde-bg: #122E1F; --verde-tx: #7DD4A4; --rojo-bg: #391917; --rojo-tx: #F39B93; --gris-bg: #24252B; --gris-tx: #A5A8B0;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A5A8B0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --sombra-3: 0 24px 60px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-arriba) + 1rem); }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 15px/1.5 var(--fuente); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a { color: var(--marca-tinta); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--marca); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--marca) 22%, transparent); }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.018em; margin: 0 0 .6em; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.85rem); letter-spacing: -0.025em; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; }
h4 { font-size: .92rem; }
p { margin: 0 0 1em; }
b, strong { font-weight: 600; }
small { font-size: .82em; }
code { font: .86em/1.4 var(--mono); background: var(--hundido); padding: .08rem .35rem; border-radius: 5px; }
pre { font-family: var(--mono); }
hr { border: 0; border-top: 1px solid var(--linea); margin: 1.25rem 0; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.tenue { color: var(--tinta-2); }
.alerta { color: var(--peligro) !important; font-weight: 500; }
@media (min-width: 900px) { .solo-movil { display: none !important; } }
@media (min-width: 720px) { .solo-angosto { display: none !important; } }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.5rem; padding: .5rem 1rem;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); color: var(--tinta);
  font: 500 .9rem/1.2 var(--fuente); letter-spacing: -.005em; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sombra-1); transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s; }
.boton:hover { background: var(--hover); border-color: var(--tinta-3); color: var(--tinta); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: none; box-shadow: var(--anillo); border-color: var(--marca); }
.boton.primario { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.boton.primario:hover { background: var(--marca-hover); border-color: var(--marca-hover); color: var(--sobre-marca); }
.boton.wa { background: var(--ok); border-color: var(--ok); color: #fff; }
.boton.wa:hover { background: var(--ok-hover); border-color: var(--ok-hover); color: #fff; }
:root[data-tema="oscuro"] .boton.wa { color: #06140D; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .boton.wa { color: #06140D; } }
.boton.peligro { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 45%, var(--linea)); }
.boton.peligro:hover { background: var(--rojo-bg); color: var(--peligro); border-color: var(--peligro); }
.boton.fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--tinta-2); }
.boton.fantasma:hover { background: var(--hundido); color: var(--tinta); }
.boton.chico { min-height: 2rem; padding: .3rem .7rem; font-size: .84rem; border-radius: var(--radio-chico); gap: .35rem; }
.boton.chico .ico { width: 1rem; height: 1rem; }
.boton.grande { min-height: 2.9rem; padding: .7rem 1.35rem; font-size: .98rem; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.boton-icono { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: var(--radio); background: transparent; color: var(--tinta-2); cursor: pointer; flex: none; }
.boton-icono:hover { background: var(--hundido); color: var(--tinta); }
.boton-icono .ico { width: 1.3rem; height: 1.3rem; }
.enlace-chico { all: unset; cursor: pointer; font-size: .8rem; font-weight: 500; color: var(--marca-tinta); margin-left: .35rem; text-transform: none; letter-spacing: 0; border-radius: 4px; }
.enlace-chico:hover { color: var(--marca); text-decoration: underline; text-underline-offset: .18em; }
.enlace-chico:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (pointer: coarse) {
  .boton { min-height: 2.75rem; }
  .boton.chico { min-height: 2.35rem; padding-inline: .8rem; }
}

/* ---------- campos ---------- */
input, select, textarea { font: inherit; font-size: .92rem; font-weight: 400; color: var(--tinta); background-color: var(--superficie); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico); padding: .5rem .7rem; min-height: 2.5rem; min-width: 0; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
input:hover, select:hover, textarea:hover { border-color: var(--tinta-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: var(--anillo); }
select { appearance: none; -webkit-appearance: none; padding-right: 2rem; background-image: var(--chevron); background-repeat: no-repeat; background-position: right .65rem center; background-size: .75rem; cursor: pointer; }
select:disabled, input:disabled { opacity: .55; cursor: not-allowed; }
textarea { width: 100%; min-height: 6rem; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { width: 1.05rem; height: 1.05rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--marca); cursor: pointer; flex: none; box-shadow: none; }
input[type="range"] { padding: 0; min-height: auto; border: 0; accent-color: var(--marca); background: none; box-shadow: none; }
input[type="color"] { padding: .2rem; width: 3rem; min-height: 2.3rem; cursor: pointer; }
input[type="file"] { padding: .35rem; font-size: .85rem; }
input[type="file"]::file-selector-button { font: 500 .84rem var(--fuente); margin-right: .7rem; padding: .35rem .8rem; border: 1px solid var(--linea-fuerte); border-radius: 6px; background: var(--superficie-2); color: var(--tinta); cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
label { display: grid; gap: .32rem; font-weight: 500; font-size: .84rem; color: var(--tinta-2); }
label > input, label > select, label > textarea { color: var(--tinta); }
label.check { display: flex; align-items: center; gap: .55rem; font-weight: 400; font-size: .9rem; color: var(--tinta); }
fieldset { min-width: 0; }
.fila { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.fila > label { flex: 1 1 11rem; }
.fila > label.check { flex: 0 1 auto; min-height: 2.5rem; }
.fila > p { margin: 0; }

/* ---------- acceso ---------- */
.acceso { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(circle at 50% 38%, transparent 0 9rem, color-mix(in srgb, var(--marca) 7%, transparent) 9rem 9.1rem, transparent 9.1rem 15rem, color-mix(in srgb, var(--marca) 5%, transparent) 15rem 15.1rem, transparent 15.1rem 22rem, color-mix(in srgb, var(--marca) 4%, transparent) 22rem 22.1rem, transparent 22.1rem), var(--fondo); }
.acceso-caja { width: min(100%, 24rem); display: grid; gap: .85rem; background: var(--superficie); padding: 2rem; border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra-2); }
.acceso-caja h1 { margin: .3rem 0 0; font-size: 1.6rem; }
.acceso-caja > p { margin: 0 0 .5rem; color: var(--tinta-2); font-size: .92rem; }
.acceso-caja label { margin-top: .2rem; }
.acceso-caja .boton { margin-top: .5rem; width: 100%; }
.error { color: var(--peligro); min-height: 1.2em; margin: 0; font-size: .88rem; }
.logo { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--marca); color: var(--sobre-marca); flex: none; }
.logo .ico { width: 1.25rem; height: 1.25rem; stroke-width: 2.2; }
.logo.grande { width: 3rem; height: 3rem; border-radius: 13px; }
.logo.grande .ico { width: 1.9rem; height: 1.9rem; }

/* ---------- estructura: menú lateral y contenido ---------- */
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100dvh; }
.barra-movil, .nav-abajo, .velo-menu, #btn-cerrar-menu { display: none; }
.lateral { position: sticky; top: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--lateral-fondo); border-right: 1px solid var(--linea);
  padding: .9rem .7rem .8rem; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; z-index: 20; }
.lateral-cabeza { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .9rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .4rem; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 1.08rem; letter-spacing: -.02em; border-radius: var(--radio-chico); }
.marca:hover { color: var(--tinta); }
.lateral a:not(.marca) { display: flex; align-items: center; gap: .65rem; min-height: 2.25rem; padding: .4rem .6rem; border-radius: 8px; color: var(--tinta-2); text-decoration: none;
  font-weight: 500; font-size: .875rem; line-height: 1.25; position: relative; transition: background-color .12s, color .12s; }
.lateral a:not(.marca):hover { background: var(--hundido); color: var(--tinta); }
.lateral a[aria-current="page"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--linea); }
.lateral a .ico { width: 1.1rem; height: 1.1rem; color: var(--tinta-3); }
.lateral a[aria-current="page"] .ico { color: var(--marca); }
.lateral .txt { flex: 1; min-width: 0; }
.lateral .grupo { margin: 1.1rem .6rem .35rem; font-size: .72rem; font-weight: 500; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .07em; }
.lateral .proceso { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.lateral .num { flex: none; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid var(--tinta-3); color: var(--tinta-2); font-size: .66rem; font-weight: 600; }
.lateral a[aria-current="page"] .num { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.cuenta-nav:empty { display: none; }
.lateral .cuenta-nav { flex: none; min-width: 1.4rem; padding: .05rem .4rem; border-radius: 99px; background: var(--hundido); color: var(--tinta-2); font-size: .72rem; font-weight: 600; text-align: center; }
.lateral a[aria-current="page"] .cuenta-nav { background: var(--marca-suave); color: var(--marca-tinta); }
.marca-ahora { display: none; flex: none; padding: .08rem .42rem; border-radius: 99px; background: var(--acento); color: var(--sobre-acento); font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.lateral .ahora .marca-ahora { display: inline-block; }
.lateral .ahora .cuenta-nav { display: none; }
.lateral .ahora::before { content: ""; position: absolute; left: -.7rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
.lateral-pie { margin-top: auto; padding-top: 1rem; display: grid; gap: 1px; }
.boton-tutorial { display: flex; align-items: center; gap: .65rem; min-height: 2.25rem; padding: .4rem .6rem; border: 0; border-radius: 8px; background: none; color: var(--tinta-2);
  font: 500 .89rem var(--fuente); text-align: left; cursor: pointer; }
.boton-tutorial .ico { width: 1.1rem; height: 1.1rem; color: var(--tinta-3); }
.boton-tutorial:hover { background: var(--hundido); color: var(--tinta); }
.usuario { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; padding: .65rem .55rem .2rem; border-top: 1px solid var(--linea); }
.usuario-texto { display: grid; min-width: 0; line-height: 1.3; }
.usuario-texto b { font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--tinta-3); }
.sync::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--tinta-3); flex: none; }
.sync[data-estado="ok"]::before { background: var(--ok); }
.sync[data-estado="cargando"]::before { background: var(--acento); }
.sync[data-estado="error"]::before { background: var(--peligro); }
.sync.error { color: var(--peligro); }
.avatar { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--marca-suave); color: var(--marca-tinta); font-size: .7rem; font-weight: 600; flex: none; letter-spacing: .02em; }
.vista { padding: 2rem clamp(1.25rem, 3vw, 2.75rem) 3rem; max-width: 82rem; width: 100%; min-width: 0; }
.vista:focus { outline: none; }
.vista[data-vista="prospectos"], .vista[data-vista="pipeline"] { max-width: none; }
.vista[data-vista="guia"] { max-width: 64rem; }
.vista > :last-child { margin-bottom: 0; }

@media (max-width: 1099.98px) and (min-width: 900px) {
  :root { --ancho-lateral: 14.75rem; }
  .vista { padding-inline: 1.5rem; }
  /* Con el menú más angosto, "ahora" es un punto (el texto queda para lectores de pantalla). */
  .lateral .ahora .marca-ahora { width: .5rem; height: .5rem; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
}

/* Celular y tablet chica: barra arriba, menú que se desliza y los pasos abajo. */
@media (max-width: 899.98px) {
  :root { --alto-abajo: 4rem; --alto-arriba: 3.5rem; }
  .app { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--alto-abajo) + env(safe-area-inset-bottom)); }
  .barra-movil { display: flex; position: sticky; top: 0; z-index: 30; height: var(--alto-arriba); align-items: center; gap: .25rem; padding: 0 max(.4rem, env(safe-area-inset-left)) 0 max(.4rem, env(safe-area-inset-right));
    background: var(--fondo); background: color-mix(in srgb, var(--fondo) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--linea); }
  .barra-movil .marca { font-size: 1rem; }
  .barra-movil .logo { width: 1.65rem; height: 1.65rem; border-radius: 7px; }
  .barra-movil .logo .ico { width: 1.1rem; height: 1.1rem; }
  .barra-movil-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; color: var(--tinta-2); padding-left: .25rem; }
  .barra-movil-titulo:not(:empty)::before { content: "/"; margin-right: .5rem; color: var(--linea-fuerte); }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(19rem, 86vw); height: 100dvh; z-index: 60; transform: translateX(-104%); visibility: hidden;
    transition: transform .25s cubic-bezier(.3, .7, .2, 1), visibility 0s linear .25s; box-shadow: var(--sombra-3); padding-top: max(.9rem, env(safe-area-inset-top)); padding-bottom: max(.8rem, env(safe-area-inset-bottom)); }
  .app.menu-abierto .lateral { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.3, .7, .2, 1); }
  #btn-cerrar-menu { display: inline-grid; }
  .lateral a:not(.marca), .boton-tutorial { min-height: 2.75rem; font-size: .95rem; }
  .velo-menu { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8, 10, 14, .45); animation: aparecer .2s ease; }
  .nav-abajo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--alto-abajo) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--superficie); background: color-mix(in srgb, var(--superficie) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--linea); }
  .nav-abajo a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-width: 0; color: var(--tinta-3); text-decoration: none; font-size: .66rem; font-weight: 500; position: relative; -webkit-tap-highlight-color: transparent; }
  .nav-abajo a .txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .nav-abajo-ico { position: relative; display: grid; place-items: center; width: 3.2rem; height: 1.85rem; border-radius: 99px; transition: background-color .15s; }
  .nav-abajo .ico { width: 1.35rem; height: 1.35rem; }
  .nav-abajo a[aria-current="page"] { color: var(--marca-tinta); }
  .nav-abajo a[aria-current="page"] .nav-abajo-ico { background: var(--marca-suave); }
  .nav-abajo .cuenta-nav { position: absolute; top: -.25rem; left: calc(50% + .3rem); min-width: 1.1rem; height: 1.1rem; padding: 0 .28rem; border-radius: 99px; background: var(--tinta); color: var(--fondo); font-size: .62rem; font-weight: 600; line-height: 1.1rem; text-align: center; }
  .nav-abajo .ahora .nav-abajo-ico::after { content: ""; position: absolute; top: -.05rem; left: .45rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 2px var(--superficie); }
  .vista { padding: 1.1rem 1rem 1.75rem; }
  .fuera-movil { display: none !important; }
}
@media (min-width: 900px) { .lateral .marca-ahora { margin-left: auto; } }

/* ---------- cabecera de cada pantalla ---------- */
.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.4rem; }
.cabecera-texto { min-width: 0; flex: 1 1 28rem; }
.cabecera h1 { margin: 0; }
.cabecera-texto > p:not(.ceja) { margin: .4rem 0 0; color: var(--tinta-2); max-width: 68ch; font-size: .94rem; text-wrap: pretty; }
.ceja, .cabecera .paso-num { margin: 0 0 .35rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--marca-tinta); }
.cabecera-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.boton-ayuda .txt-corto { display: none; }
@media (max-width: 899.98px) {
  .cabecera { margin-bottom: 1.1rem; }
  .cabecera-texto { flex-basis: 100%; }
  .cabecera-texto > p:not(.ceja) { font-size: .9rem; }
}
@media (max-width: 559.98px) {
  .boton-ayuda .txt-largo { display: none; }
  .boton-ayuda .txt-corto { display: inline; }
}

/* Conducción: lo que conviene hacer ahora y la ayuda de cada paso */
.banner-proximo { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: -.3rem 0 1rem; padding: .55rem .85rem; border-radius: var(--radio);
  background: var(--ambar-bg); color: var(--ambar-tx); font-size: .87rem; border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent); }
.banner-proximo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--acento); flex: none; }
.banner-proximo a { font-weight: 600; color: inherit; text-decoration: none; margin-left: auto; white-space: nowrap; }
.banner-proximo a:hover { text-decoration: underline; }
.ayuda-paso { margin-bottom: 1.25rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.ayuda-paso > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .65rem .9rem; font-weight: 500; font-size: .87rem; color: var(--tinta-2); list-style: none; border-radius: var(--radio); }
.ayuda-paso > summary::-webkit-details-marker { display: none; }
.ayuda-paso > summary::before { content: "?"; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--hundido); color: var(--tinta-2); font-size: .7rem; font-weight: 600; flex: none; }
.ayuda-paso > summary::after { content: ""; margin-left: auto; width: .75rem; height: .75rem; background: var(--chevron) center / contain no-repeat; transition: transform .2s; flex: none; }
.ayuda-paso[open] > summary::after { transform: rotate(180deg); }
.ayuda-paso > summary:hover { color: var(--tinta); }
.ayuda-paso[open] > summary { border-bottom: 1px solid var(--linea); border-radius: var(--radio) var(--radio) 0 0; }
.ayuda-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem 1.75rem; padding: 1rem 1rem 1.1rem; }
.ayuda-grilla h3 { display: flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .35rem; color: var(--tinta-2); }
.ayuda-grilla h3::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; }
.ayuda-grilla div:nth-child(1) h3::before { background: var(--ok); }
.ayuda-grilla div:nth-child(2) h3::before { background: var(--peligro); }
.ayuda-grilla div:nth-child(3) h3::before { background: var(--marca); }
.ayuda-grilla p { margin: 0; font-size: .87rem; color: var(--tinta-2); text-wrap: pretty; }
.pie-paso { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
@media (max-width: 559.98px) {
  .pie-paso .boton { flex: 1 1 100%; white-space: normal; text-align: center; }
  .pie-paso > span:empty { display: none; }
}

/* ---------- bloques y piezas comunes ---------- */
.bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 1.25rem 1.35rem; margin-bottom: 1.1rem; box-shadow: var(--sombra-1); min-width: 0; }
.bloque > h2 { font-size: 1rem; margin-bottom: .5rem; }
.bloque > h2 + p.tenue, .bloque-cabeza + p.tenue { font-size: .86rem; margin-top: -.1rem; }
.bloque-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem; margin-bottom: .6rem; }
.bloque-cabeza h2 { margin: 0; font-size: 1rem; }
@media (max-width: 559.98px) { .bloque { padding: 1rem; border-radius: var(--radio); } }
.nota { background: var(--marca-suave); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--marca) 18%, transparent); padding: .75rem 1rem; border-radius: var(--radio); font-size: .9rem; }
.nota a { font-weight: 500; }
.vacio { color: var(--tinta-2); padding: 2rem 1.25rem; text-align: center; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-grande); background: var(--superficie-2); font-size: .92rem; text-wrap: pretty; }
.resumen { margin: 0; font-size: .88rem; color: var(--tinta-2); }
.fin-tarea { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radio); background: var(--verde-bg); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.fin-tarea > p { margin: 0 0 .8rem; }
.fin-tarea .traza { margin-bottom: .8rem; }
.acciones-sugeridas { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.acciones-sugeridas li { margin-bottom: .45rem; }
.acciones-sugeridas li::marker { color: var(--acento); }
.estado-clave { display: flex; gap: .55rem; align-items: center; margin-bottom: .45rem; font-size: .9rem; }
.punto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--peligro); flex: none; }
.punto.ok { background: var(--ok); }
.progreso { height: .45rem; background: var(--hundido); border-radius: 99px; overflow: hidden; margin: .9rem 0 .45rem; }
.progreso > div { height: 100%; width: 0; background: var(--marca); border-radius: 99px; transition: width .3s; }
.registro { max-height: 14rem; overflow: auto; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: .6rem .8rem;
  font: .8rem/1.5 var(--mono); color: var(--tinta-2); white-space: pre-wrap; margin: .6rem 0 0; }
.notas { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.notas li { border-top: 1px solid var(--linea); padding: .55rem 0; }
.notas li:first-child { border-top: 0; padding-top: 0; }
.notas small { color: var(--tinta-3); }

/* Chips: etapa, oferta, nivel del diagnóstico, Maná */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 99px; font-size: .74rem; font-weight: 500; line-height: 1.35; white-space: nowrap;
  background: var(--chip-bg, var(--gris-bg)); color: var(--chip-tx, var(--gris-tx)); vertical-align: .05em; }
.chip.nuevo { --chip-bg: var(--azul-bg); --chip-tx: var(--azul-tx); }
.chip.elegido { --chip-bg: var(--violeta-bg); --chip-tx: var(--violeta-tx); }
.chip.demo { --chip-bg: var(--ambar-bg); --chip-tx: var(--ambar-tx); }
.chip.lista { --chip-bg: var(--turquesa-bg); --chip-tx: var(--turquesa-tx); }
.chip.contactado { --chip-bg: var(--celeste-bg); --chip-tx: var(--celeste-tx); }
.chip.respondio, .chip.llamada, .chip.propuesta { --chip-bg: var(--naranja-bg); --chip-tx: var(--naranja-tx); }
.chip.ganado { --chip-bg: var(--verde-bg); --chip-tx: var(--verde-tx); }
.chip.perdido, .chip.baja { --chip-bg: var(--rojo-bg); --chip-tx: var(--rojo-tx); }
.chip.descartado { --chip-bg: var(--gris-bg); --chip-tx: var(--gris-tx); }
.chip.oferta { --chip-bg: var(--invertido); --chip-tx: var(--sobre-invertido); }
.chip.nivel-sin_web, .chip.nivel-grave { --chip-bg: var(--rojo-bg); --chip-tx: var(--rojo-tx); }
.chip.nivel-mejorable { --chip-bg: var(--ambar-bg); --chip-tx: var(--ambar-tx); }
.chip.nivel-bien { --chip-bg: var(--verde-bg); --chip-tx: var(--verde-tx); }
.chip.mana { --chip-bg: var(--celeste-bg); --chip-tx: var(--celeste-tx); }
.chip.mana::before, small.de-mana::before { content: ""; display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--mana); flex: none; }
small.de-mana::before { margin-right: .3rem; vertical-align: .05rem; }
.prio { font-weight: 600; font-variant-numeric: tabular-nums; }
.prio.alta { color: var(--naranja-tx); }
.prio.alta::after { content: ""; display: inline-block; width: .38rem; height: .38rem; margin-left: .25rem; border-radius: 50%; background: var(--e-propuesta); vertical-align: .12rem; }

/* ---------- tablas ---------- */
.tabla-scroll { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .875rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-weight: 500; font-size: .78rem; color: var(--tinta-2); background: var(--superficie-2); white-space: nowrap; }
td.num, th.num { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
td small, .traza small { display: block; color: var(--tinta-3); font-size: .78rem; font-weight: 400; margin-top: .1rem; }
td small.tenue { color: var(--tinta-3); }

/* Listas de lo hecho (Buscar y Diagnosticar): en el celular, cada fila es una tarjeta */
.traza td { vertical-align: middle; }
.traza .enlace-chico { margin: 0; font-size: .9rem; font-weight: 600; color: var(--tinta); text-align: left; }
.traza .enlace-chico:hover { color: var(--marca); }
.traza .cuando { white-space: nowrap; }
.traza > p { margin: .7rem 0 0; }
.barra-traza { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: .75rem; }
.barra-traza label { flex: 0 1 20rem; }
.barra-traza .tenue { font-size: .84rem; }
.acciones-fila { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
@media (max-width: 719.98px) {
  .traza .tabla-scroll { border: 0; background: none; overflow: visible; border-radius: 0; }
  .traza table, .traza tbody, .traza tr, .traza td { display: block; width: 100%; }
  .traza thead { display: none; }
  .traza tr { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: .65rem .85rem; margin-bottom: .55rem; }
  .traza tbody tr:hover td { background: none; }
  .traza td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; border: 0; padding: .3rem 0; text-align: left !important; }
  .traza td::before { content: attr(data-label); color: var(--tinta-3); font-size: .78rem; padding-top: .1rem; }
  .traza td[data-label=""] { grid-template-columns: minmax(0, 1fr); padding-top: .5rem; }
  .traza td[data-label=""]::before { display: none; }
  .traza td[data-col="negocio"] { grid-template-columns: minmax(0, 1fr); padding-bottom: .45rem; margin-bottom: .2rem; border-bottom: 1px solid var(--linea); }
  .traza td[data-col="negocio"]::before { display: none; }
  .fin-tarea .traza tr { background: var(--superficie); }
}

/* ---------- Buscar ---------- */
.buscador { display: grid; gap: 1.1rem; }
.buscador .nota { margin: 0; font-size: .88rem; }
.elegir-rubros { border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1rem 1rem; margin: 0; min-width: 0; background: var(--superficie-2); }
.elegir-rubros > legend { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; padding: 0 .4rem; color: var(--tinta); }
.elegir-rubros > .fila { margin-bottom: 1rem; }
.rubros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: 1rem 1.5rem; max-height: 24rem; overflow-y: auto; padding: .1rem .35rem .1rem .1rem; scrollbar-width: thin; }
.rubros .categoria { border: 0; padding: 0; margin: 0; min-width: 0; }
.rubros .categoria legend { display: flex; align-items: center; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-3); padding: 0; margin-bottom: .35rem; }
.rubros label.check { font-size: .88rem; padding: .2rem 0; align-items: flex-start; line-height: 1.35; }
.rubros label.check input { margin-top: .1rem; }
.rubros label.check:has(input:checked) { color: var(--marca-tinta); font-weight: 500; }
.acciones-busqueda { position: sticky; bottom: calc(var(--alto-abajo) + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  margin: 0 -1.35rem -1.25rem; padding: .85rem 1.35rem; background: var(--superficie); background: color-mix(in srgb, var(--superficie) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--linea); border-radius: 0 0 var(--radio-grande) var(--radio-grande); }
.acciones-busqueda .resumen { flex: 1 1 18rem; }
.acciones-busqueda .botones { display: flex; gap: .5rem; }
.acciones-busqueda .botones .boton { min-width: 8rem; }
@media (max-width: 559.98px) {
  .acciones-busqueda { margin: 0 -1rem -1rem; padding: .75rem 1rem; border-radius: 0 0 var(--radio) var(--radio); }
  .acciones-busqueda .botones { flex: 1 1 100%; }
  .acciones-busqueda .botones .boton { flex: 1; }
}
.bloque > .progreso:first-of-type { margin-top: 1.1rem; }
/* El lugar del progreso de una tarea no ocupa nada mientras no hay tarea. */
.tarea:not(:has(> :not([hidden]):not(:empty))) { display: none; }
.tarea > .progreso:first-child { margin-top: 0; }
.cargas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 1.1rem; align-items: start; }
.form-carga { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .75rem; align-items: end; }
.form-carga .ancho-total { grid-column: 1 / -1; }
.form-carga > .boton { justify-self: start; }

/* ---------- Prospectos: pestañas, filtros, selección y la planilla ---------- */
.pestanas { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; padding: 3px; margin-bottom: 1rem; background: var(--hundido); border-radius: 11px; width: fit-content; max-width: 100%; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { display: inline-flex; align-items: center; gap: .4rem; font: 500 .85rem var(--fuente); padding: .42rem .75rem; min-height: 2.1rem; border: 0; border-radius: 8px;
  background: none; color: var(--tinta-2); cursor: pointer; white-space: nowrap; transition: background-color .12s, color .12s; }
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected="true"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1), 0 0 0 1px var(--linea); }
.pestanas .cuenta { display: inline-block; min-width: 1.35rem; padding: 0 .35rem; border-radius: 99px; background: color-mix(in srgb, var(--tinta) 8%, transparent); font-size: .72rem; font-weight: 600; text-align: center; color: var(--tinta-2); }
.pestanas button[aria-selected="true"] .cuenta { background: var(--marca-suave); color: var(--marca-tinta); }
.pestanas [data-pestana="referidos"]::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--mana); }
.pestanas .hay-nuevos::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mana) 30%, transparent); animation: latido-mana 1.6s ease-in-out infinite; }
.pestanas .hay-nuevos .cuenta { background: var(--mana); color: #062338; }
@keyframes latido-mana { 50% { box-shadow: 0 0 0 6px transparent; } }
@media (pointer: coarse) { .pestanas button { min-height: 2.5rem; } }
.nota-referidos { margin: -.35rem 0 .9rem; font-size: .86rem; max-width: 90ch; }
.barra-hoja { display: flex; flex-wrap: wrap; gap: .6rem .75rem; align-items: end; margin-bottom: .85rem; }
.barra-hoja label { flex: 1 1 10rem; max-width: 15rem; }
.barra-hoja label:has(input[type="search"]) { flex: 2 1 15rem; max-width: 22rem; }
.barra-hoja .tenue { margin-left: auto; font-size: .84rem; align-self: center; white-space: nowrap; }
.barra-hoja input, .barra-hoja select { min-height: 2.25rem; padding-top: .35rem; padding-bottom: .35rem; font-size: .88rem; }
.barra-hoja .boton { min-height: 2.25rem; }
@media (max-width: 719.98px) {
  .barra-hoja { display: grid; grid-template-columns: 1fr 1fr; }
  .barra-hoja label { max-width: none; }
  .barra-hoja label:has(input[type="search"]) { grid-column: 1 / -1; max-width: none; }
  .barra-hoja .tenue { margin: 0; grid-column: 1 / -1; order: 10; }
  .barra-hoja .boton { grid-column: 1 / -1; }
}
.barra-lote { position: sticky; top: .5rem; z-index: 6; display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; padding: .55rem .7rem; margin-bottom: .85rem;
  border-radius: var(--radio); background: var(--invertido); color: var(--sobre-invertido); box-shadow: var(--sombra-2); }
.barra-lote b { margin-right: .25rem; font-size: .88rem; }
.barra-lote label { display: flex; align-items: center; gap: .4rem; color: inherit; font-size: .8rem; font-weight: 500; opacity: .9; }
.barra-lote select { min-height: 2rem; padding: .2rem 1.8rem .2rem .5rem; font-size: .84rem; background-color: var(--superficie); color: var(--tinta); border-color: transparent; }
.barra-lote .boton { box-shadow: none; }
.barra-lote .boton:not(.primario) { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--sobre-invertido) 30%, transparent); }
.barra-lote .boton:not(.primario):hover { background: color-mix(in srgb, var(--sobre-invertido) 12%, transparent); color: inherit; }
@media (max-width: 899.98px) {
  .barra-lote { position: fixed; top: auto; left: .6rem; right: .6rem; bottom: calc(var(--alto-abajo) + env(safe-area-inset-bottom) + .5rem); margin: 0; z-index: 35; max-height: 45vh; overflow-y: auto; }
  .barra-lote b { flex: 1 1 100%; }
}
.hoja-scroll { overflow: auto; max-height: calc(100dvh - 15.5rem); min-height: 14rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra-1); }
table.hoja { border-collapse: separate; border-spacing: 0; font-size: .84rem; width: max-content; min-width: 100%; }
.hoja th, .hoja td { padding: .35rem .5rem; border-bottom: 1px solid var(--linea); white-space: nowrap; vertical-align: middle; background: var(--superficie); }
.hoja thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie-2); padding: 0; font-size: .76rem; box-shadow: inset 0 -1px 0 var(--linea); border-bottom: 0; }
.hoja thead th button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: .6rem .6rem; cursor: pointer; font-weight: 500; color: var(--tinta-2); }
.hoja thead th button:hover { background: var(--hundido); color: var(--tinta); }
.hoja thead th[aria-sort="ascending"] button, .hoja thead th[aria-sort="descending"] button { color: var(--tinta); font-weight: 600; }
.hoja thead th button:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.hoja th .th-texto { display: block; padding: .6rem .6rem; font-weight: 500; color: var(--tinta-2); }
.hoja .fija { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--linea); }
.hoja thead .fija { z-index: 3; }
.hoja tbody tr:hover td { background: var(--hover); }
.hoja tr.marcada td { background: var(--marca-suave); }
.hoja .enlace { all: unset; cursor: pointer; font-weight: 600; color: var(--tinta); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; display: block; padding: .15rem 0; }
.hoja .enlace:hover { color: var(--marca); text-decoration: underline; text-underline-offset: .18em; }
.hoja .enlace:focus-visible { outline: 2px solid var(--marca); border-radius: 3px; }
.hoja select, .hoja input:not([type="checkbox"]) { min-height: 2rem; padding: .2rem .4rem; font-size: .84rem; border-color: transparent; background-color: transparent; border-radius: 6px; }
.hoja select { padding-right: 1.6rem; background-position: right .45rem center; }
.hoja select:hover, .hoja input:not([type="checkbox"]):hover { border-color: var(--linea-fuerte); background-color: var(--superficie); }
.hoja select:focus, .hoja input:not([type="checkbox"]):focus { border-color: var(--marca); background-color: var(--superficie); }
.hoja input[data-campo="nota"] { width: 13rem; }
.hoja input[type="date"][value=""]:not(:focus)::-webkit-datetime-edit { color: transparent; }
.hoja select.etapa { font-weight: 500; }
.hoja select.etapa.nuevo { color: var(--azul-tx); }
.hoja select.etapa.elegido { color: var(--violeta-tx); background-color: var(--violeta-bg); }
.hoja select.etapa.demo { color: var(--ambar-tx); background-color: var(--ambar-bg); }
.hoja select.etapa.lista { color: var(--turquesa-tx); background-color: var(--turquesa-bg); }
.hoja select.etapa.contactado { color: var(--celeste-tx); background-color: var(--celeste-bg); }
.hoja select.etapa.respondio, .hoja select.etapa.llamada, .hoja select.etapa.propuesta { color: var(--naranja-tx); background-color: var(--naranja-bg); }
.hoja select.etapa.ganado { color: var(--verde-tx); background-color: var(--verde-bg); }
.hoja select.etapa.perdido, .hoja select.etapa.baja { color: var(--rojo-tx); background-color: var(--rojo-bg); }
.hoja select.etapa.descartado { color: var(--tinta-3); }
.hoja select.web.haciendo, .hoja select.web.revision { color: var(--naranja-tx); font-weight: 500; }
.hoja select.web.publicada { color: var(--verde-tx); font-weight: 500; }
.hoja .ultima-nota { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; padding: 0 .4rem; }
.hoja small { display: block; color: var(--tinta-3); font-size: .74rem; }
.hoja small.de-mana { color: var(--celeste-tx); font-weight: 500; }
.hoja td.num { text-align: right; }
.hoja td.sel, .hoja th.sel { width: 2.4rem; text-align: center; padding: .25rem .5rem; }
.hoja th.sel { padding: .6rem .5rem; }
.celda-diag { max-width: 19rem; white-space: normal; }
.hoja .celda-diag small { white-space: normal; }
.mas-filas { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; margin: .9rem 0 0; }
.responder { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.responder a { padding: .16rem .6rem; border: 1px solid var(--linea-fuerte); border-radius: 99px; font-size: .78rem; font-weight: 500; text-decoration: none; color: var(--tinta); background: var(--superficie); }
.responder a:hover { border-color: var(--marca); color: var(--marca-tinta); }
.responder a.pref { background: var(--mana); border-color: var(--mana); color: #062338; }
/* En el celular la planilla se vuelve una tarjeta por negocio */
@media (max-width: 719.98px) {
  .hoja-scroll { max-height: none; min-height: 0; overflow: visible; border: 0; background: none; box-shadow: none; border-radius: 0; }
  table.hoja, .hoja tbody, .hoja tr, .hoja td { display: block; width: auto; min-width: 0; }
  .hoja thead { display: none; }
  .hoja tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .35rem .85rem; padding: .8rem .9rem .85rem; margin-bottom: .65rem;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-1); }
  .hoja tr.marcada { border-color: var(--marca); box-shadow: var(--anillo); }
  .hoja tr.marcada td, .hoja tbody tr:hover td { background: none; }
  .hoja td { border: 0; padding: 0; white-space: normal; background: none; min-width: 0; }
  .hoja td::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 500; color: var(--tinta-3); margin-bottom: .15rem; }
  .hoja td.fija { position: static; box-shadow: none; grid-column: 1 / -1; padding-right: 2.5rem; padding-bottom: .4rem; border-bottom: 1px solid var(--linea); margin-bottom: .15rem; }
  .hoja td.fija::before, .hoja td.sel::before, .hoja td[data-label=""]::before { display: none; }
  .hoja td.sel { position: absolute; top: .55rem; right: .45rem; width: auto; padding: .35rem; }
  .hoja td.sel input { width: 1.25rem; height: 1.25rem; }
  .hoja td.num { text-align: left; }
  .hoja td[data-col="diagnostico"], .hoja td[data-col="nota"], .hoja td[data-col="mensaje"], .hoja td[data-col="responder"], .hoja td[data-col="decidir"], .hoja td[data-col="proyecto"] { grid-column: 1 / -1; }
  /* Orden de la tarjeta: el nombre, qué le falla (o qué pidió), los datos de a dos y al final las acciones y notas. */
  .hoja td { order: 5; }
  .hoja td.fija { order: 0; }
  .hoja td[data-col="diagnostico"], .hoja td[data-col="proyecto"], .hoja td[data-col="mensaje"] { order: 1; }
  .hoja td[data-col="responder"], .hoja td[data-col="decidir"], .hoja td[data-col="nota"] { order: 9; }
  .hoja .enlace { font-size: 1rem; max-width: none; white-space: normal; }
  .hoja .celda-diag, .hoja .ultima-nota { max-width: none; padding: 0; }
  .hoja select, .hoja input:not([type="checkbox"]) { width: 100%; min-height: 2.4rem; border-color: var(--linea); background-color: var(--superficie-2); }
  .hoja input[data-campo="nota"] { width: 100%; margin-top: .3rem; }
  .hoja input[type="date"][value=""]:not(:focus)::-webkit-datetime-edit { color: var(--tinta-3); }
  .hoja td[data-col="decidir"] .acciones-fila { display: grid; grid-template-columns: 1fr 1fr; margin-top: .3rem; }
  .vista[data-vista="prospectos"]:has(.barra-lote:not([hidden])) { padding-bottom: 10rem; }
}

/* ---------- Tablero (pipeline) ---------- */
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16.5rem, 1fr); gap: .75rem; overflow-x: auto; align-items: start; padding: .1rem .1rem .8rem; margin-bottom: .6rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.columna-tablero { display: grid; gap: .5rem; align-content: start; min-height: 18rem; padding: .65rem; border-radius: var(--radio-grande); background: var(--hundido);
  border: 1.5px dashed transparent; scroll-snap-align: start; transition: background-color .15s, border-color .15s; }
.columna-tablero.encima { border-color: var(--marca); background: var(--marca-suave); }
.columna-tablero.de-mana { background: color-mix(in srgb, var(--mana) 12%, var(--hundido)); }
.columna-cabeza { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .1rem .2rem 0; }
.columna-cabeza h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .86rem; font-weight: 600; }
.columna-cabeza h2::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--punto, var(--tinta-3)); flex: none; }
.columna-tablero[data-etapa="referidos"] { --punto: var(--e-referidos); }
.columna-tablero[data-etapa="elegido"] { --punto: var(--e-elegido); }
.columna-tablero[data-etapa="demo"] { --punto: var(--e-demo); }
.columna-tablero[data-etapa="lista"] { --punto: var(--e-lista); }
.columna-tablero[data-etapa="contactado"] { --punto: var(--e-contactado); }
.columna-tablero[data-etapa="respondio"] { --punto: var(--e-respondio); }
.columna-tablero[data-etapa="llamada"] { --punto: var(--e-llamada); }
.columna-tablero[data-etapa="propuesta"] { --punto: var(--e-propuesta); }
.columna-tablero[data-etapa="ganado"] { --punto: var(--e-ganado); }
.columna-cabeza .cuenta { min-width: 1.5rem; padding: .05rem .45rem; border-radius: 99px; background: var(--superficie); color: var(--tinta-2); font-size: .74rem; font-weight: 600; text-align: center; box-shadow: inset 0 0 0 1px var(--linea); }
.columna-ayuda { margin: -.3rem .2rem .15rem; font-size: .76rem; color: var(--tinta-3); }
.columna-vacia { margin: 0; padding: 1.4rem .5rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); text-align: center; font-size: .8rem; color: var(--tinta-3); }
.carta { display: grid; gap: .3rem; padding: .7rem .75rem .6rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); font-size: .84rem; cursor: grab;
  box-shadow: var(--sombra-1); position: relative; transition: border-color .12s, box-shadow .12s, transform .12s; }
.carta:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
.carta:active { cursor: grabbing; }
.carta.arrastrando { opacity: .4; transform: rotate(1.5deg); }
.carta.atrasado { box-shadow: inset 3px 0 0 var(--peligro), var(--sombra-1); }
.carta.hoy { box-shadow: inset 3px 0 0 var(--acento), var(--sombra-1); }
.carta p { margin: 0; }
.carta-cabeza { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.carta-nombre { all: unset; cursor: pointer; font-weight: 600; font-size: .9rem; line-height: 1.3; letter-spacing: -.01em; }
.carta-nombre:hover { color: var(--marca); text-decoration: underline; text-underline-offset: .18em; }
.carta-nombre:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 3px; }
.carta-meta { color: var(--tinta-3); font-size: .78rem; }
.carta-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin: .1rem 0 !important; }
.carta-chips:empty { display: none; }
.carta-dato { font-size: .79rem; color: var(--tinta-2); }
.carta-dato a { font-weight: 500; }
.carta-proximo { display: flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 500; color: var(--ambar-tx); }
.carta-proximo::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--acento); flex: none; }
.carta.atrasado .carta-proximo { color: var(--peligro); }
.carta.atrasado .carta-proximo::before { background: var(--peligro); }
.carta-pie { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .3rem !important; padding-top: .45rem; border-top: 1px solid var(--linea); font-size: .76rem; }
.carta-pie .tenue { color: var(--tinta-3); }
select.mover { min-height: 1.8rem; max-width: 9.5rem; padding: .1rem 1.5rem .1rem .55rem; font-size: .76rem; font-weight: 500; border-radius: 99px; background-color: var(--superficie-2); background-position: right .45rem center; background-size: .6rem; color: var(--tinta-2); border-color: var(--linea); cursor: pointer; }
select.mover:hover { color: var(--tinta); }
@media (pointer: coarse) { select.mover { min-height: 2.3rem; } }
@media (max-width: 719.98px) {
  .tablero { grid-auto-columns: 86%; scroll-snap-type: x mandatory; margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; }
  .columna-tablero { min-height: 10rem; }
}

/* ---------- Hoy ---------- */
.proximo { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem 2rem; padding: 1.5rem 1.6rem;
  margin-bottom: 1.1rem; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #1D2A72 0%, #3149C6 62%, #4460E0 100%); box-shadow: var(--sombra-2); }
.proximo::after { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .09) 0 1px, transparent 1px 3.2rem);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0 40%, transparent 75%); mask-image: radial-gradient(circle at 100% 0%, #000 0 40%, transparent 75%); }
:root[data-tema="oscuro"] .proximo { background: linear-gradient(135deg, #161D4A 0%, #23349A 70%, #2E43B8 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .proximo { background: linear-gradient(135deg, #161D4A 0%, #23349A 70%, #2E43B8 100%); } }
.proximo .paso-num { grid-column: 1 / -1; margin: 0 0 -.4rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #FFD27A; display: flex; align-items: center; gap: .45rem; }
.proximo .paso-num::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px rgba(242, 181, 58, .25); }
.proximo h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.65rem); letter-spacing: -.025em; margin: 0 0 .35rem; }
.proximo p { color: rgba(255, 255, 255, .82); max-width: 62ch; margin: 0; font-size: .94rem; }
.proximo .boton.primario { background: #fff; border-color: #fff; color: #1D2A72; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.proximo .boton.primario:hover { background: #EEF1FD; border-color: #EEF1FD; color: #1D2A72; }
@media (max-width: 719.98px) {
  .proximo { grid-template-columns: minmax(0, 1fr); padding: 1.2rem 1.15rem; border-radius: var(--radio-grande); }
  .proximo .boton { width: 100%; }
}
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); gap: .65rem; margin-bottom: 1.1rem; }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem .95rem .85rem; box-shadow: var(--sombra-1); min-width: 0; }
.kpi > span { display: block; color: var(--tinta-2); font-size: .8rem; font-weight: 500; line-height: 1.3; }
.kpi b { display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin: .2rem 0 .1rem; }
.kpi b small { font-size: .85rem; font-weight: 500; color: var(--tinta-3); letter-spacing: 0; }
.kpi > small { display: block; color: var(--tinta-3); font-size: .74rem; line-height: 1.35; }
.kpi.caliente b { color: var(--naranja-tx); }
.kpi.ganado b { color: var(--verde-tx); }
@media (max-width: 719.98px) {
  .kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(8.6rem, 44%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1rem; padding: .1rem 1rem .35rem; scroll-padding-inline: 1rem; scrollbar-width: none; }
  .kpis::-webkit-scrollbar { display: none; }
  .kpi { scroll-snap-align: start; }
}
.hoy-grilla { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(19rem, 1fr); gap: 0 1.1rem; align-items: start; }
.hoy-lateral { display: grid; gap: 0; min-width: 0; }
.hoy-principal { min-width: 0; }
@media (max-width: 1199.98px) { .hoy-grilla { grid-template-columns: minmax(0, 1fr); } .hoy-lateral { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 1.1rem; } }
.agenda-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .2rem; }
.agenda-cabeza h2 { margin: 0; font-size: 1rem; }
.agenda-cabeza label { display: flex; align-items: center; gap: .5rem; }
.agenda-cabeza select { min-height: 2.1rem; padding-top: .3rem; padding-bottom: .3rem; font-size: .86rem; }
.agenda-grupo { margin-top: 1.1rem; }
.agenda-grupo h3 { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-2); }
.agenda-grupo h3 .chip { font-size: .7rem; letter-spacing: 0; }
.agenda-grupo > .tenue { font-size: .86rem; margin: 0; padding: .55rem .8rem; border-radius: var(--radio-chico); background: var(--superficie-2); }
.agenda-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.agenda-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .7rem .85rem; border-top: 1px solid var(--linea); background: var(--superficie); transition: background-color .12s; }
.agenda-fila:first-child { border-top: 0; }
.agenda-fila:hover { background: var(--hover); }
.agenda-fila .enlace-chico { margin: 0 .25rem 0 0; font-size: .93rem; font-weight: 600; color: var(--tinta); }
.agenda-fila .enlace-chico:hover { color: var(--marca); }
.agenda-fila small { display: block; color: var(--tinta-3); font-size: .8rem; margin-top: .1rem; }
.agenda-cuando { margin: .2rem 0 0; font-size: .82rem; font-weight: 500; color: var(--ambar-tx); }
.agenda-cuando .atrasado { color: var(--peligro); }
.agenda-acciones { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.agenda-semana { margin-top: 1.1rem; }
.agenda-semana summary { cursor: pointer; font-weight: 500; font-size: .88rem; color: var(--tinta-2); padding: .3rem 0; }
.agenda-semana summary:hover { color: var(--tinta); }
.agenda-semana .agenda-lista { margin-top: .5rem; }
@media (max-width: 559.98px) {
  .agenda-fila { grid-template-columns: minmax(0, 1fr); }
  .agenda-acciones { justify-content: stretch; }
  .agenda-acciones .boton { flex: 1; }
}
.referidos-hoy { border-color: color-mix(in srgb, var(--mana) 45%, var(--linea)); box-shadow: inset 3px 0 0 var(--mana), var(--sombra-1); }
.referidos-hoy h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lista-vistas { list-style: none; margin: 0; padding: 0; }
.lista-vistas li { display: grid; gap: .15rem; padding: .6rem 0; border-top: 1px solid var(--linea); }
.lista-vistas li:first-child { border-top: 0; }
.lista-vistas .enlace-chico { margin: 0; font-size: .92rem; font-weight: 600; color: var(--tinta); justify-self: start; }
.lista-vistas .enlace-chico:hover { color: var(--marca); }
.lista-vistas .tenue { font-size: .82rem; }
.referidos-hoy .lista-vistas li { gap: .3rem; }
.actividad { list-style: none; margin: 0; padding: 0; position: relative; }
.actividad li { position: relative; padding: 0 0 .8rem 1.1rem; font-size: .86rem; line-height: 1.4; }
.actividad li::before { content: ""; position: absolute; left: 0; top: .45rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--linea-fuerte); }
.actividad li::after { content: ""; position: absolute; left: calc(.21rem - .5px); top: 1.05rem; bottom: .05rem; width: 1px; background: var(--linea); }
.actividad li:last-child { padding-bottom: 0; }
.actividad li:last-child::after { display: none; }
.actividad small { display: block; color: var(--tinta-3); font-size: .76rem; margin-top: .1rem; }

/* Medidores, barras y columnas */
.medidor { padding: .75rem 0; border-top: 1px solid var(--linea); }
.medidor:first-of-type { border-top: 0; padding-top: .2rem; }
.medidor-cabeza { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: .88rem; }
.medidor-cabeza span { font-weight: 500; }
.medidor-cabeza b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.medidor-pista { height: .45rem; margin-top: .45rem; border-radius: 99px; background: var(--marca-suave); overflow: hidden; }
.medidor-pista > div { height: 100%; border-radius: 99px; background: var(--marca); }
.medidor.alerta .medidor-pista { background: var(--ambar-bg); }
.medidor.alerta .medidor-pista > div { background: var(--e-demo); }
.medidor.critico .medidor-pista { background: var(--rojo-bg); }
.medidor.critico .medidor-pista > div { background: var(--peligro); }
.medidor-nota { margin: .35rem 0 0; font-size: .8rem; color: var(--tinta-3); }
.barras { display: grid; gap: .5rem; margin: .5rem 0 .2rem; }
.barra-fila { display: grid; grid-template-columns: minmax(7.5rem, 10.5rem) minmax(0, 1fr) minmax(2.5rem, auto); gap: .7rem; align-items: center; font-size: .86rem; }
.barra-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-titulo a { color: var(--tinta); text-decoration: none; }
.barra-titulo a:hover { color: var(--marca); text-decoration: underline; }
.barra-pista { height: .7rem; display: block; background: var(--hundido); border-radius: 99px; overflow: hidden; }
.barra-relleno { display: block; height: 100%; max-width: 100%; background: var(--marca); border-radius: 99px; }
.barra-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.barra-valor small { font-weight: 400; color: var(--tinta-3); }
.columnas { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; align-items: end; height: 8.5rem; padding-top: 1.2rem; border-bottom: 1px solid var(--linea); }
.columna { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline-offset: 2px; border-radius: 4px; }
.columna-barra { display: block; width: min(100%, 22px); background: color-mix(in srgb, var(--marca) 55%, transparent); border-radius: 4px 4px 1px 1px; }
.columna.hoy .columna-barra { background: var(--marca); }
.columna-valor { font-size: .72rem; font-weight: 600; margin-bottom: .15rem; color: var(--tinta-2); }
.columna:hover .columna-barra, .columna:focus-visible .columna-barra { background: var(--marca); }
.columna:hover::after, .columna:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  background: var(--invertido); color: var(--sobre-invertido); font-size: .74rem; padding: .3rem .55rem; border-radius: 6px; pointer-events: none; box-shadow: var(--sombra-2); }
.columna:first-child:hover::after, .columna:first-child:focus-visible::after { left: 0; transform: none; }
.columna:last-child:hover::after, .columna:last-child:focus-visible::after { left: auto; right: 0; transform: none; }
.columnas-eje { display: flex; justify-content: space-between; font-size: .74rem; color: var(--tinta-3); margin: .35rem 0 .6rem; }
.columnas + .columnas-eje + p { font-size: .84rem; margin: 0; }
@media (max-width: 559.98px) { .barra-fila { grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .7rem; } .barra-pista { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- la ficha y los diálogos ---------- */
.detalle { width: min(100% - 2rem, 76rem); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--linea); border-radius: 18px; background: var(--fondo); color: var(--tinta);
  box-shadow: var(--sombra-3); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.detalle[open] { animation: subir .22s cubic-bezier(.2, .8, .2, 1); }
.detalle::backdrop { background: rgba(10, 12, 16, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: aparecer .2s ease; }
.detalle.editor { width: min(100% - 2rem, 62rem); }
.dialogo-cabeza { position: sticky; top: 0; z-index: 5; display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem .9rem 1.4rem;
  background: var(--fondo); background: color-mix(in srgb, var(--fondo) 90%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--linea); }
.dialogo-titulo { flex: 1; min-width: 0; }
.dialogo-titulo h2 { margin: 0; font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); letter-spacing: -.025em; overflow-wrap: anywhere; }
.dialogo-cabeza .boton-icono { margin: -.3rem -.4rem 0 0; }
.detalle .interior { padding: 1.1rem 1.4rem 1.6rem; }
.ficha-sobre { margin: 0 0 .2rem; font-size: .82rem; color: var(--tinta-2); }
.ficha-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .85rem; }
.acciones-rapidas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.donde { margin: 0 0 1rem; padding: .6rem .85rem; border-radius: var(--radio); background: var(--marca-suave); color: var(--tinta); font-size: .88rem;
  border: 1px solid color-mix(in srgb, var(--marca) 16%, transparent); }
.ficha-estado { padding: .9rem 1rem; margin-bottom: 1.1rem; border-radius: var(--radio-grande); background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
.ficha .fila > label.ancho, .detalle .fila > label.ancho { flex: 2 1 16rem; }
.ficha-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0 1.1rem; align-items: start; }
.ficha-col { min-width: 0; }
.ficha-bloque { margin: 0 0 1.1rem; padding: 1.1rem 1.15rem; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); box-shadow: var(--sombra-1); scroll-margin-top: 7rem; min-width: 0; }
.ficha-bloque > h3 { font-size: .98rem; font-weight: 600; margin-bottom: .7rem; }
.ficha-bloque h4 { margin: 0 0 .6rem; font-size: .9rem; }
.ficha-bloque form { display: grid; gap: .7rem; }
.ficha-bloque dl, .detalle dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .4rem 1rem; margin: 0 0 1rem; font-size: .88rem; }
.detalle dt { color: var(--tinta-3); }
.detalle dd { margin: 0; overflow-wrap: anywhere; }
.ficha-bloque.resaltado, .registro-contacto.resaltado { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 70%, transparent), var(--sombra-1); }
.problemas { list-style: none; margin: .5rem 0 .9rem; padding: 0; display: grid; gap: .55rem; }
.problemas li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .65rem; align-items: start; font-size: .88rem; }
.problemas b { font-weight: 500; }
.problemas small { display: block; color: var(--tinta-2); font-size: .8rem; line-height: 1.45; margin-top: .1rem; }
.gravedad { display: inline-block; padding: .12rem .45rem; border-radius: 99px; font-size: .66rem; font-weight: 600; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.g-alta .gravedad { background: var(--rojo-bg); color: var(--rojo-tx); }
.g-media .gravedad { background: var(--ambar-bg); color: var(--ambar-tx); }
.g-baja .gravedad { background: var(--gris-bg); color: var(--gris-tx); }
.tiene-bien { font-size: .86rem; color: var(--verde-tx); }
.captura { margin: .3rem 0 .9rem; }
.captura img { display: block; width: min(100%, 13rem); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra-2); }
.captura figcaption { font-size: .76rem; color: var(--tinta-3); margin-top: .4rem; }
.observaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .3rem 1rem; margin: 0; padding: .65rem .85rem .75rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie-2); }
.observaciones legend { padding: 0 .35rem; font-weight: 500; font-size: .86rem; }
.observaciones label.check { font-size: .85rem; align-items: flex-start; line-height: 1.35; }
.observaciones label.check input { margin-top: .1rem; }
.demo-anterior { margin: .8rem 0 0; font-size: .84rem; }
.demo-anterior .enlace-chico { margin: 0; font-size: .84rem; }
.botones-mensaje { margin: .55rem 0 1rem; align-items: center; }
.confianza { font-size: .78rem; color: var(--tinta-3); }
.registro-contacto { padding: .9rem 1rem; border-radius: var(--radio); background: var(--superficie-2); border: 1px solid var(--linea); }
.mensaje-referido { margin: 0 0 1rem; padding: .75rem .95rem; border-left: 3px solid var(--mana); background: var(--celeste-bg); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; white-space: pre-wrap; font-size: .9rem; }
.acciones-referido { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
.recorrido { list-style: none; margin: .9rem 0 0 .3rem; padding: 0 0 0 1.1rem; border-left: 1.5px solid var(--linea); font-size: .87rem; }
.recorrido li { position: relative; padding: .1rem 0 .7rem; line-height: 1.4; }
.recorrido li::before { content: ""; position: absolute; left: calc(-1.1rem - 5px); top: .4rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 3px var(--superficie); }
.recorrido li.contacto::before { background: var(--ok); }
.recorrido li.nota::before { background: var(--acento); }
.recorrido li.etapa::before { background: var(--tinta-3); }
.recorrido li.hito::before { background: var(--marca); }
.recorrido small { display: block; color: var(--tinta-3); font-size: .76rem; margin-top: .1rem; }
.recorrido .detalle-paso { display: block; color: var(--tinta-2); font-size: .83rem; font-style: italic; margin-top: .1rem; }
.ficha-datos > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.ficha-datos > summary::-webkit-details-marker { display: none; }
.ficha-datos > summary::after { content: ""; width: .75rem; height: .75rem; background: var(--chevron) center / contain no-repeat; transition: transform .2s; }
.ficha-datos[open] > summary { margin-bottom: .9rem; }
.ficha-datos[open] > summary::after { transform: rotate(180deg); }
@media (max-width: 719.98px) {
  .detalle, .detalle.editor { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .detalle[open] { animation: subir-movil .25s cubic-bezier(.2, .8, .2, 1); }
  .dialogo-cabeza { padding: max(.8rem, env(safe-area-inset-top)) .75rem .75rem 1rem; }
  .detalle .interior { padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
  .ficha-bloque { padding: 1rem; border-radius: var(--radio); }
  .problemas li { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .problemas .gravedad { justify-self: start; }
  .ficha-bloque dl, .detalle dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .detalle dd { margin-bottom: .5rem; }
}

/* ---------- Plantillas de la vitrina ---------- */
.plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: .9rem; }
.plantilla { border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; background: var(--superficie); transition: border-color .12s, box-shadow .12s; }
.plantilla:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
.plantilla header { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .35rem; }
.plantilla h3 { margin: 0 .3rem 0 0; font-size: 1rem; }
.plantilla .meta { margin: 0 0 .35rem; font-size: .84rem; color: var(--tinta-2); }
.plantilla .botones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--linea); }
.notas-plantilla { white-space: pre-wrap; }
.cambia { margin: .35rem 0 .45rem; font-size: .86rem; }
.avisos-plantilla { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .84rem; color: var(--ambar-tx); }
.avisos-plantilla li { margin-bottom: .2rem; }
.muestra-color { display: inline-block; width: .9rem; height: .9rem; border-radius: 4px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cobertura { max-height: 32rem; overflow-y: auto; }
.cobertura .grupo-fila th { position: sticky; top: 0; z-index: 1; background: var(--hundido); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); font-weight: 600; }
.cobertura td { vertical-align: middle; }
.instrucciones { position: relative; margin: .6rem 0 1rem; }
.instrucciones pre { margin: 0; padding: 1rem 1.1rem; padding-right: 9rem; max-height: 17rem; overflow: auto; white-space: pre-wrap; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio); font-size: .8rem; line-height: 1.55; color: var(--tinta-2); }
.instrucciones .boton { position: absolute; top: .6rem; right: .9rem; }
#como-plantilla details { margin-top: .7rem; border-top: 1px solid var(--linea); padding-top: .7rem; }
#como-plantilla summary { cursor: pointer; font-weight: 500; }
#como-plantilla ol, #como-plantilla ul { padding-left: 1.2rem; }
#como-plantilla li { margin-bottom: .4rem; }
#elegir-instrucciones { margin: .7rem 0 .2rem; }
.form-plantilla { display: grid; gap: 1rem; }
.form-plantilla .caja { border: 1px solid var(--linea); border-radius: var(--radio); padding: .85rem 1rem 1rem; margin: 0; min-width: 0; background: var(--superficie); }
.form-plantilla .caja > legend, .form-plantilla .caja > summary { font-weight: 600; font-size: .92rem; padding: 0 .35rem; cursor: pointer; color: var(--tinta); }
.form-plantilla details.caja[open] > summary { margin-bottom: .75rem; }
.form-plantilla .elegir-rubros { background: var(--superficie); }
.form-plantilla .rubros { max-height: 18rem; }
.form-plantilla .rubros label.toda { font-weight: 600; }
.form-plantilla .fuentes { margin-bottom: .75rem; }
.form-plantilla textarea#codigo-plantilla { font: .8rem/1.45 var(--mono); }
#analisis-pl { margin-top: .75rem; }
.colores { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-bottom: .65rem; }
.colores .muestra { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .82rem; font-family: var(--mono); color: var(--tinta); }
.colores .muestra span { width: 1.4rem; height: 1.4rem; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.marco-previa { margin-top: .9rem; background: var(--hundido); border-radius: var(--radio); padding: .6rem; }
.marco-previa iframe { display: block; width: 100%; height: 70vh; border: 0; border-radius: 8px; background: #fff; }
.marco-previa.celular iframe { width: min(100%, 390px); margin: 0 auto; border-radius: 18px; box-shadow: var(--sombra-2); }
.acciones-plantilla { position: sticky; bottom: 0; z-index: 3; margin: 0 -1.4rem -1.6rem; padding: .85rem 1.4rem; background: var(--fondo); background: color-mix(in srgb, var(--fondo) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--linea); }
.acciones-plantilla span { flex: 1; }
@media (max-width: 719.98px) { .acciones-plantilla { margin: 0 -1rem calc(-1.5rem - env(safe-area-inset-bottom)); padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); } }

/* ---------- Brecha ---------- */
.porcentaje { display: inline-flex; align-items: center; gap: .55rem; justify-content: flex-end; min-width: 8rem; }
.porcentaje i { display: block; width: 4.5rem; height: .45rem; border-radius: 99px; background: linear-gradient(90deg, var(--naranja-tx) var(--p), var(--hundido) var(--p)); }
@media (max-width: 559.98px) { .porcentaje { min-width: 0; } .porcentaje i { display: none; } }

/* ---------- Configuración ---------- */
.ajustes { display: grid; gap: 1.1rem; }
.ajuste { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: .5rem 2.5rem; padding: 1.35rem; margin: 0; }
.ajuste > header h2 { font-size: 1rem; margin-bottom: .35rem; }
.ajuste > header p { margin: 0; font-size: .86rem; color: var(--tinta-2); text-wrap: pretty; }
.ajuste-cuerpo { min-width: 0; }
.ajuste-cuerpo > p:last-child { margin-bottom: 0; }
.ajuste-cuerpo p { font-size: .9rem; }
.ajuste-cuerpo p.tenue { font-size: .84rem; }
.ajuste-cuerpo .medidor + p { margin-top: .75rem; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .85rem 1rem; align-items: end; }
.campos > .boton { justify-self: start; }
.ayuda-campo { display: block; font-weight: 400; font-size: .76rem; color: var(--tinta-3); }
@media (max-width: 899.98px) { .ajuste { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; } }
.tema-opciones { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--hundido); }
.tema-opciones label { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 8px; cursor: pointer; font-size: .86rem; color: var(--tinta-2); }
.tema-opciones input { position: absolute; opacity: 0; pointer-events: none; }
.tema-opciones label:has(input:checked) { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1), 0 0 0 1px var(--linea); }
.tema-opciones label:has(input:focus-visible) { box-shadow: var(--anillo); }
.boton-archivo { position: relative; }

/* ---------- Guía ---------- */
.guia { font-size: 1rem; line-height: 1.65; }
.guia section { margin: 3rem 0; }
.guia p, .guia li { max-width: 68ch; text-wrap: pretty; }
.guia h2 { font-size: 1.4rem; letter-spacing: -.025em; margin-bottom: .75rem; }
.guia h3 { font-size: 1.02rem; margin-top: 1.5rem; }
.guia-hero { padding: .5rem 0 0; }
.guia-hero h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); max-width: 22ch; line-height: 1.08; letter-spacing: -.035em; margin-bottom: 1rem; }
.guia-hero .bajada { font-size: 1.12rem; color: var(--tinta-2); max-width: 62ch; }
.pasos-guia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: .9rem; margin: 1.25rem 0 2rem; }
.guia .paso-guia { margin: 0; padding: 1.1rem 1.25rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); box-shadow: var(--sombra-1); }
.paso-guia h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.02rem; margin: 0 0 .6rem; }
.paso-guia h3 a { margin-left: auto; font-size: .84rem; font-weight: 500; }
.paso-guia .num { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font-size: .8rem; font-weight: 600; flex: none; }
.paso-guia > p { font-size: .92rem; color: var(--tinta-2); }
.paso-guia dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; font-size: .88rem; line-height: 1.5; }
.paso-guia dt { font-weight: 600; }
.paso-guia dd { margin: 0; color: var(--tinta-2); }
@media (max-width: 559.98px) { .paso-guia dl { grid-template-columns: 1fr; gap: .1rem; } .paso-guia dd { margin-bottom: .5rem; } }
.embudo-grilla { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: 2rem; align-items: start; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: 1.5rem; box-shadow: var(--sombra-1); }
.controles { display: grid; gap: .95rem; }
.controles label { font-weight: 500; font-size: .84rem; grid-template-columns: 1fr auto; color: var(--tinta); }
.controles input[type="range"] { grid-column: 1 / -1; width: 100%; }
.controles output { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--marca-tinta); }
.embudo { display: grid; gap: .55rem; }
.escalon { display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem; align-items: center; }
.escalon .barra { height: 2.3rem; background: var(--invertido); color: var(--sobre-invertido); border-radius: 6px; display: flex; align-items: center; padding: 0 .75rem; font-weight: 600; min-width: 3.5rem; transition: width .25s ease; }
.escalon:nth-child(2) .barra { background: #3C4A8F; color: #fff; }
.escalon:nth-child(3) .barra { background: var(--marca); color: var(--sobre-marca); }
.escalon:nth-child(4) .barra { background: var(--e-propuesta); color: #fff; }
.escalon span { font-size: .86rem; color: var(--tinta-2); }
.totales { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; border-top: 1px solid var(--linea); padding-top: 1rem; }
.totales b { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; }
.totales span { font-size: .82rem; color: var(--tinta-2); }
.nota-embudo { font-size: .82rem; margin: .7rem 0 0; }
.nichos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .9rem; margin-top: 1.25rem; }
.guia .nicho { margin: 0; padding: 1.15rem 1.25rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.guia .nicho h3 { margin-top: 0; }
.guia .nicho p { font-size: .92rem; }
.guia .nicho .oferta { font-weight: 500; font-size: .86rem; margin: 0; padding-top: .7rem; border-top: 1px solid var(--linea); color: var(--tinta); }
.linea-tiempo { padding-left: 1.2rem; }
.linea-tiempo li { margin-bottom: .5rem; }
.guia details { border-top: 1px solid var(--linea); padding: .75rem 0; max-width: 68ch; }
.guia details:last-of-type { border-bottom: 1px solid var(--linea); }
.guia summary { font-weight: 500; cursor: pointer; }
.guia summary:hover { color: var(--marca-tinta); }
.guia details p { margin: .5rem 0 0; color: var(--tinta-2); }
.guia .nota { margin-top: 1.25rem; max-width: 72ch; }
.guia .tabla-scroll { margin: 1rem 0; }
@media (max-width: 767.98px) { .embudo-grilla { grid-template-columns: 1fr; padding: 1.1rem; } .escalon { grid-template-columns: 6.5rem 1fr; } .guia section { margin: 2.25rem 0; } }

/* ---------- aviso (toast) ---------- */
.aviso { position: fixed; left: 50%; bottom: calc(1.25rem + var(--alto-abajo) + env(safe-area-inset-bottom, 0px)); z-index: 1100; transform: translate(-50%, .6rem); max-width: min(30rem, calc(100% - 2rem));
  background: var(--invertido); color: var(--sobre-invertido); padding: .7rem 1.05rem; border-radius: 12px; font-size: .88rem; font-weight: 500; box-shadow: var(--sombra-3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center; text-wrap: balance; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
html:has(dialog[open]) .aviso { bottom: 1.25rem; }

/* ---------- tutorial ---------- */
.tour-capa { position: fixed; inset: 0; z-index: 1000; }
.tour-capa > div { position: absolute; background: rgba(8, 10, 16, .62); }
.tour-foco { position: fixed; z-index: 1001; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 2px var(--acento), 0 0 0 6px color-mix(in srgb, var(--acento) 30%, transparent); transition: all .2s ease; }
.tour-foco.centrado { display: none; }
.tour-globo { position: fixed; z-index: 1002; width: min(23rem, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 16px; padding: 1.1rem 1.2rem 1rem; box-shadow: var(--sombra-3); }
.tour-globo:focus { outline: none; }
.tour-globo h2 { font-size: 1.08rem; margin-bottom: .5rem; }
.tour-texto p { margin: 0 0 .6rem; font-size: .9rem; color: var(--tinta-2); }
.tour-texto b { color: var(--tinta); }
.tour-progreso { margin: 0 0 .35rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--marca-tinta); }
.tour-botones { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; padding-top: .75rem; border-top: 1px solid var(--linea); }
.tour-botones span { flex: 1; }

/* ---------- animaciones ---------- */
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes subir-movil { from { transform: translateY(24px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Íconos dentro de links de texto: del tamaño de la letra. */
a:not(.boton) > .ico { width: .95em; height: .95em; margin-left: .2em; vertical-align: -.1em; }
[id$="-texto"]:empty { display: none; }