/* BASTIUM CRM - Leads (tabla de volumen) y ficha de lead.
   Se apoya en tokens.css, componentes.css y en las piezas compartidas de tablero.css. */

/* ============================================================ tabla de leads */

.leads {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  height: 100%;
  max-height: calc(100vh - var(--cabecera) - var(--e-6) - var(--e-6));
  max-height: calc(100dvh - var(--cabecera) - var(--e-6) - var(--e-6));
  min-height: 420px;
}

/* La barra va sobre .panel, que es columna: aqui se endereza a fila */
.leads-filtros {
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3);
}

.leads-filtros .campo-control {
  width: auto;
  flex: 0 1 auto;
  min-height: 34px;
  padding: 6px var(--e-3);
  font-size: var(--t-s);
}

.leads-filtros select.campo-control { padding-right: var(--e-7); }

.leads-buscador { flex: 1 1 240px; min-width: 170px; max-width: 380px; }

.leads-rango {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--cristal-hondo);
}

.leads-rango .campo-control {
  min-height: 30px;
  border: 0;
  background: transparent;
  padding-inline: var(--e-1);
}

.leads-rango-texto {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-4);
}

/* ---- barra de acciones en lote ---- */
.leads-lote {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-color: var(--acento-hondo);
}

.leads-lote[hidden] { display: none; }

.leads-lote-texto {
  font-size: var(--t-s);
  font-weight: var(--peso-medio);
  color: var(--acento-claro);
  white-space: nowrap;
}

.leads-lote-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-left: auto;
}

/* ---- caja con scroll (cabecera pegajosa + lienzo virtual) ---- */
.leads-caja {
  flex: 1 1 auto;
  display: block;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cristal-3) transparent;
}

/* El filo de luz del panel se iria con el scroll: lo cubre la cabecera pegajosa */
.leads-caja::before { display: none; }

.leads-caja::-webkit-scrollbar { width: 10px; height: 10px; }
.leads-caja::-webkit-scrollbar-thumb { background: var(--cristal-3); border-radius: var(--r-redondo); }
.leads-caja::-webkit-scrollbar-track { background: transparent; }

.leads-tabla {
  --columnas: 44px repeat(6, minmax(120px, 1fr));
  position: relative;
  min-width: 720px;
}

.leads-cab {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: var(--columnas);
  align-items: center;
  height: 40px;
  background: var(--cristal-hondo);
  backdrop-filter: var(--desenfoque-suave);
  -webkit-backdrop-filter: var(--desenfoque-suave);
  border-bottom: 1px solid var(--borde-fuerte);
}

.leads-cab-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texto-3);
  font-family: var(--fuente);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  text-align: left;
  cursor: pointer;
  transition: color var(--v-rapida) var(--curva);
}

.leads-cab-boton:hover { color: var(--texto); }
.leads-cab-boton.activo { color: var(--acento-claro); }
.leads-cab-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.leads-celda-cab.derecha .leads-cab-boton { justify-content: flex-end; text-align: right; }

/* Flecha de orden dibujada con bordes, sin SVG */
.leads-flecha { width: 0; height: 0; opacity: 0; }

.leads-flecha.arriba {
  opacity: 1;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--acento-claro);
}

.leads-flecha.abajo {
  opacity: 1;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--acento-claro);
}

.leads-lienzo { position: relative; width: 100%; }

.leads-fila {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: var(--columnas);
  align-items: center;
  height: 44px;
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
  transition: background var(--v-rapida) var(--curva);
}

.leads-fila:hover { background: var(--cristal-2); }
.leads-fila:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.leads-fila.marcada { background: var(--acento-tenue); }
.leads-fila.archivada .leads-celda { opacity: .55; }

