/* ============================================================================
   EQUIPOS — estilos
   ============================================================================
   Archivo propio. Todas las clases arrancan con `eq-` para que no puedan
   pisarse con las de otro módulo.
   ============================================================================ */

.eq-panel { padding-bottom: 2rem; }

.eq-aviso {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.75rem 0.9rem; margin: 1rem 0;
  background: var(--color-primary-soft, #E3EDF3);
  border-left: 3px solid var(--color-primary, #0E3D57);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.86rem; line-height: 1.45;
}
.eq-aviso .icon-svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-primary, #0E3D57); }
.eq-aviso-ambar { background: #FFFAEB; border-left-color: #B54708; }
.eq-aviso-ambar .icon-svg { color: #B54708; }

.eq-barra {
  display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap;
  padding: 0.9rem 1rem; margin-bottom: 1.2rem;
  background: var(--color-surface-warm, #F7F9FA);
  border: 1.5px solid var(--color-border, #E3E8EC);
  border-radius: var(--radius-md, 8px);
}

.eq-campo { display: flex; flex-direction: column; gap: 0.3rem; flex: 0 1 220px; }
.eq-campo-ancho { flex: 1 1 260px; }
.eq-campo > span {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted, #5B7183);
}
.eq-campo input, .eq-campo select, .eq-mover {
  width: 100%; box-sizing: border-box;
  padding: 0.5rem 0.65rem; font-family: inherit; font-size: 0.9rem;
  color: var(--color-text, #333); background: var(--color-surface, #fff);
  border: 1.5px solid var(--form-campo-borde, #D5DBE0);
  border-radius: var(--radius-sm, 6px);
}

/* La grilla de equipos: la columna "Sin equipo" va primero siempre, porque es
   de donde se sacan los vendedores para armar los demás. */
.eq-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.9rem; align-items: start;
}

.eq-card {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--color-surface, #fff);
  border: 2px solid var(--color-borde-tarjeta, #E3E8EC);
  border-radius: var(--radius-md, 8px);
}
.eq-card-sueltos {
  background: var(--color-surface-warm, #F7F9FA);
  border-style: dashed;
}

.eq-card-cab { display: flex; gap: 0.4rem; align-items: center; }
.eq-card-cab h3 { margin: 0; font-size: 1rem; color: var(--color-primary, #0E3D57); }

/* El nombre se edita en el lugar: parece un título hasta que se lo toca. */
.eq-card-nombre {
  flex: 1 1 auto; min-width: 0;
  padding: 0.3rem 0.4rem; border: 1.5px solid transparent;
  border-radius: var(--radius-sm, 6px); background: transparent;
  font: 700 1rem/1.2 inherit; color: var(--color-primary, #0E3D57);
}
.eq-card-nombre:hover { border-color: var(--color-border, #E3E8EC); }
.eq-card-nombre:focus { outline: none; border-color: var(--form-campo-foco, #1B5A7D); background: #fff; }

.eq-icono {
  flex: 0 0 auto; display: inline-flex; padding: 0.35rem;
  background: none; border: 1.5px solid transparent;
  border-radius: var(--radius-sm, 6px); cursor: pointer;
  color: var(--color-text-muted, #5B7183);
}
.eq-icono:hover { border-color: #B42318; color: #B42318; }
.eq-icono .icon-svg { width: 16px; height: 16px; }

.eq-vends-cab {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted, #5B7183);
  border-top: 1px solid var(--color-border, #E3E8EC); padding-top: 0.5rem;
}
.eq-vends-cab b { color: var(--color-primary, #0E3D57); }

.eq-vends { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.eq-vend { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; }
.eq-vend-nombre {
  flex: 1 1 auto; min-width: 0; font-size: 0.88rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-mover { flex: 0 0 140px; width: 140px; padding: 0.3rem 0.4rem; font-size: 0.8rem; }

.eq-nota, .eq-vacio { margin: 0; font-size: 0.8rem; color: var(--color-text-muted, #5B7183); }
.eq-alerta { margin: 0; font-size: 0.8rem; color: #B54708; }

.eq-estado {
  padding: 2rem 1rem; text-align: center; font-size: 0.9rem;
  color: var(--color-text-muted, #5B7183);
}
.eq-estado-error { color: #B42318; background: #FEF3F2; border-radius: var(--radius-md, 8px); }

@media (max-width: 700px) {
  .eq-barra { flex-direction: column; align-items: stretch; }
  .eq-campo, .eq-campo-ancho { flex: 1 1 auto; }
  .eq-mover { flex-basis: 120px; width: 120px; }
}

/* ============================================================================
   MI EQUIPO — el panel del supervisor
   ============================================================================ */

.me-panel { padding-bottom: 2rem; }

.me-kpis { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.me-kpi {
  flex: 1 1 130px; padding: 0.75rem 0.9rem; border-radius: var(--radius-md, 8px);
  background: #F7F9FA; border-left: 4px solid #9FB4C2;
}
.me-kpi b { display: block; font-size: 1.6rem; line-height: 1.1; }
.me-kpi span { font-size: 0.78rem; color: var(--color-text-muted, #5B7183); }
.me-kpi-verde { border-left-color: #157F3D; background: #F2FBF5; }
.me-kpi-ambar { border-left-color: #B54708; background: #FFFAEB; }
.me-kpi-rojo  { border-left-color: #B42318; background: #FEF3F2; }

.me-tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.me-tabla th {
  text-align: left; padding: 0.55rem 0.7rem; white-space: nowrap;
  background: var(--color-primary, #0E3D57); color: #fff;
  font-weight: 600; font-size: 0.76rem;
}
.me-tabla td { padding: 0.5rem 0.7rem; border-bottom: 1px solid #EDEFF2; }
.me-tabla tbody tr:hover { background: #F7F9FA; }
.me-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Hace más de un día que no toma leads: es lo que el supervisor tiene que
   ver primero, sin leer fila por fila. */
.me-alerta { color: #B54708; font-weight: 600; }

.me-fila-pausada td { background: #FFFBF5; }
.me-pill {
  display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.5rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.me-pill-pausa { background: #FFFAEB; color: #B54708; }

.me-pie { margin-top: 0.6rem; }