/* ===========================================================================
   showcase.css — maquetas de producto de la home: el flujo "Como funciona",
   las pastillas de icono de "Por que Omari" y el panel CRM navegable.
   Solo lo carga index.html. Usa los tokens de style.css; los de aqui son los
   acentos de color que esas maquetas necesitan y que el resto del sitio no usa.
   =========================================================================== */

:root {
  /* Acentos sobre AZUL MARINO (pastillas de icono): claros a proposito, para
     que el trazo del icono se distinga del fondo oscuro. */
  --a-red: #FF5C6A;
  --a-blue: #4D9BFF;
  --a-green: #34D399;
  --a-purple: #A78BFA;

  /* Acentos sobre BLANCO (texto de las citas del calendario): oscuros, para
     que el texto pequeno cumpla contraste AA sobre su propio fondo claro. */
  --e-red-bg: #FDECEE;      --e-red-tx: #9F1B26;
  --e-blue-bg: #E9F1FE;     --e-blue-tx: #1D4ED8;
  --e-green-bg: #E6F7F0;    --e-green-tx: #04724D;
  --e-amber-bg: #FDF2E3;    --e-amber-tx: #8A4B08;
  --e-purple-bg: #F2ECFD;   --e-purple-tx: #5B21B6;
}

/* ===========================================================================
   1. "Por que Omari" — pastilla de icono azul marino con acento
   =========================================================================== */

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--navy);
  color: var(--a-red);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}
.feature-icon svg { width: 26px; height: 26px; stroke-width: 1.9; }
.feature-icon.tone-blue { color: var(--a-blue); }
.feature-icon.tone-green { color: var(--a-green); }
.feature-icon.tone-purple { color: var(--a-purple); }

/* El icono acompana al hover de la tarjeta; sin hover en tactil, donde el
   navegador deja el estado "pegado" tras un toque. */
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover .feature-icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.26);
  }
}

/* ===========================================================================
   2. "Como funciona" — 4 pasos con maqueta
   =========================================================================== */

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
  list-style: none;
  counter-reset: flow;
}
/* min-width:0: sin el, un item de grid no baja del ancho de su contenido y, con
   los titulos en nowrap, las 4 tarjetas desbordaban la pagina a 1024 px. */
.flow-step { position: relative; display: flex; min-width: 0; }
.flow-card { min-width: 0; }

/* Flecha entre pasos: el color la encadena (azul -> rojo -> verde), como en el
   diseno. Se dibuja al activarse el paso siguiente (.is-on la pinta entera). */