.leads-celda {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  padding: 0 var(--e-3);
  font-size: var(--t-s);
  color: var(--texto-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leads-celda.fuerte { color: var(--texto); font-weight: var(--peso-medio); }
.leads-celda.derecha { justify-content: flex-end; text-align: right; }
.leads-celda.mono { font-size: var(--t-xs); color: var(--texto-3); }
.leads-celda.vacia::after { content: "-"; color: var(--texto-4); }

.leads-celda-marca { justify-content: center; padding: 0; }

.leads-etapa {
  --color-etapa: var(--etapa-2);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  font-size: var(--t-xs);
  color: var(--texto-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leads-etapa::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--r-redondo);
  background: var(--color-etapa);
  box-shadow: 0 0 8px var(--color-etapa);
}

.leads-temp { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); }

.leads-temp-punto {
  width: 7px;
  height: 7px;
  border-radius: var(--r-redondo);
  background: var(--texto-4);
}

.leads-temp[data-temp="frio"] .leads-temp-punto     { background: var(--frio); }
.leads-temp[data-temp="templado"] .leads-temp-punto { background: var(--templado); }
.leads-temp[data-temp="caliente"] .leads-temp-punto { background: var(--caliente); }

/* ---- vacios y pie ---- */
.leads-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-9) var(--e-6);
  text-align: center;
}

.leads-vacio-titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--t-l);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.leads-vacio-texto { margin: 0; font-size: var(--t-s); color: var(--texto-3); }

.leads-pie {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--t-xs);
  color: var(--texto-4);
  letter-spacing: .02em;
}

/* ---- elector de columnas ---- */
.leads-columnas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2) var(--e-4);
}

.leads-columna-opcion {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2);
  border-radius: var(--r-s);
  font-size: var(--t-s);
  color: var(--texto-2);
  cursor: pointer;
}

.leads-columna-opcion:hover { background: var(--cristal-2); color: var(--texto); }

/* ============================================================ ficha de lead */

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

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

.ficha-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-8);
  max-width: 520px;
}

.ficha-error-titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--t-l);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.ficha-error-texto { margin: 0; font-size: var(--t-s); color: var(--texto-3); }

/* ---- cabecera de la ficha ---- */
.ficha-cab {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-6);
}

.ficha-cab-alto {
  display: flex;
  align-items: flex-start;
  gap: var(--e-5);
  flex-wrap: wrap;
}

.ficha-identidad { flex: 1 1 260px; min-width: 0; }

.ficha-nombre {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--t-2xl);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-titulo);
  color: var(--texto);
}

.ficha-sublinea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-2);
}

.ficha-empresa { font-size: var(--t-m); color: var(--texto-2); }
.ficha-codigo { font-size: var(--t-xs); color: var(--texto-4); }

.ficha-temp { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); color: var(--texto-3); }

.ficha-temp-punto { width: 8px; height: 8px; border-radius: var(--r-redondo); background: var(--texto-4); }
.ficha-temp[data-temp="frio"] .ficha-temp-punto     { background: var(--frio);     box-shadow: 0 0 8px var(--frio); }
.ficha-temp[data-temp="templado"] .ficha-temp-punto { background: var(--templado); box-shadow: 0 0 8px var(--templado); }
.ficha-temp[data-temp="caliente"] .ficha-temp-punto { background: var(--caliente); box-shadow: 0 0 10px var(--caliente); }

.ficha-marca-archivado {
  padding: 1px var(--e-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-4);
}

.ficha-importe {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--oro-tenue);
  border-radius: var(--r-m);
  background: var(--oro-tenue);
}

.ficha-importe-etiqueta {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-3);
}

.ficha-importe-valor { font-size: var(--t-xl); font-weight: var(--peso-fuerte); color: var(--oro); }

/* ---- embudo ---- */
.embudo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.embudo-paso {
  --color-etapa: var(--etapa-2);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 32px;
  padding: 0 var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: var(--cristal);
  color: var(--texto-3);
  font-family: var(--fuente);
  font-size: var(--t-xs);
  cursor: pointer;
  transition: background var(--v-rapida) var(--curva), color var(--v-rapida) var(--curva),
              border-color var(--v-rapida) var(--curva), transform var(--v-rapida) var(--curva);
}

