/* ============================================================
   Réplica del CRM de Díaz Marketing en HTML (copiada de la web el 17-09-2026):
   1) panel base .cseo/.cs-* de css/seo.css (líneas 358-503) · 2) piel del CRM de css/crm.css.
   No depende de la web: va con las landings. Fuente del CRM: Plus Jakarta Sans.
   ============================================================ */
/* ---------- 4 · Réplica del panel «Centro SEO» ---------- */
.cseo{
  --p-bg:#0E1116; --p-panel:#151A21; --p-panel2:#1B212A; --p-raise:#212936;
  --p-line:#262E39; --p-line2:#2F3945;
  --p-text:#E6EAF0; --p-dim:#98A3B3; --p-faint:#7B8797;
  --p-gold:#C9A84C; --p-gold-dim:#8A7331;
  --p-ok:#3DD68C; --p-warn:#E0A33A; --p-bad:#E25563; --p-info:#5B8DEF;
  --p-side:212px;
  display:grid;grid-template-columns:var(--p-side) 1fr;
  font-family:'Archivo',sans-serif;font-size:12.5px;line-height:1.5;color:var(--p-text);
  background:var(--p-bg);text-align:left;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-font-smoothing:antialiased;
}
.cseo *{box-sizing:border-box}
.cseo .mono,.cseo .num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* lateral */
.cs-side{
  background:linear-gradient(180deg,#12161C 0%,#0F1318 100%);border-right:1px solid var(--p-line);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.cs-brand{padding:18px 18px 16px;border-bottom:1px solid var(--p-line);display:flex;align-items:center;gap:10px}
.cs-brand .sq{
  width:28px;height:28px;border-radius:6px;flex:0 0 28px;
  background:linear-gradient(135deg,var(--p-gold) 0%,#9C8138 100%);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;color:#0E1116;letter-spacing:-.03em;
}
.cs-brand strong{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.cs-brand small{display:block;font-size:9.5px;color:var(--p-faint);letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.cs-nav{padding:14px 10px;flex:1;min-height:0}
.cs-grupo{margin-bottom:16px}
.cs-grupo>span{display:block;font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--p-faint);padding:0 8px 7px;font-weight:600}
.cs-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 10px;border-radius:7px;color:var(--p-dim);font-size:12.4px;font-weight:500;position:relative;
}
.cs-item.on{background:var(--p-raise);color:var(--p-text);font-weight:600}
.cs-item.on::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:0 3px 3px 0;background:var(--p-gold);
}
.cs-item .pill{margin-left:auto;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:20px;font-family:'IBM Plex Mono',monospace}
.cs-item .pill.red{background:rgba(226,85,99,.16);color:var(--p-bad)}
.cs-item .pill.amber{background:rgba(224,163,58,.16);color:var(--p-warn)}
.cs-sidefoot{padding:12px 16px;border-top:1px solid var(--p-line);font-size:10px;color:var(--p-faint);line-height:1.5}

/* principal */
.cs-main{min-width:0;display:flex;flex-direction:column;min-height:0;position:relative}
.cs-top{
  display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--p-line);
  background:rgba(14,17,22,.82);flex-wrap:wrap;row-gap:8px;
}
.cs-top .crumb{font-size:10px;color:var(--p-faint);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1px}
.cs-top h3{font-size:15.5px;font-weight:700;letter-spacing:-.015em;margin:0;font-family:'Archivo',sans-serif;line-height:1.2;color:var(--p-text)}
.cs-chips{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cs-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;padding:5px 10px;border-radius:20px;
  border:1px solid var(--p-line2);background:var(--p-panel);color:var(--p-dim);
  font-family:'IBM Plex Mono',ui-monospace,monospace;white-space:nowrap;
}
.cs-chip .dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px;background:var(--p-faint);transition:background .3s,box-shadow .3s}
.cs-chip .si{display:none}
.cs-chip.on .dot{background:var(--p-ok);box-shadow:0 0 0 3px rgba(61,214,140,.13)}
.cs-chip.on .no{display:none}
.cs-chip.on .si{display:inline}
.cs-chip.fijo .dot{background:var(--p-ok);box-shadow:0 0 0 3px rgba(61,214,140,.13)}

.cs-scroll{padding:22px 24px 40px;flex:1;min-height:0}
.cs-aviso{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--p-line2);border-left:2px solid var(--p-warn);
  background:linear-gradient(90deg,rgba(224,163,58,.07),transparent 70%);
  padding:11px 14px;border-radius:0 9px 9px 0;margin-bottom:18px;
}
.cs-aviso b{color:var(--p-text);font-weight:600}
.cs-aviso p{font-size:11.8px;color:var(--p-dim);margin:2px 0 0}

.cs-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.cs-kpi{background:var(--p-panel);border:1px solid var(--p-line);border-radius:11px;padding:14px 15px;position:relative;overflow:hidden}
.cs-kpi::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--p-gold-dim),transparent 60%);opacity:.5;
}
.cs-kpi .lab{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--p-faint);font-weight:600}
.cs-kpi .val{font-size:26px;font-weight:700;letter-spacing:-.035em;margin:6px 0 2px;font-family:'IBM Plex Mono',monospace;color:var(--p-text)}
.cs-kpi .delta{font-size:11px;font-family:'IBM Plex Mono',monospace;transition:opacity .4s}
.cs-kpi .delta.up{color:var(--p-ok)}
.cs-kpi .delta.down{color:var(--p-bad)}
.cs-kpi .delta[data-espera]{opacity:0}
.cs-kpi .delta[data-espera].on{opacity:1}

