/* kordanza.com v2 · dirección B «Consola»: de producto, con la interfaz de protagonista.
   Escenarios en tinta donde manda la pantalla (héroe, envases, llamado) y secciones claras
   donde manda el texto. Paleta y fuentes de la plataforma; sin recursos externos.

   El recorrido se adapta al ancho (decisión del propietario, 30-09-2026):
   - desde 64.0625rem (1025 px), seis pestañas, si hay JavaScript (comun.js);
   - por debajo, o sin JavaScript, los seis pasos seguidos, cada uno con su maqueta.
   El mismo punto de corte está en comun.js (CORTE_PESTANAS): si cambia aquí, cambia allá. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("recursos/fuentes/ibm-plex-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("recursos/fuentes/space-grotesk-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("recursos/fuentes/ibm-plex-mono-400-latin.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --tinta: #10182b;
  --tinta-2: #16223a;
  --cian: #0f9fb0;
  --cian-tinte: #74d7df;
  --ambar: #c1780f;
  --sobre-tinta: #eef0f4;
  --sobre-tinta-suave: #b7c3d4;
  --filo-tinta: #2b3752;

  --lienzo: #f7f9fc;
  --panel: #ffffff;
  --alterno: #eef2f7;
  --borde: #d8e0ea;
  --texto: #142033;
  --texto-suave: #526176;
  --acento-texto: #0b7280;
  --foco: #0b7280;
  --sombra: 0 24px 60px rgba(16, 24, 43, 0.18), 0 2px 6px rgba(16, 24, 43, 0.08);

  --letra: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --letra-titulo: "Space Grotesk", var(--letra);
  --letra-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ancho: 78rem;
  --margen: clamp(1rem, 4vw, 2.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --lienzo: #0d1422;
    --panel: #182234;
    --alterno: #111827;
    --borde: #334155;
    --texto: #f3f6fb;
    --texto-suave: #b7c3d4;
    --acento-texto: #74d7df;
    --foco: #74d7df;
    --sombra: 0 24px 60px rgba(0, 0, 0, 0.45);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--lienzo); color: var(--texto); font-family: var(--letra); font-size: 1.0625rem; line-height: 1.6; }
h1, h2, h3 { font-family: var(--letra-titulo); line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
a { color: var(--acento-texto); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: 0.6rem 1rem; background: var(--sobre-tinta); color: var(--tinta); font-weight: 600; border-radius: 8px; text-decoration: none; }
.saltar:focus { top: 1rem; }

.boton { display: inline-block; padding: 0.75rem 1.3rem; border-radius: 8px; background: var(--ambar); color: var(--tinta); font-family: var(--letra-titulo); font-weight: 700; line-height: 1.2; text-decoration: none; border: 1px solid transparent; }
.boton:hover { background: #d88a1c; }
.boton-compacto { padding: 0.5rem 0.95rem; font-size: 0.95rem; }
.boton-fantasma { background: transparent; color: var(--sobre-tinta); border-color: #56627c; }
.boton-fantasma:hover { background: var(--tinta-2); }

/* El rótulo es el antetítulo de la plataforma (page-header-eyebrow). */
.rotulo { font-family: var(--letra-titulo); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cian-tinte); margin-bottom: 0.9rem; }
.rotulo-claro { color: var(--acento-texto); }

/* ---------- Cabecera y escenarios en tinta ---------- */
.cabecera { background: var(--tinta); border-bottom: 1px solid var(--filo-tinta); }
.cabecera :focus-visible, .escenario :focus-visible { outline-color: var(--cian-tinte); }
.cabecera-caja { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; }
.marca { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--sobre-tinta); text-decoration: none; }
.marca-logo { width: 2.1rem; height: 2.1rem; flex: none; }
.logo-placa { fill: var(--tinta); stroke: #3a4763; stroke-width: 1; }
.logo-orbita { fill: none; stroke: var(--sobre-tinta); stroke-width: 2; }
.logo-cian { fill: var(--cian); }
.logo-ambar { fill: var(--ambar); }
.marca-nombre { font-family: var(--letra-titulo); font-weight: 700; font-size: 1.25rem; }

.escenario { background: var(--tinta); color: var(--sobre-tinta); }
.heroe { text-align: center; padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); }
.heroe h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 700; letter-spacing: -0.03em; max-width: 20ch; margin-inline: auto; }
.heroe-bajada { margin: 1.25rem auto 0; max-width: 56ch; color: var(--sobre-tinta-suave); font-size: 1.15rem; }
.heroe-acciones { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.heroe-ventana { padding-bottom: clamp(3rem, 7vw, 5rem); }
.heroe-ventana .maqueta figcaption { text-align: center; color: var(--sobre-tinta-suave); }
.heroe-ventana .mq-ventana { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); border-color: var(--filo-tinta); }

