/* BASTIUM CRM - Importador (pegar, revisar, resultado).
   Se apoya en tokens.css y componentes.css: aqui solo lo propio de esta pantalla. */

.importar {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding-bottom: var(--e-8);
}

/* ============================================================ pasos */

.imp-pasos {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.imp-paso {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4) var(--e-2) var(--e-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: var(--cristal);
  backdrop-filter: var(--desenfoque-suave);
  color: var(--texto-3);
  font-size: var(--t-s);
  transition: color var(--v-normal) var(--curva), border-color var(--v-normal) var(--curva);
}

.imp-paso + .imp-paso::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--borde);
  margin-right: var(--e-2);
}

.imp-paso-marca {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-redondo);
  border: 1px solid var(--borde-fuerte);
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  line-height: 1;
}

.imp-paso.activo {
  color: var(--texto);
  border-color: var(--acento);
  box-shadow: var(--brillo-acento);
}

.imp-paso.activo .imp-paso-marca {
  background: var(--acento);
  border-color: transparent;
  color: var(--texto-sobre-acento);
  font-weight: var(--peso-fuerte);
}

.imp-paso.hecho {
  color: var(--texto-2);
}

.imp-paso.hecho .imp-paso-marca {
  background: var(--bien-tenue);
  border-color: var(--bien);
  color: var(--bien);
}

.imp-paso-texto {
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
  font-size: var(--t-xs);
}

/* ============================================================ paso 1: pegar */

.imp-zona.trabajando {
  opacity: .55;
  pointer-events: none;
}

.imp-pegar,
.imp-revisar,
.imp-resultado {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.imp-pegar-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.imp-motor {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin: 0;
  padding: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--cristal-hondo);
}

.imp-motor-punto {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: var(--r-redondo);
  background: var(--texto-4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05);
}

.imp-motor.activo .imp-motor-punto {
  background: var(--bien);
  box-shadow: 0 0 0 3px var(--bien-tenue);
}

.imp-motor-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--t-s);
  color: var(--texto);
}

.imp-motor-detalle {
  color: var(--texto-3);
  line-height: var(--interlinea);
}

/* zona de soltar ficheros */
.imp-soltar {
  position: relative;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-m);
  transition: border-color var(--v-normal) var(--curva), background var(--v-normal) var(--curva);
}

.imp-soltar.arrastrando {
  border-color: var(--acento);
  background: var(--acento-tenue);
}

.imp-soltar-marca {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-m);
  background: rgba(6, 10, 20, .72);
  backdrop-filter: var(--desenfoque-suave);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v-rapida) var(--curva);
}

.imp-soltar.arrastrando .imp-soltar-marca {
  opacity: 1;
}

.imp-soltar-texto {
  font-size: var(--t-m);
  color: var(--acento-claro);
  letter-spacing: var(--espaciado-etiqueta);
}

.imp-area {
  display: block;
  width: 100%;
  min-height: 260px;
  resize: vertical;
  padding: var(--e-4);
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--texto);
  font-family: var(--fuente-mono);
  font-size: var(--t-s);
  line-height: 1.65;
  tab-size: 2;
}

.imp-area:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--acento);
  border-radius: var(--r-m);
}

.imp-area::placeholder {
  color: var(--texto-4);
  font-family: var(--fuente);
}

.imp-fichero {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.imp-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.imp-contador {
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  color: var(--texto-4);
}

.imp-contador.pasado {
  color: var(--mal);
}

.imp-acciones {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.imp-pista {
  margin: 0;
  font-size: var(--t-s);
  color: var(--texto-3);
  line-height: var(--interlinea);
}

/* historial de la sesion */
.imp-historial {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.imp-historial-fila {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-s);
  color: var(--texto-2);
}

.imp-historial-fila:last-child {
  border-bottom: 0;
}

.imp-historial-hora {
  flex: none;
  color: var(--texto-4);
  font-size: var(--t-xs);
}

.imp-historial-texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ============================================================ paso 2: revisar */

.imp-lote {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  position: sticky;
  top: 0;
  z-index: var(--z-contenido);
}

.imp-lote-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.imp-lote-motor {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  font-size: var(--t-s);
}

.imp-etiqueta-motor {
  padding: 2px var(--e-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-redondo);
  font-size: var(--t-xs);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
  color: var(--acento-claro);
  background: var(--acento-tenue);
}

.imp-lote-cuenta {
  margin: 0;
  font-size: var(--t-s);
  color: var(--texto-2);
}

.imp-lote-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-3);
}

.imp-lote-acciones {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.imp-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

/* ---- tarjeta de lead detectado */
.imp-lead {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-top-color: var(--borde-luz);
  border-radius: var(--r-l);
  background: var(--cristal);
  backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-1);
}

.imp-lead.duplicado {
  border-color: var(--alerta);
}

.imp-lead.descartado {
  opacity: .5;
  box-shadow: none;
}

.imp-lead-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
}

.imp-lead-identidad {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  min-width: 0;
}

.imp-lead-numero {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s);
  font-size: var(--t-xs);
  color: var(--texto-3);
}

.imp-lead-titulo {
  margin: 0 0 var(--e-1);
  font-family: var(--fuente-display);
  font-size: var(--t-l);
  line-height: var(--interlinea-titulo);
  color: var(--texto);
  overflow-wrap: anywhere;
}

