/* Estilos propios de Ventas. Lo compartido con los demás aplicativos (tokens,
   fuente, barra superior, botones, tarjetas, tablas, login, catálogos) vive en
   el sistema de diseño 360-design-system, copiado en
   static/vendor/360-design-system/ y cargado antes que este archivo (base.html).
   NOTE: no redefinir aquí una clase del sistema de diseño — se cambia allá y se
   actualiza con scripts/actualizar_diseno.py (ver ADR-133). */

/* WHY (docs/UI-mejorada/, sep 2026 — referencia
   07_leads_lista_y_gestión_de_prospectos): avatar de iniciales más grande
   que `.app-avatar` (36px) para la primera columna de la tabla de Leads,
   con 5 variantes de color cíclicas (mismas 5 del sistema, ver
   .kpi-card-icon en gestion_comercial.html) para diferenciar filas
   visualmente sin depender de una foto real que el modelo no tiene. */
.leads-avatar {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
}

.leads-avatar-0 {
  background: var(--corp-accent);
}

.leads-avatar-1 {
  background: var(--corp-success);
}

.leads-avatar-2 {
  background: var(--corp-warning);
}

.leads-avatar-3 {
  background: var(--corp-info);
}

.leads-avatar-4 {
  background: var(--corp-danger);
}

/* WHY (pedido explícito del cliente, sep 2026 — referencia
   07_leads_lista_y_gestión_de_prospectos): botón circular pequeño junto
   al teléfono en la tabla de Leads, para escribirle al prospecto por
   WhatsApp (enlace `wa.me`, ver web/templates.py::link_whatsapp_co — sin
   API de mensajería, mismo criterio que Feria/ADR-015). Verde de marca de
   WhatsApp a propósito (única excepción al acento único azul del resto de
   la app, ver skill redesign-ui) — es el color que el usuario reconoce de
   inmediato como "esto abre WhatsApp". */
.contacto-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  flex-shrink: 0;
  transition: transform 150ms ease-out;
}

.contacto-whatsapp-btn:hover {
  transform: scale(1.12);
}

/* WHY: 6 tarjetas reservadas para indicadores de seguimiento aún sin
   definir con el cliente — borde punteado y valor "Por definir" para que
   se lean como placeholder a propósito, no como un dato roto. */
.indicadores-grid {
  display: grid;
  /* WHY: 200px (antes 150px) — mismo ancho mínimo que usan las .kpi-card
     reales (icono + valor + label + link "Ver detalle") de reportes.html. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

/* WHY: grid de 2 columnas desiguales en escritorio, apiladas en angosto
   (mismo breakpoint que `.detalle-grid`) — reusado por Calendario (grid
   mes/semana + panel lateral). */
.tablero-resumen-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

@media (max-width: 900px) {
  .tablero-resumen-grid {
    grid-template-columns: 1fr;
  }
}

.marca-distribucion-item {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--corp-border);
}

.marca-distribucion-item:last-child {
  border-bottom: none;
}

.marca-distribucion-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
}

.marca-distribucion-top strong {
  font-weight: 600;
}

/* WHY (pedido explícito del cliente, sep 2026): logo de marca en
   "Distribución por marca" (Tablero), configurable desde Parametrización
   (ver models/marca_vehiculo.py::logo_ruta). `.marca-distribucion-nombre`
   agrupa logo+nombre para que `justify-content:space-between` del padre
   siga empujando el conteo a la derecha sin romper el layout. */
.marca-distribucion-nombre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.marca-distribucion-logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 5px;
  object-fit: contain;
}

/* WHY: fallback cuando la marca no tiene logo cargado — inicial del
   nombre sobre un círculo de color (mismo lenguaje que `.app-avatar`), en
   vez de dejar un hueco vacío o repetir el logo genérico de la empresa. */
.marca-distribucion-logo-vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--corp-accent-dim);
  color: var(--corp-accent);
  font-size: 0.68rem;
  font-weight: 700;
}

.marca-distribucion-item .track {
  height: 6px;
  border-radius: 3px;
  background-color: rgba(120, 125, 130, 0.15);
  overflow: hidden;
}

.marca-distribucion-item .fill {
  height: 100%;
  border-radius: 3px;
  background-color: var(--corp-accent);
}

.indicador-placeholder {
  padding: 1rem;
  border-style: dashed;
  border-color: var(--corp-border-strong);
  background-color: var(--corp-surface);
}

.indicador-placeholder-icon {
  width: 32px;
  height: 32px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(120, 125, 130, 0.15);
  color: var(--corp-gray);
  margin-bottom: 0.6rem;
}

.indicador-placeholder-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--corp-text);
}

.indicador-placeholder-value {
  font-size: 0.78rem;
  color: var(--corp-gray-dim);
  margin-top: 0.15rem;
}

/* WHY (pedido explícito del cliente, sep 2026, ver ADR-041): botones de
   filtro de marca arriba de "Estados de gestión" — pastilla tipo toggle,
   mismas transiciones/radio que `.btn-primary`/`.btn-secondary` pero con
   su propio color de activo (no reusa esas clases porque necesitan 3
   estados —normal/activo/deshabilitado— que ese grupo no modela). */
.gestion-marca-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.gestion-marca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* WHY (ronda 2, pedido explícito del cliente): "amplía el tamaño del
     botón" — de 0.45/0.85rem a 0.75/1.5rem, con una altura mínima que de
     paso cumple el mínimo de touch target (44px) que antes no alcanzaba. */
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--corp-border-strong);
  background: var(--corp-dark);
  color: var(--corp-text);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}

/* WHY (ronda 2, pedido explícito del cliente: "retira el texto en caso de
   que tengan imagen cargada... que el logo se vea mucho más claro"): el
   botón pasa a ser solo un marco alrededor del logo — más padding
   horizontal (el logo ya no comparte espacio con texto) y sin `gap`
   (no hay un segundo elemento visible adentro). El nombre de la marca
   sigue existiendo como `aria-label`/`title` del `<a>` (ver admin.html) —
   nunca un botón sin nombre accesible, aunque visualmente sea solo un
   ícono. */
.gestion-marca-btn-solo-logo {
  padding: 0.6rem 1.75rem;
  gap: 0;
}

.gestion-marca-btn:hover {
  border-color: var(--corp-gray-dim);
}

.gestion-marca-btn:focus-visible {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
}

.gestion-marca-btn-activo,
.gestion-marca-btn-activo:hover {
  background: var(--corp-accent);
  border-color: var(--corp-accent);
  color: #ffffff;
}

/* WHY: marca aún no creada en el catálogo de Parametrización (ver
   `_marcas_filtro_gestion` en web/routes/admin.py) — `<span>`, no `<a>`,
   para no enlazar a un `marca_id` inexistente; opacidad reducida +
   `cursor:not-allowed` es el mismo lenguaje de "deshabilitado" que
   `.btn-primary:disabled` etc. más abajo. */
.gestion-marca-btn-deshabilitado {
  opacity: 0.5;
  cursor: not-allowed;
}

/* WHY (ronda 2, pedido explícito del cliente): de 18px a 34px — con el
   nombre de texto retirado al lado (ver `.gestion-marca-btn-solo-logo`),
   el logo puede crecer bastante más y seguir leyéndose con claridad. */
.gestion-marca-logo {
  height: 34px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  flex-shrink: 0;
}

.gestion-marca-avatar {
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
}

.gestion-marca-btn-activo .gestion-marca-avatar {
  background: rgba(255, 255, 255, 0.25);
}

/* WHY (pedido explícito del cliente, sep 2026): caja contenedora detrás
   de la fila de tarjetas de "Estados de gestión" (admin.html) — "que las
   haga parte de un solo módulo" — mismo lenguaje visual que `.card`
   (fondo blanco, borde, radio 10px) pero sin reusar esa clase tal cual
   porque `.card` no trae padding propio (vive en `.card-body`, pensado
   para header+body); acá es un solo bloque, sin encabezado. */
.gestion-estados-panel {
  background: var(--corp-dark);
  border: 1px solid var(--corp-border);
  border-radius: 12px;
  padding: 1.25rem;
}

/* WHY (pedido explícito del cliente, sep 2026): explica la sigla "TCP"
   que ahora reemplaza a "% sobre el total de prospectos" dentro de cada
   tarjeta — una sola leyenda al pie del panel en vez de repetirla en las
   8 tarjetas. */
.gestion-tcp-legend {
  margin: 0.9rem 0 0;
  font-size: 0.68rem;
  color: var(--corp-gray);
}

/* WHY (docs/UI-mejorada/, sep 2026, ver ADR-020): fila de tarjetas de
   ancho igual por etapa del embudo — reemplaza las franjas de ancho
   proporcional al volumen (ago 2026) a pedido explícito del cliente de
   quedar "aún más alineado" a la referencia aprobada (screen 02). El
   conteo real sigue visible (número grande + "% del total" + barra
   interna, ver `.embudo-stage-track`), solo cambia de codificarse en el
   ancho de la franja a codificarse dentro de una tarjeta de tamaño fijo. */
.embudo-stage-row {
  display: grid;
  /* WHY (pedido explícito del cliente, sep 2026): tarjetas más anchas —
     mínimo subido de 150px a 190px (menos columnas por fila en pantallas
     angostas, cada una más ancha en vez de apretarse). */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem;
}

.embudo-stage-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  appearance: none;
  background: var(--corp-dark);
  /* WHY (pedido explícito del cliente, sep 2026): antes 1px + fondo pastel
     de color (ver `.gestion-color-*` más abajo) — ahora el fondo es
     siempre blanco y el color de cada estado vive únicamente en el borde,
     por eso 2px en vez de 1px (con 1px el color apenas se notaba sobre
     blanco). */
  border: 2px solid var(--corp-border);
  border-radius: 10px;
  /* WHY: tarjetas más altas — pedido explícito del cliente, sep 2026
     ("amplía el tamaño... en su altura y en su ancho"), revierte
     parcialmente el pedido opuesto de ago 2026 (ver WHY de
     `.columna .card-header` arriba, caso distinto — esa reducción era
     sobre el detalle desplegado, no esta fila de resumen). */
  min-height: 9.5rem;
  padding: 1.1rem 1.15rem 1rem;
  justify-content: space-between;
  position: relative;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.embudo-stage-card:hover {
  border-color: var(--corp-border-strong);
}

/* WHY (pedido explícito del cliente, sep 2026, ver ADR-035; el embudo
   comercial que originó `.embudo-stage-card` se retiró del todo en
   ADR-040 — esta clase base sigue viva porque "Estados de gestión"
   la reusa): color de las tarjetas de "Estados de gestión" (admin.html)
   — mismo lenguaje de urgencia que ya usaba `.gestion-cat-dot` en
   gestion_comercial.html (info=azul/`--corp-accent`,
   urgente=rojo/`--corp-danger`, atencion=ámbar/`--corp-warning`,
   ok=verde/`--corp-success`, neutral=gris/`--corp-gray-dim`).
   WHY (pedido explícito del cliente, sep 2026, ronda 2): el patrón pastel
   original (fondo claro + borde + barra del mismo tono) se reemplaza por
   fondo SIEMPRE blanco (`var(--corp-dark)`) con el color únicamente en el
   borde, ahora en el tono sólido (antes un `hsl` pastel propio para el
   borde) — la única superficie que conserva el color de relleno es
   `.embudo-stage-fill` (la barra de progreso del %, un dato, no el fondo
   de la tarjeta). El `<span class="embudo-stage-accent">` que pintaba una
   franja superior de 3px se retiró del todo del template — con fondo
   blanco y borde de 2px ya no hacía falta un segundo lugar con color.
   WHY (pedido explícito del cliente, sep 2026, ronda 3): el número grande
   (`.embudo-stage-count`) pasa de un gris fijo (`--corp-text`) al mismo
   color sólido del borde de su tarjeta. `.embudo-stage-count` y
   `.embudo-stage-fill` van en reglas SEPARADAS a propósito (antes
   combinadas en una sola, bug real encontrado en verificación visual):
   `.embudo-stage-count` se volvió un contenedor flex al centrarlo (ver
   más abajo), así que un `background-color` en la misma regla pintaba
   TODA su caja del mismo tono que el texto — número invisible sobre su
   propio fondo, dejando solo el rectángulo de color visible. La regla
   `.embudo-stage-card.embudo-stage-abierta .embudo-stage-count` (más
   arriba) sigue ganando cuando la tarjeta está seleccionada — mayor
   especificidad (3 clases vs. 2) — así que el número se pone blanco sobre
   fondo azul sólido en vez de mantener el color de la variante. */
.embudo-stage-card.gestion-color-info {
  background: var(--corp-dark);
  border-color: var(--corp-accent);
}
.gestion-color-info .embudo-stage-count {
  color: var(--corp-accent);
}
.gestion-color-info .embudo-stage-fill {
  background-color: var(--corp-accent);
}

.embudo-stage-card.gestion-color-urgente {
  background: var(--corp-dark);
  border-color: var(--corp-danger);
}
.gestion-color-urgente .embudo-stage-count {
  color: var(--corp-danger);
}
.gestion-color-urgente .embudo-stage-fill {
  background-color: var(--corp-danger);
}

.embudo-stage-card.gestion-color-atencion {
  background: var(--corp-dark);
  border-color: var(--corp-warning);
}
.gestion-color-atencion .embudo-stage-count {
  color: var(--corp-warning);
}
.gestion-color-atencion .embudo-stage-fill {
  background-color: var(--corp-warning);
}

.embudo-stage-card.gestion-color-ok {
  background: var(--corp-dark);
  border-color: var(--corp-success);
}
.gestion-color-ok .embudo-stage-count {
  color: var(--corp-success);
}
.gestion-color-ok .embudo-stage-fill {
  background-color: var(--corp-success);
}

.embudo-stage-card.gestion-color-neutral {
  background: var(--corp-dark);
  border-color: var(--corp-gray-dim);
}
.gestion-color-neutral .embudo-stage-count {
  color: var(--corp-gray-dim);
}
.gestion-color-neutral .embudo-stage-fill {
  background-color: var(--corp-gray-dim);
}

/* WHY (pedido explícito del cliente, sep 2026): la tarjeta seleccionada
   pasa de fondo blanco/texto oscuro a fondo azul (`--corp-accent`) con
   texto blanco — mismo criterio de "estado activo" que `.app-tab-activo`
   en la barra superior (ver ADR-020), aplicado acá. El acento de color de
   la etapa y la barra interna se aclaran a blanco translúcido para seguir
   siendo visibles sobre el azul sólido. */
.embudo-stage-card.embudo-stage-abierta {
  background: var(--corp-accent);
  border-color: var(--corp-accent);
  box-shadow: 0 4px 14px var(--corp-accent-dim);
}

.embudo-stage-card.embudo-stage-abierta .embudo-stage-name,
.embudo-stage-card.embudo-stage-abierta .embudo-stage-name .meta,
.embudo-stage-card.embudo-stage-abierta .embudo-stage-count,
.embudo-stage-card.embudo-stage-abierta .embudo-stage-meta,
.embudo-stage-card.embudo-stage-abierta .embudo-chevron {
  color: #ffffff;
}

.embudo-stage-card.embudo-stage-abierta .embudo-stage-track {
  background-color: rgba(255, 255, 255, 0.3);
}

.embudo-stage-card.embudo-stage-abierta .embudo-stage-fill {
  background-color: #ffffff !important;
}

.embudo-stage-card:focus-visible {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
}

.embudo-stage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.embudo-stage-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--corp-black-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.embudo-chevron {
  color: var(--corp-gray);
  flex-shrink: 0;
  transition: transform 200ms ease-out;
}

.embudo-chevron-abierto {
  transform: rotate(180deg);
}

/* WHY (pedido explícito del cliente, sep 2026): número más grande,
   centrado en el medio de la tarjeta (antes alineado a la izquierda,
   tamaño fijo del texto de arriba hacia abajo) — `flex:1` + `align-items/
   justify-content:center` lo centra en el espacio que sobra entre el
   nombre (arriba) y el "% TCP"/barra (abajo), ya que `.embudo-stage-card`
   es `flex-direction:column` con `justify-content:space-between`. El
   color ya no es fijo (`--corp-text`) — cada variante `.gestion-color-*`
   lo pinta del mismo color sólido que su borde (ver más abajo). */
.embudo-stage-count {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--corp-text);
  font-variant-numeric: tabular-nums;
}

.embudo-stage-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  /* WHY (pedido explícito del cliente, sep 2026): antes 1rem (16px,
     tamaño de cuerpo de texto) para un texto que es en realidad una
     leyenda secundaria bajo el conteo grande — "% sobre el total de
     prospectos" se acorta a "% TCP" (ver `.gestion-tcp-legend` para el
     significado de la sigla, al pie del panel) y de paso baja a un
     tamaño de meta-texto acorde al resto de la app. */
  font-size: 0.68rem;
  color: var(--corp-black-dim);
}

.embudo-stage-track {
  display: block;
  height: 4px;
  border-radius: 2px;
  background-color: rgba(120, 125, 130, 0.15);
  overflow: hidden;
}

.embudo-stage-fill {
  display: block;
  height: 100%;
}

/* WHY (pedido explícito del cliente, sep 2026, ver ADR-020): el detalle
   de la etapa seleccionada se despliega como ventana flotante en vez de
   empujar el contenido de la página hacia abajo. `.embudo-stage-wrap`
   (position:relative) es el ancla; `.embudo-flotante` (position:absolute,
   justo debajo de la fila de tarjetas) es la ventana en sí — con sombra
   elevada, borde y esquinas redondeadas para leerse como un popover, no
   como parte del flujo normal. `@click.outside`/Escape la cierran (ver
   Alpine en admin.html — "Estados de gestión", ver ADR-034/040), mismo
   patrón que el resto de menús flotantes de la app
   (`.xp-start-menu` en su momento, ahora `.app-header-nav`). Solo una
   tarjeta puede estar seleccionada a la vez (`activo` en Alpine, ya no un
   objeto de estados independientes) — por eso alcanza con una sola
   ventana, con las `.columna` de cada etapa dentro alternando visibilidad
   por `x-show`. */
.embudo-stage-wrap {
  position: relative;
}

/* WHY: pedido explícito del cliente (sep 2026) — la ventana flotante debe
   quedar página arriba, encima de la fila de tarjetas (no debajo, como en
   la primera versión). `bottom: 100%` la ancla al borde SUPERIOR de
   `.embudo-stage-wrap` (mismo contenedor position:relative de siempre) en
   vez de al inferior. */
/* WHY: pedido explícito del cliente (sep 2026) — el resto de la UI
   (incluida la barra superior, `.app-header{z-index:30}`) se desenfoca
   mientras la ventana flotante está abierta, para darle realce. `position:
   fixed;inset:0` cubre todo el viewport sin importar el scroll;
   `backdrop-filter:blur` desenfoca lo que hay DETRÁS de este elemento (la
   página), no a sí mismo. Clic acá también cierra (mismo efecto que
   `@click.outside`, ver Alpine en admin.html). */
.embudo-flotante-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(244, 245, 247, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.embudo-flotante {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 41;
  max-height: min(28rem, calc(100vh - 8rem));
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(20, 22, 25, 0.18), 0 4px 12px rgba(20, 22, 25, 0.08);
}

.embudo-flotante .columna {
  border-radius: 10px;
}

.embudo-flotante-cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--corp-gray);
  cursor: pointer;
}

.embudo-flotante-cerrar:hover {
  background: var(--corp-surface);
  color: var(--corp-text);
}

.embudo-flotante-cerrar:focus-visible {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
}

/* WHY: el `.card-header` genérico (1rem 1.25rem) + `.lista-tarjetas` con
   min-height:40px dejaban cada franja del embudo demasiado alta,
   especialmente vacía o con pocas tarjetas (pedido explícito del cliente,
   ago 2026: "reduce la altura de cada caja de estado ya que se ven
   demasiado grandes"). Padding vertical reducido solo para las franjas del
   embudo — el resto de la app sigue usando el `.card-header` normal. */
.columna .card-header {
  padding: 0.6rem 1.25rem;
}

/* WHY: pedido explícito del cliente (ago 2026) — con varias tarjetas por
   franja, las cajas horizontales de 240px c/u ocupaban demasiado espacio
   (había que hacer scroll horizontal para verlas todas). Cada tarjeta pasa
   a apilarse verticalmente en una fila compacta — mismo lenguaje visual
   que `.table-dark`. `max-height` + `overflow-y` conserva el objetivo
   original (una franja con muchas tarjetas no estira la página sin
   límite), y `overflow-x` es el mismo patrón de `.tabla-wrap`/
   `.table-dark` para pantallas angostas. Desde ADR-040 este contenedor
   lo usa "Estados de gestión" (admin.html) — el Tablero de solo lectura
   que lo originó se retiró del todo. */
.lista-tarjetas {
  display: flex;
  flex-direction: column;
  max-height: 22rem;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
}