.cs-grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin-bottom:12px}
.cs-card{background:var(--p-panel);border:1px solid var(--p-line);border-radius:11px;overflow:hidden}
/* Cabecera de tarjeta. Es un div y no un <header> porque styles.css fija
   todos los <header> de la web a la ventana. */
.cs-cab{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--p-line)}
.cs-cab h4{font-size:12.5px;font-weight:600;letter-spacing:-.005em;margin:0;font-family:'Archivo',sans-serif;color:var(--p-text)}
.cs-cab .tag{margin-left:auto;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--p-faint);font-weight:600;white-space:nowrap}
.cs-card .body{padding:14px 15px}
.cs-card .body p{font-size:12.2px;color:var(--p-dim);line-height:1.6;margin:0}
.cs-card .body p+p{margin-top:10px}
.cs-card .body p b{color:var(--p-text);font-weight:600}
.cs-card .nota{font-size:11px;color:var(--p-faint);margin-top:10px;line-height:1.55}

.cseo table{width:100%;border-collapse:collapse;font-size:12px}
.cseo th{
  text-align:left;padding:8px 15px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-faint);font-weight:600;border-bottom:1px solid var(--p-line);background:var(--p-panel2);
}
.cseo td{padding:9px 15px;border-bottom:1px solid rgba(38,46,57,.55);vertical-align:middle;color:var(--p-text)}
.cseo tr:last-child td{border-bottom:0}
.cseo th.r,.cseo td.r{text-align:right}
.cseo th.c,.cseo td.c{text-align:center}
.cseo td.url{color:var(--p-dim);font-size:11.5px}
.cseo td.url b,.cseo td b{color:var(--p-text);font-weight:600}
.cseo .bar{height:3px;border-radius:3px;background:var(--p-line2);overflow:hidden;margin-top:5px}
.cseo .bar span{display:block;height:100%;border-radius:3px;background:var(--p-gold)}
.cs-badge{
  display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;padding:3px 7px;border-radius:5px;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.02em;white-space:nowrap;
}
.b-ok{background:rgba(61,214,140,.12);color:var(--p-ok)}
.b-bad{background:rgba(226,85,99,.13);color:var(--p-bad)}
.b-warn{background:rgba(224,163,58,.13);color:var(--p-warn)}
.b-off{background:var(--p-raise);color:var(--p-dim)}
.b-info{background:rgba(91,141,239,.13);color:var(--p-info)}

/* filas que se verifican con el scroll: mientras no toca, muestran «pendiente» */
tr[data-en] .cs-badge{display:none}
tr[data-en] .cs-badge.pend{display:inline-flex}
tr[data-en].ok .cs-badge{display:inline-flex}
tr[data-en].ok .cs-badge.pend{display:none}

.cs-btn{
  display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 'Archivo',sans-serif;
  padding:8px 12px;border-radius:7px;background:var(--p-gold);color:#0E1116;border:0;
}
.cs-btn.ghost{background:transparent;border:1px solid var(--p-line2);color:var(--p-dim)}
.cs-progress{height:3px;border-radius:3px;background:var(--p-line2);overflow:hidden;margin:12px 15px 0}
.cs-progress span{display:block;height:100%;width:62%;background:var(--p-gold)}


/* ---------- piel del CRM (css/crm.css) ---------- */
/* ============================================================
   Díaz Marketing · réplica del CRM propio dentro de las páginas de
   servicio (optimizacion-del-pipeline.html y automatizacion-comercial.html).

   Se carga DESPUÉS de seo.css y reutiliza su esqueleto entero (.cseo,
   .cs-side, .cs-top, .cs-card, .cs-kpi, .cs-chip, .cs-vista, .cs-recorte…):
   así las dos páginas nuevas se comportan exactamente igual que la de SEO y
   js/seo.js las gobierna sin cambiar una línea. Aquí solo cambia la piel,
   para que sea la del CRM (lienzo hundido, paneles que flotan, violeta,
   Plus Jakarta Sans), y se añaden las piezas que el panel SEO no tenía:
   tablero de etapas, tarjetas de lead con su nota, reglas con interruptor,
   embudo, campañas, ficha, chat e informe.

   Los colores son los de src/app/globals.css del CRM, literales, con una
   sola excepción: el gris tenue sube un punto para pasar AA a 11 px sobre
   los paneles.
   ============================================================ */

