/* =====================================================================
   EL SOFTWARE (réplica del diseño del CRM de AiCars) + la sección de módulos
   Valores del CRM: src/app/globals.css y componentes (Sidebar, TarjetaKpi…).
   Valores de la sección: el código de la "Approach / USPS" de Forge (desarme/).
   ===================================================================== */

/* ---------- Variables del CRM ---------- */
.crm {
  --c-rojo: #ed1c24;
  --c-rojo-rgb: 237, 28, 36;
  --c-rojo-oscuro: #9c0c13;
  --c-rojo-claro: #ff5a60;
  --c-rojo-suave: #ff7b81;
  --c-fondo: #050505;
  --c-sup: #0e0e0f;
  --c-sup-input: #0b0b0c;
  --c-elevado: #151517;
  --c-borde: rgba(255, 255, 255, 0.10);
  --c-borde-alto: rgba(255, 255, 255, 0.115);
  --c-borde-fuerte: rgba(255, 255, 255, 0.2);
  --c-texto: #ffffff;
  --c-texto-fuerte: #f4f4f5;
  --c-texto-medio: #e6e6ea;
  --c-texto-suave: #9a9aa1;
  --c-texto-apagado: #6b6b72;
  --c-disponible: #4ade80;
  --c-reservado: #ff7b81;
  --c-prep: #fbbf24;
  --c-vendido: #8b949d;
  --c-ok: #22c55e;
  --c-ml: #e8cf1a;
  --f-ui: 'Geist', 'Inter', system-ui, sans-serif;
  --f-tit: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;

  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-texto);
  background:
    radial-gradient(1000px 380px at 18% -150px, rgba(var(--c-rojo-rgb), 0.16), transparent 70%) no-repeat,
    var(--c-fondo);
  -webkit-font-smoothing: antialiased;
}
.crm *, .crm *::before, .crm *::after { box-sizing: border-box; }
.crm .tnum { font-variant-numeric: tabular-nums; }
.crm .titulo { font-family: var(--f-tit); letter-spacing: -0.02em; }