/* WHY (pedido explícito del cliente, sep 2026): las pestañas de filtro por
   estado de la tabla de Leads ("Todos"/"Nuevo"/"Contactado"/...) reusan
   `.badge` por color/variante, pero necesitan verse como pestañas
   clicables, no como el badge chico de una celda de tabla — modificador
   propio en vez de agrandar `.badge` en sí (que se usa en decenas de
   lugares del resto de la app, desde tablas hasta tarjetas). */
.filtro-estado-pill {
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  border-radius: 8px;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.filtro-estado-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(20, 22, 25, 0.08);
}

/* WHY (pedido explícito del cliente, sep 2026): botones Mes/Semana/Día
   del calendario (ver calendario.html) — reusan `.badge` por color
   (activo/inactivo), pero necesitan verse como botones de navegación más
   grandes, no como el badge chico genérico que usa el resto de la app
   (estados de Leads, Tablero, etc.) — modificador propio en vez de tocar
   `.badge` directamente, mismo criterio que `.filtro-estado-pill`. */
.cal-vista-toggle {
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
}

.columna .card-header {
  border-bottom-width: 2px;
}

/* WHY: buscador de texto libre reusado por Gestión/Prospectos/Feria
   (admin.html/leads.html/feria.html) — filtra en cliente contra
   `data-search` de cada fila/tarjeta. `input[type="search"]` no está en
   la lista de selectores compartida de arriba (§5.1) así que se estilan
   acá con los
   mismos valores para no tocar esa regla global; regla movida después de
   la de arriba (misma especificidad, `text-transform:none` necesita ganar
   por orden de aparición) porque esa regla fuerza mayúsculas en cualquier
   input que no sea email/password (pensado para texto que se GUARDA en
   mayúsculas, ver esa nota — no aplica a un filtro que no persiste nada;
   mismo criterio que `textarea[name="mensaje"]` más abajo). */
.tablero-search {
  position: relative;
  max-width: 26rem;
  margin-bottom: 0.85rem;
}

.tablero-search svg {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--corp-gray-dim);
  pointer-events: none;
}

.tablero-search input[type="search"] {
  width: 100%;
  padding: 0.625rem 0.875rem 0.625rem 2.35rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  color: var(--corp-text);
  background-color: var(--corp-surface);
  border: 1px solid var(--corp-border-strong);
  font-family: inherit;
  text-transform: none;
  transition: all 200ms ease-out;
}

.tablero-search input[type="search"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--corp-accent);
  border-color: transparent;
}

/* WHY (ADR-089): selector de ciudad del registro de prospecto — mientras no
   se elija una (valor vacío, `required`), el texto "Selecciona la ciudad…"
   se ve como un placeholder; las opciones de la lista conservan su color. */
.select-ciudad:invalid {
  color: var(--corp-gray-dim);
}

.select-ciudad option,
.select-ciudad optgroup {
  color: var(--corp-text);
}

/* WHY: elementos interactivos sueltos dentro de una celda (ej. columna
   Logo de Marca de Feria: imagen/estado "Sin logo" + ícono de carga +
   texto de archivo + botón "Subir") van en una sola fila horizontal con
   gap consistente en vez de apilarse en líneas separadas — pedido
   explícito del cliente, ago 2026 (con captura de referencia,
   images/altura.PNG): "el grupo de carga... quede en una sola fila
   horizontal, alineado verticalmente al centro, en lugar de romper línea
   debajo del logo". `flex-wrap: nowrap` evita que el navegador reparta el
   contenido en más de una línea; `overflow-x: auto` contiene el scroll
   horizontal DENTRO de esta celda si el contenido no cabe en pantallas
   angostas (ej. nombre de archivo largo), sin desbordar el ancho fijo de
   la columna (`table-layout: fixed`) ni el layout general de la tabla.
   `gap: 0.5rem` (8px) — mismo valor que ya usan los formularios de
   "Agregar" de Parametrización (`style="gap:0.5rem;"`), tomado como
   estándar del proyecto para grupos de controles. Clase de uso general
   para cualquier celda con más de un control (no exclusiva de esta
   tabla) — cualquier vista de listado que la use hereda este
   comportamiento automáticamente. */
.celda-grupo {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
}

/* WHY: el botón nativo del `<input type="file">` ("Seleccionar archivo")
   más el texto de estado ("Sin archivos seleccionados") no se pueden
   restilizar con CSS — son chrome del navegador — y no caben en una
   columna angosta, quedando truncados ("S...S", ver images/altura.PNG,
   pedido explícito del cliente: "el botón de seleccionar archivo... sea
   visible" + "ajusta el texto del botón por una imagen alusiva a la
   acción"). Patrón estándar: el input real queda funcional pero
   visualmente oculto (no `display:none` — algunos navegadores dejan de
   disparar el picker de archivos con un `<label for>` si el input está
   `display:none`); un `<label for="...">` estilado como `.btn-icono`
   dispara el mismo selector nativo al hacer clic. Reutilizable en
   cualquier input de archivo del proyecto, no exclusivo de esta tabla. */
.input-archivo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* WHY: el formulario "Nueva marca... + Agregar" (y equivalentes de
   Modelos/Líneas/Concesionarios/Orígenes) heredaba el input/botón de
   tamaño de página completa — quedaba visiblemente más alto que las filas
   compactas de la tabla justo debajo (pedido explícito del cliente, ago
   2026: "sigue viéndose igual" tras un primer recorte de padding
   demasiado tímido — se fija una altura explícita para que el cambio sea
   inequívoco). Clase local, no toca `.btn-primary`/inputs del resto de la
   app. */
/* WHY: `flex-wrap: wrap` para todas las instancias — algunos formularios
   de "agregar" (ej. Marcas/Concesionarios de Parametrización) no traían
   `flex-wrap` en su estilo en línea y desbordaban horizontalmente en
   celular (pedido explícito del cliente, ago 2026: validar responsive).
   Centralizado acá en vez de repetirlo por template — no afecta el
   layout en desktop, donde nunca hace falta envolver. */
.form-agregar-compacto {
  align-items: center;
  flex-wrap: wrap;
}

.form-agregar-compacto input[type="text"],
.form-agregar-compacto select,
.form-agregar-compacto .btn-primary {
  height: 2rem;
  font-size: 0.8rem;
}

.form-agregar-compacto input[type="text"],
.form-agregar-compacto select {
  padding: 0 0.6rem;
}

.form-agregar-compacto .btn-primary {
  padding: 0 0.85rem;
}

/* WHY: el formulario "Nuevo prospecto" de Feria (nombre/celular/usuario
   WhatsApp) heredaba el mismo tamaño de fuente que el resto de los
   formularios de alta — pedido explícito del cliente (ago 2026) de
   achicarlo más todavía, solo en estos 3 campos de texto. */
.form-prospecto-feria input[type="text"] {
  font-size: 0.72rem;
}

/* WHY: eyebrow "⚙ Administración" arriba del título — calcado 1:1 del
   encabezado de Parametrización en pitstopIA (pedido explícito del
   cliente, ago 2026: "ajústalo a como se ve en la imagen"). */
.page-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--corp-gray);
  margin-bottom: 0.2rem;
}

/* WHY (docs/UI-mejorada/, sep 2026): "caja" de filtros (mes/marca/asesor)
   junto al título del Tablero — pedido explícito del cliente. Mismos
   `<select>`/botones de siempre, solo con `width:auto` (el default de
   `input,select{width:100%}` no aplica acá) y más compactos para caber
   en una fila junto al título en vez de una tarjeta de ancho completo. */
.tablero-filtros {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.75rem;
  background: var(--corp-dark);
  border: 1px solid var(--corp-border);
  border-radius: 10px;
}

.tablero-filtros select {
  width: auto;
  min-width: 130px;
  padding: 0.45rem 0.6rem;
}

.tablero-filtros .btn-primary,
.tablero-filtros .btn-ghost {
  padding: 0.45rem 0.85rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .tablero-filtros {
    width: 100%;
  }
  .tablero-filtros select {
    flex: 1 1 130px;
  }
}

/* WHY: navegación por pestañas agrupadas por dominio — calcada del patrón
   de Parametrización de pitstopIA (frontend/src/pages/Parametrizacion.tsx,
   ago 2026, pedido explícito del cliente de que este módulo se vea igual
   ahí). Ahí las pestañas cambian de sección con React state; acá, con
   Alpine (`x-show`) sobre las mismas secciones ya servidas por el backend
   — sin JSON ni fetch adicional, todo el contenido ya vino en el render
   inicial de /parametrizacion. */
.tabs-grupo {
  margin-bottom: 0.85rem;
}

.tabs-grupo-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--corp-gray-dim);
  margin-bottom: 0.4rem;
}

.tabs-grupo-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* WHY: navegación por pestañas entre las páginas de Reportes (pedido
   explícito del cliente, ago 2026 — "usa el componente de tabs que ya
   exista") — reutiliza el mismo `.tab-pill` de arriba (Parametrización)
   para consistencia visual, pero acá cada pestaña es una ruta/backend
   real distinta (no un x-show de Alpine sobre contenido ya renderizado),
   así que el estado activo se calcula en el servidor
   (`seccion_activa`, ver web/routes/reportes.py + partials/
   reportes_tabs.html) en vez de con estado de cliente.
   `overflow-x:auto` + `flex-wrap:nowrap` (en vez del `wrap` de
   `.tabs-grupo-pills`) — en pantallas angostas hace scroll horizontal de
   las pestañas en vez de partir el layout a varias líneas. */
.tabs-nav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 2px;
  margin-bottom: 1.25rem;
}

/* ── Multi-select de años — filtros de Reportes ──────────────────────────
   WHY: no existía un componente de multi-select en el design system —
   se construyó uno liviano (checkboxes nativos con name="anios" repetido,
   el navegador ya serializa varios valores sin JS de por medio; Alpine
   solo abre/cierra el panel) en vez de vendorizar una librería nueva para
   un solo filtro (ver ADR-001). Reutiliza el mismo look de select/input
   (radio, padding, colores) que el resto de los filtros. */
.filtro-anios {
  position: relative;
}

.filtro-anios-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: auto;
  min-width: 9rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  font-family: inherit;
  color: var(--corp-text);
  background-color: var(--corp-surface);
  border: 1px solid var(--corp-border-strong);
  cursor: pointer;
  transition: all 200ms ease-out;
}

.filtro-anios-btn:hover {
  border-color: var(--corp-accent);
}

.filtro-anios-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--corp-accent);
  border-color: transparent;
}

.filtro-anios-panel {
  /* WHY: fixed (no absolute) a propósito — el filtro vive dentro de un
     .card con overflow:hidden (bordes redondeados, ver §5.x), que recorta
     cualquier descendiente position:absolute que se salga de su caja.
     position:fixed no queda sujeto a ese overflow (el .card no tiene
     transform/filter, así que no crea su propio containing block para
     fixed) — top/left se calculan en JS al abrir (ver
     partials/filtro_anios.html) en vez de con CSS relativo al botón. */
  position: fixed;
  z-index: 20;
  min-width: 9rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.4rem;
  border-radius: 0.5rem;
  background-color: var(--corp-dark);
  border: 1px solid var(--corp-border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.filtro-anios-opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.7rem;
  color: var(--corp-text);
  cursor: pointer;
}

.filtro-anios-opcion:hover {
  background-color: var(--corp-surface);
}

.filtro-anios-opcion input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* WHY: filtro por columna en el encabezado de la tabla de Prospectos de
   Feria (pedido explícito del cliente, ago 2026: "filtrar... desde su
   encabezado", solo Marca/Modelo/Creado por) — reutiliza el mismo panel
   de checkboxes que .filtro-anios-panel de arriba (misma mecánica:
   position:fixed con top/left calculados en JS, ver feria.html); solo el
   botón disparador es propio porque vive dentro de un <th> compacto de
   .table-dark (fondo claro, texto gris uppercase, ver .table-dark thead
   th) en vez de un filtro de página independiente — un ícono chico junto
   al texto del header, sin el borde/padding de .filtro-anios-btn. */
.th-filtrable {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.th-filtro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--corp-gray-dim);
  cursor: pointer;
  flex-shrink: 0;
}

.th-filtro-btn:hover {
  color: var(--corp-text);
}

.th-filtro-btn:focus-visible {
  outline: 2px solid var(--corp-accent);
  outline-offset: 1px;
}

.th-filtro-btn-activo {
  color: var(--corp-accent);
}

@media (prefers-reduced-motion: reduce) {
  .animate-fadeIn, .animate-slideInLeft, .animate-spin, html {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── Extensiones propias del proyecto (no forman parte del doc portado) ──  */
/* WHY: checklist de pasos, línea de tiempo de avance y lista de comentarios
   son específicos del dominio de este proyecto — no están en
   UI_DESIGN_SYSTEM.md, así que se construyen con los mismos tokens/spirit
   (superficie clara, acento único, texto gris para lo secundario, ver
   ADR-013) en vez de inventar una paleta paralela. */

.paso {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--corp-border);
}

.paso:last-child {
  border-bottom: none;
}

.paso .marker {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  border-radius: 5px;
  border: 1.5px solid var(--corp-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.paso.done .marker {
  background-color: var(--corp-success);
  border-color: var(--corp-success);
}

.paso .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.paso .texto {
  font-weight: 500;
  font-size: 0.7rem;
}

.paso.done .texto {
  color: var(--corp-gray);
  text-decoration: line-through;
  text-decoration-color: var(--corp-border-strong);
  font-weight: 400;
}

.progreso-mini {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 120px;
}

.progreso-mini .track {
  height: 6px;
  border-radius: 3px;
  background-color: rgba(120, 125, 130, 0.15);
  overflow: hidden;
}

.progreso-mini .fill {
  height: 100%;
  border-radius: 3px;
  background-color: var(--corp-accent);
}

.progreso-mini .frac {
  font-size: 0.66rem;
  color: var(--corp-gray);
}

.timeline {
  display: flex;
  flex-direction: column;
}

.timeline-item {
  display: flex;
  gap: 0.7rem;
  padding-bottom: 1rem;
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--corp-border-strong);
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item .dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 4px;
  background-color: var(--corp-accent);
}

.timeline-item .texto {
  font-weight: 500;
}

.comentarios-lista {
  display: flex;
  flex-direction: column;
}

.comentario-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--corp-border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.comentario-item:last-child {
  border-bottom: none;
}

.comentario-item .autor-linea {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.8rem;
}

.comentario-item .autor {
  font-weight: 600;
}

/* ── Gestión Comercial — dashboard de cartera del asesor (docs/UI-mejorada/,
   sep 2026): categorías con indicador de urgencia (punto de color) +
   contador en píldora, filas con hover — mismo `.card`/`.comentario-item`
   de siempre, solo variantes de color por categoría. */
.gestion-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--corp-gray-dim);
}

.gestion-cat-dot.urgente {
  background: var(--corp-danger);
}

.gestion-cat-dot.atencion {
  background: var(--corp-warning);
}

.gestion-cat-dot.ok {
  background: var(--corp-success);
}

.gestion-cat-dot.info {
  background: var(--corp-accent);
}

.gestion-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
  margin: 0 -1.25rem;
  padding: 0 1.25rem;
  transition: background-color 150ms ease-out;
}

.gestion-item-link:hover {
  background-color: var(--corp-surface);
}

.gestion-item-link:focus-visible {
  outline: 2px solid var(--corp-accent);
  outline-offset: -2px;
  background-color: var(--corp-surface);
}

/* WHY (pedido explícito del cliente, sep 2026, ver ADR-038/039): recuadro
   por prospecto dentro del panel flotante de "Estados de gestión"
   (admin.html, ver ADR-034) — antes cada fila usaba
   `.comentario-item`/`.gestion-item-link` (fila con separador inferior,
   edge-to-edge). Ahora cada prospecto es su propia caja con borde propio,
   distribuida en `.gestion-prospectos-grid` (ADR-039, 3 columnas) en vez
   de apilada — el espaciado entre cajas lo da el `gap` del grid, no un
   margen propio de la tarjeta. */
.gestion-prospecto-card {
  display: block;
  /* WHY (sep 2026): sin mínimo 0 una etiqueta larga ("Fuente: Redes sociales
     (Instagram / Facebook / TikTok)") ensanchaba la tarjeta más allá de su
     columna del grid y quedaba cortada contra el borde de la ventana
     flotante en celular. */
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--corp-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.gestion-prospecto-card:hover {
  border-color: var(--corp-border-strong);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.gestion-prospecto-card:focus-visible {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
  border-color: var(--corp-border-strong);
}

.gestion-prospecto-etiquetas {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

/* WHY: la etiqueta nunca pasa del ancho de la tarjeta — el texto se corta
   con "…" y el valor completo queda en el `title` (ver admin.html). */
.gestion-prospecto-etiquetas .badge {
  max-width: 100%;
  min-width: 0;
}

.gestion-prospecto-etiquetas .badge > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gestion-prospecto-nombre {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--corp-text);
}

.gestion-prospecto-contacto {
  margin-top: 0.25rem;
}

/* ADR-120: hora agendada al pie de la tarjeta en Citas/Test Drive hoy. */
.gestion-prospecto-agenda {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--corp-border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--corp-accent);
}

/* WHY (pedido explícito del cliente, sep 2026, ver ADR-039): "distribuye
   las horizontalmente de a 3" — grid de 3 columnas para las tarjetas de
   prospecto dentro del panel de "Estados de gestión"; colapsa a 2/1
   columnas en viewports angostos (mismo criterio responsive que el resto
   de la app, ver `.indicadores-grid`). Solo aplica a la vista de
   prospectos (`kind == "lead"` en admin.html) — Citas/Test Drive hoy
   siguen en `.comentarios-lista` vertical, no se pidió cambiarla. */
.gestion-prospectos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 720px) {
  .gestion-prospectos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .gestion-prospectos-grid {
    grid-template-columns: 1fr;
  }
}

/* WHY (pedido explícito del cliente, sep 2026, ronda de paginación/
   búsqueda/iconos): ícono + texto dentro de cada `.badge` de las tarjetas
   de prospecto — modificador propio en vez de tocar `.badge` en sí (se usa
   en decenas de lugares sin ícono). `svg` hereda `color: currentColor` de
   la variante de badge que lo envuelve (badge-info/warning/danger/neutral),
   así que no hace falta un color propio por ícono. */
.gestion-badge-icono {
  gap: 0.3rem;
}

.gestion-badge-icono svg {
  flex-shrink: 0;
}

/* WHY (pedido explícito del cliente, sep 2026): caja de búsqueda junto a
   los botones de marca, dentro del panel de cada estado — mismo alto/
   radio que los `.filtro-estado-pill` con los que comparte fila, para que
   no desentone visualmente; ancho propio (no 100%) porque convive con las
   pestañas de marca en la misma fila flex-wrap. */
.gestion-busqueda-caja {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--corp-border);
  border-radius: 8px;
  background: var(--corp-surface);
  color: var(--corp-gray);
  flex: 1 1 14rem;
  min-width: 12rem;
}

.gestion-busqueda-caja svg {
  flex-shrink: 0;
}

.gestion-busqueda-caja input {
  border: none;
  padding: 0;
  background: transparent;
  font-size: 0.78rem;
  width: 100%;
}

.gestion-busqueda-caja input:focus {
  outline: none;
  box-shadow: none;
}

/* WHY (pedido explícito del cliente, sep 2026): "barra de 3 recuadros" del
   medidor de calor — 3 cuadros fijos que se van iluminando de izquierda a
   derecha según `numero_aperturas` (1=frío, 2=tibio, 3=caliente, ver
   `calor_prospecto` en web/templates.py), cada posición con su propio color
   fijo (azul/amarillo/rojo) en vez de un solo color repetido — así se lee
   tanto la cantidad de recuadros encendidos como el color de cada uno.
   Recuadro sin encender queda en un gris apagado, no oculto (para que se
   note que es una barra de 3 posiciones, no un badge de ancho variable). */
.calor-barra {
  display: inline-flex;
  gap: 0.2rem;
  margin-left: 0.35rem;
}

.calor-cuadro {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background-color: rgba(120, 125, 130, 0.25);
}

.calor-cuadro-azul {
  background-color: #1d4ed8;
}

.calor-cuadro-amarillo {
  background-color: #d97706;
}

.calor-cuadro-rojo {
  background-color: #dc2626;
}

/* WHY (pedido explícito del cliente, sep 2026, ver ADR-039): "que la UI
   flotante sea central a la vista" — el panel de "Estados de gestión"
   (admin.html) deja de anclarse arriba de la fila de tarjetas (el
   `.embudo-flotante` base sigue con `position:absolute;bottom:100%`, ver
   arriba) y pasa a ser un panel centrado en el viewport, como un modal.
   Clase aparte (`.embudo-flotante.gestion-flotante-centro`, más
   específica) en vez de tocar `.embudo-flotante` directamente. Ancho fijo
   (no 100% del `.embudo-stage-wrap` como antes) para que se vea como un
   panel propio, no como una franja de la fila. */
.embudo-flotante.gestion-flotante-centro {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(56rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 4rem));
}

.form-comentario {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}

.form-comentario textarea {
  min-height: 4rem;
  resize: vertical;
}

.form-comentario .btn-primary {
  align-self: flex-start;
}