.embudo-paso:hover { background: var(--cristal-2); color: var(--texto); border-color: var(--borde-fuerte); }
.embudo-paso:active { transform: translateY(1px); }
.embudo-paso:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.embudo-marca {
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-etapa);
  border-radius: var(--r-redondo);
  background: transparent;
}

.embudo-texto { white-space: nowrap; }

.embudo-paso.pasado { color: var(--texto-2); }
.embudo-paso.pasado .embudo-marca { background: var(--color-etapa); opacity: .5; }

.embudo-paso.actual {
  border-color: var(--color-etapa);
  background: var(--cristal-3);
  color: var(--texto);
  font-weight: var(--peso-fuerte);
}

.embudo-paso.actual .embudo-marca { background: var(--color-etapa); box-shadow: 0 0 10px var(--color-etapa); }
.embudo-paso.ganada.actual { color: var(--bien); }
.embudo-paso.perdida.actual { color: var(--mal); }

/* ---- responsables y contacto ---- */
.ficha-responsables {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
}

.ficha-responsable { display: flex; flex-direction: column; gap: var(--e-1); min-width: 140px; }

.ficha-responsable-etiqueta {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-4);
}

.ficha-responsable-valor { font-size: var(--t-s); color: var(--texto-2); }

.ficha-responsable-persona {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-s);
  color: var(--texto);
}

.ficha-responsable-vacio { font-size: var(--t-s); color: var(--texto-4); }

.ficha-contacto { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* ---- rejilla de dos columnas ---- */
.ficha-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--e-4);
  align-items: start;
}

.ficha-columna { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }

.ficha-columna-campos { order: 1; }
.ficha-columna-lateral { order: 2; }

.ficha-bloque { padding: var(--e-5) var(--e-6) var(--e-6); }

.ficha-bloque-cab { display: flex; align-items: center; gap: var(--e-3); }

.ficha-bloque-titulo {
  margin: 0 auto 0 0;
  font-family: var(--fuente-display);
  font-size: var(--t-s);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-2);
}

.ficha-bloque-titulo + .ficha-campos { margin-top: var(--e-4); }

/* ---- campos con edicion en linea ---- */
.ficha-campos { display: flex; flex-direction: column; }

.ficha-campo {
  display: grid;
  grid-template-columns: minmax(110px, 34%) minmax(0, 1fr);
  align-items: start;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--borde);
}

.ficha-campo:last-child { border-bottom: 0; }
.ficha-campo.editando { align-items: center; }

.ficha-campo-etiqueta {
  padding-top: 5px;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-4);
}

.ficha-campo-valor {
  display: block;
  width: 100%;
  min-height: 28px;
  padding: 4px var(--e-2);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-s);
  line-height: var(--interlinea);
  text-align: left;
  overflow-wrap: anywhere;
}

.ficha-campo-valor.editable { cursor: text; transition: background var(--v-rapida) var(--curva), border-color var(--v-rapida) var(--curva); }
.ficha-campo-valor.editable:hover { background: var(--cristal-2); border-color: var(--borde); }
.ficha-campo-valor.editable:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.ficha-campo-valor.vacio { color: var(--texto-4); font-style: italic; }
.ficha-campo-valor.bloqueado { color: var(--texto-3); cursor: default; }

.ficha-campo-editor { display: flex; flex-direction: column; gap: var(--e-2); }
.ficha-campo-editor .campo { gap: var(--e-1); }
.ficha-campo-editor .campo-etiqueta { display: none; }
.ficha-campo-botones { display: flex; gap: var(--e-2); }

.ficha-form { display: flex; flex-direction: column; gap: var(--e-3); }

/* ---- agenda del lead ---- */
.ficha-agenda { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-4); }

.ficha-cita,
.ficha-tarea {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--cristal);
}

.ficha-cita.vencida,
.ficha-tarea.vencida { border-color: var(--mal); background: var(--mal-tenue); }