.cseo.crm{
  --p-bg:#06060b; --p-panel:#1a1a24; --p-panel2:#25252f; --p-raise:#25252f;
  --p-line:#3a3a49; --p-line2:#454558;
  --p-text:#eff0f6; --p-dim:#a0a0b6; --p-faint:#8b8ba2;
  /* el violeta del CRM ocupa el sitio del oro del panel SEO */
  --p-gold:#7c6dff; --p-gold-dim:#5f52c9;
  --p-ok:#34d399; --p-warn:#eeae45; --p-bad:#ef6353; --p-info:#6797f5;
  --p-barra:#101019;
  --e-nuevo:#7c8aa8; --e-contactado:#4d8bd4; --e-reunion:#6d5efc;
  --e-propuesta:#e0a33a; --e-cliente:#34d399; --e-perdido:#6b6b76;
  /* etapas de prospección (prospeccion-tipos.ts): de frío a cerrado, «No» no es columna */
  --e-sin:#7c8aa8; --e-escrito:#38bdf8; --e-respondio:#6d5efc; --e-reunionp:#e0a33a; --e-cerrado:#34d399;
  --p-side:226px;
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;font-size:13px;
  background-color:var(--p-bg);
  /* el ambiente del CRM: tres brillos tenues por debajo de los paneles */
  background-image:
    radial-gradient(1100px 620px at 12% -12%,rgba(124,109,255,.26),transparent 62%),
    radial-gradient(980px 560px at 104% 104%,rgba(83,140,246,.18),transparent 60%),
    radial-gradient(820px 680px at 60% 45%,rgba(190,120,255,.075),transparent 64%);
  background-size:auto;
}
.crm .mono,.crm .num{font-family:inherit;font-variant-numeric:tabular-nums}
.vit-marco.marco-crm,.vis-marco.marco-crm,.cie-marco.marco-crm,.marco-crm .cs-recorte{background:#06060b}

/* ---------- lateral ---------- */
.crm .cs-side{background:var(--p-barra);border-right:1px solid var(--p-line)}
.crm .cs-brand{padding:18px 16px 14px;border-bottom:1px solid rgba(58,58,73,.6)}
.crm .cs-brand .sq{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:linear-gradient(135deg,#8b7cff,#5f52c9);color:#fff;font-size:14px;font-weight:800;
  box-shadow:0 0 0 3px rgba(124,109,255,.18);
}
.crm .cs-brand strong{font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.crm .cs-brand small{font-size:11px;letter-spacing:0;text-transform:none;color:var(--p-dim);margin-top:1px}
/* La lista de apartados es más alta que el panel: se corta limpia con un
   desvanecido antes del pie, en vez de pisarlo. */
.crm .cs-nav{
  padding:8px 10px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 24px),transparent);
}
.crm .cs-grupo{margin-bottom:4px;border-top:1px solid rgba(58,58,73,.45);padding-top:4px}
.crm .cs-grupo:first-child{border-top:0;padding-top:0}
.crm .cs-grupo>span{
  display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.16em;font-weight:800;
  color:var(--g,var(--p-dim));padding:8px 8px 6px;text-transform:uppercase;
}
.crm .chapa{
  width:18px;height:18px;border-radius:5px;flex:0 0 18px;
  background:color-mix(in srgb,var(--g) 18%,transparent);display:inline-flex;align-items:center;justify-content:center;color:var(--g);
}
.crm .chapa svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.crm .cs-item{gap:11px;padding:8px 10px 8px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--p-dim)}
.crm .cs-item svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.crm .cs-item.on{background:color-mix(in srgb,var(--g,#7c6dff) 16%,transparent);color:var(--p-text)}
.crm .cs-item.on::before{left:-10px;width:3px;height:18px;background:var(--g,var(--p-gold))}
.crm .cs-item .pill{font-family:inherit;background:var(--p-gold);color:#fff;font-size:10px;padding:1px 7px;border-radius:999px}
.crm .cs-sidefoot{position:relative;z-index:1;background:var(--p-barra);padding:10px 14px;font-size:12.5px;color:var(--p-dim);display:flex;align-items:center;gap:9px;border-top:1px solid rgba(58,58,73,.6)}
.crm .sq-mini{width:22px;height:22px;border-radius:50%;background:#0b0b12;border:1px solid var(--p-line);display:inline-grid;place-items:center;font-size:11px;font-weight:800;color:#fff}

/* ---------- cabecera de la vista ---------- */
.crm .cs-top{background:transparent;border-bottom:0;padding:22px 26px 4px;align-items:flex-start}
.crm .cs-top>div:first-child{display:flex;flex-direction:column-reverse}
.crm .cs-top h3{font-size:26px;font-weight:800;letter-spacing:-.02em;font-family:inherit;line-height:1.1}
.crm .cs-top .crumb{font-size:13px;letter-spacing:0;text-transform:none;color:var(--p-dim);margin:5px 0 0;line-height:1.45}
.crm .cs-chip{font-family:inherit;font-size:11px;font-weight:600;border-radius:9px;padding:5px 9px;border-color:var(--p-line);background:var(--p-panel)}
.crm .cs-scroll{padding:12px 26px 40px}
.crm .cs-vista{padding:16px 26px 40px}
.crm .cs-aviso{
  border-color:rgba(124,109,255,.5);border-left-color:var(--p-gold);
  background:rgba(124,109,255,.1);border-radius:12px;padding:11px 14px;
}
.crm .cs-aviso b{font-weight:700}
.crm .cs-aviso p{font-size:12px}
/* en la vitrina del hero el aviso va en una línea: cada píxel de alto es tablero */
.vit-marco .crm .cs-aviso{padding:9px 14px}
.vit-marco .crm .cs-aviso>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.vit-marco .crm .cs-aviso p{margin:0}

/* ---------- barra de herramientas del pipeline ---------- */
.crm-herr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.crm-busca{
  flex:1;min-width:180px;display:flex;align-items:center;gap:8px;padding:9px 12px;
  border:1px solid var(--p-line);border-radius:12px;background:var(--p-panel);color:var(--p-faint);font-size:13px;
}
.crm-busca svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.crm-bot{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--p-line);border-radius:10px;
  font-size:12.5px;font-weight:600;color:var(--p-dim);background:transparent;white-space:nowrap;
}
.crm-bot.on,.crm-bot.primario{background:var(--p-gold);border-color:var(--p-gold);color:#fff}
.crm-bot.verde{background:#059669;border-color:#059669;color:#fff}
.crm-orden{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--p-dim)}

/* ---------- el tablero ---------- */
.crm-tablero{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.crm-col{
  border:1px solid var(--p-line);border-radius:12px;background:var(--p-panel);overflow:hidden;
  min-height:250px;display:flex;flex-direction:column;
}
.crm-col::before{content:"";display:block;height:3px;background:var(--e)}
.crm-col__cab{padding:10px 11px 9px;border-bottom:1px solid var(--p-line)}
.crm-col__cab>div{display:flex;align-items:center;justify-content:space-between;gap:6px}
.crm-col__cab b{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--e)}
.crm-col__n{
  font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--e) 14%,transparent);color:var(--e);transition:opacity .4s;
}
.crm-col__eur{margin-top:4px;font-size:12.5px;font-weight:700;color:var(--p-gold);font-variant-numeric:tabular-nums;transition:opacity .4s}
.crm-col__cuerpo{padding:8px;display:flex;flex-direction:column;gap:8px}
.crm-tarj{border:1px solid var(--p-line);border-radius:12px;background:var(--p-panel2);padding:11px}
.crm-tarj .cab{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.crm-tarj .nom{font-size:14px;font-weight:700;line-height:1.25}
.crm-nota{
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--n) 16%,transparent);color:var(--n);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--n) 30%,transparent);
}
.crm-tarj .emp{margin-top:3px;font-size:11.5px;font-weight:500;color:var(--p-dim);line-height:1.35}
.crm-tarj .eur{margin-top:6px;font-size:13px;font-weight:700;color:var(--p-gold)}
.crm-tarj .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.crm-tarj .tag{font-size:10px;font-weight:600;padding:1px 6px;border-radius:5px;background:rgba(124,109,255,.14);color:var(--p-gold)}
.crm-tarj .tag.rojo{background:rgba(239,99,83,.14);color:var(--p-bad)}
.crm-tarj .ia{margin-top:7px;font-size:11.5px;line-height:1.45;color:rgba(239,240,246,.85)}
.crm-tarj .meta{margin-top:7px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:11px;font-weight:500;color:var(--p-dim)}
.crm-tarj .meta .cita{background:rgba(103,151,245,.2);color:#8db3ff;padding:0 5px;border-radius:4px}
.crm-tarj .meta .nuevo{background:var(--p-gold);color:#fff;padding:1px 6px;border-radius:5px;font-weight:800;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.crm-tarj .meta .tarea{background:rgba(239,99,83,.14);color:var(--p-bad);padding:0 5px;border-radius:4px;font-weight:600}
.crm-acc{display:flex;gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--p-line)}
.crm-acc span{flex:1;height:24px;border:1px solid var(--p-line);border-radius:7px;display:grid;place-items:center;color:var(--p-dim)}
.crm-acc svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* en la vitrina, las tarjetas y los contadores entran con el scroll */
.crm-tarj[data-en],.crm-col__n[data-en],.crm-col__eur[data-en]{opacity:0}
.crm-tarj[data-en]{transform:translate3d(0,10px,0);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.crm-tarj[data-en].ok,.crm-col__n[data-en].ok,.crm-col__eur[data-en].ok{opacity:1;transform:none}

/* ---------- dashboard ---------- */
.crm .cs-kpis{gap:12px;margin-bottom:16px}
.crm .cs-kpi{border-radius:16px;padding:16px 18px}
.crm .cs-kpi::after{left:16px;right:16px;width:auto;background:linear-gradient(90deg,transparent,rgba(124,109,255,.5),transparent);opacity:1}
.crm .cs-kpi .lab{font-size:11px;letter-spacing:.09em;color:var(--p-dim);font-weight:700}
.crm .cs-kpi .val{font-family:inherit;font-size:30px;font-weight:800;letter-spacing:-.02em;margin:8px 0 4px;display:inline-block}
.crm .cs-kpi .delta{font-family:inherit;font-size:12.5px;font-weight:700;display:inline-block;margin-left:6px}
.crm .cs-kpi .pie{font-size:12px;color:var(--p-dim);line-height:1.4}
.crm .cs-card{border-radius:16px}
.crm .cs-cab{padding:14px 18px 6px;border-bottom:0}
.crm .cs-cab h4{font-size:16px;font-weight:800;letter-spacing:-.01em;font-family:inherit}
.crm .cs-cab .tag{font-size:12px;letter-spacing:0;text-transform:none;font-weight:700;color:var(--p-dim)}
.crm .cs-card .body{padding:0 18px 16px}
.crm .cs-card .body p{font-size:13px;color:var(--p-dim)}
.crm .cs-grid2{grid-template-columns:1.35fr 1fr;gap:12px}
.crm-pasos{display:flex;flex-direction:column;gap:8px;padding:0 18px 16px}
.crm-paso{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-panel2)}
.crm-paso .pt{width:9px;height:9px;border-radius:50%;flex:0 0 9px;margin-top:5px;background:var(--u)}
.crm-paso .que{font-size:13.5px;font-weight:700;line-height:1.3}
.crm-paso .quien{font-size:12px;color:var(--p-dim);margin-top:2px;line-height:1.4}
.crm-paso .quien b{color:rgba(239,240,246,.85);font-weight:600}
.crm-paso .urg{
  margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;color:var(--u);background:color-mix(in srgb,var(--u) 12%,transparent);
}
.crm-embudo{list-style:none;margin:0;padding:0 18px 16px;display:flex;flex-direction:column;gap:12px}
.crm-embudo li>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;font-size:13px;font-weight:700}
.crm-embudo li>div span{display:flex;align-items:center;gap:8px}
.crm-embudo .pt{width:9px;height:9px;border-radius:50%;background:var(--e);flex:0 0 9px}
.crm-embudo li>div em{font-style:normal;color:var(--p-dim);font-weight:600;font-variant-numeric:tabular-nums}
.crm-embudo li>div em b{color:var(--p-text)}
.crm-embudo .barra{height:8px;border-radius:999px;background:var(--p-panel2);overflow:hidden}
.crm-embudo .barra i{display:block;height:100%;border-radius:999px;background:var(--p-gold);transform:scaleX(var(--b,1));transform-origin:left;transition:transform .35s var(--ease)}
.crm-embudo .barra.frio i{background:var(--p-info)}