.spec-photo {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--corp-border);
  object-fit: cover;
  display: block;
}

.spec-photo.sin-foto {
  background-color: rgba(120, 125, 130, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--corp-gray);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
}

.spec-facts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.spec-fact {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.spec-fact .label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.66rem;
  color: var(--corp-gray);
}

.spec-fact .value {
  font-weight: 600;
  font-size: 0.9rem;
  /* WHY (sep 2026): un correo o nombre largo sin espacios se salía de la
     caja "Datos del cliente" y quedaba montado sobre la columna vecina —
     se parte donde haga falta en vez de desbordar. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.spec-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.workspace {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Calendario — grilla mes/semana/día (ver ADR-008) ──────────────────── */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--corp-border);
}

.cal-grid-header {
  gap: 0;
  background: transparent;
  margin-bottom: 2px;
}

.cal-dia-header {
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--corp-gray-dim);
}

/* WHY: `.cal-grid`/`.cal-grid-semana` reparten 7 columnas iguales
   (`repeat(7, 1fr)`) pero un ítem de grid nunca se encoge por debajo del
   ancho mínimo de su contenido (`min-width: auto` implícito) — con texto
   `white-space: nowrap` dentro (título/cliente/vehículo/asesor de cada
   mini-tarjeta, ver .cal-evento-pill-x y .cal-evento-item más abajo), esa
   regla empujaba el grid entero más ancho que su contenedor real
   (`.tablero-resumen-grid`), y como `.card` ya recorta con
   `overflow: hidden`, la última columna (domingo) quedaba parcialmente
   cortada en vez de que el texto truncara con ellipsis como se esperaba.
   `min-width: 0` fuerza a que el ancho de columna gane sobre el
   contenido, dejando que `text-overflow: ellipsis` sí haga su trabajo. */
.cal-celda {
  display: block;
  min-width: 0;
  min-height: 6.5rem;
  padding: 0.4rem;
  background: var(--corp-dark);
  color: inherit;
  text-decoration: none;
  transition: background-color 150ms ease;
  overflow: hidden;
}

.cal-celda:hover {
  background: rgba(0, 0, 0, 0.03);
}

.cal-celda.fuera-de-mes {
  opacity: 0.4;
}

.cal-celda.hoy {
  box-shadow: inset 0 0 0 2px var(--corp-accent);
}

.cal-celda-numero {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* WHY (pedido explícito del cliente, sep 2026 — referencia
   10_calendario_y_agenda_comercial_citas_y_test_drives): mini-tarjeta de
   evento en la vista Mes — reemplaza el pill de una sola línea (solo
   título) por 3 líneas truncadas (título/cliente+vehículo/asesor), mismo
   criterio de "cada cita" enriquecida que ya tienen semana/día (ver
   .cal-evento-item más abajo). Cada línea usa `white-space:nowrap` +
   ellipsis en vez de envolver, para no ensanchar la columna del día —
   la celda crece en alto en su lugar (sin max-height en `.cal-celda`). */
.cal-evento-pill-rica {
  font-size: 0.7rem;
  line-height: 1.25;
  padding: 1.4rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.25rem;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--corp-border-strong);
}

.cal-evento-pill-titulo {
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--corp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-evento-pill-sub {
  color: var(--corp-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-evento-pill-asesor {
  font-weight: 700;
  color: var(--corp-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-mas {
  font-size: 0.9rem;
  color: var(--corp-gray-dim);
}

.cal-grid-semana {
  min-height: 20rem;
}

.cal-columna-dia {
  background: var(--corp-dark);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
}

.cal-columna-dia.hoy {
  box-shadow: inset 0 0 0 2px var(--corp-accent);
}

/* WHY (pedido explícito del cliente, sep 2026 — referencia
   10_calendario_y_agenda_comercial_citas_y_test_drives): tarjeta de
   evento enriquecida con la info real asociada a la agenda — cliente
   (Lead/Tarjeta ya vienen eager-loaded, ver _EVENTO_LOAD_OPTS en
   services/calendario_service.py, así que leer `.cliente_nombre` no
   dispara un lazy-load) y responsable, con la jerarquía tipográfica de la
   referencia (hora+tipo arriba en el color del tipo, título en negrilla,
   cliente en gris, responsable en negrilla azul abajo) — sin inventar
   bahía/placa/flota, que no están modelados. */
.cal-evento-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--corp-border-strong);
  min-width: 0;
}

.cal-evento-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.cal-evento-hora {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--corp-text);
}

.cal-evento-tipo-label {
  /* WHY: 0.6rem (9.6px) en mayúsculas era el texto más pequeño de la app
     — subido a 0.68rem para alinear con el resto de etiquetas de
     Calendario (`.cal-evento-hora`/`.cal-evento-responsable`). */
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cal-evento-titulo {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--corp-text);
}

.cal-evento-cliente {
  font-size: 0.7rem;
  color: var(--corp-gray);
}

/* WHY (pedido explícito del cliente, sep 2026): vehículo de interés real
   (Tarjeta.vehiculo si ya está asignado, o el interés declarado del Lead
   si todavía es un Prospecto — ver web/templates.py::vehiculo_interes_evento).
   Ícono de auto en vez de texto plano para diferenciarlo visualmente de
   la línea de cliente, sin agregar otro color a la paleta. */
.cal-evento-vehiculo {
  font-size: 0.7rem;
  color: var(--corp-gray);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.cal-evento-vehiculo svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.cal-evento-responsable {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--corp-accent);
  margin-top: 0.1rem;
}

/* WHY (pedido explícito del cliente, sep 2026 — referencia
   08_leads_registro_y_radicación_de_nuevo_prospecto): coloreado propio del
   select de Prioridad en el formulario de alta (leads_nuevo.html) —
   alta=amarillo, media=azul, baja=verde. Deliberadamente distinto de
   `badge_prioridad` (web/templates.py), que sigue usando su propio mapeo
   en el resto de la app (leads.html/leads_detalle.html) — el cliente pidió
   este esquema de color solo para esta caja. */
.prioridad-select-alto {
  border-color: var(--corp-warning);
  background-color: rgba(245, 158, 11, 0.08);
  color: #b45309;
  font-weight: 600;
}

.prioridad-select-medio {
  border-color: var(--corp-accent);
  background-color: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
  font-weight: 600;
}

.prioridad-select-bajo {
  border-color: var(--corp-success);
  background-color: rgba(16, 185, 129, 0.08);
  color: #047857;
  font-weight: 600;
}

.form-seccion-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--corp-accent-dim);
  color: var(--corp-accent);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.form-seccion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
}

.form-seccion-grid.form-seccion-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* WHY (pedido explícito del cliente, sep 2026): "Interés vehicular" —
   condición, marca, línea y año modelo en 4 columnas (2 en tablet). */
.form-seccion-grid.form-seccion-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 960px) {
  .form-seccion-grid.form-seccion-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .form-seccion-grid,
  .form-seccion-grid.form-seccion-grid-3,
  .form-seccion-grid.form-seccion-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* WHY (pedido explícito del cliente, sep 2026): ventana flotante de la
   cotización del registro de prospecto (leads_nuevo.html) — más ancha que
   el .modal-box estándar porque embebe la ficha técnica (PDF). */
.cotizacion-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--corp-border-strong);
  border-radius: 8px;
}

.cotizacion-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cotizacion-seccion-titulo {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.cotizacion-carta {
  white-space: pre-wrap;
  font-size: 0.875rem;
  line-height: 1.55;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--corp-border);
  border-radius: 8px;
}

/* Contenido del vehículo en la ventana de propuesta (sep 2026,
   "Arquitecto de Propuestas" — reemplaza la ficha técnica PDF). */
.cotizacion-contenido {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--corp-border);
  border-radius: 8px;
}
.cotizacion-logos img {
  max-height: 2.5rem;
  max-width: 9rem;
  object-fit: contain;
}
.cotizacion-fotos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}
.cotizacion-fotos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}
.cotizacion-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}
.cotizacion-checklist li {
  display: flex;
  gap: 0.4rem;
}
.cotizacion-check-ok span:first-child {
  color: var(--corp-success);
  font-weight: 700;
}
.cotizacion-check-falta {
  color: var(--corp-gray);
}

.cotizacion-oferta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem 1rem;
}

.cotizacion-totales {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.cotizacion-totales td {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--corp-border);
}

.cotizacion-totales td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cotizacion-totales .cotizacion-total td {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--corp-accent);
}

.cotizacion-modal-acciones {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--corp-border);
  background-color: var(--corp-dark);
}

@media (max-width: 720px) {
  .cotizacion-oferta-grid {
    grid-template-columns: 1fr;
  }
}

/* WHY (referencia 11_calendario_agendar_nuevo_evento_y_test_drive, sep
   2026): tarjetas seleccionables de tipo de evento en calendario_nuevo.html
   — mismo lenguaje visual que .segmentador (borde+fondo tenue en vez de
   pill), pero como grid de tarjetas porque son 5 opciones con ícono propio,
   no 2 palabras cortas. El color de cada tarjeta activa reusa el mismo
   mapeo semántico de tipo_evento_dot/tipo_evento_bg (web/templates.py) vía
   variables inline por opción — no un color fijo por CSS. */
.tipo-evento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

@media (max-width: 720px) {
  .tipo-evento-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tipo-evento-opcion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1.5px solid var(--corp-border);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.tipo-evento-opcion input[type="radio"] {
  width: auto;
  accent-color: var(--tipo-color, var(--corp-accent));
  flex-shrink: 0;
}

.tipo-evento-opcion .tipo-evento-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tipo-color, var(--corp-gray-dim));
  flex-shrink: 0;
}

.tipo-evento-opcion span.tipo-evento-nombre {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--corp-text);
}

.tipo-evento-opcion.activo {
  border-color: var(--tipo-color, var(--corp-accent));
  background: var(--tipo-bg, var(--corp-accent-dim));
}

/* ── Gráficas de distribución (hub de Feria) ──────────────────────────────
   WHY: 3 gráficas de solo lectura (torta por agente, barras verticales por
   modelo, barras horizontales por marca — pedido explícito del cliente,
   ago 2026) hechas a mano con CSS (conic-gradient + divs con alto/ancho en
   %), sin librería nueva — mismo criterio que el resto del proyecto
   (Jinja+CSS vanilla, sin build step, ver ADR-001/.claude/skills/
   redesign-ui). */

.grafica-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.75rem;
}

.grafica-bloque-titulo {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--corp-text);
  margin-bottom: 0.85rem;
}

/* WHY: torta por agente comercial — `conic-gradient` con paradas en % en
   vez de arcos SVG calculados a mano; el template arma la lista de paradas
   acumulando el % de cada agente (ver feria.html). */
.grafica-torta-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.grafica-torta {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--corp-border);
}

.grafica-leyenda {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--corp-text);
  min-width: 0;
}

.grafica-leyenda-punto {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.4rem;
  flex-shrink: 0;
}

/* WHY: barras verticales — interés por modelo. Pista de alto fijo con la
   barra anclada abajo (`align-items: flex-end` en la fila de columnas +
   altura en % dentro de la pista), mismo lenguaje que un gráfico de barras
   convencional. */
.grafica-barras-v {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  height: 150px;
}

.grafica-barras-v-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.grafica-barras-v-valor {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--corp-text);
  font-variant-numeric: tabular-nums;
}

.grafica-barras-v-pista {
  width: 100%;
  max-width: 46px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: var(--corp-surface);
  border-radius: 6px 6px 2px 2px;
  overflow: hidden;
}

.grafica-barras-v-barra {
  width: 100%;
  min-height: 3px;
  border-radius: 6px 6px 0 0;
  transition: height 300ms ease-out;
}

.grafica-barras-v-label {
  font-size: 0.72rem;
  color: var(--corp-gray);
  white-space: nowrap;
}

/* WHY: barras horizontales — interés por marca, con el logo pequeño de la
   marca (pedido explícito del cliente). El logo va en una placa blanca
   fija al inicio de la PISTA (no del relleno) para que se lea igual sin
   importar el % de la barra, incluso en 0 — ver `.grafica-barra-h-track`
   con `position: relative` conteniendo tanto el relleno como el logo,
   ambos `position: absolute`. */
.grafica-barras-h {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.grafica-barra-h-track {
  position: relative;
  height: 38px;
  border-radius: 6px;
  background: var(--corp-surface);
  overflow: hidden;
}

.grafica-barra-h-fill {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  transition: width 300ms ease-out;
}

.grafica-barra-h-logo {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.grafica-barra-h-logo img {
  height: 100%;
  width: auto;
  max-width: 70px;
  object-fit: contain;
}

.grafica-barra-h-meta {
  font-size: 0.75rem;
  color: var(--corp-gray);
  margin-top: 0.3rem;
}

@media (max-width: 480px) {
  .grafica-torta-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* WHY (pedido explícito del cliente, sep 2026): pares de cajas de
   leads_detalle.html (Datos de contacto+Cotización actual, Seguimiento
   comercial+Citas y Test Drives, Documentos+Nueva cotización, Iniciar
   ciclo de venta+Cambiar estado) que antes eran una debajo de otra, a
   ancho completo — el cliente pidió que cada par comparta la misma línea
   horizontal. Genérica (no específica de leads) para reusarse en otras
   pantallas de detalle si aplica el mismo patrón. */
.detalle-fila-par {
  display: grid;
  /* WHY: mismo motivo que `.detalle-grid` — `minmax(0, 1fr)` evita que el
     contenido largo de una caja ensanche su columna sobre la de al lado. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.detalle-fila-par > .card {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .detalle-fila-par {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* WHY (pedido explícito del cliente, sep 2026 — rediseño de la sección de
   datos de Vista Prospecto, referencia visual adjunta): 2 paneles claros
   (Vehículo de interés / Información del comprador) y una franja oscura
   con la última propuesta. La franja reusa los tokens `--corp-chrome-*` de
   la barra superior (misma región "oscura" del sistema, ver ADR-013) en
   vez de inventar un azul marino propio. */
.prospecto-resumen {
  padding: 1.25rem 1.5rem 1.5rem;
}

.prospecto-resumen-estado {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.prospecto-resumen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem;
}

@media (max-width: 820px) {
  .prospecto-resumen-grid {
    grid-template-columns: 1fr;
  }
}

.prospecto-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--corp-border-strong);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  background: var(--corp-dark);
}

.prospecto-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--corp-border);
}

.prospecto-panel-titulo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--corp-gray);
}

.prospecto-panel-titulo svg {
  color: var(--corp-accent);
}

.prospecto-ficha {
  margin: 0.9rem 0 0;
  border: 1px solid var(--corp-border);
  border-radius: 8px;
  padding: 0 0.9rem;
}

.prospecto-ficha > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--corp-border);
}

.prospecto-ficha > div:last-child {
  border-bottom: none;
}

.prospecto-ficha dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--corp-gray-dim);
}

.prospecto-ficha dd {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--corp-text);
  text-align: right;
}

.prospecto-panel-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--corp-border);
  font-size: 0.75rem;
  color: var(--corp-gray);
}

.prospecto-panel-footer:not(:first-child) {
  margin-top: 0.9rem;
}

.prospecto-disponible {
  font-weight: 600;
  color: #047857;
}

.prospecto-etiqueta {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--corp-gray-dim);
}

.prospecto-comprador {
  padding: 0.9rem 0 0.75rem;
}

.prospecto-comprador-nombre {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--corp-text);
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
}

.prospecto-comprador-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--corp-gray);
}

.prospecto-contacto {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  margin-top: 0.55rem;
  border-radius: 8px;
  background: var(--corp-light);
}

.prospecto-contacto-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  border: 1px solid var(--corp-border-strong);
  background: var(--corp-dark);
  color: var(--corp-gray);
}

.prospecto-contacto-dato {
  flex: 1;
  min-width: 0;
}

.prospecto-contacto-valor {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--corp-text);
  overflow-wrap: anywhere;
}

.prospecto-contacto-acciones {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.prospecto-contacto-acciones a {
  font-size: 0.75rem;
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
}

.prospecto-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #047857;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}

@media (max-width: 480px) {
  .prospecto-contacto {
    flex-wrap: wrap;
  }

  .prospecto-contacto-acciones {
    width: 100%;
  }
}

.prospecto-propuesta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--corp-chrome), var(--corp-chrome-2));
  color: #fff;
}

.prospecto-propuesta-info {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  flex: 1 1 22rem;
}

.prospecto-propuesta-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}

.prospecto-propuesta-chip {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.45);
}

.prospecto-propuesta-dato {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--corp-chrome-muted);
}

.prospecto-propuesta-dato strong {
  color: #fff;
}

.prospecto-propuesta-destacado {
  color: #6ee7b7 !important;
}

.prospecto-vigencia {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.prospecto-vigencia-alerta {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.2);
}

.prospecto-vigencia-vencida {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.25);
}

.prospecto-propuesta-secundaria {
  font-size: 0.75rem;
  color: var(--corp-chrome-dim);
}

.prospecto-propuesta-enlaces a,
.prospecto-propuesta-enlaces button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: #93c5fd;
  text-decoration: underline;
  cursor: pointer;
}

.prospecto-propuesta-enlaces a:focus-visible,
.prospecto-propuesta-enlaces button:focus-visible,
.prospecto-propuesta-btn-ghost:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.prospecto-propuesta-valor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  text-align: right;
  flex: 0 1 auto;
}

.prospecto-propuesta-etiqueta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corp-chrome-muted);
}

.prospecto-propuesta-precio {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.prospecto-propuesta-precio span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--corp-chrome-muted);
}

.prospecto-propuesta-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.prospecto-propuesta-btn-ghost {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.prospecto-propuesta-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* WHY: los botones de la franja comparten tamaño (el de "Enviar cotización"
   viene del partial compartido con `.btn-primary`), y los badges de color
   claro se leen mal sobre el fondo oscuro — fondo casi blanco, conservando
   el color de texto de cada variante (el medidor de interés). */
.prospecto-propuesta-acciones .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.5rem 0.9rem;
}

.prospecto-propuesta .badge {
  background-color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 640px) {
  .prospecto-propuesta-valor {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .prospecto-propuesta-acciones {
    justify-content: flex-start;
  }
}

.prospecto-form-cotizacion {
  border-top: 1px solid var(--corp-border);
  margin-top: 1rem;
  padding-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 720px) {
  .prospecto-form-cotizacion {
    grid-template-columns: 1fr;
  }
}

/* WHY: pestañas simples Seguimientos/Orden de Pedido/Documentos —
   reutiliza el mismo lenguaje visual que `.app-tab` (base.html) pero a
   escala de tarjeta, no de navegación global. */
.prospecto-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--corp-border);
  padding: 0 1rem;
}

/* WHY (ADR-073): con "Orden de Pedido <etapa>" la fila no cabe a 390px y
   cada etiqueta se partía en 3-4 renglones. En pantalla angosta las 3
   pestañas se reparten el ancho y se oculta la etapa de la pestaña (ya la
   muestra el badge "Negocio · <etapa>" del encabezado) — así las 3 quedan
   a la vista, sin scroll que esconda "Documentos". */
@media (max-width: 560px) {
  .prospecto-tabs { padding: 0 0.5rem; gap: 0; }
  .prospecto-tab-btn { flex: 1 1 0; padding: 0.7rem 0.35rem; text-align: center; }
  .prospecto-tab-etapa { display: none; }
}

.prospecto-tab-btn {
  background: none;
  border: none;
  padding: 0.75rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--corp-gray);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.prospecto-tab-btn.prospecto-tab-activa {
  color: var(--corp-accent);
  border-bottom-color: var(--corp-accent);
}

/* WHY (pedido explícito del cliente, sep 2026, referencia visual adjunta):
   Historial de contactos — recuadro propio por seguimiento (antes fila
   `.comentario-item` con separador inferior, edge-to-edge), reusado por
   Vista Prospecto y Vista Tarjeta vía partials/seguimiento_historial.html. */
.seguimientos-lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.seguimiento-card {
  border: 1px solid var(--corp-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}

.seguimiento-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.seguimiento-canal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--corp-text);
}

.seguimiento-canal-icono {
  display: inline-flex;
  color: var(--corp-gray);
}

.seguimiento-fecha {
  margin-left: auto;
}

.seguimiento-observacion {
  margin-top: 0.5rem;
  font-style: italic;
  color: var(--corp-gray);
}

.seguimiento-asesor-linea {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--corp-gray);
}

/* WHY (pedido explícito del cliente, sep 2026 — cotización entregada por
   link): bloque de interés del cliente (partials/interes_cotizacion.html)
   — medidor de calor + aperturas + clics + última apertura en una línea
   que se parte en pantallas angostas. */
.interes-cotizacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
}

.interes-cotizacion-secciones {
  margin-top: 0.25rem;
  font-size: 0.78rem;
}

/* WHY (pedido explícito del cliente, sep 2026 — envío de la cotización):
   ventana de envío por WhatsApp/correo (partials/cotizacion_envio_modal.html).
   Cada canal es un bloque con su casilla; sus campos se atenúan cuando el
   canal no está elegido. */