/* ---------- Barra lateral (Sidebar.tsx) ---------- */
.crm__barra {
  flex: none;
  width: 236px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--c-borde-alto);
  background: #070708;
  white-space: nowrap;
}
.crm__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 10px;
}
.crm__marca img { height: 26px; width: auto; }
.crm__marca div { display: flex; align-items: baseline; gap: 7px; }
.crm__marca b { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: #f4f4f5; }
.crm__marca span { font-size: 11px; color: var(--c-texto-apagado); }
.crm__nav { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 12px; overflow: hidden; }
.crm__grupo { margin: 10px 0 2px; padding: 0 12px; font-size: 11.5px; font-weight: 500; color: var(--c-texto-apagado); }
.crm__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6.5px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #cfcfd2;
}
.crm__item svg { flex: none; width: 17px; height: 17px; }
.crm__item.activo { background: rgba(var(--c-rojo-rgb), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--c-rojo-rgb), 0.35); color: #ff3b42; }
.crm__item.activo.ml { background: rgba(232, 207, 26, 0.14); box-shadow: inset 0 0 0 1px rgba(232, 207, 26, 0.35); color: #e8cf1a; }
.crm__item .contador { margin-left: auto; padding: 1px 6px; border-radius: 999px; background: var(--c-rojo); font-size: 10.5px; font-weight: 700; color: #fff; }
.crm__hijos { display: flex; flex-direction: column; gap: 1px; margin: 3px 0 0 21px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.crm__hijo { padding: 7px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: #8d8d93; }
.crm__hijo.activo { color: #ff3b42; font-weight: 600; }
.crm__pie { flex: none; display: flex; flex-direction: column; padding: 6px 12px; border-top: 1px solid #232325; }
.crm__pie span { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #8d8d93; }
.crm__pie svg { width: 17px; height: 17px; }

/* ---------- Cabecera (admin/layout.tsx) ---------- */
.crm__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm__cab {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
  padding: 0 24px;
  border-bottom: 1px solid var(--c-borde-alto);
  background: rgba(5, 5, 5, 0.85);
}
.crm__cab-nombre { font-family: var(--f-tit); font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.crm__cab-sub { font-size: 11px; color: var(--c-texto-suave); }
.crm__cab-der { display: flex; align-items: center; gap: 16px; }
.crm__buscar {
  display: flex; align-items: center; gap: 8px;
  width: 220px; height: 36px; padding: 0 12px;
  border: 1px solid var(--c-borde-alto); border-radius: 10px;
  background: var(--c-sup); font-size: 12.5px; color: var(--c-texto-suave);
}
.crm__buscar kbd { margin-left: auto; padding: 1px 6px; border: 1px solid var(--c-borde-alto); border-radius: 6px; background: rgba(0, 0, 0, 0.4); font: 10.5px var(--f-ui); color: var(--c-texto-apagado); }
.crm__cotiz {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 16px 6px 12px;
  border: 1px solid var(--c-borde-alto); border-radius: 10px; background: var(--c-sup);
}
.crm__cotiz i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-disponible); box-shadow: 0 0 0 3px rgba(47, 209, 107, 0.18); }
.crm__cotiz div { display: flex; flex-direction: column; line-height: 1.15; }
.crm__cotiz small { font-size: 12px; color: var(--c-texto-suave); }
.crm__cotiz b { font-family: var(--f-tit); font-size: 15px; font-weight: 700; }
.crm__cotiz em { align-self: flex-end; font-style: normal; font-size: 10.5px; color: var(--c-texto-suave); }
.crm__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-rojo); font-weight: 700; font-size: 15px; color: #fff; }

/* ---------- Contenido ---------- */
.crm__main { flex: 1; min-width: 0; padding: 28px 32px 40px; overflow: hidden; }
.crm h1 { margin: 0; font-family: var(--f-tit); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.crm .h1-grande { font-size: 32px; }
.crm .h1-chico { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.crm .sub { margin: 0; font-size: 13px; color: var(--c-texto-suave); }
.crm .miga { margin: 0 0 4px; font-size: 12.5px; font-weight: 500; color: var(--c-texto-suave); }
.crm .cab-pag { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.crm .boton-sec { padding: 10px 16px; border: 1px solid var(--c-borde-fuerte); border-radius: 10px; background: var(--c-sup); font-size: 13px; font-weight: 600; color: var(--c-texto-medio); }
.crm .boton-rojo { padding: 10px 16px; border-radius: 10px; background: var(--c-rojo); font-size: 13px; font-weight: 600; color: #fff; box-shadow: 0 0 12px -2px rgba(var(--c-rojo-rgb), 0.55); }

/* Tarjetas (TarjetaKpi + .tarjeta) */
.crm .tarjeta {
  display: flex; flex-direction: column; min-width: 0;
  padding: 18px;
  border: 1px solid var(--c-borde-alto); border-radius: 16px;
  background: var(--c-sup);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.crm .tarjeta .ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 10px; background: rgba(var(--c-rojo-rgb), 0.10); color: var(--c-rojo); }
.crm .tarjeta .ico svg { width: 16px; height: 16px; }
.crm .tarjeta .etq { font-size: 13px; font-weight: 500; color: var(--c-texto-medio); }
.crm .tarjeta .val { margin: 8px 0; font-family: var(--f-tit); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.crm .tarjeta .nota { margin-top: auto; font-size: 12px; line-height: 1.35; color: var(--c-texto-suave); }
.crm .tarjeta .delta { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; margin-bottom: 8px; padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; }
.crm .delta.up { color: var(--c-disponible); background: rgba(47, 209, 107, 0.12); }
.crm .delta.down { color: #ff6b5e; background: rgba(255, 107, 94, 0.12); }
.crm .hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #ff2a33 -10%, var(--c-rojo) 45%, var(--c-rojo-oscuro));
  border-color: transparent; color: #fff;
  box-shadow: 0 0 0 1px rgba(var(--c-rojo-rgb), 0.55), 0 12px 40px -12px rgba(var(--c-rojo-rgb), 0.75);
}
.crm .hero::after { content: ''; position: absolute; right: -110px; top: 26px; width: 300px; height: 110px; border-top: 3px solid rgba(255, 255, 255, 0.28); border-radius: 50% 50% 0 0; transform: rotate(-8deg); pointer-events: none; }
.crm .hero > * { position: relative; z-index: 1; }
.crm .hero .ico { background: rgba(0, 0, 0, 0.18); color: #fff; }
.crm .hero .etq { color: rgba(255, 255, 255, 0.8); }
.crm .hero .val { font-size: 44px; }
.crm .hero .nota { color: rgba(255, 255, 255, 0.75); }
.crm .hero .delta { color: #fff; background: rgba(0, 0, 0, 0.18); }
.crm .hero-borde { border-color: rgba(var(--c-rojo-rgb), 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 0 0 1px rgba(var(--c-rojo-rgb), 0.25); }
.crm .ml .hero { background: linear-gradient(135deg, #f2dc3a -10%, #e8cf1a 45%, #c9b40e); color: #1a1700; box-shadow: 0 0 0 1px rgba(232, 207, 26, 0.55), 0 12px 40px -12px rgba(232, 207, 26, 0.6); }

/* Títulos de sección con la barrita roja (h2 del CRM) */
.crm h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 0;
  font-family: var(--f-tit); font-weight: 800; font-size: 14px; line-height: 1.25;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.crm h2::before { content: ''; flex: none; width: 3px; height: 14px; border-radius: 2px; background: var(--c-rojo); box-shadow: 0 0 8px rgba(var(--c-rojo-rgb), 0.7); }
.crm .ml h2::before { background: var(--c-ml); box-shadow: 0 0 8px rgba(232, 207, 26, 0.55); }
.crm .sec { padding: 18px 20px; }
.crm .sec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.crm .sec-cab .nota-cab { font-size: 11.5px; color: var(--c-texto-suave); }

/* Grillas */
.crm .g { display: grid; gap: 12px; margin-bottom: 12px; }
.crm .g-kpi1 { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.crm .g-3 { grid-template-columns: repeat(3, 1fr); }
.crm .g-2 { grid-template-columns: repeat(2, 1fr); }
.crm .g-4 { grid-template-columns: repeat(4, 1fr); }
.crm .g-graf { grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 16px; }
.crm .g-stock { grid-template-columns: 1.55fr 1fr; gap: 16px; }

/* Chips y estados */
.crm .chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; }
.crm .chip.wa { color: #4ade80; background: rgba(74, 222, 128, 0.14); }
.crm .chip.ig { color: #e879f9; background: rgba(232, 121, 249, 0.14); }
.crm .chip.fb { color: #60a5fa; background: rgba(96, 165, 250, 0.14); }
.crm .chip.ml { color: #e8cf1a; background: rgba(232, 207, 26, 0.14); }
.crm .chip.gris { color: #c6ccd3; background: rgba(255, 255, 255, 0.08); }
.crm .chip.ia { color: #93c5fd; background: rgba(96, 165, 250, 0.14); }
.crm .chip.ok { color: #4ade80; background: rgba(74, 222, 128, 0.14); }
.crm .chip.prep { color: #fbbf24; background: rgba(245, 158, 11, 0.16); }
.crm .chip.res { color: #ff7b81; background: rgba(255, 123, 129, 0.14); }
.crm .estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.crm .estado::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.crm .estado.disp { color: var(--c-disponible); }
.crm .estado.res { color: var(--c-reservado); }
.crm .estado.prep { color: var(--c-prep); }
.crm .estado.nodisp { color: var(--c-vendido); }
.crm .texto-ok { color: var(--c-disponible); }
.crm .texto-mal { color: #f87171; }
.crm .texto-alerta { color: #fbbf24; }

/* Tablas */
.crm .tabla { overflow: hidden; border: 1px solid var(--c-borde-alto); border-radius: 10px; background: var(--c-sup); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.crm .tabla .fila { display: grid; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #232325; font-size: 12.5px; }
.crm .tabla .fila > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .tabla .cab { height: 32px; background: #101418; font-size: 12px; color: #8d8d93; border-color: #2c2c30; }
.crm .tabla .fila:not(.cab) { height: 34px; }
.crm .tabla .fila b { font-weight: 600; }
.crm .tabla .fila .det { color: var(--c-texto-suave); font-weight: 400; }
.crm .tabla .fila .gris { color: var(--c-texto-suave); }
.crm .tabla .der { text-align: right; }
.crm .tabla .n { display: flex; align-items: center; justify-content: center; height: 100%; background: var(--c-sup-input); font-size: 10.5px; color: var(--c-texto-apagado); }

/* Listas de filas (actividad, alertas) */
.crm .lista { display: flex; flex-direction: column; }
.crm .lista li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--c-borde-alto); font-size: 12.5px; color: var(--c-texto-medio); list-style: none; }
.crm .lista li:last-child { border-bottom: 0; }
.crm .lista .hora { flex: none; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.crm .lista small { display: block; margin-top: 2px; font-size: 11px; color: var(--c-texto-suave); }
.crm ul { margin: 0; padding: 0; list-style: none; }

/* Gráficos (paleta.ts / BarrasConLinea / Dona / BarrasHorizontales) */
.crm .barras-h { display: flex; flex-direction: column; gap: 10px; }
.crm .barra-h { font-size: 12.5px; }
.crm .barra-h div:first-child { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--c-texto-medio); }
.crm .barra-h div:first-child b { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .barra-h div:first-child small { margin-left: 8px; font-size: 11px; color: var(--c-texto-suave); }
.crm .barra-h .pista { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.crm .barra-h .pista i { display: block; height: 100%; border-radius: 999px; background: var(--c-rojo); }
.crm .leyenda { display: flex; gap: 14px; font-size: 11.5px; color: var(--c-texto-suave); }
.crm .leyenda span { display: flex; align-items: center; gap: 6px; }
.crm .leyenda i { display: block; width: 10px; height: 10px; border-radius: 3px; background: #ed1c24; }
.crm .leyenda i.linea { width: 14px; height: 3px; border-radius: 999px; background: #f4f4f5; }
.crm .dona { display: flex; align-items: center; gap: 20px; }
.crm .dona ul { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.crm .dona li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-texto-medio); }
.crm .dona li i { width: 10px; height: 10px; border-radius: 3px; }
.crm .dona li b { margin-left: auto; font-weight: 600; }

/* Bandeja (BandejaClientes.tsx) */
.crm .bandeja { display: flex; height: 100%; margin: -28px -32px -40px; }
.crm .bandeja-lista { flex: none; width: 350px; display: flex; flex-direction: column; border-right: 1px solid var(--c-borde-alto); background: var(--c-sup); }
.crm .bandeja-cab { padding: 16px 16px 12px; border-bottom: 1px solid var(--c-borde-alto); }
.crm .bandeja-cab h1 { font-size: 17px; margin-bottom: 12px; }
.crm .campo { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--c-borde-alto); border-radius: 8px; background: #0b0b0c; font-size: 13px; color: var(--c-texto-apagado); }
.crm .tabs { display: flex; margin-top: 10px; padding: 3px; border-radius: 8px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.crm .tabs span { flex: 1; padding: 6px 4px; border-radius: 7px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--c-texto-suave); }
.crm .tabs span.activo { color: #ff3b42; background: rgba(var(--c-rojo-rgb), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--c-rojo-rgb), 0.35); }
.crm .conv { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--c-borde-alto); }
.crm .conv.activa { background: rgba(255, 255, 255, 0.04); }
.crm .conv .av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--c-rojo-rgb), 0.14); font-size: 12.5px; font-weight: 700; color: #ff5a60; }
.crm .conv .cuerpo { min-width: 0; flex: 1; }
.crm .conv .linea1 { display: flex; align-items: baseline; gap: 8px; }
.crm .conv .linea1 b { font-size: 13.5px; font-weight: 700; }
.crm .conv .linea1 time { margin-left: auto; font-size: 11px; color: var(--c-texto-apagado); }
.crm .conv .prev { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12.5px; color: var(--c-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .conv .prev .nl { margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--c-rojo); font-size: 10.5px; font-weight: 700; color: #fff; }
.crm .conv .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.crm .chat { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--c-fondo); }
.crm .chat-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--c-borde-alto); background: var(--c-sup); }
.crm .chat-cab b { display: block; font-size: 14.5px; font-weight: 700; }
.crm .chat-cab small { display: block; font-size: 11.5px; color: var(--c-texto-suave); }
.crm .chat-ia { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #1e3a66; background: #0f1b2d; font-size: 12.5px; font-weight: 600; color: #bfdbfe; }
.crm .chat-ia i { width: 10px; height: 10px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25); }
.crm .chat-ia span { margin-left: auto; padding: 6px 12px; border-radius: 8px; background: #2563eb; font-size: 12px; color: #fff; }
.crm .msgs { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 16px; }
.crm .msg { max-width: 62%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
.crm .msg.cli { align-self: flex-start; background: #151517; border-bottom-left-radius: 4px; }
.crm .msg.ia { align-self: flex-end; background: rgba(var(--c-rojo-rgb), 0.16); border: 1px solid rgba(var(--c-rojo-rgb), 0.3); border-bottom-right-radius: 4px; }
.crm .msg time { display: block; margin-top: 4px; font-size: 10.5px; color: var(--c-texto-apagado); text-align: right; }
.crm .fecha-sep { text-align: center; font-size: 11.5px; font-weight: 500; color: var(--c-texto-suave); }
.crm .compositor { display: flex; align-items: center; gap: 10px; margin: 0 20px 20px; padding: 10px 14px; border: 1px solid var(--c-borde-fuerte); border-radius: 12px; background: var(--c-sup-input); font-size: 13px; color: var(--c-texto-apagado); }
.crm .compositor i { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--c-rojo); }
.crm .compositor i svg { width: 14px; height: 14px; }

/* Ficha de unidad */
.crm .ficha-cab { display: flex; flex-direction: row; gap: 24px; padding: 0; overflow: hidden; max-height: 300px; }
.crm .foto-u { position: relative; flex: none; width: 300px; height: 100%; min-height: 220px; background: linear-gradient(135deg, #2a2a2d, #0d0d0e 60%); }
.crm .foto-u::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 62%, rgba(255, 255, 255, 0.07), transparent 70%); }
.crm .foto-u::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 26%; height: 30%; border-radius: 46% 46% 14px 14px / 70% 70% 14px 14px; background: linear-gradient(180deg, #2c2c31, #141416); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.crm .foto-u span { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); font-size: 11.5px; font-weight: 600; }
.crm .ficha-datos { flex: 1; min-width: 0; padding: 22px 24px 20px 0; }
.crm .ficha-datos .fila-chips { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-texto-suave); }
.crm .ficha-datos h1 { margin: 10px 0 4px; font-size: 28px; }
.crm .botones { display: flex; gap: 8px; margin: 14px 0 18px; }
.crm .botones span { padding: 8px 14px; border: 1px solid var(--c-borde-fuerte); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--c-texto-medio); }
.crm .botones span.verde { border-color: #22c55e; color: #4ade80; background: rgba(34, 197, 94, 0.12); }
.crm .botones span.rojo-b { border-color: rgba(var(--c-rojo-rgb), 0.5); color: #ff5a60; background: rgba(var(--c-rojo-rgb), 0.12); }
.crm .botones span.rojo { border-color: var(--c-rojo); background: var(--c-rojo); color: #fff; }
.crm .precios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 16px; border-top: 1px solid var(--c-borde-alto); }
.crm .precios small { display: block; font-size: 12px; color: var(--c-texto-suave); margin-bottom: 4px; }
.crm .precios b { display: block; font-family: var(--f-tit); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.crm .precios b.chico { font-size: 18px; }
.crm .precios span { font-size: 12px; color: var(--c-texto-suave); }
.crm .pestanas { display: inline-flex; gap: 4px; margin: 16px 0; padding: 4px; border-radius: 12px; background: var(--c-sup); border: 1px solid var(--c-borde-alto); }
.crm .pestanas span { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--c-texto-suave); }
.crm .pestanas span.activo { background: #1c1c1f; color: #fff; font-weight: 600; }
.crm .datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; }
.crm .datos small { display: block; margin-bottom: 4px; font-size: 12px; color: var(--c-texto-suave); }
.crm .datos b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; min-height: 20px; }
.crm .datos b .chip { font-size: 9.5px; padding: 0 5px; }

/* Carga automática: los campos se completan solos */
.crm .campo-ia { opacity: 0.25; }
.crm .campo-ia .chip { opacity: 0; }
.crm .campo-ia .cursor { display: inline-block; width: 1px; height: 14px; background: var(--c-rojo); opacity: 0; }
.crm.animando .campo-ia { animation: campo-llena 0.5s ease-out both; animation-delay: calc(var(--i) * 0.55s + 0.4s); }
.crm.animando .campo-ia .chip { animation: chip-aparece 0.3s ease-out both; animation-delay: calc(var(--i) * 0.55s + 0.75s); }
.crm.animando .campo-ia .cursor { animation: cursor-parpadea 0.55s steps(2) both; animation-delay: calc(var(--i) * 0.55s + 0.1s); }
.crm.animando .evento-ia { animation: campo-llena 0.5s ease-out both; animation-delay: calc(var(--i) * 1.4s + 0.6s); }
.crm .evento-ia { opacity: 0.25; }
@keyframes campo-llena { from { opacity: 0.25; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes chip-aparece { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes cursor-parpadea { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.crm .progreso-ia { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; margin-top: 14px; }
.crm .progreso-ia i { display: block; height: 100%; width: 0; background: var(--c-rojo); border-radius: 999px; }
.crm.animando .progreso-ia i { animation: progreso-llena 7.2s linear both; }
@keyframes progreso-llena { to { width: 100%; } }

/* Portales */
.crm .portal-fila { grid-template-columns: 2fr 1.3fr 1.3fr 1.1fr 0.7fr; }
.crm .sync { display: inline-flex; align-items: center; gap: 7px; color: #fbbf24; font-weight: 600; }
.crm .sync i { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; animation: late 1.2s ease-in-out infinite; }
@keyframes late { 0%, 100% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); } 50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.06); } }

/* Pills de período */
.crm .periodos { display: inline-flex; padding: 3px; border: 1px solid var(--c-borde-alto); border-radius: 10px; background: var(--c-sup); }
.crm .periodos span { padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--c-texto-suave); }
.crm .periodos span.activo { background: #1c1c1f; color: #fff; }

/* Aviso amarillo */
.crm .aviso { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 20px; border: 1px solid var(--c-borde-alto); border-radius: 16px; background: var(--c-sup); font-size: 12.5px; }
.crm .aviso i { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; }
.crm .aviso b { color: #fbbf24; font-weight: 600; }
.crm .aviso span { color: var(--c-texto-medio); }

/* ---------- Pantallas vivas (animaciones del CRM, globals.css) ---------- */
.crm { --ease-salida: cubic-bezier(0.2, 0.7, 0.2, 1); }
/* Al hornear las imágenes (desarme/pantalla.html?m=N) los gráficos quedan en cero: así, cuando la pantalla
   pasa a la versión viva, crecen desde donde los dejó la imagen, sin saltos */
.horneando .crece-x { transform: scaleX(0); transform-origin: left center; }
.horneando .crece-y { transform: scaleY(0); transform-box: fill-box; transform-origin: center bottom; }
.horneando .traza { stroke-dasharray: 1; stroke-dashoffset: 1; }
.horneando .aparece-tarde, .horneando .gira-entra { opacity: 0; }
@keyframes crm-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes crm-crece-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes crm-crece-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes crm-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes crm-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes crm-gira { from { opacity: 0; transform: rotate(-60deg) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes crm-brillo { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
/* Antes de activarse, todo quieto en su estado final; al activarse (.viva) los números y gráficos arrancan
   desde cero. Las tarjetas no entran en cascada: la imagen horneada ya las mostró en su lugar. */
.modulo.viva .crece-x { transform-origin: left center; animation: crm-crece-x 0.9s var(--ease-salida) both; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
.modulo.viva .crece-y { transform-box: fill-box; transform-origin: center bottom; animation: crm-crece-y 0.8s var(--ease-salida) both; animation-delay: calc(var(--i, 0) * 45ms + 200ms); }
.modulo.viva .traza { stroke-dasharray: 1; animation: crm-traza 1.4s var(--ease-salida) 0.5s both; }
.modulo.viva .aparece-tarde { animation: crm-aparece 0.4s ease-out both; animation-delay: calc(var(--i, 0) * 45ms + 900ms); }
.modulo.viva .gira-entra { transform-box: fill-box; transform-origin: center; animation: crm-gira 1s var(--ease-salida) 0.15s both; }
.modulo.viva .hero::before { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent); animation: crm-brillo 1.6s 0.4s ease-out 1 both; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .modulo.viva .crece-x, .modulo.viva .crece-y, .modulo.viva .traza, .modulo.viva .aparece-tarde, .modulo.viva .gira-entra, .modulo.viva .hero::before { animation: none; }
}

/* =====================================================================
   LA SECCIÓN: el cuadro con el software, los textos y los fondos
   (estructura y valores de la "USPS" de Forge)
   ===================================================================== */

/* El cuadro: 1600 × 980, se ubica con una transformación. Adentro, las 6 pantallas apiladas;
   cada una se descubre desde el centro (clip-path inset 50% → 0) con el scroll.
   Cada pantalla es su propia capa: cambiar su recorte no obliga a repintar las demás. Siempre es la
   pantalla viva (sin imágenes fijas): lo que se ve en la transición es exactamente lo que queda al final. */
.ui {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 1600px;
  height: 980px;
  overflow: hidden;
  transform-origin: 0 0;
  visibility: hidden;
  background: #0c0c0c;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
.ui .pantalla { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.ui .pantalla:first-child { clip-path: inset(0%); }          /* el dashboard entero, el mismo del monitor */
.ui .pantalla.modulo { clip-path: inset(50%); }              /* las composiciones se descubren desde el centro */
.ui .pantalla.modulo[data-m="0"] { clip-path: none; }        /* la primera es el dashboard entero: no se descubre, ya está */
/* Composición de un módulo: la parte importante de esa pantalla, a escala grande, armada para el cuadro */
.ui .modulo-vista { display: block; inset: auto; width: calc(1600px / var(--z, 1)); height: calc(980px / var(--z, 1)); transform: scale(var(--z, 1)); transform-origin: 0 0; background: var(--c-fondo); }
.ui .modulo-vista.completa { display: flex; }                /* el dashboard entero: barra lateral + cuerpo */
.ui .modulo-vista .crm__main.compo { height: 100%; padding: 36px 40px; overflow: hidden; display: flex; flex-direction: column; }
/* El cuadro siempre lleno: lo último de cada composición se estira hasta abajo */
.ui .modulo-vista .crm__main.compo > :last-child { flex: 1; min-height: 0; }
.ui .modulo-vista .g.estira { align-items: stretch; }
.ui .modulo-vista .g.estira > .tarjeta { height: auto; }
.crm .tarjeta.mini { padding: 10px 12px; gap: 2px; }
.crm .tarjeta.mini .val { font-size: 15px; }
.crm .tarjeta.mini .nota { font-size: 10.5px; }
.crm .lista.compacta li { padding: 7px 4px; }
.ui .modulo-vista .bandeja.compo { margin: 0; height: 100%; }
.ui .modulo-vista .g-graf { flex: 1; min-height: 0; }
.ui .modulo-vista .g-graf .sec { min-height: 0; }

/* Fondos: una foto de estudio por módulo, con los valores de Forge: la imagen sobresale 1,6 rem de la
   pantalla, opacidad 0,62 y desenfoque de 0,3 rem, sobre negro. Apilados: cada uno se desvanece cuando pasa su bloque.
   El desenfoque y la opacidad ya vienen horneados en la foto (modulo-N-fondo.webp): nada se filtra en vivo. */
.fondos {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  background: #000;
  visibility: hidden;
}
.fondos .fondo {
  position: absolute;
  inset: 0;
  background: #000;
  will-change: transform, opacity;
}
.fondos .fondo img {
  position: absolute;
  inset: -1.6rem;
  width: calc(100% + 3.2rem);
  max-width: none; /* la regla global "max-width: 100%" la dejaba 3,2 rem más angosta: quedaba una franja negra a la derecha */
  height: calc(100% + 3.2rem);
  object-fit: cover;
  object-position: center;
}
/* Para que el texto siga leyéndose perfecto con la foto más presente: oscurece la columna de los textos */
.fondos::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.5) 66%, rgba(0, 0, 0, 0.68) 100%);
}

/* Textos: una columna a la derecha que se desplaza con el scroll; cada bloque mide una pantalla
   y su contenido tiene la altura del cuadro: el contador arriba (y en el primero el título de la sección),
   y centrado en alto el bloque de nombre + párrafo + botón, con el botón justo debajo del párrafo. */
.modulos {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 66vw;
  right: 4vw;
  z-index: 4;
  overflow: visible;
  visibility: hidden;
  pointer-events: none;
}
.modulos__columna { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
/* Título de la sección: fijo (no viaja con la columna), centrado debajo del cuadro del software (mismo
   ancho que el cuadro), donde ningún texto le pasa por encima. Se queda medio módulo y después se va
   (opacidad, portada.js). En celular va dentro del primer bloque. */
.modulos__cabecera {
  position: absolute;
  z-index: 4;
  left: var(--izq-cuadro, 4vw);
  width: var(--ancho-cuadro, 58vw);
  top: calc(var(--top-cuadro, 20vh) + var(--alto-cuadro, 60vh) + 2.2rem);
  text-align: center;
  visibility: hidden;
  pointer-events: none;
}
.modulos__cabecera .modulo-cabecera { display: flex; flex-direction: column; align-items: center; }
.modulos__cabecera h2 { text-wrap: balance; }
.modulo-cabecera.solo-celu { display: none; }
.modulo-bloque { height: 100vh; height: 100dvh; display: flex; align-items: center; }
.modulo-cuerpo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: var(--alto-cuadro, 60vh);
}
.modulo-cuerpo > * { pointer-events: auto; }
.modulo-arriba { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: flex-start; }
.modulo-centro { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; width: 100%; }
.modulo-centro .boton-linea { margin-top: 0.7rem; }
/* Contador (Forge titleL: serif 300, 20 px → 24 px, "/ 03" al 60%) */
.modulo-cuerpo em {
  font-family: var(--letra-titulo);
  font-style: normal;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--blanco);
}
.modulo-cuerpo em span { opacity: 0.6; }
/* Nombre del módulo (Forge headlineL: ultralight 58 px → 96 px, interlineado 1,2, -2 px) */
.modulo-cuerpo h3 .linea-relleno { overflow: hidden; }
.modulo-cuerpo h3, .modulo-cuerpo p, .modulo-cabecera h2 { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55); }
.modulo-cuerpo h3 {
  margin: 0;
  font-family: var(--letra-titulo);
  font-weight: 400;
  font-size: clamp(3rem, 5.2vw, 6rem);
  line-height: 1.08;
  letter-spacing: -2px;
  text-wrap: balance;
  color: var(--blanco);
}
/* Párrafo (Forge bodyL: 300, 16 → 18 px, interlineado 1,4, crema al 80%) */
.modulo-cuerpo p {
  margin: 0;
  max-width: 30rem;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.5px;
  text-wrap: balance;
  color: rgba(237, 230, 214, 0.8);
}
/* Título de la sección: arriba del primer bloque de texto */
.modulo-cabecera { width: 100%; }
.modulo-cabecera .modulos__ante { margin: 0 0 0.6rem; font-size: clamp(17px, 1.35vw, 21px); font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(237, 230, 214, 0.7);
  font-family: var(--letra-titulo);
  font-style: italic;
}
.modulo-cabecera h2 { margin: 0; font-family: var(--letra-titulo); font-weight: 400; font-size: clamp(1.3rem, 1.6vw, 1.7rem); line-height: 1.1; letter-spacing: -0.5px; color: rgba(255, 255, 255, 0.85); }

/* "Más detalles": un panel sólido sobre la columna de textos, dentro de la misma pantalla. Se abre con
   una transición suave (portada.js), bloquea el scroll mientras está abierto y se cierra con el botón o Esc. */
.detalle { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.detalle[hidden] { display: none; }
.detalle__panel {
  position: absolute;
  left: 63vw;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  padding: 2.2rem 2.4rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0b0b0c;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
}
.detalle__ante { display: flex; align-items: baseline; gap: 0.9rem; margin: 0 0 1.3rem; font-size: clamp(17px, 1.35vw, 21px); font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(237, 230, 214, 0.7);
  font-family: var(--letra-titulo);
  font-style: italic;
}
.detalle__ante em { font-family: var(--letra-titulo); font-style: normal; font-size: 22px; letter-spacing: -0.5px; text-transform: none; color: var(--blanco); }
.detalle__texto { margin: 0 0 1.9rem; font-size: 17px; font-weight: 300; line-height: 1.55; letter-spacing: -0.3px; color: var(--blanco); }
.detalle__cerrar { cursor: pointer; font-family: inherit; }
@media (max-width: 1023px) {
  .detalle__panel { left: var(--margen); right: var(--margen); top: auto; bottom: 0; transform: none; max-height: 56vh; overflow: auto; padding: 1.5rem 1.4rem 1.4rem; }
  .detalle__texto { font-size: 15px; }
  .fondos::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0.75) 100%); }
}

/* La pausa en el showroom: cartelito "Seguí bajando" */
.hint {
  position: fixed;
  left: 50%;
  bottom: calc(9vh + 5.2rem + 1.4rem); /* arriba de la tira de logos (bottom 9vh, alto 5.2rem) */
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hint i { display: block; width: 1px; height: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%); animation: hint-baja 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes hint-baja { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Celular: el cuadro arriba y el texto abajo */
@media (max-width: 1023px) {
  .hint { bottom: calc(7vh + 4rem + 1rem); }
  .modulos { left: var(--margen); right: var(--margen); top: auto; height: var(--alto-textos, 48vh); bottom: 0; overflow: hidden; }
  .modulo-cabecera h2 { font-size: 1.1rem; }
  .modulo-bloque { height: var(--alto-textos, 48vh); }
  .modulo-cuerpo { height: auto; gap: 0.9rem; justify-content: center; }
  .modulo-arriba { position: static; }
  .modulos__cabecera { display: none; }
  .modulo-cabecera.solo-celu { display: block; margin-top: 0.7rem; }
  .modulo-centro { gap: 0.5rem; }
  .modulo-centro .boton-linea { margin-top: 0.4rem; }
  .modulo-cuerpo em { font-size: 15px; }
  .modulo-cuerpo h3 { font-size: clamp(1.8rem, 7vw, 2.4rem); letter-spacing: -1px; }
  .modulo-cuerpo p { font-size: 14px; max-width: none; }
  .modulo-cabecera .modulos__ante { margin-bottom: 0.3rem; }
  .modulo-cuerpo .boton-linea { padding: 0.8rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hint i, .crm .sync i, .crm.animando .campo-ia, .crm.animando .evento-ia, .crm.animando .progreso-ia i { animation: none; }
  .crm .campo-ia, .crm .evento-ia { opacity: 1; }
}

/* Unidad #27 (carga automática): foto real de la camioneta (Ford Ranger Wildtrak 2023, Wikimedia Commons, CC0) */
.crm .foto-u.con-foto { background: #0d0d0e url('../assets/software/ranger.webp') center / cover no-repeat; }
.crm .foto-u.con-foto::before { display: none; }   /* sin degradé: dejaba una tira negra abajo (el cartel ya tiene su fondo) */
.crm .foto-u.con-foto::after { display: none; }

/* ---------- El sistema sin el recuadro negro (2026-11-10, pedido de Octa) ----------
   En los módulos el cuadro no tiene fondo: las tarjetas, semitransparentes, flotan sobre la foto desenfocada de
   cada módulo. Mientras el sistema está en la pantalla del monitor lo tapa .ui__fondo (negro), que se desvanece
   al salir (portada.js). Sin backdrop-filter: el desenfoque ya viene en las fotos (nada se desenfoca en vivo). */
.ui { background: transparent; }
.ui__fondo { position: absolute; inset: 0; background: #0c0c0c; will-change: opacity; }
.ui .crm {
  background: transparent;
  --c-fondo: transparent;
  --c-sup: rgba(14, 14, 16, 0.72);
  --c-sup-input: rgba(10, 10, 12, 0.55);
  --c-elevado: rgba(22, 22, 25, 0.78);
}
.ui .crm__barra { background: rgba(6, 6, 8, 0.62); }
.ui .crm .tabla .cab { background: rgba(16, 20, 24, 0.6); }
.ui .crm .tabla .fila { border-color: rgba(255, 255, 255, 0.07); }
.ui .crm .tarjeta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -24px rgba(0, 0, 0, 0.8); }
/* Unidad #12: foto real del Corolla de la publicación (sin patente visible). La #27 (Ranger) usa ranger.webp: patentes tapadas. */
.crm .foto-u.con-foto.foto-corolla { background-image: url('../assets/software/corolla.webp'); }