/* Secuencia de carga del héroe: llega el mensaje, contesta la IA, cambia el estado. Una vez. */
@media (prefers-reduced-motion: no-preference) {
  .heroe-ventana .mq-msj, .heroe-ventana .mq-badge { animation: aparece 0.5s ease-out both; }
  .heroe-ventana .mq-msj-cliente { animation-delay: 0.5s; }
  .heroe-ventana .mq-msj-ia { animation-delay: 1.5s; }
  .heroe-ventana .mq-badge { animation-delay: 2.2s; }
}
@keyframes aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Maquetas */
.maqueta { margin: 0; min-width: 0; }
.maqueta figcaption { margin-top: 0.6rem; font-family: var(--letra-mono); font-size: 0.78rem; color: var(--texto-suave); }
.pantalla { min-width: 0; }
.pantalla > .maqueta > .mq { box-shadow: var(--sombra); }

/* ---------- Recorrido ---------- */
.recorrido { padding-block: clamp(3rem, 8vw, 5.5rem); background: var(--alterno); border-bottom: 1px solid var(--borde); }
.recorrido h2, .seccion h2, .escenario h2 { font-size: clamp(1.8rem, 3.8vw, 2.75rem); font-weight: 700; }
.seccion-bajada { margin-top: 0.8rem; color: var(--texto-suave); font-size: 1.12rem; max-width: 60ch; }

/* Los pasos imitan el progreso del pedido de la plataforma (ws-progress). Solo existen como
   pestañas en escritorio y con JavaScript; en angosto el recorrido se lee seguido. */
.pasos { display: none; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 2.5rem 0 0; padding: 0; list-style: none; }
.pasos li { position: relative; }
.pasos li + li::before { content: ""; position: absolute; top: 1.05rem; left: -50%; width: 100%; height: 2px; background: var(--borde); }
.pasos-enlace { position: relative; display: grid; justify-items: center; gap: 0.45rem; padding: 0 0.25rem 0.75rem; text-align: center; text-decoration: none; color: var(--texto-suave); font-size: 0.92rem; font-weight: 600; }
.pasos-num { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--panel); border: 2px solid var(--borde); font-family: var(--letra-titulo); font-weight: 700; color: var(--texto); }
.pasos-enlace:hover .pasos-num { border-color: var(--cian); }
.pasos-enlace[aria-selected="true"] { color: var(--texto); }
.pasos-enlace[aria-selected="true"] .pasos-num { background: var(--cian); border-color: var(--cian); color: var(--tinta); box-shadow: 0 0 0 4px rgba(15, 159, 176, 0.2); }
.pasos-enlace[aria-selected="true"]::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 3px; border-radius: 3px; background: var(--ambar); }

.paso { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 3.5rem); align-items: start; margin-top: 2.5rem; }
@media (min-width: 64.0625rem) { .paso[hidden] { display: none; } }
.paso-modulo { font-family: var(--letra-mono); font-size: 0.85rem; color: var(--acento-texto); margin-bottom: 0.5rem; }
.paso h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 700; }
.paso-texto p:not(.paso-modulo) { margin-top: 0.8rem; color: var(--texto-suave); }
.pantalla-telefono .maqueta { max-width: 21rem; }
/* Seguidos (angosto o sin JavaScript): cada paso separado por un filo. */
.pestanas:not(.js-activas) .paso + .paso { padding-top: 2.5rem; border-top: 1px solid var(--borde); }
/* Un paso oculto sin su pestaña a la vista sería inaccesible: en angosto nunca se oculta,
   aunque comun.js tarde en enterarse del cambio de ancho. */
