/* ============================================================
   Demo de Orbel — intro + aplicación CRM

   1. Base y utilidades      2. Intro (asistente de configuración)
   3. Temas                  4. Estructura de la aplicación
   5. Componentes            6. Secciones
   7. Asistente              8. Responsive

   Los temas son bloques de variables sobre `.crm[data-tema=…]`.
   Para añadir uno: copia un bloque, cambia los valores y regístralo
   en TEMAS dentro de assets/demo/nucleo.js.
   ============================================================ */

/* 1. Base ---------------------------------------------------- */
.demo{min-height:100vh;min-height:100svh}
.cargando-demo{padding:80px 0;text-align:center;color:#8e9ab2;font-family:var(--display)}
.demo [hidden]{display:none!important}

/* 2. Intro --------------------------------------------------- */
.intro{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--tinta);overflow:hidden}
.intro-fondo{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.intro-fondo span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.intro-fondo span:nth-child(1){width:620px;height:620px;top:-220px;left:-160px;background:rgba(95,230,160,.2)}
.intro-fondo span:nth-child(2){width:520px;height:520px;bottom:-200px;right:-120px;background:rgba(99,83,171,.28)}
.intro-fondo span:nth-child(3){width:380px;height:380px;top:40%;left:52%;background:rgba(174,246,207,.1)}

.intro-barra{position:relative;z-index:2;display:flex;align-items:center;gap:26px;padding:0 34px;height:78px;border-bottom:1px solid var(--linea-oscura);flex-shrink:0}
.intro-barra .marca svg{height:28px}
.intro-pasos{list-style:none;display:flex;align-items:center;gap:6px;margin:0 auto;padding:0}
.intro-pasos li{display:flex;align-items:center;gap:9px;padding:8px 15px;border-radius:30px;font-family:var(--display);font-size:12.5px;color:#7f8aa0;transition:background .3s,color .3s}
.intro-pasos li b{font-size:10.5px;letter-spacing:.1em;opacity:.7}
.intro-pasos li[aria-current=step]{background:rgba(255,255,255,.08);color:var(--claro)}
.intro-pasos li.hecho{color:var(--menta-viva)}
.intro-salir{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:13px;color:#9aa4b8;padding:9px 14px;border-radius:30px;border:1px solid var(--linea-oscura)}
.intro-salir:hover{color:var(--claro);border-color:rgba(255,255,255,.3)}
.intro-salir svg{width:12px;height:12px}

.intro-lienzo{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;padding:44px 34px 54px;overflow-y:auto}
.paso{width:min(1080px,100%);animation:paso-entra .5s var(--ease) both}
@keyframes paso-entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.paso-cabeza{max-width:720px;margin-bottom:34px}
.paso-cabeza .eyebrow{margin-bottom:14px}
.paso-cabeza h1{font-size:clamp(34px,4.4vw,58px);margin-bottom:16px}
.paso-cabeza p{font-size:16.5px;line-height:1.62;color:#c3cbd9}
.paso-pie{display:flex;align-items:center;gap:16px;margin-top:38px;flex-wrap:wrap}
.paso-pie .micro{max-width:420px}
.paso-atras{font-family:var(--display);font-size:13.5px;color:#93a0b8;display:inline-flex;align-items:center;gap:9px}
.paso-atras:hover{color:var(--claro)}
.paso-atras svg{width:13px;height:13px;transform:rotate(180deg)}

/* Paso 1 · qué es esto */
.intro-mapa{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:30px}
.intro-mapa article{border:1px solid var(--linea-oscura);border-radius:16px;padding:18px 16px;background:rgba(255,255,255,.035);position:relative;overflow:hidden}
.intro-mapa article::after{content:"";position:absolute;top:50%;right:-7px;width:12px;height:1px;background:rgba(255,255,255,.22)}
.intro-mapa article:last-child::after{display:none}
.intro-mapa svg{width:19px;height:19px;color:var(--menta);margin-bottom:11px}
.intro-mapa b{display:block;font-family:var(--display);font-size:14px;margin-bottom:5px}
.intro-mapa span{font-size:12.4px;color:#9aa4b8;line-height:1.45}
.intro-cifras{display:flex;flex-wrap:wrap;gap:12px}
.intro-cifras div{border:1px solid var(--linea-oscura);border-radius:14px;padding:14px 18px;min-width:158px}
.intro-cifras strong{display:block;font-family:var(--display);font-size:24px;letter-spacing:-.03em;color:var(--menta)}
.intro-cifras span{font-size:12.2px;color:#93a0b8}

/* Paso 2 · negocio */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;max-width:780px}
.campo-demo{display:flex;flex-direction:column;gap:9px}
.campo-demo>span{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#93a0b8}
.campo-demo input,.campo-demo select{background:rgba(255,255,255,.06);border:1px solid var(--linea-oscura);border-radius:13px;padding:15px 17px;color:var(--claro);font-size:15.5px}
.campo-demo input:focus,.campo-demo select:focus{outline:none;border-color:var(--menta-viva);background:rgba(255,255,255,.09)}
.campo-demo select option{background:#12172b;color:var(--claro)}
.previa-marca{margin-top:30px;border:1px solid var(--linea-oscura);border-radius:18px;padding:20px 22px;display:flex;align-items:center;gap:16px;max-width:520px;background:rgba(255,255,255,.04)}
.previa-marca i{width:46px;height:46px;border-radius:13px;background:var(--menta);color:#082522;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:16px;font-style:normal;flex:0 0 auto}
.previa-marca b{display:block;font-family:var(--display);font-size:16px}
.previa-marca span{font-size:12.8px;color:#93a0b8}

/* Paso 3 · paquetes */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{position:relative;text-align:left;border:1px solid var(--linea-oscura);border-radius:20px;padding:26px 24px 24px;background:rgba(255,255,255,.035);display:flex;flex-direction:column;gap:14px;transition:border-color .3s,background .3s,transform .4s var(--ease)}
.plan:hover{transform:translateY(-3px);border-color:rgba(174,246,207,.45)}
.plan[aria-pressed=true]{border-color:var(--menta-viva);background:rgba(95,230,160,.09)}
.plan[aria-pressed=true]::after{content:"";position:absolute;inset:-1px;border-radius:20px;border:1px solid var(--menta-viva);pointer-events:none}
.plan .etiqueta{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--menta)}
.plan h3{font-size:21px}
.plan .frase{font-size:13.6px;color:#a8b2c4;line-height:1.5}
.plan ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px}
.plan li{display:flex;gap:9px;font-size:13.2px;color:#c3cbd9;line-height:1.4}
.plan li svg{width:13px;height:13px;color:var(--menta-viva);flex:0 0 auto;margin-top:3px}
.plan .cuenta-mod{margin-top:auto;padding-top:14px;border-top:1px solid var(--linea-oscura);font-family:var(--display);font-size:12px;color:#8e9ab2}
.plan.recomendado{background:rgba(255,255,255,.06)}
.plan .cinta{position:absolute;top:-10px;right:20px;background:var(--menta);color:#082522;font-family:var(--display);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:20px}

/* Paso 4 · módulos */
.mod-grupos{display:flex;flex-direction:column;gap:26px;max-height:46vh;overflow-y:auto;padding-right:6px}
.mod-grupo h4{font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8e9ab2;margin-bottom:12px}
.mod-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:11px}
.mod{position:relative;text-align:left;display:flex;gap:13px;padding:15px 16px;border-radius:15px;border:1px solid var(--linea-oscura);background:rgba(255,255,255,.035);transition:border-color .25s,background .25s}
.mod:hover{border-color:rgba(174,246,207,.4)}
.mod[aria-pressed=true]{border-color:var(--menta-viva);background:rgba(95,230,160,.1)}
.mod .ico{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.07);color:var(--menta);display:grid;place-items:center;flex:0 0 auto}
.mod .ico svg{width:17px;height:17px}
.mod b{display:block;font-family:var(--display);font-size:13.8px;margin-bottom:3px}
.mod span{font-size:12.2px;color:#9aa4b8;line-height:1.42}
.mod .fijo{position:absolute;top:13px;right:14px;font-size:10px;font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;color:#7f8aa0}
.mod[data-bloqueado=si]{opacity:.5}
.mod[data-bloqueado=si] .ico{color:#8e9ab2}
.mod[data-bloqueado=si]:hover{border-color:rgba(217,119,87,.5)}
.mod .candado{position:absolute;top:12px;right:12px;width:15px;height:15px;color:#d99777}
.mod-resumen{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.2px;color:#9aa4b8}
.mod-resumen b{color:var(--menta);font-family:var(--display)}

/* Paso 5 · diseño */
.temas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:15px;max-height:50vh;overflow-y:auto;padding-right:6px}
.tema{position:relative;text-align:left;border:1px solid var(--linea-oscura);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.035);transition:transform .4s var(--ease),border-color .3s}
.tema:hover{transform:translateY(-3px)}
.tema[aria-pressed=true]{border-color:var(--menta-viva)}
.tema-lienzo{height:132px;padding:12px;display:flex;gap:8px;position:relative}
.tema-lienzo .t-lado{width:30%;border-radius:7px;padding:8px 6px;display:flex;flex-direction:column;gap:5px}
.tema-lienzo .t-lado i{display:block;height:6px;border-radius:3px;opacity:.5}
.tema-lienzo .t-lado i:first-child{opacity:1}
.tema-lienzo .t-cuerpo{flex:1;display:flex;flex-direction:column;gap:6px}
.tema-lienzo .t-kpis{display:flex;gap:5px}
.tema-lienzo .t-kpis u{flex:1;height:26px;border-radius:6px;text-decoration:none}
.tema-lienzo .t-caja{flex:1;border-radius:7px;display:flex;align-items:flex-end;gap:3px;padding:7px}
.tema-lienzo .t-caja b{flex:1;border-radius:2px 2px 0 0}
.tema-pie{padding:14px 16px 16px;border-top:1px solid var(--linea-oscura)}
.tema-pie b{display:block;font-family:var(--display);font-size:14.5px;margin-bottom:4px}
.tema-pie span{font-size:12.2px;color:#9aa4b8;line-height:1.42}
.tema[data-bloqueado=si] .tema-lienzo{filter:saturate(.35) brightness(.7)}
.tema .candado-tema{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;background:rgba(10,14,28,.82);color:#f0c9b4;font-family:var(--display);font-size:10.5px;letter-spacing:.06em}
.tema .candado-tema svg{width:12px;height:12px}
.aviso-medida{margin-top:22px;display:flex;gap:13px;align-items:flex-start;padding:17px 19px;border-radius:16px;border:1px dashed rgba(174,246,207,.36);background:rgba(95,230,160,.06);max-width:760px}
.aviso-medida svg{width:19px;height:19px;color:var(--menta);flex:0 0 auto;margin-top:2px}
.aviso-medida p{font-size:13.6px;line-height:1.55;color:#c3cbd9}
.aviso-medida b{color:var(--claro)}

/* Generación */
.generando{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;padding:60px 0}
.generando h2{font-size:clamp(28px,3.4vw,44px)}
.generando-lista{display:flex;flex-direction:column;gap:11px;width:min(430px,100%);text-align:left}
.generando-lista div{display:flex;align-items:center;gap:12px;font-size:13.8px;color:#8e9ab2;opacity:.35;transition:opacity .4s,color .4s}
.generando-lista div.on{opacity:1;color:#d3d9e6}
.generando-lista div.on svg{color:var(--menta-viva)}
.generando-lista svg{width:16px;height:16px;flex:0 0 auto;color:#5c6780}
.generando-lista div.actual{opacity:1;color:#d3d9e6}
.generando-lista div.actual svg{color:var(--menta-viva);animation:gen-pulso 1.2s ease-in-out infinite}
.generando-lista div.fallo{opacity:1;color:#ffb4a8}
.generando-lista div.fallo svg{color:#ff8a78}
@keyframes gen-pulso{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.generando-lista div.actual svg{animation:none}}
.generando-error{width:min(430px,100%);text-align:left;font-size:14px;line-height:1.6;color:#d3d9e6}
.generando-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}

/* 3. Temas --------------------------------------------------- */
.crm{
  --f:#080c1a; --f2:#0f1528; --f3:#161d33; --b:rgba(255,255,255,.1);
  --t:#eef1f7; --t2:#96a1b9; --t3:#6d7893;
  --a:#5fe6a0; --a2:rgba(95,230,160,.14); --at:#04231a;
  --ok:#5fe6a0; --warn:#f0b866; --bad:#f08a72;
  --r:16px; --rs:10px; --som:0 24px 50px -34px rgba(0,0,0,.85);
  --barra:#0f1528; --lado:#0c1222; --tipo-t:var(--display);
  --grad:none; --vidrio:none; --borde-panel:1px solid var(--b);
}
.crm[data-tema=claro]{
  --f:#f4f2ec; --f2:#fffefb; --f3:#ece9e0; --b:rgba(16,24,39,.13);
  --t:#11182a; --t2:#5e6878; --t3:#8b95a5;
  --a:#0d7a58; --a2:rgba(13,122,88,.12); --at:#f2fff9;
  --ok:#0d7a58; --warn:#a8720f; --bad:#b24a2c;
  --som:0 20px 44px -34px rgba(17,24,42,.4);
  --barra:#fffefb; --lado:#f8f6f0;
}
.crm[data-tema=indigo]{
  --f:#0b0e22; --f2:#151a3a; --f3:#1e2550; --b:rgba(255,255,255,.12);
  --t:#eceffc; --t2:#9aa2cc; --t3:#737bab;
  --a:#8f9cff; --a2:rgba(143,156,255,.16); --at:#0b0e24;
  --ok:#7ce0b0; --warn:#f2c46b; --bad:#ff8fa3;
  --r:10px; --rs:7px;
  --barra:#111533; --lado:#0e1130;
}
.crm[data-tema=esmeralda]{
  --f:#05100c; --f2:#0b1a15; --f3:#122620; --b:rgba(120,255,200,.13);
  --t:#e6f5ee; --t2:#8bab9e; --t3:#688379;
  --a:#2fd98a; --a2:rgba(47,217,138,.15); --at:#02150e;
  --r:12px; --rs:8px;
  --barra:#081611; --lado:#071310;
}
.crm[data-tema=vidrio]{
  --f:#0a1020; --f2:rgba(255,255,255,.07); --f3:rgba(255,255,255,.12);
  --b:rgba(255,255,255,.16);
  --t:#f2f6ff; --t2:#a9b6d4; --t3:#8593b3;
  --a:#7cc4ff; --a2:rgba(124,196,255,.18); --at:#04172b;
  --ok:#6fe3b4; --warn:#ffce7a; --bad:#ff9aa8;
  --r:20px; --rs:13px;
  --barra:rgba(255,255,255,.06); --lado:rgba(255,255,255,.04);
  --grad:radial-gradient(1200px 620px at 12% -8%,rgba(124,196,255,.3),transparent 62%),
         radial-gradient(900px 580px at 88% 108%,rgba(167,120,255,.28),transparent 60%),
         linear-gradient(160deg,#0a1020,#111a33 55%,#0c1526);
  --vidrio:blur(22px) saturate(1.25);
}
.crm[data-tema=neon]{
  --f:#08080f; --f2:#12121d; --f3:#1b1b2b; --b:rgba(255,255,255,.1);
  --t:#f4f2ff; --t2:#9d97c4; --t3:#736d99;
  --a:#a855f7; --a2:rgba(168,85,247,.18); --at:#0f0618;
  --ok:#22d3ee; --warn:#fbbf24; --bad:#fb7185;
  --r:18px; --rs:12px;
  --som:0 26px 60px -34px rgba(168,85,247,.5);
  --barra:#0d0d16; --lado:#0a0a12;
  --grad:radial-gradient(900px 500px at 82% -10%,rgba(168,85,247,.2),transparent 60%),
         radial-gradient(700px 460px at 8% 104%,rgba(34,211,238,.14),transparent 58%);
}
.crm[data-tema=editorial]{
  --f:#faf7f2; --f2:#fffdfa; --f3:#f2ece2; --b:rgba(48,36,24,.15);
  --t:#241c14; --t2:#6b5c4c; --t3:#95866f;
  --a:#b4531f; --a2:rgba(180,83,31,.11); --at:#fff8f2;
  --ok:#3f7d4e; --warn:#a8720f; --bad:#a83c2c;
  --r:6px; --rs:4px; --som:0 18px 40px -32px rgba(60,40,20,.5);
  --barra:#fffdfa; --lado:#f5efe5; --tipo-t:var(--serif);
}
.crm[data-tema=editorial] .crm-principal h2,
.crm[data-tema=editorial] .vista-cabeza h2{font-style:italic;letter-spacing:0}

/* 4. Estructura ---------------------------------------------- */
.crm{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--f);background-image:var(--grad);color:var(--t);font-family:var(--sans);font-size:14px}
.crm h1,.crm h2,.crm h3,.crm h4{font-family:var(--tipo-t)}

.crm-barra{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:15px;padding:0 20px;height:62px;flex-shrink:0;border-bottom:1px solid var(--b);background:var(--barra);backdrop-filter:var(--vidrio)}
.crm-barra .marca svg{height:25px;color:var(--t)}
.crm-sep{width:1px;height:24px;background:var(--b)}
.crm-negocio b{display:block;font-family:var(--display);font-size:13.5px;letter-spacing:-.01em;line-height:1.25}
.crm-negocio span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);font-family:var(--display)}
.crm-menu{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--b);flex-direction:column;align-items:center;justify-content:center;gap:4px}
.crm-menu span{display:block;width:15px;height:1.5px;background:currentColor;transition:transform .3s,opacity .25s}
.crm-menu[aria-expanded=true] span:first-child{transform:translateY(5.5px) rotate(45deg)}
.crm-menu[aria-expanded=true] span:nth-child(2){opacity:0}
.crm-menu[aria-expanded=true] span:last-child{transform:translateY(-5.5px) rotate(-45deg)}

.crm-buscar{margin-left:auto;position:relative;width:min(360px,34vw)}
.crm-buscar>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--t2);pointer-events:none}
.crm-buscar input{width:100%;background:var(--f3);border:1px solid var(--b);border-radius:30px;padding:9px 16px 9px 39px;font-size:13.5px;color:var(--t)}
.crm-buscar input:focus{outline:none;border-color:var(--a)}
.crm-sugerencias{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--f2);border:1px solid var(--b);border-radius:var(--r);box-shadow:var(--som);overflow:hidden;z-index:40;max-height:320px;overflow-y:auto}
.crm-sugerencias button{display:flex;width:100%;gap:11px;align-items:center;padding:11px 14px;text-align:left;border-bottom:1px solid var(--b)}
.crm-sugerencias button:last-child{border-bottom:0}
.crm-sugerencias button:hover,.crm-sugerencias button:focus-visible{background:var(--f3)}
.crm-sugerencias b{font-size:13px;font-family:var(--display);font-weight:500}
.crm-sugerencias span{font-size:11.5px;color:var(--t2)}
.crm-sugerencias .vacio{padding:16px;color:var(--t2);font-size:13px}

.crm-icono{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--t2);border:1px solid transparent}
.crm-icono:hover{background:var(--f3);color:var(--t)}
.crm-icono svg{width:18px;height:18px}
.crm-icono .punto{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--bad)}
.crm-yo{display:flex;align-items:center;gap:9px;font-size:13px;white-space:nowrap}
.crm-yo i{width:30px;height:30px;border-radius:50%;background:var(--a);color:var(--at);display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:700;font-size:11.5px}

.crm-cuerpo{display:grid;grid-template-columns:232px minmax(0,1fr);flex:1;min-height:0}
.crm-lado{border-right:1px solid var(--b);background:var(--lado);backdrop-filter:var(--vidrio);padding:16px 12px 24px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.crm-lado h5{font-family:var(--display);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--t3);font-weight:500;margin:18px 0 7px 11px}
.crm-lado h5:first-child{margin-top:0}
.crm-lado button{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--rs);font-size:13.4px;color:var(--t2);text-align:left;width:100%;transition:background .18s,color .18s}
.crm-lado button svg{width:17px;height:17px;flex-shrink:0}
.crm-lado button:hover{background:var(--f3);color:var(--t)}
.crm-lado button[aria-current=true]{background:var(--a2);color:var(--a);font-weight:600}
.crm-lado .insignia{margin-left:auto;font-size:10.5px;padding:2px 7px;border-radius:20px;background:var(--f3);color:var(--t2);font-variant-numeric:tabular-nums}
.crm-lado button[aria-current=true] .insignia{background:var(--a);color:var(--at)}
.crm-lado .lado-pie{margin-top:auto;padding-top:18px;border-top:1px solid var(--b);display:grid;gap:6px}
.crm-lado .lado-pie small{display:block;padding:0 11px 6px;font-size:11.5px;color:var(--t3);line-height:1.45}

.crm-principal{padding:26px 28px 90px;overflow-y:auto;min-width:0}
.crm-principal:focus{outline:none}

.vista-cabeza{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.vista-cabeza h2{font-size:26px;letter-spacing:-.03em;margin-bottom:6px}
.vista-cabeza p{font-size:13.6px;color:var(--t2);max-width:620px;line-height:1.55}
.vista-cabeza .acciones{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}

/* 5. Componentes --------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:30px;font-family:var(--display);font-size:13px;border:1px solid var(--b);color:var(--t);transition:background .2s,border-color .2s,color .2s,transform .3s var(--ease)}
.btn svg{width:14px;height:14px}
.btn:hover{background:var(--f3);transform:translateY(-1px)}
.btn.principal{background:var(--a);color:var(--at);border-color:transparent;font-weight:600}
.btn.principal:hover{filter:brightness(1.08);background:var(--a)}
.btn.fantasma{border-color:transparent;color:var(--t2)}
.btn.fantasma:hover{color:var(--t)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.peligro{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}

.tarj{background:var(--f2);border:var(--borde-panel);border-radius:var(--r);padding:20px;backdrop-filter:var(--vidrio);box-shadow:var(--som)}
.tarj-cabeza{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.tarj-cabeza h3{font-size:15.5px;letter-spacing:-.01em}
.tarj-cabeza .acciones{margin-left:auto;display:flex;gap:7px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--f2);border:var(--borde-panel);border-radius:var(--r);padding:17px 18px;backdrop-filter:var(--vidrio);position:relative;overflow:hidden}
.kpi .ico{width:32px;height:32px;border-radius:9px;background:var(--a2);color:var(--a);display:grid;place-items:center;margin-bottom:12px}
.kpi .ico svg{width:16px;height:16px}
.kpi b{display:block;font-family:var(--display);font-size:26px;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:12.2px;color:var(--t2);margin-top:5px;line-height:1.35}
.kpi .var{position:absolute;top:17px;right:17px;font-size:11.5px;font-family:var(--display);padding:3px 8px;border-radius:20px;background:var(--a2);color:var(--a)}
.kpi .var.baja{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}

.rejilla-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.rejilla-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;align-items:start}

table.tabla{width:100%;border-collapse:collapse;font-size:13.2px}
table.tabla th{text-align:left;font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);padding:0 12px 11px;border-bottom:1px solid var(--b)}
table.tabla td{padding:11px 12px;border-bottom:1px solid var(--b);color:var(--t2);vertical-align:middle}
table.tabla tr:last-child td{border-bottom:0}
table.tabla tbody tr{cursor:inherit;transition:background .15s}
table.tabla tbody tr:hover{background:var(--f3)}
table.tabla .nom{color:var(--t);font-family:var(--display);font-weight:500}
table.tabla .num{text-align:right;font-variant-numeric:tabular-nums}

.avatar{width:30px;height:30px;border-radius:50%;background:var(--f3);color:var(--t);display:grid;place-items:center;font-family:var(--display);font-size:11px;font-weight:600;flex:0 0 auto}
.avatar.a{background:var(--a2);color:var(--a)}
.celda-persona{display:flex;align-items:center;gap:10px}

.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:11.4px;font-family:var(--display);background:var(--f3);color:var(--t2);white-space:nowrap}
.chip.a{background:var(--a2);color:var(--a)}
.chip.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.chip.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.chip.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor}

.barra-prog{height:6px;border-radius:5px;background:var(--f3);overflow:hidden}
.barra-prog i{display:block;height:100%;background:var(--a);border-radius:5px;transition:width .4s var(--ease)}

.segmentado{display:inline-flex;background:var(--f3);border-radius:30px;padding:3px;gap:2px}
.segmentado button{padding:7px 14px;border-radius:30px;font-family:var(--display);font-size:12.5px;color:var(--t2)}
.segmentado button[aria-pressed=true]{background:var(--f2);color:var(--t);box-shadow:var(--som)}

.vacio-caja{padding:46px 20px;text-align:center;color:var(--t2);font-size:13.5px}
.vacio-caja svg{width:26px;height:26px;color:var(--t3);margin-bottom:12px}

/* Telón, panel lateral, avisos, brindis */
.crm-telon{position:fixed;inset:0;background:rgba(4,7,16,.6);backdrop-filter:blur(3px);z-index:45;animation:aparece .3s}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.crm-panel{position:fixed;top:0;right:0;bottom:0;width:min(470px,100%);z-index:46;background:var(--f2);border-left:1px solid var(--b);box-shadow:-30px 0 70px -40px rgba(0,0,0,.8);display:flex;flex-direction:column;animation:entra-panel .4s var(--ease);backdrop-filter:var(--vidrio)}
@keyframes entra-panel{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.crm-panel .panel-cabeza{display:flex;align-items:flex-start;gap:14px;padding:22px 22px 18px;border-bottom:1px solid var(--b)}
.crm-panel .panel-cabeza h3{font-size:18px;letter-spacing:-.02em}
.crm-panel .panel-cabeza p{font-size:12.6px;color:var(--t2);margin-top:3px}
.crm-panel .panel-cerrar{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--t2)}
.crm-panel .panel-cerrar:hover{background:var(--f3);color:var(--t)}
.crm-panel .panel-cerrar svg{width:16px;height:16px}
.crm-panel .panel-cuerpo{flex:1;overflow-y:auto;padding:20px 22px}
.crm-panel .panel-pie{padding:16px 22px;border-top:1px solid var(--b);display:flex;gap:9px;flex-wrap:wrap}

.crm-avisos-caja{position:fixed;top:70px;right:18px;z-index:44;width:min(350px,calc(100% - 36px));background:var(--f2);border:1px solid var(--b);border-radius:var(--r);box-shadow:var(--som);overflow:hidden;backdrop-filter:var(--vidrio)}
.crm-avisos-caja h4{padding:15px 17px;font-size:13.5px;border-bottom:1px solid var(--b)}
.crm-avisos-caja .av{display:flex;gap:11px;padding:13px 17px;border-bottom:1px solid var(--b);font-size:12.6px;color:var(--t2);line-height:1.45}
.crm-avisos-caja .av:last-child{border-bottom:0}
.crm-avisos-caja .av svg{width:15px;height:15px;color:var(--a);flex:0 0 auto;margin-top:2px}
.crm-avisos-caja .av b{color:var(--t);display:block;font-family:var(--display);font-weight:500;margin-bottom:2px}

.crm-brindis{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.brindis{display:flex;align-items:center;gap:11px;padding:12px 18px;border-radius:30px;background:var(--f2);border:1px solid var(--b);box-shadow:var(--som);font-size:13px;color:var(--t);animation:brinda .35s var(--ease)}
.brindis svg{width:15px;height:15px;color:var(--a)}
@keyframes brinda{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.crm-simulacion{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:29;display:inline-flex;align-items:center;gap:9px;padding:7px 18px;border-radius:14px 14px 0 0;background:var(--f2);border:1px solid var(--b);border-bottom:0;font-size:11.4px;color:var(--t2);white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.crm-simulacion svg{width:13px;height:13px;color:var(--a);flex:0 0 auto}

/* 6. Secciones ------------------------------------------------ */
/* Pipeline */
.pipeline{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:11px;overflow-x:auto;padding-bottom:12px;align-items:start}
.col-etapa{background:var(--f2);border:var(--borde-panel);border-radius:var(--r);padding:13px;min-height:190px;backdrop-filter:var(--vidrio)}
.col-etapa.encima{outline:2px dashed var(--a);outline-offset:2px}
.col-etapa h4{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:12px;font-family:var(--display)}
.col-etapa h4 .n{margin-left:auto;font-size:11px;color:var(--t2);background:var(--f3);padding:2px 8px;border-radius:20px}
.col-etapa .valor{font-size:11.2px;color:var(--t3);margin:-8px 0 12px}
.ficha{background:var(--f3);border:1px solid transparent;border-radius:var(--rs);padding:12px;margin-bottom:8px;cursor:grab;transition:border-color .2s,transform .2s}
.ficha:hover{border-color:var(--a)}
.ficha:active{cursor:grabbing}
.ficha.arrastrando{opacity:.4}
.ficha b{display:block;font-size:13px;font-family:var(--display);font-weight:500;margin-bottom:3px}
.ficha .emp{font-size:11.6px;color:var(--t2);display:block;margin-bottom:9px}
.ficha .linea{display:flex;align-items:center;gap:7px;justify-content:space-between}
.ficha .plata{font-family:var(--display);font-size:12.5px;color:var(--a)}

/* Conversaciones */
.conv{display:grid;grid-template-columns:288px minmax(0,1fr);gap:0;border:var(--borde-panel);border-radius:var(--r);overflow:hidden;background:var(--f2);height:min(640px,72vh);backdrop-filter:var(--vidrio)}
.conv-lista{border-right:1px solid var(--b);overflow-y:auto;background:var(--lado)}
.conv-lista button{display:flex;gap:11px;width:100%;padding:13px 14px;text-align:left;border-bottom:1px solid var(--b);transition:background .15s}
.conv-lista button:hover{background:var(--f3)}
.conv-lista button[aria-current=true]{background:var(--a2)}
.conv-lista .met{flex:1;min-width:0}
.conv-lista b{display:block;font-size:13px;font-family:var(--display);font-weight:500;margin-bottom:2px}
.conv-lista p{font-size:11.8px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-lista time{font-size:10.5px;color:var(--t3);flex:0 0 auto}
.conv-lista .sin-leer{width:8px;height:8px;border-radius:50%;background:var(--a);flex:0 0 auto;align-self:center}
.conv-panel{display:flex;flex-direction:column;min-width:0}
.conv-cabeza{display:flex;align-items:center;gap:12px;padding:13px 17px;border-bottom:1px solid var(--b)}
.conv-cabeza b{font-size:14px;font-family:var(--display);font-weight:500}
.conv-cabeza span{font-size:11.5px;color:var(--t2)}
.conv-cabeza .acciones{margin-left:auto;display:flex;gap:7px}
.conv-hilo{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:10px;background:
  linear-gradient(0deg,color-mix(in srgb,var(--f3) 45%,transparent),transparent)}
.msj{max-width:74%;padding:10px 14px;border-radius:15px;font-size:13.2px;line-height:1.5;position:relative;animation:msj-entra .32s var(--ease) both}
@keyframes msj-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msj.ellos{align-self:flex-start;background:var(--f3);border-bottom-left-radius:5px}
.msj.nosotros{align-self:flex-end;background:var(--a);color:var(--at);border-bottom-right-radius:5px}
.msj time{display:block;font-size:10px;opacity:.6;margin-top:5px;text-align:right}
.msj .quien{font-size:10px;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:4px}
.msj.sistema{align-self:center;background:transparent;border:1px dashed var(--b);color:var(--t2);font-size:11.6px;max-width:88%;text-align:center}
.escribiendo{align-self:flex-start;display:flex;gap:4px;padding:12px 15px;background:var(--f3);border-radius:15px;border-bottom-left-radius:5px}
.escribiendo i{width:6px;height:6px;border-radius:50%;background:var(--t2);animation:pulso-punto 1.2s infinite}
.escribiendo i:nth-child(2){animation-delay:.16s}
.escribiendo i:nth-child(3){animation-delay:.32s}
@keyframes pulso-punto{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.conv-pie{border-top:1px solid var(--b);padding:12px 15px;display:flex;flex-direction:column;gap:10px}
.conv-rapidas{display:flex;gap:7px;flex-wrap:wrap}
.conv-rapidas button{padding:7px 13px;border-radius:20px;border:1px solid var(--b);font-size:12.2px;color:var(--t2)}
.conv-rapidas button:hover{border-color:var(--a);color:var(--a)}
.conv-escribir{display:flex;gap:9px;align-items:center}
.conv-escribir input{flex:1;background:var(--f3);border:1px solid var(--b);border-radius:30px;padding:11px 17px;font-size:13.4px;color:var(--t)}
.conv-escribir input:focus{outline:none;border-color:var(--a)}
.conv-escribir button{width:40px;height:40px;border-radius:50%;background:var(--a);color:var(--at);display:grid;place-items:center;flex:0 0 auto}
.conv-escribir button svg{width:17px;height:17px}

/* Campañas */
.campana-pasos{display:flex;gap:9px;margin-bottom:20px;flex-wrap:wrap}
.campana-pasos div{display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:30px;border:1px solid var(--b);font-family:var(--display);font-size:12.5px;color:var(--t3)}
.campana-pasos div b{width:19px;height:19px;border-radius:50%;background:var(--f3);display:grid;place-items:center;font-size:10.5px}
.campana-pasos div.on{border-color:var(--a);color:var(--a)}
.campana-pasos div.on b{background:var(--a);color:var(--at)}
.campana-pasos div.hecho b{background:var(--ok);color:var(--at)}

.segmento-op{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:var(--rs);border:1px solid var(--b);margin-bottom:9px;transition:border-color .2s,background .2s;width:100%;text-align:left}
.segmento-op:hover{border-color:var(--a)}
.segmento-op[aria-pressed=true]{border-color:var(--a);background:var(--a2)}
.segmento-op .ico{width:32px;height:32px;border-radius:9px;background:var(--f3);color:var(--a);display:grid;place-items:center;flex:0 0 auto}
.segmento-op .ico svg{width:16px;height:16px}
.segmento-op b{display:block;font-size:13.3px;font-family:var(--display);font-weight:500}
.segmento-op span{font-size:11.8px;color:var(--t2)}
.segmento-op .n{margin-left:auto;font-family:var(--display);font-size:16px;color:var(--a);font-variant-numeric:tabular-nums}

.previa-correo{border:1px solid var(--b);border-radius:var(--rs);overflow:hidden;background:#fff;color:#1a1a1a}
.previa-correo .sobre{padding:11px 15px;border-bottom:1px solid rgba(0,0,0,.09);font-size:11.8px;color:#555;background:#f7f7f5}
.previa-correo .lienzo{padding:22px 20px;font-size:13.4px;line-height:1.6}
.previa-correo .lienzo h4{font-size:19px;margin-bottom:11px;color:#111;font-family:var(--display)}
.previa-correo .lienzo p{margin-bottom:11px}
.previa-correo .lienzo .cta{display:inline-block;padding:11px 20px;border-radius:30px;background:#0d5c46;color:#fff;font-size:13px;font-family:var(--display)}
.previa-correo .lienzo .pie-correo{margin-top:18px;padding-top:13px;border-top:1px solid rgba(0,0,0,.08);font-size:11px;color:#777}

.previa-wa{border:1px solid var(--b);border-radius:var(--rs);padding:16px;background:#0b141a}
.previa-wa .burbuja{background:#005c4b;color:#e9edef;padding:11px 14px;border-radius:12px;border-top-right-radius:4px;font-size:13.2px;line-height:1.5;max-width:300px;margin-left:auto;white-space:pre-wrap}
.previa-wa .meta{font-size:10.5px;color:#8696a0;margin-top:9px;text-align:right}

.envio{display:flex;flex-direction:column;gap:14px}
.envio-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.envio-cifras div{border:1px solid var(--b);border-radius:var(--rs);padding:13px 14px}
.envio-cifras b{display:block;font-family:var(--display);font-size:21px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.envio-cifras span{font-size:11.4px;color:var(--t2)}
.envio-cifras.viva b{color:var(--a)}
.envio-registro{border:1px solid var(--b);border-radius:var(--rs);height:236px;overflow-y:auto;font-size:12.4px;background:var(--f3)}
.envio-registro .fila{display:flex;align-items:center;gap:11px;padding:8px 14px;border-bottom:1px solid var(--b);animation:msj-entra .25s both}
.envio-registro .fila:last-child{border-bottom:0}
.envio-registro .fila .dest{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t2)}
.envio-registro .fila time{font-size:10.5px;color:var(--t3);font-variant-numeric:tabular-nums}

/* Automatizaciones */
.flujo{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:6px 0 14px}
.flujo .nodo-f{min-width:172px;border:1px solid var(--b);border-radius:var(--rs);padding:13px 14px;background:var(--f3);position:relative;flex:0 0 auto}
.flujo .nodo-f b{display:block;font-size:12.6px;font-family:var(--display);font-weight:500;margin-bottom:4px}
.flujo .nodo-f span{font-size:11.4px;color:var(--t2);line-height:1.4}
.flujo .nodo-f .ico{width:26px;height:26px;border-radius:8px;background:var(--a2);color:var(--a);display:grid;place-items:center;margin-bottom:9px}
.flujo .nodo-f .ico svg{width:14px;height:14px}
.flujo .flecha-f{flex:0 0 34px;display:grid;place-items:center;color:var(--t3)}
.flujo .flecha-f svg{width:15px;height:15px}
.flujo .nodo-f.activo{border-color:var(--a);box-shadow:0 0 0 3px var(--a2)}
.auto-fila{display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--b);border-radius:var(--rs);margin-bottom:10px}
.auto-fila .met{flex:1;min-width:0}
.auto-fila b{display:block;font-size:13.6px;font-family:var(--display);font-weight:500;margin-bottom:3px}
.auto-fila span{font-size:12px;color:var(--t2)}
.interruptor-crm{position:relative;width:42px;height:24px;flex:0 0 auto}
.interruptor-crm input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0}
.interruptor-crm i{position:absolute;inset:0;border-radius:20px;background:var(--f3);border:1px solid var(--b);transition:background .3s;pointer-events:none}
.interruptor-crm i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--t2);transition:transform .3s var(--ease),background .3s}
.interruptor-crm input:checked+i{background:var(--a);border-color:transparent}
.interruptor-crm input:checked+i::after{transform:translateX(18px);background:var(--at)}
.interruptor-crm input:focus-visible+i{outline:2px solid var(--a);outline-offset:3px}

/* Gráficas */
.grafica{width:100%;height:auto;display:block;overflow:visible}
.grafica .eje{stroke:var(--b);stroke-width:1}
.grafica .rot{fill:var(--t3);font-size:10px;font-family:var(--sans)}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--t2)}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.leyenda i{width:9px;height:9px;border-radius:3px}

.embudo-f{display:flex;flex-direction:column;gap:9px}
.embudo-f div{display:flex;align-items:center;gap:12px}
.embudo-f .et{width:112px;font-size:12.2px;color:var(--t2);flex:0 0 auto}
.embudo-f .bar{flex:1;height:26px;border-radius:6px;background:var(--f3);overflow:hidden}
.embudo-f .bar i{display:block;height:100%;background:var(--a);border-radius:6px;transition:width .8s var(--ease);opacity:var(--o,1)}
.embudo-f .n{width:52px;text-align:right;font-family:var(--display);font-size:13px;font-variant-numeric:tabular-nums}

/* Plantillas */
.plantillas-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.plantilla{border:1px solid var(--b);border-radius:var(--r);overflow:hidden;background:var(--f2);text-align:left;transition:border-color .25s,transform .35s var(--ease)}
.plantilla:hover{border-color:var(--a);transform:translateY(-2px)}
.plantilla .mini{height:96px;padding:11px;font-size:8.6px;line-height:1.35;overflow:hidden;background:var(--f3);color:var(--t2)}
.plantilla .mini b{display:block;font-size:11px;color:var(--t);margin-bottom:5px}
.plantilla .mini .cta-mini{display:inline-block;margin-top:7px;padding:4px 9px;border-radius:20px;background:var(--a);color:var(--at);font-size:8px}
.plantilla .met{padding:13px 15px;border-top:1px solid var(--b)}
.plantilla .met b{display:block;font-size:13.4px;font-family:var(--display);font-weight:500;margin-bottom:3px}
.plantilla .met span{font-size:11.8px;color:var(--t2)}

/* Módulos a medida */
.medida-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px}
.medida{border:1px solid var(--b);border-radius:var(--r);padding:19px;background:var(--f2);display:flex;flex-direction:column;gap:11px}
.medida .ico{width:38px;height:38px;border-radius:11px;background:var(--a2);color:var(--a);display:grid;place-items:center}
.medida .ico svg{width:19px;height:19px}
.medida b{font-size:14.5px;font-family:var(--display)}
.medida p{font-size:12.6px;color:var(--t2);line-height:1.5}
.medida .real{margin-top:auto;padding-top:11px;border-top:1px solid var(--b);font-size:11.4px;color:var(--t3);font-family:var(--display)}

/* Ajustes */
.temas-crm{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:12px}
.tema-crm{border:1px solid var(--b);border-radius:var(--rs);overflow:hidden;text-align:left;position:relative;transition:border-color .25s}
.tema-crm[aria-pressed=true]{border-color:var(--a);box-shadow:0 0 0 2px var(--a2)}
.tema-crm .muestra{height:64px;display:flex}
.tema-crm .muestra i{flex:1}
.tema-crm .met{padding:11px 13px;border-top:1px solid var(--b)}
.tema-crm .met b{display:block;font-size:12.8px;font-family:var(--display);font-weight:500}
.tema-crm .met span{font-size:11px;color:var(--t2)}
.tema-crm[data-bloqueado=si]{opacity:.55}
.tema-crm[data-bloqueado=si] .met b::after{content:" 🔒"}

/* 7. Asistente ------------------------------------------------ */
.asis-boton{position:fixed;right:22px;bottom:22px;z-index:47;width:54px;height:54px;border-radius:50%;background:var(--a);color:var(--at);display:grid;place-items:center;box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.asis-boton svg{width:25px;height:25px;position:relative;z-index:1}
.asis-boton .asis-eco{position:absolute;inset:0;border-radius:50%;border:2px solid var(--a);animation:eco 2.6s infinite}
@keyframes eco{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.asis-boton:hover{transform:scale(1.05)}
.asis{position:fixed;right:22px;bottom:22px;z-index:48;width:min(380px,calc(100% - 32px));max-height:min(620px,calc(100svh - 110px));background:var(--f2);border:1px solid var(--b);border-radius:20px;box-shadow:0 34px 70px -34px rgba(0,0,0,.85);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:var(--vidrio);animation:entra-panel .35s var(--ease)}
.asis-cabeza{display:flex;align-items:center;gap:12px;padding:16px 17px;border-bottom:1px solid var(--b)}
.asis-avatar{width:36px;height:36px;border-radius:50%;background:var(--a2);color:var(--a);display:grid;place-items:center;flex:0 0 auto}
.asis-avatar svg{width:19px;height:19px}
.asis-cabeza b{display:block;font-size:14px;font-family:var(--display)}
.asis-cabeza span{font-size:11.6px;color:var(--t2)}
.asis-cerrar{margin-left:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--t2)}
.asis-cerrar:hover{background:var(--f3);color:var(--t)}
.asis-cerrar svg{width:15px;height:15px}
.asis-hilo{flex:1;overflow-y:auto;padding:17px;display:flex;flex-direction:column;gap:11px}
.asis-msj{font-size:13.2px;line-height:1.55;padding:12px 15px;border-radius:15px;background:var(--f3);color:var(--t);max-width:92%;animation:msj-entra .3s both}
.asis-msj.yo{align-self:flex-end;background:var(--a);color:var(--at)}
.asis-msj b{font-family:var(--display)}
.asis-msj ul{margin:8px 0 0;padding-left:17px;display:grid;gap:5px}
.asis-msj li{font-size:12.6px}
.asis-acciones{padding:12px 17px 16px;border-top:1px solid var(--b);display:flex;flex-wrap:wrap;gap:7px}
.asis-acciones button{padding:8px 13px;border-radius:20px;border:1px solid var(--b);font-size:12.2px;color:var(--t2);text-align:left}
.asis-acciones button:hover{border-color:var(--a);color:var(--a)}

/* Foco guiado del recorrido */
.resaltado{position:relative;z-index:46}
.resaltado::after{content:"";position:absolute;inset:-6px;border-radius:var(--r);border:2px solid var(--a);box-shadow:0 0 0 9999px rgba(4,7,16,.55);pointer-events:none;animation:aparece .3s}

/* 8. Responsive ---------------------------------------------- */
@media (max-width:1100px){
  .rejilla-2{grid-template-columns:1fr}
  .intro-mapa{grid-template-columns:repeat(2,1fr)}
  .intro-mapa article::after{display:none}
  .planes{grid-template-columns:1fr}
}
@media (max-width:860px){
  .crm-menu{display:flex}
  .crm-cuerpo{grid-template-columns:1fr}
  .crm-lado{position:fixed;top:62px;left:0;bottom:0;width:270px;z-index:44;transform:translateX(-102%);transition:transform .35s var(--ease)}
  .crm-lado.abierto{transform:none}
  .crm-buscar{width:auto;flex:1;min-width:120px}
  .crm-negocio,.crm-sep{display:none}
  .crm-principal{padding:20px 16px 90px}
  .conv{grid-template-columns:1fr;height:auto}
  .conv-lista{max-height:220px;border-right:0;border-bottom:1px solid var(--b)}
  .conv-hilo{min-height:300px}
  .intro-barra{padding:0 16px;height:66px;gap:12px}
  .intro-pasos{display:none}
  .intro-lienzo{padding:28px 16px 40px}
  .asis{right:12px;left:12px;width:auto;bottom:12px}
  .asis-boton{right:14px;bottom:14px}
  .crm-simulacion{font-size:10.4px;padding:6px 12px}
}
@media (prefers-reduced-motion:reduce){
  .demo *,.crm *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* 9. Piezas sueltas que usan varias partes ------------------- */
@keyframes traza{to{stroke-dashoffset:0}}
@keyframes crece{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Aviso flotante de la intro cuando se toca algo bloqueado */
.aviso-flotante{position:fixed;left:50%;bottom:30px;transform:translate(-50%,22px);z-index:90;display:flex;gap:13px;align-items:flex-start;max-width:min(430px,calc(100% - 32px));padding:16px 19px;border-radius:17px;background:rgba(13,18,38,.96);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);opacity:0;transition:opacity .35s,transform .45s var(--ease);backdrop-filter:blur(14px)}
.aviso-flotante.on{opacity:1;transform:translate(-50%,0)}
.aviso-flotante svg{width:19px;height:19px;color:var(--menta);flex:0 0 auto;margin-top:2px}
.aviso-flotante b{display:block;font-family:var(--display);font-size:14px;color:var(--claro);margin-bottom:3px}
.aviso-flotante span{font-size:12.8px;color:#b9c2d2;line-height:1.5}
.aviso-flotante span b{display:inline;color:var(--menta);font-size:inherit}

/* El botón del asistente avisa cuando hay algo nuevo que contar */
.asis-boton.con-novedad::before{content:"";position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:var(--bad,#f08a72);border:2px solid var(--f);z-index:2}

/* La barra de búsqueda del CRM hereda el cursor de texto del sitio */
.crm input[type=search]{cursor:var(--cursor-texto),text}

/* Mientras el aviso de cookies está abierto, la intro se aparta para que
   nunca tape el botón de continuar. */
.con-cookies .intro-lienzo{padding-bottom:300px}
.con-cookies .crm-simulacion{opacity:0;pointer-events:none}
@media (max-width:560px){.con-cookies .intro-lienzo{padding-bottom:420px}}


/* Pastilla de icono reutilizable: evita que un SVG sin tamaño se dispare.
   El tamaño se pasa con --t; el icono ocupa la mitad. */
.pastilla{display:grid;place-items:center;flex:0 0 auto;border-radius:calc(var(--t,34px) * .29);
  width:var(--t,34px);height:var(--t,34px);background:var(--a2);color:var(--a)}
.pastilla svg{width:calc(var(--t,34px) * .5);height:calc(var(--t,34px) * .5)}
.pastilla.gris{background:var(--f3);color:var(--t3)}
/* Cualquier SVG suelto dentro de estos contenedores tiene un tamaño sensato. */
.crm .auto-fila>svg{width:15px;height:15px;color:var(--t3);flex:0 0 auto}
.crm .chip svg{width:12px;height:12px;flex:0 0 auto}
.crm .envio-registro .fila>svg{width:14px;height:14px;flex:0 0 auto}

/* Las filas que son botón heredan el centrado del <button>: se corrige. */
.crm .auto-fila{text-align:left}
.crm button.auto-fila{width:100%}

/* En el demo el botón flotante de cookies chocaría con el menú lateral.
   Las preferencias se abren desde «Diseño y ajustes». */
body.pagina-demo .cookies-fija{display:none!important}

/* Red de seguridad: un SVG sin tamaño dentro del CRM se dibuja enorme.
   Estos son los contenedores donde el icono va suelto, dentro del texto. */
.crm .msj svg{width:13px;height:13px;vertical-align:-2px;margin-right:5px}
.crm .plantilla svg,.crm .col-etapa h4 svg{width:13px;height:13px}
.crm .vista-cabeza .acciones svg{width:14px;height:14px}

/* ============================================================
   v5 · Entrada rápida, complementos y enlaces directos
   ============================================================ */
.intro-caminos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 26px}
.intro-camino{display:grid;gap:6px;text-align:left;padding:20px 22px;border-radius:18px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:var(--claro);transition:border-color .25s,background .25s,transform .25s var(--ease)}
.intro-camino svg{width:22px;height:22px;color:var(--menta)}
.intro-camino b{font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.02em}
.intro-camino span{font-size:13.6px;color:#b8c1d2;line-height:1.5}
.intro-camino:hover{border-color:var(--menta);transform:translateY(-2px)}
.intro-camino.principal{background:var(--menta);border-color:var(--menta);color:#082522}
.intro-camino.principal svg,.intro-camino.principal span{color:#0d3b2c}
.mod-etqs{display:flex!important;flex-wrap:wrap;gap:5px;margin-top:6px}
.mod-etqs .etq{font-size:10px;padding:2px 8px;white-space:normal}
.mod .etq-comp{background:rgba(160,148,255,.18);color:#c9c1ff}
.mod .etq-costo{background:rgba(255,196,92,.15);color:#ffd489}
.mod .etq-req{background:rgba(124,196,255,.14);color:#a9d6ff}
.crm .etq-lado{font-size:9.5px;padding:1px 6px;border-radius:20px;background:color-mix(in srgb,#8f7cff 22%,transparent);color:#b9adff;font-family:var(--display);margin-left:auto}
.crm .quiero{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;border-radius:12px;background:var(--a);color:var(--at);font-family:var(--display);font-size:13.4px;margin-top:8px}
.crm .quiero svg{width:14px;height:14px}
.cmp-cabeza{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;justify-content:space-between;margin-bottom:14px}
.cmp-cabeza p{max-width:640px;color:var(--t2);font-size:14px;line-height:1.6}
.cmp-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.cmp-tabs button{min-height:42px;padding:8px 16px;border-radius:12px;border:1px solid var(--b);color:var(--t2);font-family:var(--display);font-size:13.4px;display:inline-flex;align-items:center;gap:8px}
.cmp-tabs button svg{width:15px;height:15px}
.cmp-tabs button[aria-selected=true]{background:var(--a);color:var(--at);border-color:var(--a)}
.cmp-pasos{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.cmp-pasos span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:20px;border:1px solid var(--b);font-size:12.4px;color:var(--t3);font-family:var(--display)}
.cmp-pasos span b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--f3);font-size:11px}
.cmp-pasos span.on{border-color:var(--a);color:var(--t)}
.cmp-pasos span.on b{background:var(--a);color:var(--at)}
.cmp-pasos span.hecho{color:var(--a)}
.cmp-editor{width:100%;min-height:130px;border-radius:12px;border:1px solid var(--b);background:var(--f3);color:var(--t);padding:12px;font:inherit;font-size:13.4px;line-height:1.55;resize:vertical}
.cmp-editor:focus{outline:2px solid var(--a);outline-offset:1px}
.cmp-input{width:100%;min-height:42px;border-radius:12px;border:1px solid var(--b);background:var(--f3);color:var(--t);padding:8px 12px;font:inherit;font-size:13.4px}
.cmp-canal{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp-sim{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#7cc4ff 12%,transparent);color:var(--t2);font-size:12.6px;line-height:1.5;margin:10px 0}
.cmp-sim svg{width:16px;height:16px;flex:0 0 auto;color:#7cc4ff;margin-top:1px}
.cmp-respuesta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--b);font-size:13px}
.cmp-respuesta p{color:var(--t2);margin-top:2px;line-height:1.45}
@media (max-width:760px){
  .intro-caminos,.cmp-canal{grid-template-columns:1fr}
}
/* Orbi en el asistente del CRM */
.asis-boton{background:#0d1226;border:1px solid rgba(174,246,207,.4)}
.asis-boton svg.orbi{width:44px;height:44px}
.asis-avatar{background:#0d1226}
.asis-avatar svg.orbi{width:32px;height:32px}
.crm .orbi .orbi-ojos{transform-origin:32px 31px;animation:orbi-parpadeo 5s infinite}
@media (prefers-reduced-motion:reduce){.crm .orbi *{animation:none!important}}
/* `.paso span` de la portada (sección de proceso) se colaba en la intro del demo. */
.demo .paso span{letter-spacing:normal;font-family:var(--sans)}
.demo .paso .eyebrow,.demo .paso .intro-pasos span{font-family:var(--display)}
@media (max-width:760px){
  .crm .tabla{table-layout:fixed;width:100%}
  .crm .tabla td,.crm .tabla th{overflow-wrap:anywhere}
}

/* ============================================================
   v5.1 · Ajustes de lectura
   ============================================================ */

/* Selector «Todo el equipo»: sin fondo propio el navegador lo pintaba
   blanco y la letra clara del tema desaparecía. */
.crm select.btn{appearance:none;-webkit-appearance:none;background-color:var(--f2);color:var(--t);
  padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--t2) 50%),linear-gradient(135deg,var(--t2) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.crm select.btn:hover{background-color:var(--f3)}
.crm select.btn:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.crm select option{background:var(--f2);color:var(--t)}
.segmentado button{transition:background .18s,color .18s}
.segmentado button:hover{color:var(--t);background:color-mix(in srgb,var(--f2) 60%,transparent)}
.segmentado button[aria-pressed=true]:hover{background:var(--f2)}
.segmentado button:focus-visible{outline:2px solid var(--a);outline-offset:1px}
.btn.fantasma:hover{background:var(--f3)}

/* Complemento en el menú lateral: tarjeta compacta, sin pastilla partida. */
.crm .lado-comp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  width:100%;padding:10px;margin:2px 0;border-radius:var(--rs);border:1px dashed color-mix(in srgb,#8f7cff 45%,var(--b));
  background:color-mix(in srgb,#8f7cff 7%,transparent);color:var(--t2);text-align:left}
.crm .lado-comp:hover{border-style:solid;border-color:color-mix(in srgb,#8f7cff 70%,transparent);background:color-mix(in srgb,#8f7cff 12%,transparent);color:var(--t)}
.crm .lado-comp .lc-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,#8f7cff 18%,transparent);color:#a99bff}
.crm .lado-comp .lc-ico svg{width:15px;height:15px}
.crm .lado-comp .lc-txt{display:grid;gap:2px;min-width:0}
.crm .lado-comp .lc-txt b{font-size:12.8px;font-weight:600;color:var(--t);line-height:1.25}
.crm .lado-comp .lc-txt small{font-size:11px;color:var(--t3);line-height:1.2;white-space:nowrap}
.crm .lado-comp .lc-mas{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--b);color:var(--t2)}
.crm .lado-comp .lc-mas svg{width:11px;height:11px}
.crm[data-tema=claro] .lado-comp .lc-ico,.crm[data-tema=editorial] .lado-comp .lc-ico{color:#5b46d6}
.crm .etq-lado{white-space:nowrap;flex:0 0 auto}

/* Orbi: panel compacto que no empuja ni tapa el contenido principal.
   Un tema a la vez, detalles plegados y acciones en una fila corta. */
.asis{width:min(340px,calc(100% - 32px));max-height:min(460px,calc(100svh - 140px));border-radius:18px;
  box-shadow:0 22px 50px -26px rgba(0,0,0,.55);animation:entra-panel .25s var(--ease)}
.asis-cabeza{padding:10px 10px 10px 14px;gap:10px}
.asis-avatar{width:30px;height:30px}
.asis-avatar svg.orbi{width:26px;height:26px}
.asis-cabeza b{font-size:13px}
.asis-cabeza span{font-size:11px}
.asis-cerrar{width:34px;height:34px}
.asis-hilo{padding:12px 14px;gap:8px}
.asis-msj{max-width:100%;font-size:13px;padding:11px 13px;border-radius:13px}
.asis-msj.yo{max-width:88%;padding:8px 12px}
.asis-msj p{margin:4px 0 0}
.asis-msj p:first-child{margin-top:0}
.asis-msj b+p{margin-top:4px}
.asis-paso{display:block;font-family:var(--display);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--a);margin-bottom:4px}
.asis-mas{margin-top:8px;border-top:1px solid var(--b);padding-top:7px}
.asis-mas summary{cursor:pointer;font-family:var(--display);font-size:12px;color:var(--a);list-style:none;display:flex;align-items:center;gap:6px;min-height:28px}
.asis-mas summary::-webkit-details-marker{display:none}
.asis-mas summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.asis-mas[open] summary::before{transform:rotate(45deg)}
.asis-mas summary:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:6px}
.asis-mas ul{margin:4px 0 2px}
.asis-lista{display:grid;gap:5px;margin-top:8px}
.asis-lista button{text-align:left;padding:8px 10px;border-radius:10px;border:1px solid var(--b);font-size:12.4px;color:var(--t);line-height:1.35;background:var(--f2)}
.asis-lista button:hover,.asis-lista button:focus-visible{border-color:var(--a);color:var(--a)}
.asis-acciones{padding:10px 14px 12px;gap:6px}
.asis-acciones button{padding:7px 11px;font-size:12px;color:var(--t)}
.asis-acciones button.principal{background:var(--a);border-color:var(--a);color:var(--at)}
.asis-acciones button.principal:hover{filter:brightness(1.08);color:var(--at)}
.asis-acciones button:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* Saludo de la primera visita: un globo junto al botón, no un panel. */
.asis-globo{position:fixed;right:88px;bottom:26px;z-index:47;width:min(270px,calc(100% - 120px));padding:12px 14px;border-radius:14px 14px 4px 14px;
  background:var(--f2);border:1px solid var(--b);color:var(--t);box-shadow:0 18px 40px -22px rgba(0,0,0,.6);font-size:12.8px;line-height:1.45;animation:entra-panel .3s var(--ease)}
.asis-globo p{margin:0 0 9px}
.asis-globo div{display:flex;gap:6px;flex-wrap:wrap}
.asis-globo button{padding:6px 11px;border-radius:20px;font-size:12px;border:1px solid var(--b);color:var(--t)}
.asis-globo .si{background:var(--a);border-color:var(--a);color:var(--at)}
.asis-globo button:focus-visible{outline:2px solid var(--a);outline-offset:2px}
@media (max-width:620px){
  .asis{right:8px;left:8px;bottom:8px;width:auto;max-height:52svh}
  .asis-globo{right:76px;bottom:16px;width:auto;left:12px}
}
@media (prefers-reduced-motion:reduce){.asis,.asis-globo{animation:none}}

/* Selector de modo de pantalla en la intro */
.modo-elegir{border:0;margin:0 0 24px;padding:0;min-width:0}
.modo-elegir legend{font-family:var(--display);font-size:15px;color:var(--claro);margin-bottom:12px;padding:0}
.modo-opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:640px}
.modo-op{position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--linea-oscura);background:rgba(255,255,255,.04);cursor:pointer;transition:border-color .2s,background .2s}
.modo-op:hover{border-color:rgba(174,246,207,.5)}
.modo-op input{position:absolute;opacity:0;pointer-events:none}
.modo-op:has(input:checked){border-color:var(--menta-viva);background:rgba(95,230,160,.1)}
.modo-op:has(input:focus-visible){outline:2px solid var(--menta-viva);outline-offset:3px}
.modo-muestra{width:64px;height:46px;border-radius:9px;flex:0 0 auto;display:grid;grid-template-columns:30% 1fr;grid-template-rows:1fr 1fr;gap:4px;padding:5px;border:1px solid rgba(128,128,128,.3)}
.modo-muestra i{border-radius:3px}
.modo-muestra i:first-child{grid-row:1/3}
.modo-muestra.claro{background:#f4f2ec}
.modo-muestra.claro i{background:#fffefb;box-shadow:inset 0 0 0 1px rgba(16,24,39,.1)}
.modo-muestra.claro i:last-child{background:#0d7a58}
.modo-muestra.oscuro{background:#080c1a}
.modo-muestra.oscuro i{background:#161d33}
.modo-muestra.oscuro i:last-child{background:#5fe6a0}
.modo-txt{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;min-width:0}
.modo-txt svg{width:16px;height:16px;color:var(--menta)}
.modo-txt b{font-family:var(--display);font-size:15px;font-weight:500;color:var(--claro)}
.modo-txt small{grid-column:1/-1;font-size:12.3px;color:#9aa4b8;line-height:1.4;margin-top:3px}
.modo-nota{margin-top:10px;font-size:12.3px;color:#93a0b8}
.campos+.modo-elegir{margin-top:26px}
@media (max-width:560px){.modo-opciones{grid-template-columns:1fr}}

/* Intro en modo claro: la configuración también se lee en fondo claro. */
.intro[data-modo=claro]{--tinta:#f4f2ec;--claro:#11182a;--linea-oscura:rgba(16,24,39,.14);background:#f4f2ec;color:#11182a}
.intro[data-modo=claro] .intro-fondo span{opacity:.35}
.intro[data-modo=claro] .intro-barra .marca{color:#11182a}
.intro[data-modo=claro] .intro-pasos li{color:#5e6878}
.intro[data-modo=claro] .intro-pasos li[aria-current=step]{background:rgba(16,24,39,.07);color:#11182a}
.intro[data-modo=claro] .intro-pasos li.hecho,
.intro[data-modo=claro] .eyebrow,
.intro[data-modo=claro] .paso-cabeza h1 em,
.intro[data-modo=claro] .intro-mapa svg,
.intro[data-modo=claro] .intro-cifras strong,
.intro[data-modo=claro] .modo-txt svg,
.intro[data-modo=claro] .plan .etiqueta,
.intro[data-modo=claro] .plan li svg,
.intro[data-modo=claro] .mod .ico,
.intro[data-modo=claro] .mod-resumen b,
.intro[data-modo=claro] .generando-lista div.on svg,.intro[data-modo=claro] .generando-lista div.actual svg{color:#0d6b4d}
.intro[data-modo=claro] .generando-lista div.actual,.intro[data-modo=claro] .generando-error{color:#1c2433}
.intro[data-modo=claro] .generando-lista div.fallo{color:#a3261a}.intro[data-modo=claro] .generando-lista div.fallo svg{color:#a3261a}
.intro[data-modo=claro] .intro-salir,
.intro[data-modo=claro] .paso-atras{color:#4b5566}
.intro[data-modo=claro] .intro-salir:hover{border-color:rgba(16,24,39,.35)}
.intro[data-modo=claro] .paso-cabeza p,
.intro[data-modo=claro] .plan li{color:#3d4757}
.intro[data-modo=claro] .intro-mapa span,.intro[data-modo=claro] .intro-cifras span,
.intro[data-modo=claro] .campo-demo>span,.intro[data-modo=claro] .previa-marca span,
.intro[data-modo=claro] .plan .frase,.intro[data-modo=claro] .plan .cuenta-mod,
.intro[data-modo=claro] .mod span,.intro[data-modo=claro] .mod-grupo h4,.intro[data-modo=claro] .mod-resumen,
.intro[data-modo=claro] .tema-pie span,.intro[data-modo=claro] .modo-txt small,.intro[data-modo=claro] .modo-nota,
.intro[data-modo=claro] .intro-camino span,.intro[data-modo=claro] .micro,
.intro[data-modo=claro] .generando-lista div{color:#5e6878}
.intro[data-modo=claro] .generando-lista div.on{color:#11182a}
.intro[data-modo=claro] .intro-mapa article,.intro[data-modo=claro] .plan,.intro[data-modo=claro] .mod,
.intro[data-modo=claro] .tema,.intro[data-modo=claro] .previa-marca,.intro[data-modo=claro] .modo-op,
.intro[data-modo=claro] .intro-camino,.intro[data-modo=claro] .campo-demo input,.intro[data-modo=claro] .campo-demo select{background:#fffefb}
.intro[data-modo=claro] .intro-camino{border-color:rgba(16,24,39,.18)}
.intro[data-modo=claro] .intro-camino.principal{background:#0d6b4d;border-color:#0d6b4d;color:#f2fff9}
.intro[data-modo=claro] .intro-camino.principal svg,.intro[data-modo=claro] .intro-camino.principal span{color:#d7f7e8}
.intro[data-modo=claro] .intro-camino svg{color:#0d6b4d}
.intro[data-modo=claro] .intro-mapa article::after{background:rgba(16,24,39,.2)}
.intro[data-modo=claro] .campo-demo input,.intro[data-modo=claro] .campo-demo select{color:#11182a}
.intro[data-modo=claro] .campo-demo select option{background:#fffefb;color:#11182a}
.intro[data-modo=claro] .campo-demo input:focus,.intro[data-modo=claro] .campo-demo select:focus{border-color:#0d6b4d;background:#fff}
.intro[data-modo=claro] .previa-marca i,.intro[data-modo=claro] .plan .cinta{background:#0d6b4d;color:#f2fff9}
.intro[data-modo=claro] .plan:hover,.intro[data-modo=claro] .mod:hover,.intro[data-modo=claro] .modo-op:hover{border-color:rgba(13,107,77,.45)}
.intro[data-modo=claro] .plan[aria-pressed=true],.intro[data-modo=claro] .mod[aria-pressed=true],
.intro[data-modo=claro] .modo-op:has(input:checked){border-color:#0d6b4d;background:#e7f5ee}
.intro[data-modo=claro] .plan[aria-pressed=true]::after{border-color:#0d6b4d}
.intro[data-modo=claro] .tema[aria-pressed=true]{border-color:#0d6b4d;box-shadow:0 0 0 2px rgba(13,107,77,.25)}
.intro[data-modo=claro] .mod .ico{background:rgba(13,107,77,.1)}
.intro[data-modo=claro] .mod .etq-comp{background:rgba(91,70,214,.1);color:#4b37c0}
.intro[data-modo=claro] .mod .etq-costo{background:rgba(168,114,15,.12);color:#7f560b}
.intro[data-modo=claro] .mod .etq-req{background:rgba(30,110,190,.1);color:#1b5c9e}
.intro[data-modo=claro] .generando-barra{background:rgba(16,24,39,.1)}
.intro[data-modo=claro] .modo-op:has(input:focus-visible){outline-color:#0d6b4d}
.intro[data-modo=claro] .aviso-medida{border-color:rgba(13,107,77,.35);background:rgba(13,107,77,.05)}
.intro[data-modo=claro] .aviso-medida p{color:#3d4757}
.intro[data-modo=claro] .aviso-medida svg{color:#0d6b4d}
/* El foco al cambiar de paso es para lectores de pantalla; no hace falta el recuadro. */
.paso h1:focus{outline:none}
.mod-resumen{display:block;line-height:1.6}
/* Barra del CRM en celular: el botón de claro/oscuro no se puede aplastar. */
.crm-icono{flex:0 0 auto}
@media (max-width:620px){
  .crm-barra{gap:8px;padding:0 12px}
  .crm-buscar{min-width:0}
  .crm-yo>span{display:none}
}