/* ---------- automatizaciones ---------- */
.crm-general{
  border:1px solid rgba(238,174,69,.4);background:rgba(238,174,69,.06);border-radius:14px;padding:16px 18px;margin-bottom:14px;
  transition:border-color .4s,background .4s;
}
.crm-general.ok{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.06)}
.crm-general h4{font-size:16px;font-weight:700;margin:0;font-family:inherit}
.crm-general p{font-size:13px;color:var(--p-dim);line-height:1.5;margin:4px 0 0;max-width:52ch}
.crm-general .si,.crm-general.ok .no{display:none}
.crm-general.ok .si{display:inline}
.crm-general .fila{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* texto corrido (no flex): la cifra y el desglose son parte de la misma frase */
.crm-general .pie{margin-top:12px;padding-top:11px;border-top:1px solid rgba(58,58,73,.5);font-size:12.5px;color:var(--p-dim);line-height:1.6}
.crm-general .pie b,.crm-general .pie .val{color:var(--p-text);font-weight:700}
.crm-general .pie .crm-bot{margin-left:8px;vertical-align:middle}
/* el desglose «3 listas y 1 bloqueada» espera a que la cifra termine de contar */
.crm .delta[data-espera]{opacity:0;transition:opacity .4s}
.crm .delta[data-espera].on{opacity:1}
.crm-general.ok .crm-bot.verde{background:transparent;border-color:var(--p-line);color:var(--p-dim)}
.crm-general.ok .crm-bot.verde .enc,.crm-general .crm-bot.verde .apa{display:none}
.crm-general.ok .crm-bot.verde .apa{display:inline}
.crm-reglas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.crm-reglas.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.crm-regla{border:1px solid var(--p-line);border-radius:14px;background:var(--p-panel);padding:14px 15px;transition:opacity .45s var(--ease)}
.crm-regla[data-en]{opacity:.5}
.crm-regla[data-en].ok{opacity:1}
.crm-regla .cab{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.crm-regla h5{font-size:14px;font-weight:700;margin:0;font-family:inherit;line-height:1.3}
.crm-regla .esc{
  display:inline-block;margin-left:6px;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 5px;border-radius:4px;background:rgba(103,151,245,.16);color:#8db3ff;vertical-align:middle;
}
.crm-regla .cuando{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--p-text)}
.crm-regla .cuando b{color:var(--p-gold);font-weight:600}
.crm-regla .porque{margin:7px 0 0;font-size:11.5px;line-height:1.5;color:var(--p-dim)}
.crm-regla .pie{margin-top:11px;padding-top:10px;border-top:1px solid var(--p-line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--p-dim)}
.crm-regla .dias{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.crm-regla .dias i{
  font-style:normal;display:inline-grid;place-items:center;min-width:34px;height:24px;border:1px solid var(--p-line);border-radius:7px;
  background:var(--p-bg);color:var(--p-text);font-size:12.5px;font-variant-numeric:tabular-nums;
}
.crm-regla .pie b{color:var(--p-text)}
.crm-switch{position:relative;width:38px;height:22px;flex:0 0 38px;border-radius:999px;background:var(--p-line);transition:background .35s}
.crm-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.ok .crm-switch,.crm-switch.on{background:var(--p-gold)}
.ok .crm-switch::after,.crm-switch.on::after{transform:translateX(16px)}
.crm-disparos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.crm-disparo{display:grid;grid-template-columns:auto 1fr auto;gap:10px 12px;align-items:center;padding:10px 13px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-panel2)}
.crm-disparo .regla{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p-gold);padding:3px 8px;border-radius:6px;background:rgba(124,109,255,.14);white-space:nowrap}
.crm-disparo .quien{font-size:13px;font-weight:700}
.crm-disparo .quien span{display:block;font-size:11.5px;font-weight:500;color:var(--p-dim);margin-top:1px}
.crm-disparo .acc{font-size:11px;color:var(--p-dim);text-align:right;white-space:nowrap}
.crm-disparo.bloq .quien{text-decoration:line-through;color:var(--p-dim)}
.crm-disparo.bloq .acc{color:var(--p-warn);font-weight:700}