@media (max-width: 64rem) { .paso[hidden] { display: grid; } }
@media (min-width: 64.0625rem) { .js-activas .pasos { display: grid; } }
@media (prefers-reduced-motion: no-preference) {
  .js-activas .paso:not([hidden]) { animation: aparece 0.35s ease-out both; }
}

/* ---------- Módulos ---------- */
.seccion { padding-block: clamp(3rem, 8vw, 5.5rem); }
.modulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.25rem; }
.modulo { background: var(--panel); border: 1px solid var(--borde); border-top: 3px solid var(--cian); border-radius: 10px; padding: 1.25rem; }
.modulo-nombre { font-family: var(--letra-titulo); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--acento-texto); }
.modulo h3 { margin-top: 0.45rem; font-size: 1.2rem; font-weight: 700; }
.lista { margin: 0.8rem 0 0; padding: 0; list-style: none; }
.lista li { position: relative; padding-left: 1.3rem; margin-top: 0.5rem; color: var(--texto-suave); font-size: 0.98rem; }
.lista li::before { content: ""; position: absolute; left: 0.1rem; top: 0.6em; width: 0.5rem; height: 0.5rem; border: 2px solid var(--cian); border-radius: 50%; }
.transversal { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.transversal h3 { font-size: 1.3rem; font-weight: 700; }
.transversal-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; margin: 1rem 0 0; }
.transversal-lista dt { font-family: var(--letra-titulo); font-weight: 700; }
.transversal-lista dd { margin: 0.3rem 0 0; color: var(--texto-suave); font-size: 0.98rem; }

/* ---------- Envases ---------- */
.escenario-envases { padding-block: clamp(3rem, 8vw, 5.5rem); }
.envases-caja { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.envases-texto > p:not(.rotulo) { margin-top: 1rem; color: var(--sobre-tinta-suave); }
.escenario .lista li { color: var(--sobre-tinta-suave); }
.escenario .lista li::before { border-color: var(--ambar); }
.escenario .maqueta figcaption { color: var(--sobre-tinta-suave); }

/* ---------- Confianza y cómo se entrega ---------- */
.confianza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.25rem; }
.pieza { border-top: 1px solid var(--borde); padding-top: 1rem; }
.pieza h3 { font-size: 1.1rem; font-weight: 700; }
.pieza p { margin-top: 0.45rem; color: var(--texto-suave); font-size: 0.98rem; }
.entrega { margin-top: clamp(2.5rem, 6vw, 3.5rem); padding: 1.25rem 1.5rem; border-left: 4px solid var(--ambar); background: var(--panel); border-radius: 0 10px 10px 0; }
.entrega h3 { font-size: 1.2rem; font-weight: 700; }
.entrega p { margin-top: 0.4rem; color: var(--texto-suave); max-width: 70ch; }

/* ---------- Llamado y pie ---------- */
.llamado { padding-block: clamp(3rem, 8vw, 5rem); }
.llamado-caja { text-align: center; }
.llamado p { margin: 1rem auto 0; max-width: 56ch; color: var(--sobre-tinta-suave); }
.llamado .llamado-accion { margin-top: 1.75rem; }
.llamado-nota { font-size: 0.95rem; }
.llamado-nota strong { color: var(--sobre-tinta); }
.pie { padding-block: 1.75rem; color: var(--texto-suave); }
.pie-caja { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
.pie-logo { width: 1.75rem; height: 1.75rem; flex: none; }

/* ---------- Anchos ---------- */
@media (max-width: 64rem) {
  .paso, .transversal, .envases-caja { grid-template-columns: minmax(0, 1fr); }
  .modulos, .confianza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .modulos, .confianza, .transversal-lista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 26rem) {
  .marca-nombre { font-size: 1.1rem; }
  .boton-compacto { padding: 0.45rem 0.75rem; font-size: 0.9rem; }
}

/* ---------- 404 ---------- */
.aviso { padding-block: clamp(4rem, 12vw, 8rem); }
.aviso-caja { text-align: center; }
.aviso h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -0.03em; }
.aviso-caja > p:not(.rotulo) { margin: 1.1rem auto 0; max-width: 52ch; color: var(--sobre-tinta-suave); }
.aviso .aviso-accion { margin-top: 2rem; }