.cotizacion-envio-form {
  display: grid;
  gap: 0.9rem;
}

/* WHY: excepción a la convención de mostrar en mayúsculas el texto libre
   (ver regla global de inputs arriba) — acá el usuario de WhatsApp y el
   mensaje (con el token del link, que distingue mayúsculas) se envían TAL
   CUAL se escriben; mostrarlos en mayúsculas engañaría al asesor. */
.cotizacion-envio-form input,
.cotizacion-envio-form textarea {
  text-transform: none;
}

.cotizacion-envio-canal {
  border: 1px solid var(--corp-gray-dim);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  margin: 0;
}

.cotizacion-envio-check,
.cotizacion-envio-radio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.cotizacion-envio-opciones {
  display: grid;
  grid-template-columns: minmax(9.5rem, auto) 1fr;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.6rem;
}

.cotizacion-envio-opciones > .meta {
  grid-column: 1 / -1;
}

.cotizacion-envio-opciones > input[type="email"] {
  grid-column: 1 / -1;
}

.cotizacion-envio-opciones.is-disabled {
  opacity: 0.5;
}

.cotizacion-envio-resultados {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.cotizacion-envio-resultado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
}

.cotizacion-envio-resultado .btn-primary {
  white-space: nowrap;
}

.cotizacion-envio-historial {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--corp-gray-dim);
  display: grid;
  gap: 0.2rem;
}

@media (max-width: 520px) {
  .cotizacion-envio-opciones {
    grid-template-columns: 1fr;
  }

  .cotizacion-envio-resultado {
    flex-direction: column;
    align-items: stretch;
  }
}

.tabla-prospectos td a,
.tabla-prospectos td div,
.tabla-prospectos td .meta,
.tabla-prospectos td .badge {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabla-prospectos td .badge,
.tabla-recortada td .badge,
.badge-truncable {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* WHY: en la fila de badges bajo el nombre ("Prospecto"/"Empresa" +
   ciudad) se recorta primero la ciudad, no las insignias cortas. */
.tabla-prospectos td .badge {
  flex-shrink: 0;
}

/* ── Dinámica comercial (Parametrización, sep 2026) ───────────────────────
   WHY (pedido explícito del cliente): listado marca → modelo → línea en
   tarjetas (no tabla) — en una tabla se apretaban o forzaban scroll
   horizontal en celular (ver ADR-067). La carga de listas y las tarjetas
   tienen sus estilos en el bloque de ADR-100/ADR-101, más abajo. */
[x-cloak] {
  display: none !important;
}

.dinamica-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--corp-gray);
}

/* WHY (sep 2026, "Dinámica comercial"): en la ventana de la propuesta el
   precio de la línea es de solo lectura y las acciones comerciales se
   marcan (valor fijo de Parametrización, no editable). */
.cotizacion-precio-fijo {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.45rem 0;
}

.cotizacion-acciones {
  display: grid;
  gap: 0.4rem;
}

.cotizacion-accion {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--corp-border-strong);
  border-radius: 0.5rem;
  cursor: pointer;
  min-width: 0;
}

.cotizacion-accion input {
  width: auto;
  margin-top: 0.2rem;
}

.cotizacion-accion-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dinamica-check input {
  width: auto;
}

.dinamica-agregar-linea input::placeholder {
  text-transform: none;
}

/* ══════════════════════════════════════════════════════════════════════
   Feria (rediseño sep 2026, ADR-072) — pedido explícito del cliente con
   referencia visual "Registro de prospectos en stand". Clases propias
   `feria-*` (mismo criterio que `param-*`, ADR-070): no se tocan
   `.card`/`.table-dark` globales. El encabezado usa el "chrome" oscuro
   (`--corp-chrome*`) igual que la franja de la última propuesta
   (ADR-064), no una paleta nueva.
   ══════════════════════════════════════════════════════════════════════ */
.feria-page {
  display: grid;
  /* minmax(0, 1fr): sin esto la pista toma el ancho mínimo de la tabla
     (min-width 1040px dentro de .tabla-wrap) y en celular toda la página
     se ensancha en vez de que la tabla haga scroll. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.feria-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  padding: 1.5rem 1.75rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--corp-chrome), var(--corp-chrome-2));
  color: #fff;
}

.feria-hero-texto {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 22rem;
}

.feria-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--corp-chrome-dim);
}

.feria-hero-titulo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.feria-hero-selector {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  min-width: 0;
}

.feria-hero-selector select {
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: 2.75rem;
  padding: 0 2.25rem 0 0.9rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  text-overflow: ellipsis;
}

.feria-hero-selector select option {
  color: var(--corp-text);
  background: #fff;
}

.feria-hero-selector select:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.feria-hero-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(110, 231, 183, 0.4);
}

.feria-hero-estado::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.feria-hero-estado-inactiva {
  color: var(--corp-chrome-muted);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.feria-hero-desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--corp-chrome-muted);
}

.feria-hero-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  flex: 1 1 34rem;
}

.feria-hero-kpis:has(> :only-child) {
  grid-template-columns: minmax(0, 12rem);
  justify-content: end;
}

.feria-kpi {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--corp-chrome-border);
}

.feria-kpi-etiqueta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corp-chrome-dim);
}

.feria-kpi-valor {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.feria-kpi-valor small {
  font-size: 1rem;
  font-weight: 600;
  color: var(--corp-chrome-muted);
}

.feria-kpi-sub {
  font-size: 0.75rem;
  color: var(--corp-chrome-muted);
}

.feria-kpi-delta {
  font-weight: 700;
  color: #6ee7b7;
}

.feria-kpi-barra {
  display: block;
  height: 4px;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.feria-kpi-barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #34d399;
}

/* Tarjetas del hub */
.feria-card {
  min-width: 0;
  background: var(--corp-dark);
  border: 1px solid var(--corp-border-strong);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
}

.feria-card-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}

.feria-card-titulo {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--corp-text);
}

.feria-card-desc {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--corp-gray);
}

.feria-card-pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--corp-border-strong);
  font-size: 0.85rem;
  color: var(--corp-text);
}

.feria-card-pie strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.feria-card-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.feria-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  text-decoration: none;
}

.feria-aviso {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: var(--corp-surface);
  font-size: 0.85rem;
  color: var(--corp-gray);
}

.feria-aviso a,
.feria-registro-info a {
  color: var(--corp-accent);
}

.feria-nota {
  display: block;
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  color: var(--corp-gray-dim);
}

.feria-subtitulo {
  margin: 1.25rem 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corp-gray);
}

.feria-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

/* Registro rápido */
.feria-registro {
  position: relative;
  overflow: hidden;
}

.feria-registro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--corp-accent), var(--corp-info), var(--corp-success));
}

.feria-registro-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 0.75rem;
  align-items: end;
}

.feria-campo {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.feria-campo > span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--corp-gray);
}

.feria-campo em {
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--corp-gray-dim);
}

.feria-campo input,
.feria-campo select {
  height: 2.6rem;
  font-size: 0.875rem;
}

.feria-campo input::placeholder {
  text-transform: none;
}

.feria-registro-enviar {
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.feria-registro-info {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--corp-gray);
}

.feria-registro-info svg {
  vertical-align: -3px;
  margin-right: 0.3rem;
  color: var(--corp-accent);
}

/* Distribución de interés */
.feria-barra-apilada {
  display: flex;
  height: 0.85rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--corp-surface);
}

.feria-barra-apilada > span {
  display: block;
  height: 100%;
  min-width: 3px;
}

.feria-barra-apilada > span + span {
  border-left: 2px solid var(--corp-dark);
}

.feria-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--corp-gray);
}

.feria-leyenda li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.feria-leyenda strong {
  color: var(--corp-text);
  font-variant-numeric: tabular-nums;
}

.feria-leyenda-punto {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 3px;
}

.feria-leyenda-logo {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
}

.feria-lista-barras {
  display: grid;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.feria-lista-barras li {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.85rem;
}

.feria-lista-nombre {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.feria-lista-nombre strong {
  color: var(--corp-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.feria-lista-pista {
  display: block;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--corp-surface);
  overflow: hidden;
}

.feria-lista-pista > span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.feria-lista-valor {
  min-width: 4.5rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Fichas por WhatsApp */
.feria-progreso {
  display: grid;
  gap: 0.95rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feria-progreso li {
  display: grid;
  gap: 0.4rem;
}

.feria-progreso-fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--corp-text);
}

.feria-progreso-fila strong {
  font-variant-numeric: tabular-nums;
}

.feria-progreso-pista {
  display: block;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--corp-surface);
  overflow: hidden;
}

.feria-progreso-pista > span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.feria-progreso-ok { background: var(--corp-success); }
.feria-progreso-pendiente { background: var(--corp-warning); }
.feria-progreso-bloqueado { background: var(--corp-gray-dim); }

/* Tabla de prospectos */
.feria-filtros select {
  width: auto;
  min-width: 11rem;
}

.feria-celular {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--corp-text);
}

.feria-vehiculo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.feria-marca-chip {
  --marca: var(--corp-accent);
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--marca);
  background: color-mix(in srgb, var(--marca) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--marca) 40%, transparent);
}

.feria-asesor {
  font-size: 0.85rem;
  color: var(--corp-text);
}

.feria-fecha {
  display: block;
  margin-top: 0.25rem;
}

.feria-etapa {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--corp-text);
}

.feria-acciones {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.feria-btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  border: 1px solid var(--corp-border-strong);
  color: var(--corp-gray);
}

.feria-btn-icono-wa {
  color: #fff;
  background: #16a34a;
  border-color: #16a34a;
  transition: background-color 150ms ease-out;
}

.feria-btn-icono-wa:hover {
  background: #15803d;
}

.feria-btn-icono-wa:focus-visible {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
}

.feria-btn-icono-off {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Fichas técnicas */
.feria-fichas {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feria-ficha {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--corp-border-strong);
  border-radius: 10px;
}

.feria-ficha-icono {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  color: var(--corp-danger);
  background: rgba(239, 68, 68, 0.1);
}

.feria-ficha-icono-vacio {
  color: var(--corp-gray-dim);
  background: var(--corp-surface);
}

.feria-ficha-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.feria-ficha-texto strong {
  font-size: 0.9rem;
  color: var(--corp-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.feria-ficha-texto .param-nombre-sub {
  white-space: nowrap;
}

.feria-ficha-falta {
  color: #b45309;
}

.feria-ficha-acciones {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.feria-ficha-acciones > * + * {
  border-left: 1px solid var(--corp-border-strong);
}

.feria-ficha-acciones form {
  margin: 0;
}

.feria-archivo {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.feria-archivo:focus-within {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Plantilla de WhatsApp */
.feria-variables {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.feria-variable {
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  border: 1px dashed var(--corp-border-strong);
  background: var(--corp-surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--corp-accent-hover);
}

.feria-plantilla-form {
  display: grid;
  gap: 0.75rem;
}

.feria-plantilla-form textarea {
  font-size: 0.875rem;
  text-transform: none;
}

.feria-plantilla-form .feria-nota {
  margin: 0;
}

.feria-plantilla-form .btn-primary {
  justify-self: start;
}

.feria-chat {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
  border-radius: 10px;
  background: #efeae2;
}

.feria-chat-etiqueta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #54656f;
}

.feria-chat-burbuja {
  justify-self: end;
  max-width: 92%;
  padding: 0.6rem 0.75rem;
  border-radius: 10px 0 10px 10px;
  background: #d9fdd3;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  font-size: 0.85rem;
  line-height: 1.45;
  color: #111b21;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Selector de feria */
.feria-selector-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feria-selector-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--corp-border-strong);
  background: var(--corp-dark);
  color: var(--corp-text);
  text-decoration: none;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.feria-selector-item:hover {
  border-color: var(--corp-accent);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12);
}

.feria-selector-item:focus-visible {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
}

.feria-selector-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.feria-selector-texto strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.feria-selector-ir {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--corp-accent);
}

@media (max-width: 1100px) {
  .feria-registro-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feria-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .feria-hero {
    padding: 1.25rem;
  }

  .feria-hero-kpis {
    grid-template-columns: minmax(0, 1fr);
    flex-basis: 100%;
  }

  .feria-hero-kpis:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .feria-card {
    padding: 1.1rem;
  }

  .feria-registro-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .feria-lista-barras li {
    grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) auto;
  }

  .feria-filtros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .feria-filtros select {
    width: 100%;
    min-width: 0;
  }

  .feria-ficha {
    flex-wrap: wrap;
  }

  .feria-ficha-acciones {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Vista Prospecto única (ADR-073): notas/continuidad bajo la franja de la
   propuesta y encabezado del negocio en la pestaña "Orden de Pedido".
   ══════════════════════════════════════════════════════════════════════ */
.prospecto-notas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--corp-border);
}

.prospecto-pestanas {
  margin-top: 1rem;
  padding: 0;
}

.negocio-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}

/* Botón Pedido en el encabezado del negocio (ADR-154) */
.negocio-pedido {
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--corp-border);
  border-radius: 0.6rem;
  background: var(--corp-surface);
}
.negocio-pedido-btn {
  font-size: 1rem;
  padding: 0.75rem 1.75rem;
  min-height: 2.9rem;
}
.negocio-pedido-obs {
  flex: 1 1 18rem;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--corp-text);
}
.negocio-pedido-obs ul {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
}
.negocio-pedido-obs li + li { margin-top: 0.15rem; }

.negocio-tabs {
  flex-wrap: wrap;
}

.negocio-encabezado-datos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── Arquitecto de propuestas (sep 2026, pedido explícito del cliente) ──
   Mismo lenguaje que Parametrización (param-*); clases propias arq-* para
   no tocar las compartidas. */
.arq-estructura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.25rem;
}
.arq-estructura-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: arq-paso;
}
.arq-estructura-lista li {
  counter-increment: arq-paso;
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--corp-border);
  border-radius: 999px;
  color: var(--corp-text);
  background: var(--corp-surface);
}
.arq-estructura-lista li::before {
  content: counter(arq-paso) ". ";
  color: var(--corp-gray);
  font-weight: 600;
}
.param-seccion + .param-seccion,
.arq-secciones .param-seccion {
  margin-top: 1.25rem;
}
.arq-aviso-ok {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--corp-success);
  border-radius: 6px;
  color: var(--corp-success);
  background: color-mix(in srgb, var(--corp-success) 8%, transparent);
  font-size: 0.9rem;
}
.arq-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.arq-logo-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--corp-border);
  border-radius: 8px;
  background: var(--corp-dark);
}
.arq-logo-compania {
  border-style: dashed;
}
.arq-logo-marco {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5.5rem;
  height: 3.25rem;
  padding: 0.35rem;
  border: 1px solid var(--corp-border);
  border-radius: 6px;
  background: #fff;
}
.arq-logo-marco img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.arq-logo-vacio {
  font-weight: 700;
  color: var(--corp-gray);
}
.arq-logo-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
}
.arq-logo-texto strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.arq-tabla {
  min-width: 720px;
}
.arq-col-anio {
  width: 8.5rem;
  text-align: center;
}
.arq-celda {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--corp-border);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--corp-text);
}
.arq-celda:hover,
.arq-celda:focus-visible {
  border-color: var(--corp-accent);
  outline: none;
}
.arq-celda-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--corp-gray);
}
.arq-celda-vacia {
  border-style: dashed;
  color: var(--corp-gray);
}
.arq-celda-parcial {
  border-color: var(--corp-warning);
  background: color-mix(in srgb, var(--corp-warning) 8%, transparent);
}
.arq-celda-completa {
  border-color: var(--corp-success);
  color: var(--corp-success);
  background: color-mix(in srgb, var(--corp-success) 8%, transparent);
}
.arq-col-otros {
  width: 12rem;
}
.arq-otros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.arq-chip-anio {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--corp-border);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--corp-text);
}
.arq-chip-anio:hover,
.arq-chip-anio:focus-visible {
  border-color: var(--corp-accent);
  outline: none;
}
.arq-otro-anio {
  width: auto;
  min-width: 7.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}
.arq-sin-lineas {
  /* WHY: con solo 2 columnas de año el aviso no cabe en una línea y
     .table-dark corta el texto (nowrap). */
  white-space: normal !important;
  font-size: 0.85rem;
  color: var(--corp-gray);
}
.arq-anios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.arq-anios .tab-pill.activo {
  font-weight: 600;
}
.arq-copiar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.arq-copiar-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}
.arq-copiar-campos select {
  max-width: 100%;
}
.arq-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.arq-foto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--corp-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--corp-dark);
}
.arq-foto-marco {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--corp-surface);
}
.arq-foto-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arq-foto-vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--corp-gray);
}
.arq-foto-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
}
.arq-foto-acciones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.arq-items {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.arq-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--corp-border);
}
.arq-item-texto {
  flex: 1 1 18rem;
  min-width: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.arq-item-acciones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.arq-item-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1 100%;
  min-width: 0;
}
/* WHY: el texto se muestra en la propuesta tal cual se escribe — sin el
   `text-transform: uppercase` global de los campos (mismo criterio que la
   ventana de envío de propuesta, ADR-063). */
.arq-item-form input[name],
.arq-item-form input[name]::placeholder,
.arq-terminos textarea {
  text-transform: none;
}
.arq-item-form input[name="titulo"] {
  flex: 0 1 12rem;
  min-width: 0;
}
.arq-item-form input[name="detalle"] {
  flex: 1 1 16rem;
  min-width: 0;
}
.arq-item-nuevo {
  margin-top: 0.75rem;
}
.arq-seccion-vacia {
  margin: 0.5rem 0 0;
}

/* WHY (pedido explícito del cliente, oct 2026 — ADR-100): ventana de la
   propuesta con precios de la lista vigente — alerta del tope de validez
   (último día de la lista) y extras de uso interno (no salen en la
   propuesta del cliente). */
.cotizacion-alerta {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
  font-size: 0.85rem;
  line-height: 1.45;
}

.cotizacion-extras {
  margin-top: 0.9rem;
  padding: 0.65rem 0.8rem;
  border: 1px dashed var(--corp-border-strong, rgba(120, 125, 130, 0.35));
  border-radius: 8px;
}

.cotizacion-extras-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.cotizacion-extras ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.prospecto-extras {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--corp-border-strong, rgba(120, 125, 130, 0.35));
  border-radius: 8px;
  background: var(--corp-surface, #fff);
}

.prospecto-extras ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

/* WHY (pedido explícito del cliente, oct 2026 — ADR-100/ADR-101): carga de
   la lista de precios en Dinámica comercial y precio vigente de solo
   lectura, con el rediseño visual de ADR-101 — aviso informativo, zona para
   soltar el archivo, "Estado actual" y tarjetas de vehículo en grilla. */
.dinamica-plantilla {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--corp-accent-hover);
  text-decoration: none;
}

.dinamica-plantilla:hover {
  text-decoration: underline;
}

.dinamica-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.22);
  background: rgba(59, 130, 246, 0.06);
  color: #1e3a8a;
  font-size: 0.85rem;
  line-height: 1.5;
}

.dinamica-aviso svg {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--corp-accent);
}

.dinamica-aviso p {
  margin: 0;
}

.dinamica-aviso-clave {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dinamica-subir-lista {
  display: grid;
  gap: 1rem;
}

/* WHY: el `<input type=file>` cubre toda la zona, transparente — clic o
   arrastrar y soltar en cualquier punto lo maneja el propio navegador, y
   como no está oculto con display:none, `required` puede mostrar su aviso. */
.dinamica-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.75rem 1rem;
  border: 2px dashed rgba(59, 130, 246, 0.35);
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.02);
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dinamica-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dinamica-dropzone:hover,
.dinamica-dropzone.activa {
  border-color: var(--corp-accent);
  background: rgba(59, 130, 246, 0.07);
}

.dinamica-dropzone:focus-within {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
}

.dinamica-dropzone.con-archivo {
  border-style: solid;
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.05);
}

.dinamica-dropzone-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--corp-accent);
}

.dinamica-dropzone-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}

.dinamica-dropzone-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--corp-border-strong);
  background: var(--corp-dark);
  color: var(--corp-accent-hover);
  font-size: 0.875rem;
  font-weight: 600;
}

.dinamica-dropzone-texto {
  font-size: 0.875rem;
  color: var(--corp-gray);
}

.dinamica-dropzone-nombre {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.dinamica-dropzone-ayuda {
  font-size: 0.78rem;
  color: var(--corp-gray-dim);
}

.dinamica-subir-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.dinamica-estado-actual {
  position: relative;
  flex: 1 1 18rem;
  margin: 0;
  padding-left: 1rem;
  font-size: 0.82rem;
  color: var(--corp-gray);
  min-width: 0;
}

.dinamica-estado-actual strong {
  color: var(--corp-text);
}

.dinamica-estado-actual::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--corp-gray-dim);
}

.dinamica-estado-actual.estado-ok::before {
  background: var(--corp-success);
}

.dinamica-estado-actual.estado-alerta::before {
  background: var(--corp-warning);
}

.dinamica-estado-actual.estado-peligro::before {
  background: var(--corp-danger);
}

.dinamica-subir-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.dinamica-ok {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.08);
  font-size: 0.875rem;
}