.flow-step::after {
  content: '';
  position: absolute;
  top: 132px;
  right: -20px;
  width: 20px;
  height: 2px;
  background: currentColor;
  color: var(--border-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease-out), color 260ms var(--ease-out);
}
.flow-step::before {
  content: '';
  position: absolute;
  top: 128px;
  right: -20px;
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  color: var(--border-strong);
  opacity: 0;
  transition: opacity 200ms var(--ease-out) 160ms, color 260ms var(--ease-out);
}
.flow-step:last-child::after,
.flow-step:last-child::before { display: none; }
.flow-step.is-done::after { transform: scaleX(1); }
.flow-step.is-done::before { opacity: 1; }
.flow-step:nth-child(1).is-done::after, .flow-step:nth-child(1).is-done::before { color: var(--a-blue); }
.flow-step:nth-child(2).is-done::after, .flow-step:nth-child(2).is-done::before { color: var(--red); }
.flow-step:nth-child(3).is-done::after, .flow-step:nth-child(3).is-done::before { color: #16A34A; }

.flow-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 22px;
  box-shadow: var(--shadow);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out),
    border-color 240ms var(--ease-out);
}
.flow-step.is-on .flow-card {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* flex:1 para que las cuatro maquetas midan lo mismo aunque una lleve menos
   contenido, y asi los titulos de debajo queden alineados entre tarjetas. */
.flow-mock {
  flex: 1;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 18px;
  min-height: 218px;
  display: flex;
  flex-direction: column;
}

.fm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-width: 0; }
.fm-ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--white);
  box-shadow: var(--shadow-xs);
}
.fm-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fm-ic-blue { color: #1D4ED8; background: #E9F1FE; }
.fm-ic-red { color: var(--red-dark); background: var(--e-red-bg); }
.fm-ic-green { color: #04724D; background: var(--e-green-bg); }
.fm-ic-purple { color: #5B21B6; background: var(--e-purple-bg); }

.fm-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy);
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  white-space: nowrap; /* "Llamada entrante" partia en dos y descuadraba la tarjeta */
}
.fm-sub, .fm-stamp { font-style: normal; font-weight: 500; font-size: 0.7rem; color: var(--text-muted); }
.fm-meta { margin-left: auto; font-size: 0.73rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fm-nav { margin-left: auto; display: flex; gap: 4px; }
.fm-nav i {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--white);
  border: 1px solid var(--border);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Paso 1: onda de voz --------------------------------------------------- */
.fm-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 46px;
  margin-bottom: 12px;
}
/* Alturas de reposo variadas: sin JS (o con el paso apagado) sigue leyendose
   como una onda de voz, no como una linea plana. */
.fm-wave i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: #1D4ED8;
  opacity: 0.85;
  transform: scaleY(0.3);
  transform-origin: center;
}
.fm-wave i:nth-child(2n) { transform: scaleY(0.62); }
.fm-wave i:nth-child(3n) { transform: scaleY(0.44); }
.fm-wave i:nth-child(5n) { transform: scaleY(0.85); }
.fm-wave i:nth-child(7n) { transform: scaleY(0.24); }
/* Animacion CSS (no JS): sigue corriendo fuera del hilo principal aunque la
   pagina este cargando. Solo se mueve mientras el paso esta activo. */
.flow-step.is-on .fm-wave i { animation: fm-bar 1s var(--ease-in-out) infinite alternate; }
@keyframes fm-bar { from { transform: scaleY(0.18); } to { transform: scaleY(1); } }
.fm-wave i:nth-child(3n) { animation-duration: 0.76s; }
.fm-wave i:nth-child(3n+1) { animation-duration: 1.18s; }
.fm-wave i:nth-child(4n) { animation-delay: -0.5s; }
.fm-wave i:nth-child(4n+1) { animation-delay: -0.24s; }
.fm-wave i:nth-child(4n+2) { animation-delay: -0.72s; }
.fm-wave i:nth-child(5n) { animation-delay: -0.36s; }

.fm-quote {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.79rem;
  color: var(--text);
  margin-bottom: 14px;
}
.fm-call-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: auto; }
.fm-cbtn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.fm-cbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fm-cbtn-end {
  width: 44px; height: 44px;
  background: #1D4ED8;
  border-color: #1D4ED8;
  color: var(--white);
  transform: rotate(135deg);
}
.fm-cbtn-end svg { width: 19px; height: 19px; }

/* --- Paso 2: rejilla de horas ---------------------------------------------- */
.fm-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.fm-cal-day { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); padding-bottom: 2px; }
.fm-slot {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 2px;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out);
}
/* La hora elegida se ve elegida SIEMPRE (tambien sin JS): el paso activo solo
   le anade el enfasis de escala. */
.fm-slot-pick {
  position: relative;
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.flow-step.is-on .fm-slot-pick { transform: scale(1.06); }
.fm-slot-pick::before {
  content: '';
  position: absolute;
  left: 7px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--white);
}

/* --- Paso 3: mensaje de WhatsApp ------------------------------------------- */
/* El mensaje se lee siempre; al activarse el paso, vuelve a entrar. Animacion
   (no transicion) para que se repita cada vez que el paso se enciende. */
.fm-chat { display: flex; align-items: center; flex: 1; }
.fm-bubble {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 13px 9px;
  font-size: 0.79rem;
  color: var(--text);
  line-height: 1.55;
}
.flow-step.is-on .fm-bubble { animation: fm-pop 280ms var(--ease-out) both; }
@keyframes fm-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fm-emoji { font-size: 0.9rem; }
.fm-stamp { display: block; text-align: right; margin-top: 6px; }