/* ---------- Maquetas ----------
   Réplica simplificada de la interfaz real (site.css y conversaciones.css de la plataforma):
   mismos tokens, mismos componentes, a escala de página. Todo va bajo .mq; el texto de cada
   maqueta está descrito en su figcaption, así que el bloque es aria-hidden. */

.mq {
  --mq-surface: #ffffff;
  --mq-muted: #f7f9fc;
  --mq-subtle: #eef2f7;
  --mq-border: #d8e0ea;
  --mq-text: #142033;
  --mq-text-muted: #526176;
  --mq-accent: #0f9fb0;
  --mq-accent-texto: #0b7280;
  --mq-accent-100: #ddf7f8;
  --mq-accent2: #c1780f;
  --mq-accent2-100: #fff2dc;
  --mq-accent2-texto: #8e5c18;
  --mq-primary: #1e3a5f;
  --mq-success: #186e4c; --mq-success-bg: #e5f5ee;
  --mq-warning: #93590a; --mq-warning-bg: #fcf1df;
  --mq-danger: #c23b3b; --mq-danger-texto: #c23b3b; --mq-danger-bg: #fbeaea;
  --mq-info: #2a6fb0; --mq-info-bg: #e9f1fa;
  --mq-neutral: #46505c; --mq-neutral-bg: #eef1f5;

  container-type: inline-size;
  background: var(--mq-muted);
  color: var(--mq-text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: left;
  border: 1px solid var(--mq-border);
  border-radius: 10px;
  padding: 1rem;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .mq {
    --mq-surface: #182234;
    --mq-muted: #111827;
    --mq-subtle: #202d42;
    --mq-border: #334155;
    --mq-text: #f3f6fb;
    --mq-text-muted: #b7c3d4;
    --mq-accent-texto: #74d7df;
    --mq-accent-100: #193f4b;
    --mq-danger-texto: #ef8a8a;
    --mq-primary: #275075;
  }
}

.mq p { margin: 0; }
.mq-num { font-variant-numeric: tabular-nums; text-align: right; }

/* Encabezado de página: migas, título y descripción. */
.mq-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; margin-bottom: 0.85rem; }
.mq-migas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.35rem; padding: 0; list-style: none; font-size: 0.75rem; color: var(--mq-text-muted); }
.mq-migas li + li::before { content: "›"; margin-right: 0.35rem; }
.mq-migas li:last-child { color: var(--mq-text); }
.mq-titulo { font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.mq-desc { grid-column: 1; color: var(--mq-text-muted); }

/* Botones y badges */
.mq-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; border-radius: 6px; font-weight: 600; font-size: 0.78rem; white-space: nowrap; border: 1px solid transparent; }
.mq-btn-pri { background: var(--mq-primary); color: #ffffff; }
.mq-btn-sec { border-color: var(--mq-border); color: var(--mq-text); background: var(--mq-surface); }
.mq-acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }

.mq-badge { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.72rem; font-weight: 700; padding: 0.25em 0.65em; border-radius: 999px; white-space: nowrap; }
.mq-badge::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.mq-b-success { background: var(--mq-success-bg); color: var(--mq-success); }
.mq-b-warning { background: var(--mq-warning-bg); color: var(--mq-warning); }
.mq-b-info { background: var(--mq-info-bg); color: var(--mq-info); }

/* Tarjetas: .card.adm-surface lleva el filo ámbar arriba. */
.mq-card { background: var(--mq-surface); border: 1px solid var(--mq-border); border-radius: 8px; padding: 0.85rem; box-shadow: 0 1px 2px rgba(28, 33, 40, 0.06); min-width: 0; }
.mq-card-adm { border-top: 3px solid var(--mq-accent2); }
.mq-grupo { font-family: "Space Grotesk", sans-serif; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mq-text-muted); padding-bottom: 0.35rem; margin-bottom: 0.55rem !important; border-bottom: 1px solid var(--mq-border); }
.mq-grupo ~ .mq-grupo { margin-top: 0.9rem; }
.mq-fuerte { font-weight: 600; color: var(--mq-text); }

