/* BASTIUM CRM - Tablero (kanban de cristal).
   Se apoya en tokens.css y componentes.css. Cero colores a mano, cero iconos SVG.
   Aqui viven tambien dos piezas que comparten las vistas de ventas: .esqueleto y .casilla. */

/* ============================================================ piezas compartidas */

/* Carga fantasma mientras llegan los datos */
.esqueleto {
  display: block;
  border-radius: var(--r-s);
  background: linear-gradient(90deg, var(--cristal) 0%, var(--cristal-3) 50%, var(--cristal) 100%);
  background-size: 240% 100%;
  animation: brillo-esqueleto 1.6s linear infinite;
}

.esqueleto-titulo { height: 18px; width: 55%; }
.esqueleto-bloque { height: 240px; margin-top: var(--e-4); }
.esqueleto-tarjeta { height: 92px; }
.esqueleto-fila { height: 34px; margin-bottom: var(--e-2); }

@keyframes brillo-esqueleto {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* Casilla de seleccion en tablas y listas */
.casilla {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--acento);
  cursor: pointer;
}

.casilla:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
}

/* ============================================================ armazon del tablero */

.tablero {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  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: 460px;
}

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

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

.tablero-barra select.campo-control { padding-right: var(--e-7); }
.tablero-barra .segmentado { margin-left: auto; }

.tablero-buscador { flex: 1 1 260px; min-width: 180px; max-width: 400px; }

.tablero-pistas {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  min-height: 0;
  padding: 2px 2px var(--e-3);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cristal-3) transparent;
}

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

/* Aviso a pantalla completa dentro de la pista (sin etapas, error de carga) */
.tablero-aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  margin: auto;
  padding: var(--e-8) var(--e-7);
  max-width: 440px;
  text-align: center;
}

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

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

/* Formulario del modal de alta: dos columnas, y a lo ancho lo que necesita sitio */
.tablero-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
}

.tablero-form .ancho-total { grid-column: 1 / -1; }
.tablero-form .campo-control { width: 100%; }

@media (max-width: 560px) {
  .tablero-form { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ columna */

.columna {
  --color-columna: var(--etapa-2);
  position: relative;
  flex: 0 0 292px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 170px;
  overflow: hidden;
  border-radius: var(--r-l);
}

.columna::before { display: none; }   /* el filo de luz lo pone .columna-filo con el color de la etapa */

.columna-ganada  { --color-columna: var(--etapa-ganada); }
.columna-perdida { --color-columna: var(--etapa-perdida); }

.columna-cab {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
  padding: var(--e-4) var(--e-4) var(--e-3);
  background: var(--cristal-hondo);
  backdrop-filter: var(--desenfoque-suave);
  -webkit-backdrop-filter: var(--desenfoque-suave);
  border-bottom: 1px solid var(--borde);
}

.columna-filo {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--color-columna);
  box-shadow: 0 0 14px 1px var(--color-columna);
  opacity: .9;
}

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

.columna-nombre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 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);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.columna-conteo {
  flex: 0 0 auto;
  padding: 1px var(--e-2);
  border-radius: var(--r-redondo);
  background: var(--cristal-2);
  color: var(--texto-2);
  font-size: var(--t-xs);
}

.columna-importe { margin: var(--e-2) 0 0; font-size: var(--t-s); color: var(--oro); }

.columna-prob {
  margin: var(--e-1) 0 0;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-4);
}

.columna-barra {
  margin-top: var(--e-2);
  height: 3px;
  border-radius: var(--r-redondo);
  background: var(--cristal-2);
  overflow: hidden;
}

.columna-barra i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: var(--r-redondo);
  background: var(--color-columna);
  transition: width var(--v-lenta) var(--curva);
}

.columna-cuerpo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cristal-3) transparent;
}

.columna-cuerpo::-webkit-scrollbar { width: 8px; }
.columna-cuerpo::-webkit-scrollbar-thumb { background: var(--cristal-3); border-radius: var(--r-redondo); }
.columna-cuerpo::-webkit-scrollbar-track { background: transparent; }

.columna-vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 116px;
  padding: var(--e-4);
  border: 1px dashed var(--borde);
  border-radius: var(--r-m);
  text-align: center;
  transition: border-color var(--v-normal) var(--curva), background var(--v-normal) var(--curva);
}

.columna-vacia-marco {
  width: 22px;
  height: 22px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-xs);
  opacity: .7;
}

.columna-vacia-texto { margin: 0; font-size: var(--t-xs); color: var(--texto-4); }

.columna-vacia-lista { border-color: var(--acento-hondo); background: var(--acento-tenue); }

.columna-fantasma { opacity: .55; pointer-events: none; }

/* ============================================================ tarjeta de lead */