/* ---------- campañas ---------- */
.crm-lado{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.crm-segs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.crm-seg{border:1px solid var(--p-line);border-radius:10px;padding:10px 12px;background:var(--p-panel2)}
.crm-seg.on{border-color:var(--p-gold);background:rgba(124,109,255,.12)}
.crm-seg b{display:block;font-size:12.5px;font-weight:700}
.crm-seg span{display:block;font-size:11px;color:var(--p-dim);line-height:1.4;margin-top:2px}
/* gana a «.crm .cs-card .body p», que si no la deja a 13 px */
.crm-grande,.crm .cs-card .body .crm-grande{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--p-text);margin:0 0 4px}
.crm-lista{list-style:none;margin:0;padding:0;font-size:12.5px;display:flex;flex-direction:column;gap:6px}
.crm-lista li b{font-weight:700}
.crm-lista li span{color:var(--p-dim)}
.crm-aviso-rojo{border:1px solid rgba(238,174,69,.5);background:rgba(238,174,69,.08);border-radius:12px;padding:12px 14px;font-size:12.5px;font-weight:700;color:var(--p-warn);line-height:1.4}
.crm-aviso-rojo .bots{display:flex;gap:8px;margin-top:10px}
.crm-aviso-rojo .crm-bot{font-size:12px;padding:7px 12px}
.crm-bot.rojo{background:#e06a5b;border-color:#e06a5b;color:#fff}

/* ---------- ficha y calificación ---------- */
.crm-ficha{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.crm-ficha h4{font-size:24px;font-weight:800;margin:0;letter-spacing:-.02em;font-family:inherit}
.crm-ficha .emp{font-size:14px;font-weight:700;color:var(--p-dim);display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.crm-estado{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:6px;background:color-mix(in srgb,var(--e) 16%,transparent);color:var(--e)}
.crm-cal{display:flex;align-items:center;gap:12px;border:1px solid var(--p-line);border-radius:12px;padding:10px 14px;background:var(--p-panel2)}
.crm-cal .n{font-size:30px;font-weight:800;color:var(--n);line-height:1;font-variant-numeric:tabular-nums}
.crm-cal small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--n)}
.crm-cal span{font-size:11.5px;color:var(--p-dim)}
.crm-factores{list-style:none;margin:0;padding:0 18px 16px;display:flex;flex-direction:column;gap:10px}
.crm-factores li{display:grid;grid-template-columns:1fr auto;gap:3px 12px;font-size:12.5px;align-items:baseline}
.crm-factores li span{color:var(--p-dim);font-size:11.5px;grid-column:1/-1;line-height:1.4}
.crm-factores li b{font-variant-numeric:tabular-nums;font-weight:700}
.crm-factores .barra{grid-column:1/-1;height:6px;border-radius:999px;background:var(--p-panel2);overflow:hidden}
.crm-factores .barra i{display:block;height:100%;background:var(--p-gold);transform:scaleX(var(--b,1));transform-origin:left}
.crm-factores li.resta .barra i{background:var(--p-bad)}
.crm-resumen-ia{margin:0 18px 14px;padding:11px 13px;border-radius:12px;border:1px solid rgba(124,109,255,.3);background:rgba(124,109,255,.08);font-size:12.5px;line-height:1.5}
.crm-resumen-ia b{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--p-gold);margin-bottom:4px}
.crm-botones{display:flex;gap:8px;flex-wrap:wrap}
.crm-botones .crm-bot{flex:1;justify-content:center;min-width:90px}