/* .crm-workbench-grid: 1.15fr + .85fr; se apila cuando la maqueta es angosta. */
.mq-rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 0.75rem; }
@container (max-width: 34rem) { .mq-rejilla { grid-template-columns: minmax(0, 1fr); } }

/* Alertas */
.mq-alerta { border-radius: 8px; padding: 0.6rem 0.8rem; border: 1px solid; margin-bottom: 0.75rem; }
.mq-alerta-info { background: var(--mq-info-bg); color: #1d4f7e; border-color: #c9dcf0; }
.mq-alerta strong { font-weight: 700; }
.mq-enlace { color: inherit; text-decoration: underline; font-weight: 600; }

/* Conversación: nx-conv-* */
.mq-hilo { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.mq-msj { border: 1px solid var(--mq-border); border-left-width: 4px; border-radius: 8px; padding: 0.55rem 0.7rem; background: var(--mq-surface); max-width: 88%; }
.mq-msj-cliente { align-self: flex-start; border-left-color: var(--mq-border); }
.mq-msj-ia { align-self: flex-end; border-left-color: var(--mq-accent2); background: var(--mq-muted); }
.mq-msj-cab { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.2rem; }
.mq-autor { font-family: "Space Grotesk", sans-serif; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mq-text-muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.mq-marca-ia { font-size: 0.62rem; padding: 0.1rem 0.3rem; border-radius: 4px; border: 1px solid var(--mq-accent2); color: var(--mq-accent2-texto); background: var(--mq-accent2-100); letter-spacing: 0.04em; }
.mq-hora { font-size: 0.7rem; color: var(--mq-text-muted); }

/* Borrador de WhatsApp: nx-borrador-* */
.mq-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding-bottom: 0.35rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--mq-border); }
.mq-columna { font-family: "Space Grotesk", sans-serif; font-size: 0.72rem; font-weight: 600; color: var(--mq-text-muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.mq-linea { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; border: 1px solid var(--mq-border); border-radius: 8px; padding: 0.55rem; }
.mq-literal { margin: 0; padding-left: 0.6rem; border-left: 3px solid var(--mq-border); font-style: italic; }
.mq-entendido { background: var(--mq-muted); border-radius: 6px; padding: 0.45rem 0.55rem; display: grid; gap: 0.15rem; }
.mq-dato-etiqueta { font-size: 0.68rem; font-weight: 600; color: var(--mq-text-muted); display: block; }
.mq-cond-lleno::before { content: "● "; color: var(--mq-accent); }
.mq-cond-vacio::before { content: "○ "; color: var(--mq-text-muted); }
.mq-cond-lleno, .mq-cond-vacio { font-weight: 600; }
.mq-rechazo { margin-top: 0.6rem !important; padding: 0.35rem 0.6rem; border-left: 4px solid var(--mq-danger); color: var(--mq-danger-texto); font-weight: 700; }

/* Progreso del pedido: ws-progress */
.mq-progreso { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 0.75rem; padding: 0; list-style: none; counter-reset: paso; }
.mq-paso { position: relative; display: grid; justify-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--mq-text-muted); text-align: center; }
.mq-paso::before { content: ""; position: absolute; top: 0.55rem; left: -50%; width: 100%; height: 2px; background: var(--mq-border); z-index: 0; }
.mq-paso:first-child::before { display: none; }
.mq-punto { position: relative; z-index: 1; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--mq-border); background: var(--mq-surface); }
.mq-paso-hecho .mq-punto { background: var(--mq-accent); border-color: var(--mq-accent); }
.mq-paso-hecho::before, .mq-paso-actual::before { background: var(--mq-accent); }
.mq-paso-actual .mq-punto { border-color: var(--mq-accent); box-shadow: 0 0 0 3px var(--mq-accent-100); }
.mq-paso-actual { color: var(--mq-text); font-weight: 700; }

/* Tira de resumen: ws-resumen-tira */
.mq-tira { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; background: var(--mq-surface); border: 1px solid var(--mq-border); border-radius: 8px; padding: 0.55rem 0.85rem; margin-bottom: 0.75rem; }
.mq-tira-dato { display: grid; }
.mq-tira-valor { font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; font-weight: 700; }
.mq-tira-etiqueta { font-size: 0.7rem; color: var(--mq-text-muted); }

/* Tablas: .table */
.mq-tabla-caja { overflow-x: auto; border: 1px solid var(--mq-border); border-radius: 8px; background: var(--mq-surface); }
.mq-tabla { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.mq-tabla th, .mq-tabla td { padding: 0.45rem 0.65rem; text-align: left; border-bottom: 1px solid var(--mq-border); white-space: nowrap; }
.mq-tabla thead th { font-family: "Space Grotesk", sans-serif; font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mq-text-muted); background: var(--mq-muted); }
.mq-tabla tbody tr:last-child td { border-bottom: 0; }
.mq-tabla .mq-num { text-align: right; }
.mq-sec { color: var(--mq-text-muted); }
.mq-campo { display: inline-block; min-width: 3.2rem; padding: 0.2rem 0.45rem; border: 1px solid var(--mq-border); border-radius: 5px; background: var(--mq-surface); text-align: right; }
.mq-campo-texto { min-width: 11rem; text-align: left; white-space: normal; }
.mq-campo-vacio { color: var(--mq-text-muted); font-style: italic; }
.mq-difiere td { background: var(--mq-accent2-100); color: #3d2a08; }
.mq-difiere .mq-campo { background: #ffffff; color: #142033; border-color: var(--mq-accent2); }
.mq-ayuda { font-size: 0.72rem; color: var(--mq-text-muted); margin-top: 0.5rem !important; }
.mq-pie-acciones { display: flex; justify-content: flex-end; margin-top: 0.65rem; }

/* Indicadores: crm-360-indicador */
.mq-indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
@container (max-width: 34rem) { .mq-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mq-indicador { position: relative; background: var(--mq-surface); border: 1px solid var(--mq-border); border-radius: 8px; padding: 0.7rem 0.75rem 0.6rem; overflow: hidden; }
.mq-indicador::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 0.2rem; background: linear-gradient(90deg, var(--mq-accent), var(--mq-accent2)); }
.mq-indicador-alerta::before { background: linear-gradient(90deg, var(--mq-danger), var(--mq-accent2)); }
.mq-indicador-atencion::before { background: var(--mq-accent2); }
.mq-indicador-neutro::before { background: var(--mq-border); }
.mq-etiqueta { display: block; font-family: "Space Grotesk", sans-serif; font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mq-text-muted); }
.mq-valor { display: block; font-family: "Space Grotesk", sans-serif; font-size: 1.35rem; font-weight: 700; line-height: 1.2; margin-top: 0.15rem; }
.mq-sub { display: block; font-size: 0.72rem; color: var(--mq-text-muted); }
.mq-vencido { color: var(--mq-danger-texto); font-weight: 600; }
.mq-atencion { color: var(--mq-accent2-texto); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .mq-atencion { color: #efbd73; }
}


/* Teléfono del conductor */
.mq-telefono { width: 100%; max-width: 20rem; margin-inline: auto; padding: 0.6rem 0.6rem 0; background: #10182b; border-radius: 28px; border: 1px solid #2b3752; }
.mq-telefono .mq { border-radius: 20px 20px 0 0; padding: 0.85rem 0.75rem 0; border-bottom: 0; }
.mq-parada { background: var(--mq-surface); border: 1px solid var(--mq-border); border-radius: 8px; padding: 0.7rem; margin-bottom: 0.5rem; }
.mq-parada-proxima { border-left: 4px solid var(--mq-accent); }
.mq-parada-fila { display: flex; justify-content: space-between; align-items: center; }
.mq-parada-num { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.mq-proxima { font-family: "IBM Plex Sans", sans-serif; font-size: 0.66rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 999px; background: var(--mq-primary); color: #ffffff; }
.mq-parada-cliente { font-weight: 600; margin-top: 0.35rem !important; }
.mq-tabbar { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0.6rem -0.75rem 0; border-top: 1px solid var(--mq-border); background: var(--mq-surface); }
.mq-tab { display: grid; justify-items: center; padding: 0.4rem 0 0.55rem; font-size: 0.66rem; color: var(--mq-text-muted); }
.mq-tab-glifo { font-size: 0.95rem; line-height: 1.2; }
.mq-tab-activo { color: var(--mq-accent-texto); font-weight: 700; box-shadow: inset 0 2px 0 var(--mq-accent); }

/* Ventana de la plataforma (shell): barra lateral y barra superior. */
/* Flex y no grid: una consulta de contenedor no puede cambiar la rejilla del propio contenedor. */
.mq-ventana { padding: 0; display: flex; }
.mq-ventana > .mq-lateral { flex: 0 0 11.5rem; }
.mq-ventana > .mq-area { flex: 1 1 auto; }
.mq-lateral { background: var(--mq-surface); border-right: 1px solid var(--mq-border); padding: 0.75rem 0.6rem; display: grid; align-content: start; gap: 0.15rem; font-size: 0.78rem; }
.mq-lateral-marca { display: flex; align-items: center; gap: 0.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.95rem; padding: 0 0.3rem 0.65rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--mq-border); }
.mq-lateral-marca svg { width: 1.5rem; height: 1.5rem; }
.mq-nav { padding: 0.3rem 0.45rem; border-radius: 6px; color: var(--mq-text); display: flex; justify-content: space-between; }
.mq-nav-caret { color: var(--mq-text-muted); }
.mq-nav-abierto { background: var(--mq-accent-100); color: var(--mq-accent-texto); font-weight: 700; }
.mq-nav-seccion { padding: 0.2rem 0.45rem 0.2rem 1.1rem; color: var(--mq-text-muted); font-size: 0.74rem; }
.mq-nav-seccion-activa { color: var(--mq-text); font-weight: 600; box-shadow: inset 2px 0 0 var(--mq-accent); }
.mq-area { min-width: 0; }
.mq-barra-sup { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 1rem; background: var(--mq-surface); border-bottom: 1px solid var(--mq-border); }
.mq-kicker { display: block; font-family: "Space Grotesk", sans-serif; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mq-accent-texto); }
.mq-sup-titulo { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.9rem; }
.mq-sup-acciones { display: flex; align-items: center; gap: 0.5rem; }
.mq-buscar { padding: 0.25rem 0.6rem; border: 1px solid var(--mq-border); border-radius: 6px; color: var(--mq-text-muted); font-size: 0.72rem; min-width: 9rem; }
.mq-avatar { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--mq-subtle); font-weight: 700; font-size: 0.72rem; }
.mq-contenido { padding: 0.9rem 1rem 1rem; }
@container (max-width: 44rem) {
  .mq-lateral, .mq-buscar { display: none; }
}
.mq-sin-cliente { display: inline-block; margin-top: 0.15rem; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.4rem; border-radius: 999px; border: 1px solid #e3b36b; background: var(--mq-warning-bg); color: var(--mq-warning); }
/* La tabla de cierre es la más ancha: el motivo se parte en líneas. */
.mq-tabla td.mq-motivo { white-space: normal; min-width: 9rem; }
.mq-tabla td.mq-motivo .mq-campo-texto { min-width: 0; display: block; }
.mq .logo-placa { fill: #10182b; }
.mq .logo-orbita { fill: none; stroke: #eef0f4; stroke-width: 2; }
.mq .logo-cian { fill: #0f9fb0; }
.mq .logo-ambar { fill: #c1780f; }
.mq-contenido > .mq-cabeza { margin-top: 0; }
/* En una maqueta angosta el encabezado se apila y el cierre omite su aviso. */
@container (max-width: 30rem) {
  .mq-cabeza { grid-template-columns: minmax(0, 1fr); }
  .maqueta-cierre .mq-alerta { display: none; }
}
.mq-valor-largo { font-size: 1.05rem; white-space: nowrap; padding-top: 0.25rem; }
.mq-sub-cifra { white-space: nowrap; }