.ficha-cita-marca {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--r-redondo);
  background: var(--acento);
  box-shadow: 0 0 10px var(--acento-tenue);
}

.ficha-cita.vencida .ficha-cita-marca { background: var(--mal); }

.ficha-cita-texto { min-width: 0; }
.ficha-cita-titulo { margin: 0; font-size: var(--t-s); font-weight: var(--peso-medio); color: var(--texto); }
.ficha-cita-fecha { margin: 2px 0 0; font-size: var(--t-xs); color: var(--texto-3); }

.ficha-tarea .casilla { margin-top: 4px; }

/* ---- compositor de actividad ---- */
.ficha-compositor { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-4); }

.ficha-compositor .campo-control { width: 100%; }

.ficha-compositor-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

/* ---- linea de tiempo ---- */
.linea-tiempo {
  position: relative;
  margin: var(--e-5) 0 0;
  padding: 0 0 0 var(--e-5);
  list-style: none;
}

.linea-tiempo::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--borde);
}

.linea-item { position: relative; padding: 0 0 var(--e-4); }

.linea-punto {
  position: absolute;
  left: calc(var(--e-5) * -1);
  top: 5px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-redondo);
  background: var(--fondo-2);
}

.linea-punto[data-tipo="llamada"] { background: var(--acento); border-color: var(--acento); }
.linea-punto[data-tipo="whatsapp"] { background: var(--bien); border-color: var(--bien); }
.linea-punto[data-tipo="email"] { background: var(--templado); border-color: var(--templado); }
.linea-punto[data-tipo="etapa"] { background: var(--oro); border-color: var(--oro); }
.linea-punto[data-tipo="reunion"] { background: var(--acento-claro); border-color: var(--acento-claro); }
.linea-punto[data-tipo="cambioEtapa"] { background: var(--oro); border-color: var(--oro); }
.linea-punto[data-tipo="creado"],
.linea-punto[data-tipo="importado"] { background: var(--cristal-3); border-color: var(--borde-fuerte); }
.linea-punto[data-tipo="asignado"] { background: var(--texto-4); border-color: var(--texto-3); }

.linea-cuerpo { min-width: 0; }

.linea-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); }

.linea-tipo {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--acento-claro);
}

.linea-autor { font-size: var(--t-xs); color: var(--texto-2); }
.linea-fecha { margin-left: auto; font-size: var(--t-micro); color: var(--texto-4); }

.linea-texto {
  margin: var(--e-1) 0 0;
  font-size: var(--t-s);
  line-height: var(--interlinea);
  color: var(--texto-2);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.linea-vacia { padding: var(--e-3) 0; }

/* ============================================================ responsive */

@media (max-width: 1180px) {
  .leads {
    max-height: calc(100vh - var(--cabecera) - var(--e-5) - var(--e-5));
    max-height: calc(100dvh - var(--cabecera) - var(--e-5) - var(--e-5));
  }
  .ficha-rejilla { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .leads {
    max-height: calc(100dvh - 56px - var(--e-4) - 78px - env(safe-area-inset-bottom, 0px));
    min-height: 380px;
  }

  .leads-buscador { flex: 1 1 100%; }
  .leads-lote { flex-wrap: wrap; }
  .leads-lote-acciones { margin-left: 0; width: 100%; }
  .leads-columnas { grid-template-columns: minmax(0, 1fr); }

  .ficha-cab { padding: var(--e-4); }
  .ficha-nombre { font-size: var(--t-xl); }
  .ficha-importe { align-items: flex-start; }
  .ficha-bloque { padding: var(--e-4); }

  .ficha-campo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-1);
  }
  .ficha-campo-etiqueta { padding-top: 0; }
  .ficha-campo-valor { padding-inline: var(--e-1); }

  .embudo { gap: var(--e-1); }
}

@media (max-width: 430px) {
  .leads { max-height: calc(100dvh - 56px - var(--e-3) - 78px - env(safe-area-inset-bottom, 0px)); }
}