/* ---------- tareas ---------- */
.crm-tareas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.crm-tarea{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--p-line);border-radius:11px;background:var(--p-panel2);font-size:13px}
.crm-tarea .cb{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--p-line2);flex:0 0 16px}
.crm-tarea.hecha .cb{background:var(--p-gold);border-color:var(--p-gold)}
.crm-tarea.hecha{opacity:.55;text-decoration:line-through}
.crm-tarea .t{flex:1;min-width:0}
.crm-tarea .cuando{margin-left:auto;font-size:11px;color:var(--p-dim);white-space:nowrap}
.crm-tarea .cuando.tarde{color:var(--p-bad);font-weight:700}

/* ---------- chat de Instagram ---------- */
.crm-chat{display:flex;flex-direction:column;gap:8px}
.crm-msg{max-width:78%;padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.45;background:var(--p-panel2);border:1px solid var(--p-line)}
.crm-msg.mio{align-self:flex-end;background:rgba(124,109,255,.2);border-color:rgba(124,109,255,.35)}
.crm-msg time{display:block;font-size:10px;color:var(--p-faint);margin-top:4px}
.crm-plazo{font-size:12px;color:var(--p-warn);font-weight:700;margin:0 0 10px}

/* ---------- informe mensual (es el correo: por eso va en claro) ---------- */
.crm-informe{background:#fff;color:#161a26;border-radius:12px;padding:18px 20px}
.crm-informe .marca{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#5f4ef0}
.crm-informe h5{font-size:18px;font-weight:800;margin:4px 0 2px;color:#161a26;font-family:inherit}
.crm-informe .para{font-size:12px;color:#616a7d}
.crm-informe .resumen{margin:12px 0;padding:9px 12px;border-left:3px solid #5f4ef0;background:#f1f0ff;font-size:12.5px;color:#161a26}
/* nombres propios (inf-*) para no chocar con .sec de la hoja general */
.crm-informe .inf-sec{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#616a7d;margin:12px 0 6px}
.crm-informe .inf-h{display:grid;grid-template-columns:22px auto 1fr;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid #eef0f4;font-size:12.5px}
.crm-informe .inf-h .d{color:#616a7d;font-size:11px}
.crm-informe .inf-h .t{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:#eef2f8;color:#616a7d}

/* ---------- tablas ---------- */
.crm table{font-size:12.5px}
.crm th{font-size:10.5px;letter-spacing:.08em;background:transparent;color:var(--p-dim);padding:8px 14px}
.crm td{padding:10px 14px;border-color:rgba(58,58,73,.6)}

/* ---------- prospección (sistema-de-captacion.html) ---------- */
.crm-tablero--prosp{grid-template-columns:repeat(5,minmax(0,1fr))}
.crm-tarj .tag.canal{background:rgba(160,160,182,.14);color:var(--p-dim)}
.crm-tarj .tag.canal.li,.tag.canal.li{background:rgba(10,102,194,.22);color:#7fb6ff}
.crm-tarj .tag.canal.ig,.tag.canal.ig{background:rgba(225,48,108,.18);color:#ff7fae}
.crm-tarj .tag.lead{background:var(--p-gold);color:#fff;font-weight:800}
.crm-tarj .ia{font-style:italic}
/* el contador de los que han cruzado la puerta */
.crm-captados{
  display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:10px 14px;
  border:1px solid rgba(124,109,255,.35);border-radius:12px;background:rgba(124,109,255,.08);
  font-size:13px;color:var(--p-dim);opacity:.5;transition:opacity .45s var(--ease),border-color .45s;
}
.crm-captados.ok{opacity:1;border-color:rgba(52,211,153,.45)}
.crm-captados .n{font-size:26px;font-weight:800;color:var(--p-text);line-height:1;min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.crm-captados .txt{line-height:1.45}
.crm-captados .delta{display:inline}
/* listas guardadas */
.crm-listas{display:flex;flex-direction:column;gap:10px}
.crm-lista-card{border:1px solid var(--p-line);border-radius:14px;background:var(--p-panel);padding:13px 15px}
.crm-lista-card.on{border-color:rgba(124,109,255,.5)}
.crm-lista-card .cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.crm-lista-card h5{font-size:15px;font-weight:800;margin:0;font-family:inherit}
.crm-lista-card .que{font-size:12px;color:var(--p-dim);margin:3px 0 9px}
.crm-lista-card .barra{position:relative;height:8px;border-radius:999px;background:var(--p-panel2);overflow:hidden}
.crm-lista-card .barra i{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:var(--e);transform:scaleX(var(--b,0));transform-origin:left}
.crm-lista-card .pie{font-size:12px;color:var(--p-dim);margin:8px 0 0}
.crm-lista-card .pie b{color:var(--p-text)}
/* hallazgos de la IA y el mensaje */
.crm-hallazgos{padding:0 18px 14px;gap:9px}
.crm-hallazgos li b{display:block;font-size:12.5px}
.crm-hallazgos li span{display:block;font-size:11.5px;line-height:1.45}
.crm-mensaje{font-size:12.5px;line-height:1.6;color:var(--p-text)}
.crm-nota-ia{font-size:12px;color:var(--p-dim);line-height:1.5;margin:10px 0 12px}
/* señales de la landing */
.crm-senales .crm-disparo.caliente{border-color:rgba(239,99,83,.5);background:rgba(239,99,83,.08)}
.crm-senales .crm-disparo.caliente .regla{background:rgba(239,99,83,.18);color:var(--p-bad)}
.crm-disparo .regla.rojo{background:rgba(239,99,83,.18);color:var(--p-bad)}
.crm-disparo .regla.verde{background:rgba(52,211,153,.16);color:var(--p-ok)}
.crm-herramientas .crm-disparo .acc{color:var(--p-dim);font-weight:500}

/* ---------- diagnóstico (diagnostico-comercial.html) ---------- */
/* las cuatro áreas puntuadas: KPI con barra */
.crm-area{opacity:.45;transition:opacity .45s var(--ease)}
.crm-area.ok{opacity:1}
.crm-area .barra{height:6px;border-radius:999px;background:var(--p-panel2);overflow:hidden;margin:4px 0 8px}
.crm-area .barra i{display:block;height:100%;border-radius:999px;background:var(--u,var(--p-gold));transform:scaleX(var(--b,0));transform-origin:left;transition:transform .5s var(--ease)}
.crm-area .val{color:var(--u,var(--p-text))}
/* el mapa de fugas: el embudo con las fugas intercaladas */
.crm-embudo--fugas{gap:8px}
.crm-embudo--fugas li>div em{font-size:12px}
.crm-fuga{
  display:grid;grid-template-columns:auto 1fr auto;gap:0 10px;align-items:center;
  margin:0 0 0 22px;padding:8px 12px;border-radius:10px;
  border:1px solid rgba(239,99,83,.25);background:rgba(239,99,83,.05);
  opacity:.35;transition:opacity .45s var(--ease),border-color .45s,background .45s;
}
.crm-fuga.ok{opacity:1;border-color:rgba(239,99,83,.5);background:rgba(239,99,83,.1)}
.crm-fuga.grande.ok{border-color:rgba(239,99,83,.8);background:rgba(239,99,83,.16)}
.crm-fuga>.que{display:block;margin:0}   /* gana al flex de .crm-embudo li>div */
.crm-fuga .pt{width:9px;height:9px;border-radius:50%;background:var(--p-bad);box-shadow:0 0 0 3px rgba(239,99,83,.18)}
.crm-fuga .que b{display:block;font-size:12.5px;font-weight:700;color:var(--p-text)}
.crm-fuga .que span{display:block;font-size:11.5px;color:var(--p-dim);line-height:1.4}
.crm-fuga .eur{font-size:13px;font-weight:800;color:var(--p-bad);font-variant-numeric:tabular-nums;white-space:nowrap}
.crm-total{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:4px 18px 16px;padding:12px 14px;
  border-radius:12px;border:1px solid rgba(239,99,83,.35);background:rgba(239,99,83,.08);
  font-size:13px;color:var(--p-dim);opacity:.5;transition:opacity .45s var(--ease);
}
.crm-total.ok{opacity:1}
.crm-total .n{font-size:26px;font-weight:800;color:var(--p-bad);line-height:1;font-variant-numeric:tabular-nums}
.crm-total .txt.delta{display:inline;opacity:0}
.crm-total .txt.delta.on{opacity:1}
/* en las vistas y recortes el embudo va sin animación: todo encendido */
.cs-vista .crm-fuga,.cs-recorte .crm-fuga{opacity:1}

/* ---------- en las vistas (capa 3) el marco es más estrecho ----------
   La barra lateral se pliega a un carril de iconos, como cuando se
   encoge la ventana del CRM: el apartado activo sigue marcado con el
   color de su grupo y el texto de las pestañas ya lo pone la columna
   izquierda. Así el tablero de seis columnas y los cuatro KPI caben. */
.vis-marco .crm{--p-side:58px}
.vis-marco .crm .cs-brand{padding:13px 0 11px;justify-content:center}
.vis-marco .crm .cs-brand .sq{width:30px;height:30px;flex-basis:30px;font-size:13px}
.vis-marco .crm .cs-brand>div:not(.sq){display:none}
.vis-marco .crm .cs-nav{padding:6px 0;-webkit-mask-image:none;mask-image:none}
.vis-marco .crm .cs-grupo{margin:0;padding:5px 0 3px;border-top:1px solid rgba(58,58,73,.5)}
.vis-marco .crm .cs-grupo:first-child{border-top:0;padding-top:0}
.vis-marco .crm .cs-grupo>span{display:none}
.vis-marco .crm .cs-item{width:36px;height:30px;margin:0 auto 2px;padding:0;justify-content:center;gap:0;font-size:0;border-radius:8px}
.vis-marco .crm .cs-item svg{width:17px;height:17px;flex-basis:17px;opacity:.8}
.vis-marco .crm .cs-item.on svg{opacity:1;color:var(--g,var(--p-gold))}
.vis-marco .crm .cs-item.on::before{left:-11px;height:16px}
.vis-marco .crm .cs-item .pill{position:absolute;top:3px;right:3px;width:7px;height:7px;padding:0;margin:0;font-size:0;border-radius:50%}
.vis-marco .crm .cs-sidefoot{padding:8px 0;justify-content:center;gap:0;font-size:0}

/* tablero compacto: seis columnas en unos 660 px */
.vis-marco .crm-tablero{gap:8px}
.vis-marco .crm-col{min-height:430px}   /* las columnas bajan hasta el pie del marco, como en el CRM */
.vis-marco .crm-col__cab{padding:8px 9px 7px}
.vis-marco .crm-col__cab b{font-size:9.5px;letter-spacing:.04em}
.vis-marco .crm-col__n{font-size:10.5px;padding:1px 6px}
.vis-marco .crm-col__eur{font-size:11px;margin-top:2px}
.vis-marco .crm-col__cuerpo{padding:6px;gap:6px}
.vis-marco .crm-tarj{padding:8px;border-radius:9px}
.vis-marco .crm-tarj .nom{font-size:11.5px}
.vis-marco .crm-nota{width:26px;height:26px;flex-basis:26px;font-size:11.5px;border-radius:7px}
.vis-marco .crm-tarj .emp{font-size:10px}
.vis-marco .crm-tarj .eur{font-size:11px;margin-top:4px}
.vis-marco .crm-tarj .tag{font-size:9px}
.vis-marco .crm-tarj .meta{font-size:10px}
.vis-marco .crm-tarj .meta .nuevo{font-size:8.5px}

/* KPI del dashboard: la cifra no se parte en dos líneas */
.vis-marco .crm .cs-kpis{gap:10px}
.vis-marco .crm .cs-kpi{padding:13px 14px}
.vis-marco .crm .cs-kpi .lab{font-size:10px}
.vis-marco .crm .cs-kpi .val{font-size:24px;white-space:nowrap;margin:6px 0 3px}
.vis-marco .crm .cs-kpi .pie{font-size:11px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .crm .cs-kpi .val{font-size:24px;white-space:nowrap}
  .crm-tablero,.crm-tablero--prosp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-fuga{grid-template-columns:auto 1fr;margin-left:10px}
  .crm-fuga .eur{grid-column:2}
  .crm-col:nth-child(n+3){display:none}
  .crm-reglas,.crm-reglas.dos,.crm-segs,.crm-lado,.crm .cs-grid2{grid-template-columns:1fr}
  .crm .cs-top{padding:16px 16px 4px}
  .crm .cs-top h3{font-size:22px}
  .crm .cs-scroll,.crm .cs-vista{padding:12px 16px 30px}
  .crm-herr .crm-orden,.crm-herr .crm-bot:not(.primario){display:none}
}
@media (prefers-reduced-motion:reduce){
  .crm-tarj[data-en],.crm-regla,.crm-general,.crm-switch,.crm-switch::after,.crm-embudo .barra i{transition:none}
}