/* --- Paso 4: ficha de cliente ---------------------------------------------- */
.fm-rows { display: flex; flex-direction: column; gap: 8px; }
.fm-rows li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}
.fm-row-ic { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; }
.fm-row-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fm-rows b {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.fm-rows b em { font-style: normal; font-weight: 500; font-size: 0.7rem; color: var(--text-muted); }
.fm-rows i { margin-left: auto; font-style: normal; color: var(--text-muted); font-size: 0.9rem; }

.flow-copy { text-align: center; padding: 0 4px; }
.flow-copy h3 { font-size: 1.02rem; margin-bottom: 6px; }
/* Hueco para 3 lineas en las cuatro: si no, la tarjeta con el texto mas largo
   encoge su maqueta y las maquetas dejan de alinearse entre si. */
.flow-copy p { font-size: 0.86rem; color: var(--text-muted); min-height: 4.8em; }

/* ===========================================================================
   3. Panel CRM navegable
   =========================================================================== */

/* Una semana de 7 columnas legible pide unos 810 px. Al lado de una columna de
   texto no caben en una pantalla de 1440 px (la imagen de referencia mide 1965),
   y el calendario se cortaba a 3 dias. Por eso esta seccion apila: titulo
   centrado, panel a todo el ancho y las ventajas debajo. */
#panel > .container { max-width: 1290px; }
#panel .panel-visual { margin-bottom: 36px; }
#panel .panel-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px 24px;
  margin-top: 0;
}
#panel .panel-list li { align-items: flex-start; font-size: 0.9rem; min-width: 0; }
#panel .panel-list .ic { margin-top: 3px; flex-shrink: 0; }
#panel .panel-list .tag { margin-left: 0; white-space: nowrap; }

.crm {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-height: 460px;
}

.crm-side { background: var(--navy); padding: 18px 12px; }
.crm-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px 18px; }
.crm-brand img { width: 26px; height: 26px; }
.crm-brand span {
  display: flex;
  flex-direction: column;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1.1;
}
.crm-brand em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.42rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-inverse-muted);
  margin-top: 3px;
}

.crm-nav { display: flex; flex-direction: column; gap: 2px; }
.crm-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-inverse-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.crm-nav-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .crm-nav-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--white); }
}
.crm-nav-btn.is-active { background: var(--red); color: var(--white); }
.crm-nav-btn:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }

.crm-main { padding: 20px 22px 22px; min-width: 0; overflow: hidden; }
.crm-main:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.crm-view { animation: crm-in 220ms var(--ease-out) both; }
@keyframes crm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.crm-head h3 { font-size: 1.3rem; margin-bottom: 2px; }
.crm-head p { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 16px; }

.crm-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.crm-chip, .crm-step, .crm-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
}
.crm-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crm-step { padding: 0 9px; color: var(--text-muted); }
.crm-seg { display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; border: 1px solid var(--border); border-radius: 9px; }
.crm-seg-btn {
  border: none;
  background: transparent;
  border-radius: 7px;
  padding: 5px 13px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .crm-seg-btn:hover { color: var(--navy); }
}
.crm-seg-btn.is-active { background: var(--e-red-bg); color: var(--red-dark); }
.crm-seg-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.crm-newbtn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
}