.tarjeta {
  --color-etapa: var(--etapa-2);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-top-color: var(--borde-luz);
  border-radius: var(--r-m);
  background: var(--cristal-2);
  cursor: grab;
  touch-action: manipulation;
  transition: transform var(--v-rapida) var(--curva), box-shadow var(--v-rapida) var(--curva),
              border-color var(--v-rapida) var(--curva), background var(--v-rapida) var(--curva);
}

.tarjeta::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--e-3);
  bottom: var(--e-3);
  width: 2px;
  border-radius: var(--r-redondo);
  background: var(--color-etapa);
  opacity: .85;
}

.tarjeta:hover {
  transform: translateY(-2px);
  background: var(--cristal-3);
  border-color: var(--borde-fuerte);
  box-shadow: var(--sombra-2);
}

.tarjeta:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tarjeta:active { cursor: grabbing; }
.tarjeta-fuente { display: none; }

.tarjeta-nueva { animation: entrada-tarjeta var(--v-lenta) var(--curva) 2; }

@keyframes entrada-tarjeta {
  from { box-shadow: var(--brillo-acento); }
  to   { box-shadow: none; }
}

.tarjeta-alto { display: flex; align-items: flex-start; gap: var(--e-2); }

.tarjeta-nombre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--t-m);
  font-weight: var(--peso-fuerte);
  line-height: 1.25;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarjeta-temp {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--r-redondo);
  background: var(--texto-4);
}

.tarjeta-temp[data-temp="frio"]     { background: var(--frio);     box-shadow: 0 0 8px var(--frio); }
.tarjeta-temp[data-temp="templado"] { background: var(--templado); box-shadow: 0 0 8px var(--templado); }
.tarjeta-temp[data-temp="caliente"] { background: var(--caliente); box-shadow: 0 0 10px var(--caliente); }

.tarjeta-empresa {
  margin: -4px 0 0;
  font-size: var(--t-s);
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarjeta-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.tarjeta-codigo { font-size: var(--t-xs); color: var(--texto-4); }
.tarjeta-importe { font-size: var(--t-s); font-weight: var(--peso-fuerte); color: var(--oro); }

.tarjeta-etapa {
  align-self: flex-start;
  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-3);
}

.tarjeta-senales { display: flex; flex-wrap: wrap; gap: var(--e-1); }

.senal {
  padding: 1px var(--e-2);
  border-radius: var(--r-redondo);
  font-size: var(--t-micro);
  letter-spacing: .02em;
  white-space: nowrap;
}

.senal-reunion { background: var(--acento-tenue); color: var(--acento-claro); }
.senal-vencida { background: var(--mal-tenue); color: var(--mal); }

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

.tarjeta-avatares { display: inline-flex; align-items: center; }
.tarjeta-avatares .avatar + .avatar { margin-left: -6px; }

.tarjeta-tiempo { font-size: var(--t-micro); color: var(--texto-4); white-space: nowrap; }

/* ============================================================ arrastre */

.tarjeta-fantasma {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-arrastre);
  margin: 0;
  pointer-events: none;
  background: var(--cristal-3);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-arrastre);
  opacity: .96;
}

.tarjeta-fantasma:hover { transform: none; }
.tarjeta-fantasma.fuera { opacity: .5; }
.tarjeta-fantasma.volviendo { transition: transform var(--v-normal) var(--curva-salida); }

.hueco {
  flex: 0 0 auto;
  border: 1px dashed var(--acento-hondo);
  border-radius: var(--r-m);
  background: var(--acento-tenue);
  overflow: hidden;
  transition: height var(--v-normal) var(--curva);
}

body.tablero-arrastrando { user-select: none; }
body.tablero-arrastrando .tarjeta { cursor: grabbing; }
body.tablero-arrastrando .tarjeta:hover { transform: none; box-shadow: none; }

/* ============================================================ indicador de columna (movil) */

.tablero-puntos { display: none; }

.tablero-punto {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-redondo);
  background: var(--cristal-3);
  cursor: pointer;
  transition: width var(--v-normal) var(--curva), background var(--v-normal) var(--curva);
}

.tablero-punto.activo { width: 20px; background: var(--acento); }

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

@media (max-width: 1180px) {
  .tablero {
    max-height: calc(100vh - var(--cabecera) - var(--e-5) - var(--e-5));
    max-height: calc(100dvh - var(--cabecera) - var(--e-5) - var(--e-5));
  }
  .columna { flex: 0 0 272px; }
}

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

  .tablero-buscador { flex: 1 1 100%; }
  .tablero-barra .campo-control { flex: 1 1 40%; }
  .tablero-barra .segmentado { flex: 1 1 100%; }
  .tablero-barra .segmentado > button { flex: 1 1 0; }

  .tablero-pistas { scroll-snap-type: x mandatory; }

  .columna {
    flex: 0 0 calc(100vw - var(--e-8));
    max-width: 430px;
    scroll-snap-align: start;
  }

  .tablero-puntos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    flex: 0 0 auto;
  }
}

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