.dinamica-historial-titulo {
  margin: 1.4rem 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--corp-text);
}

/* WHY (pedido explícito del cliente, oct 2026): con columnas fijas y sin
   salto de línea, un nombre de archivo largo se montaba sobre Vigencia. El
   nombre se corta con "…" (completo al pasar el mouse) y Vigencia/Cargada
   bajan a una segunda línea; en celular la tabla se desplaza en su caja. */
.dinamica-tabla-listas {
  min-width: 860px;
}

.dinamica-tabla-listas .dinamica-col-archivo { width: 28%; }
.dinamica-tabla-listas .dinamica-col-vigencia { width: 19%; }
.dinamica-tabla-listas .dinamica-col-vehiculos { width: 11%; }
.dinamica-tabla-listas .dinamica-col-estado { width: 13%; }
.dinamica-tabla-listas .dinamica-col-cargada { width: 19%; }
.dinamica-tabla-listas .dinamica-col-acciones { width: 10%; }

.dinamica-celda-archivo a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-dark td.dinamica-celda-ajustable {
  white-space: normal;
}

/* WHY (oct 2026): los 4 indicadores de Dinámica comercial no caben en una
   fila a ancho de celular ("REFERENCIAS" se montaba sobre la siguiente);
   ahí pasan a 2×2. Modificador propio: .param-kpis es del sistema de
   diseño compartido (ADR-133) y no se redefine aquí. */
@media (max-width: 560px) {
  .param-kpis.dinamica-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.5rem;
  }
  .param-kpis.dinamica-kpis .param-kpi + .param-kpi {
    border-left: 0;
  }
  .param-kpis.dinamica-kpis .param-kpi:nth-child(even) {
    border-left: 1px solid var(--corp-border-strong);
  }
}

/* Tarjetas de vehículo en grilla (3 columnas en escritorio). */
.dinamica-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 1100px) {
  .dinamica-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .dinamica-lista {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dinamica-modelo {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--corp-border-strong);
  border-radius: 12px;
  background: var(--corp-dark);
}

.dinamica-modelo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.dinamica-modelo-head .param-nombre-texto strong {
  font-size: 1rem;
}

.dinamica-modelo-marca {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corp-gray-dim);
}

.dinamica-modelo-head .param-conteo {
  flex: 0 0 auto;
  font-size: 0.72rem;
}

.dinamica-modelo-cuerpo {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.dinamica-lineas-activas {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.dinamica-etiqueta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corp-gray-dim);
}

.dinamica-linea-nombre-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.dinamica-linea-nombre-fila strong {
  overflow-wrap: anywhere;
}

.dinamica-chips-lineas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dinamica-chip-linea {
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--corp-border-strong);
  background: var(--corp-surface);
  font-size: 0.8rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dinamica-chip-linea.sin-precio {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.08);
}

.dinamica-pendiente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
  color: #92400e;
  font-size: 0.8rem;
}

.dinamica-pendiente-texto {
  position: relative;
  padding-left: 0.95rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dinamica-pendiente-texto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.38rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--corp-warning);
}

.dinamica-pendiente-tag {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b45309;
}

.dinamica-linea {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.05);
}

.dinamica-linea-titulo {
  font-size: 0.8rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.dinamica-vigentes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.dinamica-vigentes li {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.dinamica-vigentes li + li {
  padding-top: 0.6rem;
  border-top: 1px solid rgba(16, 185, 129, 0.25);
}

.dinamica-vigente-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.dinamica-vigente-anio {
  font-weight: 700;
}

.dinamica-vigente-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--corp-gray-dim);
}

.dinamica-vigente-precios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.dinamica-vigente-dato {
  display: grid;
  font-variant-numeric: tabular-nums;
}

.dinamica-vigente-dato > span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--corp-gray-dim);
}

.dinamica-vigente-final {
  font-weight: 700;
  color: #047857;
}

.dinamica-vigente-hasta {
  font-size: 0.75rem;
  color: var(--corp-gray);
}

.dinamica-vigente-extras {
  color: var(--corp-text-muted, #6b7280);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.dinamica-vacio {
  margin: 0;
}

.dinamica-error {
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 0.45rem;
  background: rgba(239, 68, 68, 0.08);
  color: var(--corp-danger);
  font-size: 0.8rem;
}

/* Alta de línea al pie de la tarjeta (empuja al fondo: tarjetas parejas). */
.dinamica-agregar-linea {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--corp-border);
}

.dinamica-agregar-fila {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.dinamica-agregar-fila input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.1rem;
  font-size: 0.82rem;
}

.dinamica-agregar-fila .btn-primary {
  flex: 0 0 auto;
  height: 2.1rem;
  padding: 0 0.85rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.dinamica-modelo-pie {
  margin: auto 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--corp-border);
  font-size: 0.75rem;
  color: var(--corp-gray-dim);
}

.linea-precio-final {
  font-size: 0.75rem;
  color: var(--corp-text-muted, #6b7280);
}

/* WHY: .table-dark fuerza un solo renglón por celda con columnas fijas; en
   la vista previa el vehículo y sus errores deben partirse en varias líneas
   sin montarse sobre las columnas vecinas. */
.lista-preview-tabla {
  min-width: 1120px;
  table-layout: auto;
}

.lista-preview-tabla th,
.lista-preview-tabla td {
  white-space: normal;
  overflow: visible;
  vertical-align: top;
}

.lista-preview-tabla td.mono {
  white-space: nowrap;
}

.lista-preview-tabla td:nth-child(3) {
  min-width: 16rem;
}

.lista-preview-tabla td:last-child {
  min-width: 14rem;
}

.lista-preview-error td {
  background: rgba(239, 68, 68, 0.06);
}

.lista-preview-errores {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  color: var(--corp-danger);
  font-size: 0.8rem;
}

/* WHY (pedido explícito del cliente, oct 2026 — ADR-102): "Editar datos" de
   la caja Información del comprador (Vista Prospecto) — teléfono, correo y
   ciudad en la misma caja, sin salir de la vista. */
.prospecto-editar-datos {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}

/* WHY (pedido explícito del cliente, oct 2026 — ADR-135): edición de la
   Información del comprador con tarjeta del comprador, campos con ícono,
   identificación del titular y canal/atribución asignados. */
.ecomp-subtitulo {
  flex-basis: 100%;
  order: 3;
  font-size: 0.76rem;
  color: var(--corp-gray);
}

.ecomp-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 0.9rem;
}

.ecomp-tarjeta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--corp-border);
  border-radius: 10px;
  background: var(--corp-light);
}

.ecomp-avatar {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.85rem;
}

.ecomp-tarjeta-datos {
  flex: 1;
  min-width: 0;
}

.ecomp-tarjeta-nombre {
  font-weight: 800;
  text-transform: uppercase;
  color: var(--corp-text);
  overflow-wrap: anywhere;
}

.ecomp-tarjeta-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: var(--corp-gray);
}

.ecomp-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--corp-border);
  border-radius: 6px;
  background: var(--corp-surface);
  font-size: 0.72rem;
  color: var(--corp-gray);
  white-space: nowrap;
}

.ecomp-chip-ok {
  border-color: var(--corp-success);
  color: var(--corp-success);
}

.ecomp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.ecomp-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--corp-gray);
}

.ecomp-campo {
  position: relative;
}

.ecomp-icono {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--corp-gray-dim);
  pointer-events: none;
}

.ecomp-campo input,
.ecomp-campo select {
  width: 100%;
  padding-left: 2.1rem;
}

.ecomp-ayuda {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  color: var(--corp-gray);
}

.ecomp-documento {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--corp-border);
  border-radius: 6px;
  background: var(--corp-light);
  font-size: 0.85rem;
  color: var(--corp-text);
}

.ecomp-documento-tipo {
  padding-right: 0.5rem;
  border-right: 1px solid var(--corp-border);
  font-weight: 600;
  color: var(--corp-gray);
}

.ecomp-documento-numero {
  overflow-wrap: anywhere;
}

/* ADR-138: lo editable va sobre blanco, para que se note que se puede
   cambiar; un campo deshabilitado queda gris. */
.ecomp-form input,
.ecomp-form select {
  background: var(--corp-surface);
  border-color: var(--corp-border-strong);
}

.ecomp-form input:disabled,
.ecomp-form select:disabled {
  background: var(--corp-light);
  color: var(--corp-gray);
  cursor: not-allowed;
}

.ecomp-canal-edicion input,
.ecomp-canal-edicion select {
  width: 100%;
}

.ecomp-canal-ancho {
  grid-column: 1 / -1;
}

.ecomp-documento-vacio {
  color: var(--corp-gray-dim);
}

.ecomp-canal {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid var(--corp-border);
  border-radius: 10px;
  background: var(--corp-light);
}

.ecomp-canal-titulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--corp-gray);
}

.ecomp-canal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.ecomp-canal-dato {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--corp-border);
  border-radius: 8px;
  background: var(--corp-surface);
  font-size: 0.82rem;
  color: var(--corp-text);
  overflow-wrap: break-word;
}

.ecomp-canal-dato .ecomp-label {
  margin-bottom: 0.15rem;
}

.ecomp-aviso {
  font-size: 0.75rem;
}

.ecomp-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ecomp-acciones .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 640px) {
  .ecomp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ecomp-tarjeta {
    flex-wrap: wrap;
  }
  .ecomp-tarjeta-datos {
    flex-basis: calc(100% - 3.25rem);
  }
  .ecomp-tarjeta > .ecomp-chip {
    margin-left: 3.25rem;
  }
}

/* WHY (pedido explícito del cliente, oct 2026 — ADR-103): la fecha de
   contacto del seguimiento es automática — se muestra, no se edita. */
.seguimiento-fecha-automatica {
  margin: 0;
  padding: 0.55rem 0;
  font-weight: 600;
}

/* WHY (pedido explícito del cliente, oct 2026 — ADR-107): hora del próximo
   seguimiento como lista desplegable de 5 en 5 minutos, a la manera del
   selector de hora de un calendario de Outlook: campo con flecha, lista con
   scroll centrada en la hora elegida (o las 9:00 AM), la elegida resaltada. */
.selector-hora {
  position: relative;
}

.selector-hora .selector-hora-texto {
  padding-right: 2.25rem;
  cursor: pointer;
}

.selector-hora-flecha {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--corp-gray);
  cursor: pointer;
}

.selector-hora-lista {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 14rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--corp-border-strong);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.selector-hora-lista li {
  padding: 0.55rem 0.875rem;
  font-size: 0.8rem;
  color: var(--corp-text);
  cursor: pointer;
}

.selector-hora-lista li.is-activa {
  background: var(--corp-light);
}

.selector-hora-lista li.is-elegida {
  background: var(--corp-accent-dim);
  font-weight: 600;
}

/* WHY (ADR-108): solo horario laboral (8:00 AM a 5:00 PM) y, si la fecha
   es hoy, sin las horas que ya pasaron — con aviso cuando no queda ninguna
   o lo escrito no se puede usar. */
.selector-hora-lista li.selector-hora-vacio {
  color: var(--corp-gray);
  cursor: default;
}

.selector-hora-aviso {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  color: var(--corp-danger, #b91c1c);
}

.selector-hora-nota {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
}

/* =========================================================================
   Documentos del prospecto (ADR-111): carga + checklist a la izquierda,
   lista con búsqueda/vistas + visor rápido a la derecha. Reusa la zona de
   carga de Dinámica comercial (.dinamica-dropzone, ADR-101).
   ========================================================================= */
.docs-exp { min-width: 0; }

.docs-exp-grid {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.docs-exp-lateral,
.docs-exp-principal {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.docs-exp-card {
  background: var(--corp-dark);
  border: 1px solid var(--corp-border-strong);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  min-width: 0;
}

.docs-exp-separador { margin-top: 1rem; }

.docs-exp-titulo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--corp-text);
  min-width: 0;
}

.docs-exp-titulo svg { color: var(--corp-accent); flex-shrink: 0; }

.docs-exp-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.85rem;
}

.docs-exp-cabecera .docs-exp-titulo { margin-bottom: 0.2rem; }

.docs-exp-descripcion {
  margin: 0;
  font-size: 0.82rem;
  color: var(--corp-gray);
}

.docs-exp-requerido { color: var(--corp-danger); }

.docs-exp-enlace {
  color: var(--corp-accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.docs-exp-enlace:hover { text-decoration: underline; }

.docs-exp-form { display: grid; gap: 0.8rem; }

.docs-exp-campo {
  display: grid;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--corp-gray);
}

.docs-exp-campo select,
.docs-exp-campo input { width: 100%; }

.docs-exp-dropzone { padding: 1.25rem 0.75rem; }

.docs-exp-subir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
}

.docs-exp-form-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.docs-exp-form-linea select { min-width: 12rem; }
.docs-exp-form-linea input[type="file"] { flex: 1; min-width: 12rem; }

/* Checklist de radicación */
.docs-exp-progreso {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--corp-gray);
}

.docs-exp-progreso strong { color: var(--corp-accent); }

.docs-exp-barra {
  height: 6px;
  margin: 0.4rem 0 0.9rem;
  border-radius: 999px;
  background: var(--corp-surface);
  overflow: hidden;
}

.docs-exp-barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--corp-accent);
}

.docs-exp-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.docs-exp-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--corp-border-strong);
  border-radius: 10px;
  min-width: 0;
}

.docs-exp-check.cargado {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.06);
}

.docs-exp-check.pendiente-requerido {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.07);
}

.docs-exp-check-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  border: 1.5px solid var(--corp-border-strong);
  color: var(--corp-gray-dim);
}

.docs-exp-check.cargado .docs-exp-check-icono {
  border-color: var(--corp-success);
  background: var(--corp-success);
  color: #fff;
}

.docs-exp-check.pendiente-requerido .docs-exp-check-icono {
  border-color: var(--corp-warning);
  color: #b45309;
}

.docs-exp-check-texto {
  display: grid;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}

.docs-exp-check-texto strong { font-size: 0.85rem; color: var(--corp-text); }
.docs-exp-check-texto > span { font-size: 0.76rem; color: var(--corp-gray); }
.docs-exp-obligatorio { color: #b45309; font-weight: 600; }

.docs-exp-check-cargar {
  flex-shrink: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--corp-accent);
  background: transparent;
  color: var(--corp-accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.docs-exp-check-cargar:hover { background: var(--corp-accent-dim); }

/* Lista de documentos */
.docs-exp-zip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  text-decoration: none;
}

.docs-exp-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.docs-exp-buscar {
  position: relative;
  flex: 1;
  min-width: 12rem;
}

.docs-exp-buscar svg {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--corp-gray-dim);
  pointer-events: none;
}

/* NOTE: mismo estilo que .tablero-search; el filtro no guarda nada, así que
   no se fuerza a mayúsculas (la regla global gana sin el [type]). */
.docs-exp-buscar input[type="search"] {
  width: 100%;
  padding: 0.625rem 0.875rem 0.625rem 2.1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: var(--corp-text);
  background-color: var(--corp-surface);
  border: 1px solid var(--corp-border-strong);
  font-family: inherit;
  text-transform: none;
}

.docs-exp-buscar input[type="search"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--corp-accent);
  border-color: transparent;
}

.docs-exp-vistas {
  display: inline-flex;
  border: 1px solid var(--corp-border-strong);
  border-radius: 8px;
  overflow: hidden;
}

.docs-exp-vistas button {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--corp-gray);
  cursor: pointer;
}

.docs-exp-vistas button.activa {
  background: var(--corp-accent-dim);
  color: var(--corp-accent);
}

.docs-exp-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.docs-exp-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) 7.5rem auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--corp-border-strong);
  border-radius: 10px;
  min-width: 0;
}

.docs-exp-item.seleccionado {
  border-color: var(--corp-accent);
  background: rgba(59, 130, 246, 0.05);
}

.docs-exp-archivo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.docs-exp-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: var(--corp-surface);
  color: var(--corp-gray);
}

.docs-ext-pdf { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.docs-ext-html { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
.docs-ext-jpg,
.docs-ext-jpeg,
.docs-ext-png { background: rgba(16, 185, 129, 0.12); color: #047857; }
.docs-ext-doc,
.docs-ext-docx { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }

.docs-exp-archivo-texto {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.docs-exp-archivo-texto strong,
.docs-exp-archivo-texto span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-exp-archivo-texto strong { font-size: 0.86rem; color: var(--corp-text); }
.docs-exp-archivo-texto span { font-size: 0.76rem; color: var(--corp-gray); }

.docs-exp-categoria { min-width: 0; }

.docs-exp-categoria .badge {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.docs-exp-fecha {
  display: grid;
  gap: 0.05rem;
  font-size: 0.78rem;
  color: var(--corp-text);
  white-space: nowrap;
}

.docs-exp-hora { color: var(--corp-gray); }

.docs-exp-etiqueta {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--corp-gray-dim);
}

.docs-exp-acciones {
  display: inline-flex;
  gap: 0.25rem;
}

.docs-exp-acciones a,
.docs-exp-acciones button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--corp-gray);
  cursor: pointer;
}

.docs-exp-acciones a:hover,
.docs-exp-acciones button:hover {
  border-color: var(--corp-border-strong);
  color: var(--corp-accent);
}

.docs-exp-acciones a:focus-visible,
.docs-exp-acciones button:focus-visible,
.docs-exp-archivo:focus-visible {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
}

/* Vista de cuadrícula */
.docs-exp-lista.cuadricula {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.docs-exp-lista.cuadricula .docs-exp-item {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
}

.docs-exp-lista.cuadricula .docs-exp-acciones { justify-content: flex-end; }

.docs-exp-vacio {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 1.75rem 1rem;
  border: 1px dashed var(--corp-border-strong);
  border-radius: 10px;
  color: var(--corp-gray-dim);
}

.docs-exp-vacio p { margin: 0; font-size: 0.85rem; }

.docs-exp-sin-resultados,
.docs-exp-aviso {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--corp-gray);
}

.docs-exp-aviso { color: var(--corp-success); font-weight: 600; }

/* Visor rápido */
.docs-exp-visor-nombre {
  font-weight: 600;
  color: var(--corp-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.docs-exp-visor-marco {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28rem;
  border-radius: 10px;
  background: var(--corp-surface);
  overflow: hidden;
}

.docs-exp-visor-marco.sin-vista { height: auto; padding: 1.5rem 0; }

.docs-exp-visor-marco iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.docs-exp-visor-marco img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.docs-exp-visor-vacio {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--corp-gray);
}

.docs-exp-visor-vacio p { margin: 0; }

@media (max-width: 1100px) {
  .docs-exp-grid { grid-template-columns: minmax(0, 1fr); }
  .docs-exp-lateral { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
}

@media (max-width: 760px) {
  .docs-exp-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 0.6rem;
  }
  .docs-exp-archivo { grid-column: 1 / -1; }
  .docs-exp-categoria { grid-column: 1 / -1; }
  .docs-exp-visor-marco { height: 20rem; }
  .docs-exp-zip { width: 100%; justify-content: center; }
}

/* ── Transacciones $ (ADR-116): hoja de cálculo de abonos y pagos de trámites ── */
.transacciones-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.transacciones-totales {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.transacciones-total {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--corp-border-strong);
  border-radius: 0.5rem;
  background: var(--corp-dark);
  min-width: 8.5rem;
}

.transacciones-total .label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--corp-gray);
}

.transacciones-total-saldo strong {
  color: var(--corp-danger);
}

.transacciones-error {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--corp-danger);
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  font-size: 0.85rem;
}

/* WHY: en pantallas angostas la hoja hace scroll horizontal en vez de
   apretar columnas (mismo criterio que .tabla-wrap, ADR-067). */
.hoja-wrap {
  overflow-x: auto;
  border: 1px solid var(--corp-border-strong);
  border-radius: 0.4rem;
}

.hoja {
  display: grid;
  grid-template-columns:
    2.4rem 6.2rem minmax(11rem, 1.1fr) 9.5rem minmax(8.5rem, 1fr)
    minmax(10rem, 1fr) minmax(8.5rem, 0.8fr) minmax(13rem, 1.6fr) 8.5rem;
  min-width: 1180px;
  background: var(--corp-dark);
  font-size: 0.82rem;
}

/* WHY: cada fila es un <form> que no genera caja propia — sus celdas caen
   directo en la grilla. */
.hoja-fila {
  display: contents;
}