.imp-lead-fuera {
  margin: 0;
  font-size: var(--t-s);
  color: var(--texto-3);
}

/* ---- confianza */
.imp-confianza {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.imp-confianza-barra {
  width: 88px;
  height: 4px;
  border-radius: var(--r-redondo);
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
}

.imp-confianza-relleno {
  display: block;
  height: 100%;
  width: var(--parte, 0%);
  border-radius: var(--r-redondo);
  background: var(--texto-3);
}

.imp-confianza.alta .imp-confianza-relleno { background: var(--bien); }
.imp-confianza.media .imp-confianza-relleno { background: var(--alerta); }
.imp-confianza.baja .imp-confianza-relleno { background: var(--mal); }

.imp-confianza-texto {
  font-size: var(--t-xs);
  color: var(--texto-3);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
}

/* ---- duplicado */
.imp-duplicado-aviso {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3);
  border: 1px solid var(--alerta);
  border-radius: var(--r-m);
  background: var(--alerta-tenue);
}

.imp-duplicado-texto {
  margin: 0;
  font-size: var(--t-s);
  color: var(--texto);
}

.imp-duplicado-opciones {
  display: flex;
  gap: var(--e-4);
  flex-wrap: wrap;
}

.imp-radio {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-s);
  color: var(--texto-2);
  cursor: pointer;
}

.imp-radio input {
  accent-color: var(--acento);
}

.imp-enlace {
  align-self: flex-start;
  color: var(--acento-claro);
  font-size: var(--t-s);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.imp-enlace:hover,
.imp-enlace:focus-visible {
  border-bottom-color: currentColor;
}

/* ---- campos editables */
.imp-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e-3);
}

.imp-campo {
  position: relative;
  display: flex;
  flex-direction: column;
}

.imp-campo.vacio .campo-control {
  border-style: dashed;
  color: var(--texto-3);
}

.imp-campo .campo-etiqueta {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.imp-origen {
  padding: 1px 6px;
  border-radius: var(--r-redondo);
  border: 1px solid var(--borde-fuerte);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.imp-origen.regla {
  color: var(--acento-claro);
  border-color: rgba(110, 155, 232, .45);
  background: var(--acento-tenue);
}

.imp-origen.ia {
  color: var(--oro);
  border-color: rgba(217, 184, 124, .45);
  background: var(--oro-tenue);
}

.imp-quitar {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transition: opacity var(--v-rapida) var(--curva);
}

.imp-campo:hover .imp-quitar,
.imp-campo:focus-within .imp-quitar {
  opacity: 1;
}

/* ---- avisos y texto sobrante */
.imp-alerta {
  margin: 0;
  padding: var(--e-2) var(--e-3);
  border-left: 2px solid var(--mal);
  background: var(--mal-tenue);
  border-radius: var(--r-xs);
  font-size: var(--t-s);
  color: var(--texto);
}

.imp-avisos {
  margin: var(--e-2) 0 0;
  padding-left: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  font-size: var(--t-s);
  color: var(--texto-2);
  line-height: var(--interlinea);
}

.imp-detalles {
  border-top: 1px solid var(--borde);
  padding-top: var(--e-2);
}

.imp-detalles > summary {
  cursor: pointer;
  font-size: var(--t-s);
  color: var(--texto-3);
  letter-spacing: var(--espaciado-etiqueta);
}

.imp-detalles > summary:hover {
  color: var(--texto);
}

.imp-sobrante,
.imp-crudo {
  margin: var(--e-2) 0 0;
  padding: var(--e-3);
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--cristal-hondo);
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--texto-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============================================================ paso 3: resultado */

.imp-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-3);
}

.imp-cifra {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-top-color: var(--borde-luz);
  border-radius: var(--r-m);
  background: var(--cristal);
  backdrop-filter: var(--desenfoque-suave);
}

.imp-cifra-valor {
  font-size: var(--t-3xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.imp-cifra-etiqueta {
  font-size: var(--t-xs);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
  color: var(--texto-3);
}

.imp-cifra.tono-bien .imp-cifra-valor { color: var(--bien); }
.imp-cifra.tono-acento .imp-cifra-valor { color: var(--acento); }
.imp-cifra.tono-alerta .imp-cifra-valor { color: var(--alerta); }
.imp-cifra.tono-mal .imp-cifra-valor { color: var(--mal); }

.imp-creados,
.imp-lista-simple {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  font-size: var(--t-s);
  color: var(--texto-2);
}

.imp-creados li,
.imp-lista-simple li {
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--borde);
}

.imp-creados li:last-child,
.imp-lista-simple li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ============================================================ pantallas pequenas */

@media (max-width: 900px) {
  .imp-lote {
    position: static;
  }
}

@media (max-width: 620px) {
  .imp-pasos {
    gap: var(--e-1);
  }

  .imp-paso {
    padding: var(--e-1) var(--e-3) var(--e-1) var(--e-1);
  }

  .imp-paso + .imp-paso::before {
    width: 10px;
    margin-right: var(--e-1);
  }

  .imp-area {
    min-height: 200px;
    padding: var(--e-3);
  }

  .imp-campos {
    grid-template-columns: 1fr;
  }

  .imp-quitar {
    opacity: 1;
  }

  .imp-lead-cabecera {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .imp-paso,
  .imp-soltar,
  .imp-soltar-marca,
  .imp-quitar {
    transition: none;
  }
}