/* --- Rejilla del calendario ------------------------------------------------ */
.crm-cal { overflow-x: auto; }
.cal-grid {
  /* 22px por media hora: una cita de 1 h mide 44 px, lo justo para hora,
     nombre y servicio en tres lineas sin que se corten. */
  --slot: 22px;
  display: grid;
  grid-template-columns: 48px repeat(7, minmax(96px, 1fr));
  grid-template-rows: auto 1fr;
  min-width: 720px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.cal-corner, .cal-dh {
  padding: 7px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
}
.cal-dh { border-left: 1px solid var(--border); color: var(--navy); }
.cal-dh b { font-weight: 700; }
.cal-dh.is-today b {
  display: inline-grid;
  place-items: center;
  width: 19px; height: 19px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-size: 0.68rem;
}
.cal-hours {
  display: grid;
  grid-template-rows: repeat(22, var(--slot));
  background: var(--bg-light);
}
.cal-hours span {
  grid-row: span 2;
  padding-right: 6px;
  text-align: right;
  font-size: 0.66rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transform: translateY(-6px);
}
.cal-col {
  position: relative;
  display: grid;
  grid-template-rows: repeat(22, var(--slot));
  border-left: 1px solid var(--border);
  /* lineas de hora: una cada 2 franjas de 30 min */
  background-image: linear-gradient(var(--border) 1px, transparent 1px);
  background-size: 100% calc(var(--slot) * 2);
}
.cal-col.is-today { background-color: rgba(217, 49, 62, 0.022); }

.cal-ev {
  grid-row: var(--r) / span var(--s);
  margin: 1px 3px;
  padding: 3px 5px;
  border-radius: 6px;
  border-left: 3px solid currentColor;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.18;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
/* nowrap en las tres lineas: antes la hora se partia en dos y empujaba el
   nombre fuera del bloque, que tiene overflow oculto. */
.cal-ev i, .cal-ev b, .cal-ev u { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sin opacity: rebajarla mezcla el texto con su fondo y le come contraste.
   Si hace falta menos peso visual, se baja el color, no la opacidad. */
.cal-ev i { font-style: normal; font-weight: 600; font-size: 0.58rem; font-variant-numeric: tabular-nums; }
.cal-ev b { font-weight: 700; color: var(--navy); font-size: 0.65rem; }
.cal-ev u { text-decoration: none; font-size: 0.56rem; }
@media (hover: hover) and (pointer: fine) {
  .cal-ev:hover { transform: translateY(-1px) scale(1.015); box-shadow: var(--shadow); }
}
.cal-ev.t-red { background: var(--e-red-bg); color: var(--e-red-tx); }
.cal-ev.t-blue { background: var(--e-blue-bg); color: var(--e-blue-tx); }
.cal-ev.t-green { background: var(--e-green-bg); color: var(--e-green-tx); }
.cal-ev.t-amber { background: var(--e-amber-bg); color: var(--e-amber-tx); }
.cal-ev.t-purple { background: var(--e-purple-bg); color: var(--e-purple-tx); }

.cal-now {
  grid-row: 7;
  align-self: start;
  position: relative;
  height: 2px;
  margin: 0 -1px;
  background: var(--red);
  z-index: 2;
}
.cal-now::before {
  content: '';
  position: absolute;
  left: -3px; top: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* Dia y Mes: variantes de la misma rejilla, sin recargar datos */
.crm-cal[data-zoom-view="dia"] .cal-grid { grid-template-columns: 52px 1fr; min-width: 0; }
.crm-cal[data-zoom-view="dia"] .cal-dh:not(.is-today),
.crm-cal[data-zoom-view="dia"] .cal-col:not(.is-today) { display: none; }
.crm-cal[data-zoom-view="dia"] .cal-grid { --slot: 19px; }
.crm-cal[data-zoom-view="mes"] .cal-grid { --slot: 9px; min-width: 640px; }
.crm-cal[data-zoom-view="mes"] .cal-ev u,
.crm-cal[data-zoom-view="mes"] .cal-ev i { display: none; }
.crm-cal[data-zoom-view="mes"] .cal-ev { justify-content: center; }
.crm-cal[data-zoom-view="mes"] .cal-hours span { font-size: 0.58rem; }

/* --- Vistas de lista y de estadisticas (las pinta showcase.js) ------------- */
.crm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.crm-stat { background: var(--bg-light); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.crm-stat small { display: block; font-size: 0.68rem; color: var(--text-muted); margin-bottom: 4px; }
.crm-stat strong { font-family: 'Manrope', sans-serif; font-size: 1.25rem; color: var(--navy); }
.crm-stat em { font-style: normal; font-size: 0.66rem; font-weight: 700; margin-left: 6px; color: #04724D; }

.crm-list { display: flex; flex-direction: column; gap: 7px; }
.crm-row {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .crm-row:hover { transform: translateX(2px); border-color: var(--border-strong); }
}
.crm-av {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--e-blue-bg);
  color: var(--e-blue-tx);
  font-size: 0.7rem;
  font-weight: 800;
}
.crm-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.crm-row-main b { font-size: 0.8rem; font-weight: 700; color: var(--navy); }
.crm-row-main span { font-size: 0.72rem; color: var(--text-muted); }
.crm-row-end { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.crm-time { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.crm-badge {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--e-green-bg);
  color: var(--e-green-tx);
  white-space: nowrap;
}
.crm-badge.is-warn { background: var(--e-amber-bg); color: var(--e-amber-tx); }
.crm-badge.is-info { background: var(--e-blue-bg); color: var(--e-blue-tx); }
.crm-badge.is-red { background: var(--e-red-bg); color: var(--e-red-tx); }

/* ===========================================================================
   4. Responsive
   =========================================================================== */

@media (max-width: 1100px) {
  /* A 4 columnas las tarjetas se quedan sin aire por debajo de 1100 px */
  .flow-steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .flow-step::after, .flow-step::before { display: none; }
  /* 5 columnas de texto fijas forzaban 756 px de ancho minimo y desbordaban
     toda la pagina en horizontal por debajo de esa medida. */
  #panel .panel-list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .flow-steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  #panel .panel-list { grid-template-columns: repeat(2, 1fr); }
  .crm { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* La barra lateral pasa a tira horizontal con scroll, como en la demo.
     min-width:0 es imprescindible: sin el, un item de grid no encoge por debajo
     del ancho de su contenido, la tira medía 1216 px y desbordaba TODA la pagina
     en horizontal en vez de hacer scroll dentro de si misma. */
  .crm-side { padding: 12px; min-width: 0; }
  .crm-brand { padding: 0 4px 12px; }
  /* Se probo un desvanecido de borde (mismo patron que .integrations-marquee)
     como pista de "hay mas contenido"; incluso a una distancia fija de 20px
     seguia atenuando el texto real del ultimo boton visible por debajo de AA
     (2.31:1, medido). Un fade sobre texto legible es un riesgo de contraste
     que no vale la pena por una pista decorativa: se descarta. El scroll
     horizontal con gesto tactil ya es un patron reconocible sin ella. */
  .crm-nav { flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  .crm-nav-btn { flex-shrink: 0; width: auto; border-radius: 999px; padding: 7px 12px; white-space: nowrap; }
}

@media (max-width: 720px) {
  .flow-steps { grid-template-columns: 1fr; gap: 16px; }
  #panel .panel-list { grid-template-columns: 1fr; gap: 12px; }
  .flow-mock { min-height: 0; }
  .crm-main { padding: 16px 14px 18px; }
  .crm-head h3 { font-size: 1.15rem; }
  .crm-seg { margin-left: 0; }
  .crm-newbtn { margin-left: auto; }
  .crm-stats { grid-template-columns: 1fr; }
  .cal-grid { --slot: 13px; }
}

/* ===========================================================================
   5. Movimiento reducido: se conservan los cambios de opacidad y color, que
   ayudan a entender, y se quitan los desplazamientos y los bucles.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .flow-step::after { transform: scaleX(1); }
  .flow-step::before { opacity: 1; }
  .flow-step.is-on .fm-bubble { animation: none; }
  .flow-step.is-on .flow-card { transform: none; }
  .flow-step.is-on .fm-wave i { animation: none; }
  .flow-step.is-on .fm-slot-pick { transform: none; }
  .crm-view { animation: none; }
  .cal-ev:hover { transform: none; }
  .crm-row:hover { transform: none; }
}