.hoja-celda {
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border-right: 1px solid var(--corp-border-strong);
  border-bottom: 1px solid var(--corp-border-strong);
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hoja-gutter {
  background: var(--corp-darker);
  color: var(--corp-gray);
  font-size: 0.7rem;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.hoja-titulo {
  background: var(--corp-light);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--corp-gray);
}

.hoja-num {
  justify-content: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hoja-observaciones {
  white-space: pre-line;
  align-items: flex-start;
  font-size: 0.76rem;
  line-height: 1.35;
}

.hoja-tipo {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.hoja-tipo-abono {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.hoja-tipo-tramite {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}

.hoja-adjunto {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* WHY: las celdas de captura se ven como celdas de Excel con foco — el
   campo ocupa toda la celda, sin borde propio. */
.hoja-editable {
  padding: 0;
  background: #fffdf5;
}

.hoja .hoja-editable select,
.hoja .hoja-editable input[type="number"],
.hoja .hoja-editable input[type="text"] {
  width: 100%;
  height: 100%;
  min-height: 2.1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
  box-shadow: none;
}

.hoja .hoja-editable input.hoja-num {
  text-align: right;
}

/* WHY: la razón de la modificación se guarda tal cual la escribe el Admin. */
.hoja .hoja-editable input.hoja-texto-libre {
  text-transform: none;
}

.hoja .hoja-editable select:focus,
.hoja .hoja-editable input:focus {
  outline: 2px solid var(--corp-accent);
  outline-offset: -2px;
}

.hoja-subir {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 2.1rem;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  color: var(--corp-accent-hover);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hoja-subir input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.hoja-subir:focus-within {
  outline: 2px solid var(--corp-accent);
  outline-offset: -2px;
}

.hoja-auto {
  color: var(--corp-gray);
  font-style: italic;
}

.hoja-fila-nueva .hoja-celda {
  border-bottom: 0;
}

.hoja-fila-nueva .hoja-gutter {
  color: var(--corp-accent-hover);
  font-weight: 700;
}

.hoja-acciones {
  justify-content: center;
  gap: 0.35rem;
}

.hoja-acciones-edicion {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hoja-boton {
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
}

.hoja-vacia {
  grid-column: 1 / -1;
  justify-content: center;
  color: var(--corp-gray);
  border-right: 0;
  border-bottom: 0;
  padding: 1rem;
}

/* WHY (pedido explícito del cliente, oct 2026 — ADR-118): pestaña
   "Preguntas" de la Vista Prospecto — un chat por propuesta entre el cliente
   (desde el link) y el asesor; el del cliente a la izquierda, el del
   personal a la derecha, como en una app de mensajería vista por el asesor. */
.preguntas-prospecto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.preguntas-vacio {
  border: 1px dashed var(--corp-border-strong);
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
}

.preguntas-conversacion {
  border: 1px solid var(--corp-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--corp-dark);
}

.preguntas-cab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--corp-border);
  background: var(--corp-light);
}

.preguntas-cab > div:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.preguntas-titulo {
  font-weight: 700;
}

.preguntas-estado {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.preguntas-motivo {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--corp-border);
  background: rgba(239, 68, 68, 0.06);
}

.preguntas-mensajes {
  list-style: none;
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 26rem;
  overflow-y: auto;
  background: var(--corp-darker);
}

.preguntas-mensaje {
  max-width: min(36rem, 85%);
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  overflow-wrap: anywhere;
}

.preguntas-texto {
  white-space: pre-wrap;
}

.preguntas-mensaje small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  opacity: 0.75;
}

.preguntas-de-cliente {
  align-self: flex-start;
  background: var(--corp-dark);
  border: 1px solid var(--corp-border);
  border-bottom-left-radius: 4px;
}

.preguntas-de-asesor {
  align-self: flex-end;
  background: var(--corp-accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.preguntas-sin-mensajes {
  color: var(--corp-gray);
  text-align: center;
  font-size: 0.85rem;
  padding: 0.75rem;
}

.preguntas-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.25rem;
  border-top: 1px solid var(--corp-border);
}

.preguntas-form textarea {
  flex: 1 1 16rem;
  min-height: 2.6rem;
  resize: vertical;
  text-transform: none;
}

.preguntas-form .btn-primary {
  align-self: flex-end;
}

.preguntas-error {
  flex-basis: 100%;
  color: #b91c1c;
  font-size: 0.82rem;
}

.preguntas-ayuda {
  padding: 0.25rem 1rem 0.8rem;
  margin: 0;
}

.preguntas-conversacion-cerrada .preguntas-ayuda {
  padding-top: 0.6rem;
  border-top: 1px solid var(--corp-border);
}

/* ADR-118: preguntas del cliente sin responder en la pestaña. */
.prospecto-tab-pendientes {
  background: var(--corp-warning, #f59e0b);
  color: #fff;
}

/* WHY (ADR-118): con la 4.ª pestaña ("Preguntas") en celular las etiquetas
   se achican para que las 4 queden a la vista. */
@media (max-width: 560px) {
  .prospecto-tab-btn { font-size: 0.74rem; padding: 0.7rem 0.15rem; }
}

/* ADR-125: alerta emergente "el prospecto abrió su propuesta" — arriba a la
   derecha, 5 s, por encima del encabezado fijo. */
.alerta-emergente-pila {
  position: fixed;
  top: 0.75rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(23rem, calc(100vw - 2rem));
  pointer-events: none;
}

.alerta-emergente {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 2.2rem 0.95rem 0.85rem;
  border-radius: 10px;
  border-left: 4px solid #0891b2;
  background: #fff;
  color: var(--corp-text, #0f172a);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
  text-decoration: none;
  overflow: hidden;
  pointer-events: auto;
  animation: alerta-emergente-entra 0.25s ease-out;
}

.alerta-emergente:hover { background: #f0f9ff; }

.alerta-emergente:focus-visible {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
}

.alerta-emergente-icono {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0891b2;
  color: #fff;
  font-size: 0.9rem;
}

.alerta-emergente-texto {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--corp-gray);
  overflow-wrap: anywhere;
}

.alerta-emergente-texto strong {
  font-size: 0.9rem;
  color: var(--corp-text, #0f172a);
}

.alerta-emergente-cerrar {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  border: 0;
  background: transparent;
  color: var(--corp-gray);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
}

.alerta-emergente-tiempo {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: #0891b2;
  transform-origin: left;
  animation-name: alerta-emergente-tiempo;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.alerta-emergente-saliendo {
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity 0.25s, transform 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  .alerta-emergente, .alerta-emergente-tiempo { animation: none; }
}

/* WHY: 2 columnas independientes (no filas de la grilla) para que cada
   tarjeta quede pegada a la de arriba aunque tengan altos distintos, como en
   la referencia. */
.apar-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.apar-card {
  background: var(--corp-dark);
  border: 1px solid var(--corp-border-strong);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.apar-cab {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.apar-icono {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--corp-accent-soft, #e0ecff);
  color: var(--corp-accent);
}

.apar-titulo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--corp-text);
  line-height: 1.3;
}

.apar-chip {
  flex: 0 0 auto;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--corp-surface);
  border: 1px solid var(--corp-border);
  color: var(--corp-gray);
  white-space: nowrap;
}

.apar-chip-ok {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #15803d;
}

.apar-chip-off {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.apar-desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--corp-gray);
}

.apar-logo-marco {
  border-radius: 10px;
  background: var(--corp-light);
  border: 1px solid var(--corp-border);
  padding: 1rem;
}

.apar-logo-lienzo {
  height: 8.5rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--corp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.75rem;
}

.apar-logo-lienzo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.apar-pie-caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: var(--corp-light);
  border: 1px solid var(--corp-border);
}

.apar-pie-titulo {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--corp-text);
}

.apar-pie-texto {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  color: var(--corp-gray);
}

.apar-subir {
  margin: 0;
}

.apar-btn-sec {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--corp-border-strong);
  background: #ffffff;
  color: var(--corp-accent);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.apar-btn-sec:hover {
  background: var(--corp-light);
}

.apar-btn-sec:focus-within {
  outline: 2px solid var(--corp-accent);
  outline-offset: 2px;
}

.apar-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.apar-textarea {
  margin-top: 0;
  min-height: 11rem;
}

.apar-acciones {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.apar-previa {
  order: -1;
}

.apar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.apar-opcion {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--corp-border);
  background: var(--corp-light);
  cursor: pointer;
}

.apar-opcion input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: var(--corp-accent);
}

.apar-opcion span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.88rem;
  color: var(--corp-text);
}

.apar-opcion small {
  font-size: 0.78rem;
  color: var(--corp-gray);
}

.apar-opcion-inactiva {
  opacity: 0.55;
}

.apar-recibo {
  margin-top: 0;
}

.apar-recibo label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* WHY: misma especificidad que la regla global que pasa los campos a
   mayúsculas (`input:not([type=email]):not([type=password])`) y declarada
   después — sin eso, lo escrito se veía en mayúsculas aunque se guarda tal
   cual (ADR-127). */
.apar-recibo input.param-campo-libre,
.apar-recibo textarea.param-campo-libre,
.apar-recibo input.param-campo-libre::placeholder,
.apar-recibo textarea.param-campo-libre::placeholder {
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
}

.apar-solo-lectura {
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: var(--corp-light);
  border: 1px solid var(--corp-border);
  font-size: 0.85rem;
  color: var(--corp-text);
}

.apar-card-oscura {
  background: var(--corp-chrome, #0f172a);
  border-color: var(--corp-chrome, #0f172a);
  color: #ffffff;
}

.apar-card-oscura .apar-titulo {
  color: #ffffff;
  font-size: 1.1rem;
}

.apar-card-oscura .apar-desc {
  color: rgba(255, 255, 255, 0.72);
}

.apar-chips-oscuros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.apar-chip-claro {
  background: var(--corp-accent);
  border-color: var(--corp-accent);
  color: #ffffff;
}

.apar-chip-texto {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
}

.apar-btn-claro {
  align-self: flex-start;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  background: #ffffff;
  color: var(--corp-chrome, #0f172a);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.apar-btn-claro:hover {
  background: #e2e8f0;
}

.apar-btn-claro:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .apar-cab {
    flex-wrap: wrap;
  }

  .apar-acciones .apar-btn,
  .apar-acciones .apar-btn-sec {
    width: 100%;
    justify-content: center;
  }
}


/* ── Perfil DEMO (ADR-130) ─────────────────────────────────────────── */
.demo-aviso {
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  padding: 0.3rem 1rem;
}

.demo-accesos {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto 1rem;
  padding: 0.9rem 1rem;
  border: 1px dashed #fdba74;
  border-radius: 12px;
  background: #fff7ed;
}

.demo-accesos-titulo {
  margin: 0;
  font-weight: 700;
  color: #9a3412;
  font-size: 0.85rem;
}

.demo-accesos-nota {
  margin: 0.15rem 0 0.6rem;
  font-size: 0.78rem;
  color: #7c2d12;
}

.demo-accesos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.demo-acceso-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  text-transform: none;
}

.demo-acceso-btn strong {
  font-size: 0.85rem;
  color: #1b1f24;
}

.demo-acceso-btn span {
  font-size: 0.75rem;
  color: #64748b;
}

.demo-acceso-btn:hover,
.demo-acceso-btn:focus-visible {
  border-color: #ea580c;
  outline: none;
}

/* Maestro de equipamiento (oct 2026): formulario de alta/edición. */
.maestro-form { display: grid; gap: 0.7rem; }
.maestro-form label { display: grid; gap: 0.25rem; font-size: 0.85rem; }
.maestro-grilla { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* Maestro de equipamiento — rediseño (oct 2026). */
.maestro-page .maestro-card { margin-bottom: 1.25rem; }
.maestro-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; margin-bottom: 1.25rem; }
.maestro-kpi { display: grid; gap: 0.2rem; padding: 0.9rem 1.1rem; background: #fff; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.75rem; }
.maestro-kpi-etiqueta { font-size: 0.78rem; color: var(--corp-muted, #64748b); }
.maestro-kpi-valor { font-size: 1.45rem; font-weight: 700; }
.maestro-kpi-valor-chico { font-size: 1.05rem; }
.maestro-kpi-nota { font-size: 0.74rem; color: var(--corp-muted, #64748b); }
.maestro-estructura { margin: 0.8rem 0; padding: 0.7rem 0.9rem; background: var(--corp-surface-alt, #f8fafc); border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.5rem; font-size: 0.8rem; }
.maestro-estructura code { display: block; margin: 0.3rem 0; word-break: break-word; text-transform: none; }
.maestro-estructura p { margin: 0; color: var(--corp-muted, #64748b); }
.maestro-acciones { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem; }
.maestro-paso { border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.75rem; padding: 0.9rem 1rem 1rem; margin: 0; }
.maestro-paso legend { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0 0.4rem; display: flex; align-items: center; gap: 0.45rem; }
.maestro-paso-num { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--corp-primary, #2563eb); color: #fff; font-size: 0.72rem; }
.maestro-grilla-3 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.maestro-grilla-6 { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.maestro-bloque { display: grid; gap: 0.35rem; padding: 0.75rem 0.9rem; margin-top: 0.75rem; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.6rem; }
.maestro-bloque-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.maestro-bloque-cabecera label { font-weight: 600; font-size: 0.85rem; }
.maestro-bloque-ayuda { font-size: 0.72rem; color: var(--corp-muted, #64748b); background: var(--corp-surface-alt, #f1f5f9); padding: 0.1rem 0.5rem; border-radius: 999px; }
.maestro-bloque-conteo { font-size: 0.74rem; color: var(--corp-muted, #64748b); }
.maestro-linea { font-size: 0.8rem; color: var(--corp-primary, #2563eb); }
.maestro-ficha div { font-size: 0.8rem; line-height: 1.5; }
.maestro-resumen { font-size: 0.8rem; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maestro-pastillas { display: flex; gap: 0.3rem; margin-top: 0.3rem; flex-wrap: wrap; }
.maestro-tabla { table-layout: fixed; min-width: 960px; }
.maestro-tabla th:nth-child(1) { width: 20%; }
.maestro-tabla th:nth-child(2) { width: 28%; }
.maestro-tabla th:nth-child(3) { width: 24%; }
.maestro-tabla th:nth-child(4) { width: 18%; }
.maestro-tabla th:nth-child(5) { width: 10%; }
.maestro-tabla td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; overflow: hidden; }
.maestro-tabla .param-acciones { white-space: nowrap; }
.maestro-tag { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 0.3rem; border: 1px solid transparent; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maestro-tag-azul { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.maestro-tag-verde { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.maestro-tag-gris { background: #f1f5f9; color: #475569; font-weight: 500; }
.maestro-garantia-titulo { display: flex; gap: 0.35rem; align-items: flex-start; font-size: 0.8rem; font-weight: 600; }
.maestro-garantia-titulo svg { color: #059669; flex: none; margin-top: 0.1rem; }
.maestro-marca { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.arq-foto-pie-form { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-basis: 100%; }
.arq-foto-pie-form input { flex: 1; min-width: 0; font-size: 0.8rem; }

/* Revisar maestro de equipamiento (oct 2026): una tarjeta vertical por fila del CSV. */
.mprev-encabezado { align-items: flex-start; }
.mprev-archivo { font-size: 0.78rem; font-weight: 600; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: 0.15rem 0.7rem; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mprev-kpis { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.mprev-kpi { display: grid; gap: 0.1rem; min-width: 7rem; padding: 0.6rem 0.9rem; background: #fff; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.7rem; }
.mprev-kpi-etiqueta { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--corp-muted, #64748b); }
.mprev-kpi-valor { font-size: 1.35rem; font-weight: 700; }
.mprev-kpi-texto { font-size: 0.85rem; font-weight: 600; }
.mprev-rojo { color: var(--corp-danger, #dc2626); }
.mprev-verde { color: #047857; }
.mprev-estado-ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.mprev-estado-error { background: #fef2f2; border-color: #fecaca; color: var(--corp-danger, #dc2626); }
.mprev-fila { background: #fff; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.9rem; margin-bottom: 1rem; overflow: hidden; }
.mprev-fila-error { border-color: #fecaca; }
.mprev-fila-cabecera { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--corp-border, #e2e8f0); }
.mprev-fila-num { font-size: 0.75rem; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.4rem; padding: 0.1rem 0.5rem; color: var(--corp-muted, #64748b); }
.mprev-fila-vehiculo { font-size: 1.05rem; }
.mprev-errores { margin: 0.7rem 1.1rem 0; padding: 0.6rem 0.9rem 0.6rem 1.8rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.5rem; color: var(--corp-danger, #b91c1c); font-size: 0.85rem; }
.mprev-bloque { padding: 0.9rem 1.1rem; }
.mprev-bloque-cabecera { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.mprev-subtitulo { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--corp-muted, #64748b); }
.mprev-nota { font-size: 0.75rem; color: var(--corp-muted, #64748b); margin: 0; }
.mprev-tecnico { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 0.6rem; }
.mprev-dato { display: grid; gap: 0.25rem; align-content: start; padding: 0.65rem 0.8rem; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.6rem; background: #fcfdff; }
.mprev-dato strong { font-size: 0.88rem; overflow-wrap: anywhere; }
.mprev-dato-fila { grid-column: 1 / -1; }
.mprev-dato-etiqueta { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--corp-muted, #64748b); }
.mprev-vacio { font-size: 0.82rem; color: #94a3b8; }
.mprev-slogan { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.6rem; font-size: 0.88rem; }
.mprev-listas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; padding: 0 1.1rem 1.1rem; }
.mprev-lista { border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.7rem; padding: 0.7rem 0.8rem; display: grid; gap: 0.5rem; align-content: start; }
.mprev-lista header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mprev-lista h3 { font-size: 0.88rem; margin: 0; }
.mprev-estado-ok-texto { font-size: 0.72rem; color: #047857; }
.mprev-estado-alerta-texto { font-size: 0.72rem; color: #b45309; }
.mprev-sin-datos { font-size: 0.8rem; text-align: center; color: #92400e; background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 0.5rem; padding: 0.8rem; }
.mprev-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mprev-chips span { font-size: 0.78rem; background: #f1f5f9; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.4rem; padding: 0.2rem 0.55rem; overflow-wrap: anywhere; }
.mprev-items { margin: 0; padding-left: 1.1rem; font-size: 0.84rem; }
.mprev-items li { margin: 0.15rem 0; overflow-wrap: anywhere; }
.mprev-items-verde { list-style: none; padding: 0.6rem 0.8rem; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 0.5rem; }
.mprev-items-verde li::before { content: "✓ "; color: #047857; font-weight: 700; }
.mprev-pie { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.9rem 1.1rem; background: #fff; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.9rem; }
.mprev-pie-acciones { display: flex; gap: 0.6rem; margin-left: auto; }
@media (max-width: 900px) {
  .mprev-tecnico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mprev-dato-ancho { grid-column: 1 / -1; }
  .mprev-listas { grid-template-columns: minmax(0, 1fr); }
}

/* Lista de precios maestra (oct 2026): tabla interactiva de solo lectura. */
.lp-encabezado { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1rem; }
.lp-encabezado-acciones { display: flex; gap: 0.5rem; }
.lp-barra { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.6rem; }
.lp-buscar { min-width: 18rem; flex: 0 1 26rem; }
.lp-buscar input { font-size: 0.75rem; }
.lp-barra-der { display: flex; gap: 0.5rem; align-items: center; }
.lp-segmento { display: inline-flex; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.5rem; overflow: hidden; background: #fff; }
.lp-segmento button { border: 0; background: transparent; padding: 0.4rem 0.8rem; font-size: 0.78rem; cursor: pointer; }
.lp-segmento button.activo { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.lp-columnas { position: relative; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.75rem; font-size: 0.75rem; }
.lp-chips-titulo { color: #64748b; }
.lp-chip { display: inline-flex; gap: 0.3rem; align-items: center; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 0.4rem; padding: 0.15rem 0.5rem; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-chip-fijo { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.lp-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0; }
.lp-limpiar { border: 0; background: transparent; color: #475569; cursor: pointer; font-size: 0.75rem; text-decoration: underline; }
.lp-tabla-caja { background: #fff; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.75rem; overflow: hidden; }
.lp-scroll { overflow: auto; max-height: 70vh; }
.lp-tabla { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 0.8rem; }
.lp-tabla th { position: sticky; top: 0; z-index: 2; background: #f1f5f9; color: #334155; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; padding: 0.6rem 0.9rem; border-bottom: 2px solid #cbd5e1; white-space: nowrap; }
.lp-tabla td { padding: 0.7rem 0.9rem; border-bottom: 1px solid #eef2f6; white-space: nowrap; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; }
.lp-compacta .lp-tabla td { padding: 0.3rem 0.9rem; }
.lp-compacta .lp-tabla th { padding: 0.4rem 0.9rem; }
.lp-tabla tbody tr:hover td { background: #f8fafc; }
.lp-th-fila { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lp-th-btn { border: 0; background: transparent; color: #94a3b8; cursor: pointer; padding: 0 0.2rem; border-radius: 0.25rem; }
.lp-th-btn.activo, .lp-th-btn:hover { color: #1d4ed8; background: #dbeafe; }
.lp-th-filtrada { box-shadow: inset 0 -2px 0 #2563eb; }
.lp-th-dinero, .lp-th-accion, .lp-th-final, .lp-td-dinero, .lp-td-accion, .lp-td-final { text-align: right; font-variant-numeric: tabular-nums; }
.lp-th-accion { background: #fefce8; color: #854d0e; }
.lp-td-accion { background: #fffdf2; color: #be123c; }
.lp-th-final { background: #eff6ff; color: #1d4ed8; }
.lp-td-final { background: #f8fbff; color: #1d4ed8; font-weight: 700; }
.lp-td-dinero, .lp-td-final, .lp-td-accion { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lp-marca { display: inline-block; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 0.3rem; padding: 0.1rem 0.5rem; font-weight: 700; font-size: 0.72rem; }
.lp-vacio { text-align: center; color: #64748b; padding: 2rem; }
.lp-pie { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0.6rem 1rem; border-top: 1px solid #eef2f6; font-size: 0.78rem; color: #475569; }
.lp-por-pagina select { margin-left: 0.3rem; }
.lp-paginas { display: flex; gap: 0.5rem; align-items: center; }
.lp-paginas button { border: 1px solid #e2e8f0; background: #fff; border-radius: 0.4rem; padding: 0.25rem 0.6rem; cursor: pointer; }
.lp-paginas button:disabled { opacity: 0.45; cursor: default; }
.lp-menu { position: absolute; z-index: 30; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.6rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15); padding: 0.4rem; min-width: 14rem; font-size: 0.8rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.lp-menu-cols { right: 0; top: calc(100% + 0.3rem); max-height: 20rem; overflow: auto; }
.lp-menu-filtro { position: fixed; width: 15rem; }
.lp-menu hr { border: 0; border-top: 1px solid #eef2f6; margin: 0.3rem 0; }
.lp-menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 0.4rem 0.5rem; border-radius: 0.3rem; cursor: pointer; }
.lp-menu-item:hover { background: #f1f5f9; }
.lp-menu-buscar { width: 100%; margin-bottom: 0.3rem; text-transform: none; }
.lp-menu-lista { max-height: 12rem; overflow: auto; }
.lp-check { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.3rem; cursor: pointer; text-transform: none; }
.lp-check small { margin-left: auto; color: #94a3b8; font-family: ui-monospace, monospace; }
.lp-menu-pie { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid #eef2f6; }
.lp-menu-borrar { border: 0; background: transparent; color: #475569; cursor: pointer; }

/* Aviso largo bajo el campo de nombre (Líneas): que se lea completo, en varios renglones. */
.param-nombre-sub.param-nombre-sub-aviso {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Compradores del pedido (Vista Prospecto): dos tarjetas lado a lado. */
.comp-panel { background: var(--corp-surface, #fff); border: 1px solid var(--corp-border, #e2e8f0); border-radius: 12px; padding: 1.25rem; margin: 1rem 0; }
.comp-header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--corp-border, #e2e8f0); }
.comp-titulo { font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.comp-subtitulo { margin: .25rem 0 0; font-size: .8rem; color: var(--corp-text-muted, #64748b); max-width: 44rem; }
.comp-header-chips { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }
.comp-chip { font-size: .72rem; padding: .3rem .65rem; border-radius: 999px; background: #f1f5f9; border: 1px solid #e2e8f0; }
.comp-chip-ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; font-weight: 600; }
.comp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; align-items: start; }
.comp-card { border: 1px solid var(--corp-border, #e2e8f0); border-radius: 12px; background: #fff; overflow: hidden; }
.comp-card-head { display: flex; gap: .75rem; align-items: center; padding: .9rem 1.1rem; border-bottom: 1px solid var(--corp-border, #e2e8f0); }
.comp-num { width: 2rem; height: 2rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex: none; }
.comp-num-1 { background: #2563eb; }
.comp-num-2 { background: #334155; }
.comp-card-titulo { font-size: .85rem; font-weight: 700; text-transform: uppercase; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.comp-card-sub { font-size: .72rem; color: var(--corp-text-muted, #64748b); }
.comp-tag { font-size: .6rem; padding: .1rem .45rem; border-radius: 4px; background: #f1f5f9; border: 1px solid #cbd5e1; letter-spacing: .04em; }
.comp-tag-azul { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }
.comp-form { padding: 1rem 1.1rem; }
.comp-contacto { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .8rem; border: 1px solid #dbeafe; background: #eff6ff; border-radius: 8px; font-size: .8rem; margin-bottom: 1rem; cursor: pointer; }
.comp-contacto input { width: auto; margin-top: .15rem; }
.comp-contacto small { display: block; color: var(--corp-text-muted, #64748b); font-size: .7rem; }
.comp-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.comp-ancho { grid-column: 1 / -1; }
.comp-label { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--corp-text-muted, #64748b); margin-bottom: .25rem; }
.comp-card-pie { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--corp-border, #e2e8f0); }
.comp-estado { font-size: .72rem; font-weight: 600; }
.comp-estado-ok { color: #059669; }
.comp-estado-pend { color: #b45309; }
.comp-pie-acciones { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.comp-card-vacia { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2rem 1rem; text-align: center; border-style: dashed; color: var(--corp-text-muted, #64748b); font-size: .8rem; }
.comp-solo-lectura { padding: 1rem 1.1rem; font-size: .8rem; }
.comp-barra { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--corp-border, #e2e8f0); }
.comp-barra-texto { font-size: .75rem; color: var(--corp-text-muted, #64748b); }
@media (max-width: 900px) { .comp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .comp-campos { grid-template-columns: minmax(0, 1fr); } }

/* Oct 2026: niveles Insistente y Máximo de la alerta de apertura — la ventana
   se queda con "Abrir prospecto"/"Entendido"; en Máximo va centrada sobre un
   fondo oscurecido. */
.alerta-emergente-fija { border-left-color: #dc2626; padding-bottom: 0.85rem; }
.alerta-emergente-fija .alerta-emergente-icono { background: #dc2626; animation: alerta-emergente-pulso 1s ease-in-out infinite; }
.alerta-emergente-acciones { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; }
.alerta-emergente-acciones .btn-primary,
.alerta-emergente-acciones .btn-secondary { font-size: 0.78rem; padding: 0.35rem 0.75rem; }
.alerta-emergente-permiso { border-left-color: var(--corp-accent); }
.alerta-emergente-fondo {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15, 23, 42, 0.55);
}
.alerta-emergente-pila.alerta-emergente-centro {
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(28rem, calc(100vw - 2rem));
}
.alerta-emergente-centro .alerta-emergente-fija { padding: 1.1rem 2.4rem 1.1rem 1rem; }
.alerta-emergente-centro .alerta-emergente-texto strong { font-size: 1.05rem; }
@keyframes alerta-emergente-pulso {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .alerta-emergente-fija .alerta-emergente-icono { animation: none; }
}
.apar-niveles { border: 0; padding: 0; margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.apar-niveles-titulo { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--corp-gray); margin-bottom: 0.25rem; }

/* Oct 2026: "Estados de gestión" en dos filas — estado del prospecto y
   agenda del día (más compacta, sin % TCP). */
.gestion-fila-titulo { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--corp-gray); margin: 0 0 0.6rem; }
.gestion-tcp-legend + .gestion-fila-titulo { margin-top: 1.1rem; }
.gestion-agenda-row .embudo-stage-card { min-height: 6.5rem; }

/* Oct 2026: tarjeta de prospecto de "Estados de gestión" con el orden del
   cliente — cabeza (nombre + ciudad) y datos en filas etiqueta / valor. */
.gestion-prospecto-cabeza { display: flex; flex-direction: column; gap: 0.1rem; }
.gestion-prospecto-ciudad { font-size: 0.74rem; }
.gestion-prospecto-datos { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.35rem 0 0; font-size: 0.76rem; }
.gestion-prospecto-datos > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.4rem; }
.gestion-prospecto-datos dt { color: var(--corp-gray); font-weight: 600; }
.gestion-prospecto-datos dd { margin: 0; overflow-wrap: anywhere; }

/* Oct 2026: tarjeta de prospecto de "Estados de gestión" con el diseño de
   la referencia del cliente (.gpc = gestión prospecto card). */
.gpc { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.9rem 0.95rem 0; background: #fff; }
.gpc-cabeza { display: flex; align-items: center; gap: 0.65rem; }
.gpc-avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--corp-accent, #2563eb); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
.gpc-titulo { display: flex; flex-direction: column; min-width: 0; }
.gpc-nombre { font-weight: 800; font-size: 0.95rem; color: var(--corp-text, #0f172a); text-decoration: none; }
.gpc-nombre:hover { color: var(--corp-accent); }
.gpc-ciudad { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.74rem; color: var(--corp-gray); }
.gpc-estado { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.gpc-relativo { margin-left: auto; font-size: 0.72rem; color: var(--corp-gray); }
.gpc-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600; border: 1px solid transparent; max-width: 100%; }
.gpc-chip-estado { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.gpc-chip-interes { background: #f1f5f9; border-color: #e2e8f0; }
.gpc-agenda { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--corp-accent); }
.gpc-contacto { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
.gpc-contacto-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gpc-etiqueta { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--corp-gray); }
.gpc-acciones { display: inline-flex; gap: 0.3rem; }
.gpc-accion { width: 1.6rem; height: 1.6rem; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.gpc-accion-tel, .gpc-accion-wa { background: #ecfdf5; color: #059669; }
.gpc-accion-mail { background: #eff6ff; color: #2563eb; }
.gpc-accion:hover { filter: brightness(0.95); }
.gpc-contacto-dato { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--corp-text, #0f172a); min-width: 0; }
.gpc-contacto-dato > span { min-width: 0; overflow-wrap: anywhere; }
.gpc-contacto-dato svg { flex: none; color: var(--corp-gray); }
.gpc-copiar { margin-left: auto; border: 0; background: transparent; color: var(--corp-gray); cursor: pointer; padding: 0.1rem; }
.gpc-filas { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.8rem; }
.gpc-filas > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; gap: 0.4rem; }
.gpc-filas dt { color: var(--corp-gray); }
.gpc-filas dd { margin: 0; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; min-width: 0; }
.gpc-chips { gap: 0.25rem; }
.gpc-chip-canal { background: #f1f5f9; color: #475569; text-transform: uppercase; font-size: 0.64rem; }
.gpc-chip-marca { background: #111827; color: #fff; font-size: 0.64rem; }
.gpc-precio { color: var(--corp-accent, #2563eb); font-weight: 700; }
.gpc-mini-avatar { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #f1f5f9; color: #475569; font-size: 0.6rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.gpc-chip-alerta { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.gpc-chip-seguimiento { background: #f1f5f9; color: #334155; }
.gpc-hora { font-size: 0.72rem; color: var(--corp-gray); }
.gpc-pie { margin: 0 -0.95rem; padding: 0.6rem 0.95rem; border-top: 1px solid var(--corp-border); background: #f8fafc; border-radius: 0 0 10px 10px; }
.gpc-ver { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--corp-text, #0f172a); text-decoration: none; }
.gpc-ver:hover { color: var(--corp-accent); }

/* Oct 2026: ventana flotante de "Estados de gestión" más grande (casi
   toda la pantalla), con las tarjetas de prospecto de ancho fijo (~17.5rem,
   el de antes): la ventana muestra más tarjetas por fila en vez de
   agrandarlas. En celular la tarjeta ocupa el ancho disponible. */
.embudo-flotante.gestion-flotante-centro {
  width: min(84rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
}
.gestion-flotante-centro .gestion-prospectos-grid {
  grid-template-columns: repeat(auto-fill, min(17.5rem, 100%));
  justify-content: center;
  gap: 1rem;
}
/* Oct 2026: más altura — la lista de tarjetas usa el alto disponible de la
   pantalla (antes tope de 22rem) y la ventana arranca alta aunque haya
   pocas tarjetas. */
.gestion-flotante-centro .lista-tarjetas { max-height: calc(100vh - 8rem); }
.embudo-flotante.gestion-flotante-centro { min-height: min(40rem, calc(100vh - 3rem)); }

/* Oct 2026: logos de marcas de feria en el Arquitecto de propuestas. */
.arq-logos-feria-titulo { font-size: 0.8rem; font-weight: 700; color: var(--corp-gray); margin: 1.1rem 0 0.6rem; }

/* ADR-138: número de negocio (CCV-000311) en negrilla y un poco más grande
   que el texto que lo rodea (tarjetas, listado y Vista Prospecto). */
.numero-negocio {
  display: inline-block;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--corp-text);
}

.gpc-titulo .numero-negocio,
.tabla-prospectos .numero-negocio {
  display: block;
  font-size: 0.86rem;
}

/* ADR-138: selector Lista / Tarjetas del listado de Prospectos. */
.prospectos-vista-toggle {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  padding: 0.2rem;
  border: 1px solid var(--corp-border);
  border-radius: 8px;
  background: var(--corp-surface);
}

.prospectos-vista-toggle .btn-ghost {
  padding: 0.35rem 0.85rem;
}

.prospectos-vista-toggle .prospectos-vista-activa {
  background: var(--corp-accent);
  color: #fff;
}

/* ADR-138: colores disponibles por marca (Parametrización → Marcas). */
/* WHY: con el logo y "Cambiar" en una sola fila, la celda del logotipo se
   salía sobre la de colores (table-layout fixed); se apilan y la tabla
   pide más ancho antes de desplazarse en su caja. */
.table-dark.param-tabla-marcas {
  min-width: 1080px;
}

.table-dark.param-tabla-marcas thead th,
.table-dark.param-tabla-marcas tbody td {
  padding-left: 1rem;
  padding-right: 1rem;
}

.param-tabla-marcas td {
  white-space: normal;
  vertical-align: top;
}

.param-tabla-marcas .param-archivo {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.marca-colores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

.marca-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--corp-border);
  border-radius: 999px;
  background: var(--corp-surface);
  font-size: 0.72rem;
}

.marca-color-quitar {
  border: 0;
  background: none;
  color: var(--corp-gray);
  cursor: pointer;
  line-height: 1;
}

.marca-color-form {
  display: flex;
  gap: 0.3rem;
}

.marca-color-form input {
  min-width: 7rem;
  flex: 1;
  font-size: 0.75rem;
}

/* Error al guardar compradores: ventana emergente en vez de la respuesta
   JSON del servidor. */
.comp-error {
  max-width: 26rem;
}

.comp-error-texto {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--corp-text);
}

.comp-error-acciones {
  display: flex;
  justify-content: flex-end;
}

/* Oct 2026: vista "Tarjetas" de Prospectos como tablero — una columna por
   estado (referencia de Stitch), con desplazamiento horizontal propio. */
.gpc-pie { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gpc-gestionar {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.6rem; border: 1px solid var(--corp-border-strong); border-radius: 6px;
  background: #fff; font-size: 0.78rem; font-weight: 500; color: var(--corp-text); text-decoration: none;
}
.gpc-gestionar:hover { border-color: var(--corp-accent); color: var(--corp-accent); }

.ptab-barra { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.ptab-busqueda { flex: 1 1 18rem; max-width: 26rem; margin: 0; }
.ptab-refrescar { display: inline-flex; align-items: center; gap: 0.35rem; }

/* WHY (pedido del cliente, oct 2026): la barra de desplazamiento va
   arriba del tablero. El contenedor se voltea (rotateX) y cada columna se
   vuelve a voltear; por eso las columnas se alinean al final (que queda
   arriba a la vista). */
.ptab-tablero {
  display: flex; gap: 1rem; align-items: flex-end;
  overflow-x: auto; padding-bottom: 0.75rem;
  transform: rotateX(180deg);
}
.ptab-tablero > .ptab-columna { transform: rotateX(180deg); }
.ptab-columna {
  flex: 0 0 19.5rem; display: flex; flex-direction: column;
  border: 1px solid var(--corp-border); border-radius: 10px; background: #f8fafc;
  --ptab-color: var(--corp-gray);
}
.ptab-col-nuevo, .ptab-col-contactado { --ptab-color: var(--corp-accent); }
.ptab-col-cita_agendada { --ptab-color: var(--corp-warning); }
.ptab-col-cerrado_ganado { --ptab-color: var(--corp-success); }
.ptab-col-cerrado_perdido { --ptab-color: var(--corp-danger); }
.ptab-col-cabeza {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 0.95rem;
  border-bottom: 1px solid var(--corp-border); background: #fff; border-radius: 10px 10px 0 0;
}
.ptab-punto { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ptab-color); flex: none; }
.ptab-col-titulo { font-weight: 600; font-size: 0.95rem; }
.ptab-col-conteo {
  padding: 0 0.4rem; border: 1px solid var(--ptab-color); border-radius: 4px;
  font-size: 0.75rem; font-weight: 600; color: var(--ptab-color);
}
.ptab-col-cuerpo { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; min-height: 14rem; }
.ptab-col-cuerpo .gestion-prospecto-card { width: 100%; margin: 0; }
.ptab-mas { align-self: center; }
.ptab-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  margin: auto 0; padding: 2rem 0.75rem; text-align: center; font-size: 0.8rem; color: var(--corp-gray);
}
.ptab-vacio strong { color: var(--corp-text); font-size: 0.88rem; }
.ptab-vacio-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border: 1px dashed var(--corp-border-strong); border-radius: 8px;
}
@media (max-width: 560px) {
  .ptab-columna { flex-basis: calc(100vw - 3rem); }
}

/* ── Tablero de Control (ADR-141): vista informativa del día, sobre la
   referencia de Stitch del cliente. Cajas y embudo → Prospectos; agenda →
   Calendario. ── */
.tdc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.tdc svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tdc-barra { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tdc-marcas { min-width: 0; flex: 1 1 24rem; }
.tdc-marcas .gestion-marca-filtro { margin-bottom: 0; }
.tdc-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.tdc-accion { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border: 1px solid var(--corp-border); border-radius: .6rem; background: var(--corp-surface); color: var(--corp-text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.tdc-accion:hover { border-color: var(--corp-border-strong); }

.tdc-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.tdc-principal { display: grid; gap: 1rem; min-width: 0; }
.tdc-hoy { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--corp-text); }
.tdc-corte { display: inline-flex; align-items: center; gap: .35rem; color: var(--corp-gray); }

.tdc-cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.tdc-caja { display: flex; flex-direction: column; gap: .75rem; min-height: 11.5rem; padding: 1.1rem 1.2rem; background: var(--corp-surface); border: 1px solid var(--corp-border); border-radius: .9rem; color: var(--corp-text); text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.tdc-caja:hover { border-color: var(--corp-accent); }
.tdc-caja:focus-visible, .tdc-paso:focus-visible, .tdc-agenda:focus-visible { outline: 2px solid var(--corp-accent); outline-offset: 2px; }
.tdc-caja-destacada { border: 2px solid var(--corp-dark); }
.tdc-caja-titulo { display: flex; justify-content: space-between; letter-spacing: .06em; font-size: .85rem; color: var(--corp-gray); }
.tdc-caja-n { font-size: 2rem; font-weight: 700; line-height: 1; }
.tdc-caja-detalle { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .85rem; }
.tdc-caja-detalle span:last-child { color: var(--corp-gray); }
.tdc-alerta { color: var(--corp-danger); font-weight: 700; }
.tdc-caja-pie { margin-top: auto; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .85rem; color: var(--corp-gray); }

.tdc-card { background: var(--corp-surface); border: 1px solid var(--corp-border); border-radius: .9rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.tdc-card-titulo { font-size: .95rem; margin-bottom: 1.1rem; }
.tdc-paso { display: grid; grid-template-columns: 1.6rem 9rem minmax(0, 1fr) 9.5rem; align-items: center; gap: .75rem; padding: .8rem 0; color: var(--corp-text); text-decoration: none; }
.tdc-paso:hover .tdc-paso-barra { filter: brightness(1.08); }
.tdc-paso-num { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; color: #fff; font-size: .75rem; font-weight: 700; }
.tdc-paso-nombre { font-size: .9rem; }
.tdc-paso-barra-zona { display: flex; justify-content: center; }
.tdc-paso-barra { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .75rem; border-radius: .45rem; color: #fff; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.tdc-paso-1 .tdc-paso-barra { width: 100%; }
.tdc-paso-2 .tdc-paso-barra { width: 82%; }
.tdc-paso-3 .tdc-paso-barra { width: 64%; }
.tdc-paso-4 .tdc-paso-barra { width: 46%; }
.tdc-paso-1 .tdc-paso-num, .tdc-paso-1 .tdc-paso-barra { background: #2563eb; }
.tdc-paso-2 .tdc-paso-num, .tdc-paso-2 .tdc-paso-barra { background: #059669; }
.tdc-paso-3 .tdc-paso-num, .tdc-paso-3 .tdc-paso-barra { background: #f59e0b; }
.tdc-paso-4 .tdc-paso-num, .tdc-paso-4 .tdc-paso-barra { background: #ea580c; }
.tdc-paso-valor { text-align: right; font-weight: 700; font-size: .95rem; }
.tdc-paso-valor small { display: block; font-weight: 400; font-size: .72rem; color: var(--corp-gray); }

.tdc-agenda { display: flex; flex-direction: column; color: var(--corp-text); text-decoration: none; min-width: 0; }
.tdc-agenda:hover { border-color: var(--corp-accent); }
.tdc-agenda-cab { display: flex; align-items: center; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--corp-border); }
.tdc-agenda-flechas { color: var(--corp-gray); letter-spacing: .4rem; }
.tdc-agenda-fecha { display: inline-flex; align-items: center; gap: .4rem; margin: 0 auto; font-size: .72rem; font-weight: 700; line-height: 1.1; }
.tdc-agenda-fecha b { font-size: 1.35rem; color: #ea580c; }
.tdc-agenda-fecha small { display: block; font-weight: 400; color: var(--corp-gray); }
.tdc-agenda-vistas { display: flex; gap: .6rem; font-size: .75rem; color: var(--corp-gray); }
.tdc-agenda-lista { display: grid; gap: .35rem; padding: .75rem 0; max-height: 36rem; overflow-y: auto; }
.tdc-evento { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: .6rem; align-items: start; padding: .6rem .5rem; border-radius: .6rem; font-size: .9rem; }
.tdc-evento-hora { font-size: .72rem; font-weight: 700; color: var(--corp-gray); padding-top: .15rem; }
.tdc-evento-destacado { background: #ffedd5; }
.tdc-evento-titulo { font-weight: 500; overflow-wrap: anywhere; }
.tdc-evento-sub { font-size: .85rem; margin-top: .2rem; }
.tdc-evento-meta { display: flex; gap: .4rem; flex-wrap: wrap; font-size: .72rem; color: var(--corp-gray); margin-top: .3rem; }
.tdc-evento-lado { display: grid; gap: .3rem; justify-items: end; }
.tdc-evento-marca { background: var(--corp-surface); border-radius: .3rem; padding: .1rem .45rem; font-size: .65rem; font-weight: 700; color: #b91c1c; }
.tdc-evento-estado { font-size: .7rem; color: var(--corp-gray); }
.tdc-agenda-vacia { color: var(--corp-gray); font-size: .9rem; padding: 1rem .5rem; }
.tdc-agenda-pie { border-top: 1px solid var(--corp-border); padding-top: .9rem; font-size: .9rem; }

@media (max-width: 1100px) {
  .tdc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .tdc-cajas { grid-template-columns: minmax(0, 1fr); }
  .tdc-caja { min-height: 0; }
  .tdc-paso { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
  .tdc-paso-barra-zona { grid-column: 1 / -1; justify-content: flex-start; }
  .tdc-paso-barra { width: auto !important; }
}
@media print {
  .tdc-acciones, .tdc-marcas { display: none; }
  .tdc-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* ===== Indicadores (ADR-142): ciudad isométrica + 3 indicadores ===== */
.ind-page {
  --ind-fondo: #F1EDFF; --ind-arq: #FAF9FF; --ind-sombra: #DAD5EF; --ind-texto: #20265F;
  --ind-violeta: #7550EF; --ind-rosa: #E94ACB; --ind-azul: #527BEA; --ind-coral: #FF8A70;
}
.ind-filtros { margin-bottom: 1rem; }
.ind-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
.ind-ciudad { overflow: hidden; }
.ind-ciudad-cab { padding: 1rem 1.25rem 0.5rem; }
.ind-ciudad-cab .meta { margin-top: 0.25rem; max-width: 60ch; }
.ind-escena { position: relative; height: 780px; background: #FFFFFF; }
.ind-escena canvas { display: block; width: 100%; height: 100%; }
.ind-etiquetas { position: absolute; inset: 0; pointer-events: none; }
.ind-etiqueta {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 0.3rem 0.6rem; border-radius: 10px; border: 1px solid var(--ind-sombra);
  background: rgba(250, 249, 255, 0.94); color: var(--ind-texto);
  box-shadow: 0 4px 14px rgba(32, 38, 95, 0.12); font: inherit; text-align: left; white-space: nowrap;
}
.ind-etiqueta strong { font-size: 1.1rem; line-height: 1.1; color: var(--ind-violeta); }
.ind-etiqueta span { font-size: 0.72rem; font-weight: 600; }
.ind-etiqueta-isla strong { color: var(--ind-rosa); }
.ind-etiqueta:hover, .ind-etiqueta:focus-visible, .ind-etiqueta-activa { border-color: var(--ind-violeta); outline: 2px solid var(--ind-violeta); outline-offset: 1px; }
.ind-panel {
  position: absolute; top: 1rem; right: 1rem; width: min(300px, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto;
  background: var(--ind-arq); color: var(--ind-texto); border: 1px solid var(--ind-sombra); border-radius: 14px;
  padding: 1rem; box-shadow: 0 12px 30px rgba(32, 38, 95, 0.18);
}
.ind-panel[hidden] { display: none; }
.ind-panel h3 { font-size: 0.95rem; margin: 0 1.5rem 0.6rem 0; }
.ind-panel h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0.9rem 0 0.4rem; color: var(--corp-gray); }
.ind-panel ul, .ind-lista-salas ul { list-style: none; margin: 0; padding: 0; }
.ind-panel li, .ind-lista-salas li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--corp-border); font-size: 0.85rem; }
.ind-panel a, .ind-lista-salas a { color: var(--ind-violeta); font-weight: 600; }
.ind-panel-cerrar { position: absolute; top: 0.5rem; right: 0.6rem; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ind-texto); }
.ind-sin-3d { position: absolute; inset: auto 1rem 1rem; color: var(--ind-texto); }
.ind-kpis { display: flex; flex-direction: column; gap: 1rem; }
.ind-kpi { padding: 1rem 1.25rem; }
.ind-kpi .meta { margin: 0.2rem 0 0.6rem; }
.ind-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ind-cifras div { display: flex; flex-direction: column; }
.ind-cifras strong { font-size: 1.35rem; color: var(--ind-texto); }
.ind-cifras span { font-size: 0.75rem; color: var(--corp-gray); }
.ind-presupuesto { font-size: 0.82rem; margin: 0.6rem 0 0.4rem; }
.ind-barra { height: 8px; border-radius: 99px; background: var(--ind-fondo); overflow: hidden; }
.ind-barra span { display: block; height: 100%; background: var(--ind-violeta); border-radius: 99px; }
.ind-flujo { margin: 0.55rem 0; }
.ind-flujo-fila { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem; }
.ind-flujo small { color: var(--corp-gray); font-size: 0.72rem; }
.ind-tabla { margin-top: 0.6rem; }
.ind-tabla td:first-child { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.ind-lista-salas { display: none; }
.ind-ciudad-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ind-vistas { display: inline-flex; border: 1px solid var(--ind-sombra); border-radius: 10px; overflow: hidden; }
.ind-vista-btn { border: 0; background: var(--ind-arq); color: var(--ind-texto); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.9rem; cursor: pointer; }
.ind-vista-btn.activa { background: var(--ind-violeta); color: #fff; }
.ind-escena[hidden], .ind-vista-tabla[hidden] { display: none; }
.ind-vista-tabla { padding: 0 1.25rem 1.25rem; }
.ind-vista-tabla .tablero-filtros { margin-bottom: 0.75rem; }
/* Vista tabla de Indicadores (referencia Stitch del cliente). */
.ind-tabla-caja { border: 1px solid var(--corp-border); border-radius: 14px; background: #fff; overflow: hidden; }
.ind-tabla-caja .tabla-wrap { border: 0; border-radius: 0; }
.ind-tabla-caja .param-pie { padding: 0.75rem 1rem; border-top: 1px solid var(--corp-border); }
.ind-tabla-prospectos { width: 100%; min-width: 1020px; border-collapse: collapse; font-size: 0.82rem; color: var(--ind-texto); }
.ind-tabla-prospectos th {
  text-align: left; padding: 0.85rem 1rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--corp-gray); background: #fafbfd; border-bottom: 1px solid var(--corp-border);
}
.ind-tabla-prospectos td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--corp-border); vertical-align: middle; }
.ind-tabla-prospectos tbody tr:last-child td { border-bottom: 0; }
.ind-tabla-prospectos tbody tr:hover td { background: #fafaff; }
.ind-tabla-prospectos tr[hidden] { display: none; }
.ind-tabla-prospectos strong { font-weight: 700; }
.ind-tabla-prospectos a { color: inherit; text-decoration: none; }
.ind-tabla-prospectos a:hover strong { color: var(--ind-violeta); }
.ind-sub { display: block; font-size: 0.72rem; color: var(--corp-gray); margin-top: 0.15rem; }
.ind-sala-celda { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.ind-sala-celda + .ind-sub { margin-left: 1rem; }
.ind-layout-tabla > .ind-ciudad { grid-column: 1 / -1; }
.ind-layout-tabla > .ind-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.ind-tabla-prospectos .ind-vehiculo, .ind-tabla-prospectos .ind-canal { text-transform: none; }
.ind-tabla-prospectos .ind-canal { text-transform: uppercase; }
.ind-tabla-prospectos td:first-child { white-space: nowrap; }
.ind-punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ind-chip { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 6px; background: #f1f2f6; color: var(--corp-gray); }
.ind-persona { display: flex; align-items: center; gap: 0.6rem; }
.ind-persona .param-avatar { border-radius: 50%; }
.ind-avatar-asesor { width: 2rem; height: 2rem; font-size: 0.68rem; background: #eef0f4; color: var(--ind-texto); border: 1px solid var(--corp-border); }
.ind-negocio { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; padding: 0.2rem 0.45rem; border: 1px solid var(--corp-border); border-radius: 6px; background: #f6f7fa; }
.ind-telefono { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ind-telefono svg { color: var(--corp-gray); }
.ind-vehiculo { display: inline-block; padding: 0.25rem 0.55rem; border-radius: 6px; background: #111827; color: #d1d5db; font-size: 0.75rem; white-space: nowrap; }
.ind-vehiculo strong { color: #fff; margin-right: 0.2rem; }
.ind-canal { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 99px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.ind-color-0 { color: var(--ind-violeta); }
.ind-color-1 { color: #0f9488; }
.ind-color-2 { color: var(--ind-azul); }
.ind-color-3 { color: #d97706; }
.ind-canal.ind-color-0 { background: #f1edff; border-color: #d9cffd; }
.ind-canal.ind-color-1 { background: #ecfdf9; border-color: #b7ece2; }
.ind-canal.ind-color-2 { background: #eef3ff; border-color: #cbd9fb; }
.ind-canal.ind-color-3 { background: #fff8eb; border-color: #fbe0b0; }
.ind-etiqueta-mas { padding: 0.2rem 0.55rem; font-size: 0.75rem; font-weight: 700; color: var(--ind-violeta); border-style: dashed; }
.ind-panel-tabla { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ind-violeta); cursor: pointer; }
@media (max-width: 899px) {
  .ind-layout { grid-template-columns: minmax(0, 1fr); }
  /* En el celular no se dibuja la ciudad: solo la tabla. */
  .ind-vistas, .ind-escena { display: none !important; }
  .ind-vista-tabla { display: block !important; }
  .ind-lista-salas { display: block; }
}

/* ── Cierre de cita por seguimiento (punto 35, ADR-144) ─────────────── */
.cita-cierre-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.cita-cierre-linea form { margin: 0; }
.cita-cierre-linea button { font-size: 0.75rem; padding: 0.25rem 0.6rem; }
.cita-cierre-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #92400e;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.35);
}
.cita-cierre-activa {
  margin-bottom: 0;
  color: var(--corp-text, inherit);
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.3);
}

/* ── Presupuesto comercial (ADR-146) ── */
.ppto-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.ppto-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.9rem; }
.ppto-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }
.ppto-kpi { display: grid; gap: 0.3rem; align-content: start; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.9rem; }
.ppto-kpi-fuerte { background: var(--corp-accent); border-color: var(--corp-accent); color: #fff; }
.ppto-kpi-fuerte .ppto-kpi-etiqueta, .ppto-kpi-fuerte .ppto-kpi-nota { color: rgba(255, 255, 255, 0.85); }
.ppto-kpi-etiqueta { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--corp-gray, #64748b); }
.ppto-kpi-valor { font-size: 1.6rem; font-weight: 800; }
.ppto-kpi-valor small { font-size: 0.8rem; font-weight: 500; }
.ppto-kpi-nota { font-size: 0.78rem; color: var(--corp-gray, #64748b); }
.ppto-mezcla { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ppto-chip { display: inline-block; padding: 0.15rem 0.55rem; font-size: 0.74rem; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 999px; background: var(--corp-surface, #f8fafc); white-space: nowrap; margin: 0.1rem 0; }
.ppto-filtros { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.9rem; }
.ppto-filtros label { display: grid; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--corp-gray, #64748b); }
.ppto-filtros input[type="number"] { width: 6rem; }
.ppto-card { padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--corp-border, #e2e8f0); border-radius: 0.9rem; min-width: 0; }
.ppto-card-cab { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ppto-tabla td { vertical-align: middle; white-space: normal; }
.ppto-tabla { min-width: 52rem; }
.ppto-asesor { display: flex; align-items: center; gap: 0.6rem; }
.ppto-asesor div { display: grid; }
.ppto-asesor span { font-size: 0.72rem; color: var(--corp-gray, #64748b); text-transform: none; }
.ppto-fila-activa { background: var(--corp-accent-dim, #eff6ff); }
.ppto-global td, .ppto-global td * { background-color: var(--corp-chrome, #0f172a); color: #fff; }
.ppto-global .ppto-chip { background-color: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); }
.ppto-pct { font-size: 0.78rem; font-weight: 700; }
.ppto-barra { height: 0.3rem; margin-top: 0.25rem; background: var(--corp-border, #e2e8f0); border-radius: 999px; overflow: hidden; }
.ppto-barra span { display: block; height: 100%; background: var(--corp-accent); }
.ppto-input { width: 6rem; text-transform: none; }
.ppto-input-ancho { width: 12rem; }
.ppto-acciones { display: flex; gap: 0.5rem; margin: 0.75rem 0 0; }
.ppto-pie { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 24rem)); gap: 0.9rem; }
.ppto-hist { display: flex; justify-content: space-between; gap: 0.6rem; margin: 0.35rem 0; font-size: 0.85rem; flex-wrap: wrap; }
.ppto-csv-form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.6rem; }
.ppto-csv code { text-transform: none; }
.ppto-fila-error td { background: #fef2f2; }
.ppto-error { color: var(--corp-danger, #b91c1c); font-size: 0.78rem; }

/* ── Plan de pago del pedido (ADR-149) ───────────────────────────────── */
.plan-pago-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}
.plan-pago-grid small { display: block; margin-top: 0.25rem; font-size: 0.7rem; }
.plan-pago-valor { font-size: 1.05rem; font-weight: 700; padding: 0.4rem 0; }
.plan-pago-totales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--corp-border);
}
.plan-pago-totales > div { display: flex; flex-direction: column; gap: 0.15rem; }
.plan-pago-totales .label { font-size: 0.7rem; color: var(--corp-gray); }
.plan-pago-totales .mono { font-size: 1.15rem; font-weight: 800; }
.plan-pago-diferencia.ok { color: var(--corp-success); }
.plan-pago-diferencia.error { color: var(--corp-danger); }
.plan-pago-acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
/* Valor del negocio desde la última propuesta (regla A-02) */
.plan-pago-propuesta {
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--corp-border);
  border-radius: 0.5rem;
  background: var(--corp-light);
}
.plan-pago-propuesta .label { font-size: 0.7rem; color: var(--corp-gray); font-weight: 700; }
.plan-pago-propuesta dl { margin: 0.4rem 0 0; }
.plan-pago-propuesta dl > div {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0;
}
.plan-pago-propuesta dt { min-width: 0; overflow-wrap: anywhere; }
.plan-pago-propuesta dd { margin: 0; white-space: nowrap; }
.plan-pago-propuesta .total { border-top: 1px solid var(--corp-border); margin-top: 0.3rem; padding-top: 0.35rem; font-weight: 800; }
/* Detalle de la retoma dentro del plan (regla B-04) */
.plan-pago-retoma {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px dashed var(--corp-border);
  border-radius: 0.5rem;
}
.plan-pago-retoma .label { font-size: 0.7rem; color: var(--corp-gray); font-weight: 700; }
.plan-pago-retoma-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.5rem;
}
.plan-pago-pendientes {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--corp-border);
  border-radius: 0.5rem;
}
.plan-pago-pendientes .label { font-size: 0.7rem; color: var(--corp-gray); font-weight: 700; }
.plan-pago-pendientes ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.plan-pago-pendientes li { margin: 0.2rem 0; color: var(--corp-danger); }
@media (max-width: 900px) {
  .plan-pago-grid, .plan-pago-retoma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .plan-pago-grid, .plan-pago-totales, .plan-pago-retoma-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ADR-152: historial de revisión de la orden de pedido */
.pedido-historial { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.pedido-historial li { font-size: 0.82rem; border-left: 3px solid var(--corp-gray-dim); padding-left: 0.6rem; }


/* ── Pedidos (cola de revisión del Asistente Comercial, nov 2026) ───────── */
.ped-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--corp-border, #e2e8f0); margin: 0.25rem 0 1rem; }
.ped-tab { padding: 0.55rem 0.1rem; font-size: 0.85rem; font-weight: 600; color: #64748b; text-decoration: none; border-bottom: 2px solid transparent; }
.ped-tab-activa { color: #1d4ed8; border-bottom-color: #1d4ed8; }
.ped-tab .count { margin-left: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: #dbeafe; font-size: 0.72rem; }
.ped-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem)); gap: 1rem; margin-bottom: 1.25rem; }
.ped-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.9rem; padding: 0.9rem 1rem; }
.ped-kpi-etiqueta { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.ped-kpi-valor { font-size: 2rem; font-weight: 800; line-height: 1.2; margin: 0.2rem 0 0.5rem; }
.ped-kpi-valor small { font-size: 0.85rem; font-weight: 600; color: #475569; }
.ped-kpi-pie { display: flex; justify-content: space-between; gap: 0.5rem; border-top: 1px solid #e2e8f0; padding-top: 0.5rem; font-size: 0.78rem; color: #64748b; }
.ped-kpi-pie strong { color: #0f172a; }
.ped-tabla { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.9rem; overflow: hidden; }
.ped-tabla-cab { padding: 0.75rem 1rem; font-size: 0.8rem; color: #475569; border-bottom: 1px solid #e2e8f0; }
.ped-tabla-datos { width: 100%; }
.ped-tabla-datos td { vertical-align: middle; }
.ped-negocio { font-weight: 700; color: #1d4ed8; text-decoration: none; }
.ped-persona { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.ped-nombre { font-weight: 600; font-size: 0.85rem; }
.ped-sub { font-size: 0.72rem; color: #64748b; }
.ped-chip { display: inline-block; padding: 0 0.4rem; border-radius: 0.3rem; background: #eef2f7; font-size: 0.7rem; font-weight: 700; }
.ped-pago { font-size: 0.78rem; font-weight: 600; color: #047857; }
.ped-num { text-align: right; white-space: nowrap; }
.ped-accion { text-align: right; }
/* Responsive: bajo 1100px la tabla se desplaza en su caja; bajo 720px cada
   negocio pasa a ser una tarjeta (sin encabezados, etiqueta por dato). */
.ped-tabla .tabla-wrap { overflow-x: auto; }
.ped-tabla-datos th:nth-child(1) { width: 11%; }
.ped-tabla-datos th:nth-child(2) { width: 19%; }
.ped-tabla-datos th:nth-child(3) { width: 16%; }
.ped-tabla-datos th:nth-child(4) { width: 20%; }
.ped-tabla-datos th:nth-child(5) { width: 14%; }
.ped-tabla-datos th:nth-child(6) { width: 12%; }
.ped-tabla-datos th:nth-child(7) { width: 8%; }
.ped-persona > div, .ped-tabla-datos td > .ped-nombre, .ped-tabla-datos td > .ped-sub, .ped-pago { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ped-pago { display: block; }
@media (max-width: 1180px) {
  .ped-tabla-datos { min-width: 1120px; }
}
@media (max-width: 720px) {
  .ped-kpis { grid-template-columns: 1fr; }
  .ped-tabs { overflow-x: auto; }
  .ped-tabla-datos { min-width: 0; table-layout: auto; }
  .ped-tabla-datos thead { display: none; }
  .ped-tabla-datos, .ped-tabla-datos tbody, .ped-tabla-datos tr, .ped-tabla-datos td { display: block; width: 100%; }
  .ped-tabla-datos tr { padding: 0.75rem 1rem; border-bottom: 1px solid #e2e8f0; }
  .ped-tabla-datos td { padding: 0.3rem 0; border: 0; white-space: normal; overflow: visible; text-overflow: clip; }
  .ped-tabla-datos td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
  .ped-num, .ped-accion { text-align: left; }
  .ped-accion .btn-primary { display: block; text-align: center; margin-top: 0.4rem; }
  .ped-persona > div, .ped-tabla-datos td > .ped-nombre, .ped-tabla-datos td > .ped-sub, .ped-pago { white-space: normal; overflow: visible; }
}


/* PA-02: designación del Gerente General en Usuarios y roles. */
.usuarios-gg { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1rem; padding: 0 24px; }
.usuarios-gg .form-label { margin: 0; }
.usuarios-gg select { min-width: 0; flex: 1 1 14rem; max-width: 24rem; }
.usuarios-gg .meta { flex-basis: 100%; margin: 0; }
.param-pastilla-gg { margin-left: 0.3rem; background: var(--corp-accent-soft, #e8f0fe); color: var(--corp-accent, #1d4ed8); }