/* Vista Equipo. Solo lo especifico de esta pantalla: el resto sale de
   tokens.css y componentes.css. Ningun color escrito a mano. */

/* ------------------------------------------------------------- estructura */

.vista-equipo {
  display: block;
}

.equipo-envoltorio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--e-7);
  align-items: start;
}

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

/* ----------------------------------------------------------------- grupos */

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

.equipo-grupo-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde);
}

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

.equipo-grupo-nota {
  margin: var(--e-1) 0 0;
  font-size: var(--t-xs);
  color: var(--texto-4);
}

.equipo-grupo-cuenta {
  font-family: var(--fuente-mono);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
  padding: 2px var(--e-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: var(--cristal);
}

.equipo-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--e-4);
}

/* ------------------------------------------------------ tarjeta de persona */

.persona {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
  border-radius: var(--r-l);
  background: var(--cristal);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--borde);
  border-top-color: var(--borde-luz);
  box-shadow: var(--sombra-2);
  transition: transform var(--v-normal) var(--curva), border-color var(--v-normal) var(--curva),
    box-shadow var(--v-normal) var(--curva);
}

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

.persona-inactiva {
  opacity: .62;
}

.persona-inactiva:hover {
  opacity: 1;
}

.persona-cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.persona-identidad {
  min-width: 0;
  flex: 1;
}

.persona-nombre {
  margin: 0;
  font-size: var(--t-l);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  line-height: var(--interlinea-titulo);
  overflow-wrap: anywhere;
}

.persona-rol {
  margin: var(--e-1) 0 0;
  font-size: var(--t-xs);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
  color: var(--acento-claro);
}

.persona-usuario {
  margin: 2px 0 0;
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  color: var(--texto-4);
  overflow-wrap: anywhere;
}

.persona-acciones {
  flex: none;
  font-size: var(--t-xs);
}

.persona-estados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.persona-acceso {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--texto-3);
}

.persona-periodo {
  margin: var(--e-1) 0 calc(var(--e-2) * -1);
  font-size: var(--t-micro);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
  color: var(--texto-4);
}

.persona-metricas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
}

.metrica {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.metrica-valor {
  font-family: var(--fuente-mono);
  font-size: var(--t-l);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.metrica-dinero .metrica-valor {
  color: var(--oro);
}

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

/* Resumen bajo los numeros: ganados, asistencia y conversion del mes */
.persona-pie {
  margin: calc(var(--e-1) * -1) 0 0;
  font-size: var(--t-xs);
  color: var(--texto-4);
  overflow-wrap: anywhere;
}

.persona-agencias {
  margin: 0;
  padding-top: var(--e-2);
  border-top: 1px dashed var(--borde);
  font-size: var(--t-xs);
  color: var(--texto-3);
}

/* --------------------------------------------------- huecos y estados base */

.equipo-hueco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-5);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-l);
  background: var(--cristal-hondo);
}

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

.equipo-sin-equipo,
.equipo-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-8);
}

.equipo-sin-equipo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

/* ------------------------------------------------ panel de que puede cada rol */

.equipo-permisos {
  position: sticky;
  top: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: var(--e-6);
  border-radius: var(--r-l);
  background: var(--cristal);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--borde);
  border-top-color: var(--borde-luz);
  box-shadow: var(--sombra-2);
}

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

.permisos-intro {
  margin: calc(var(--e-4) * -1) 0 0;
  font-size: var(--t-s);
  line-height: var(--interlinea);
  color: var(--texto-3);
}

.permiso {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
}

.permiso-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.permiso-punto {
  width: 8px;
  height: 8px;
  border-radius: var(--r-redondo);
  background: var(--texto-4);
  box-shadow: 0 0 0 3px var(--cristal-2);
}

.permiso-punto[data-rol='admin'] { background: var(--acento-claro); }
.permiso-punto[data-rol='director'] { background: var(--acento); }
.permiso-punto[data-rol='closer'] { background: var(--oro); }
.permiso-punto[data-rol='setter'] { background: var(--frio); }

.permiso-titulo {
  margin: 0;
  font-size: var(--t-m);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

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

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

.permiso-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.permiso-lista li {
  position: relative;
  padding-left: var(--e-4);
  font-size: var(--t-s);
  line-height: var(--interlinea);
  color: var(--texto-2);
}

.permiso-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
}

.permiso-si li::before {
  width: 6px;
  height: 6px;
  border-radius: var(--r-redondo);
  background: var(--bien);
}

.permiso-no li {
  color: var(--texto-3);
}

.permiso-no li::before {
  width: 8px;
  height: 1px;
  background: var(--mal);
}

.permisos-pie {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
}

.permisos-pie p {
  margin: 0;
  font-size: var(--t-xs);
  line-height: var(--interlinea);
  color: var(--texto-4);
}

/* --------------------------------------- formularios de esta vista (modal) */

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

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

.campo-con-boton .campo-control {
  flex: 1;
  min-width: 0;
}

.selector-rol {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.opcion-rol {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--cristal);
  cursor: pointer;
  transition: border-color var(--v-rapida) var(--curva), background var(--v-rapida) var(--curva);
}

.opcion-rol:hover {
  border-color: var(--borde-fuerte);
  background: var(--cristal-2);
}

.opcion-rol:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-tenue);
}

.opcion-rol:has(input:focus-visible) {
  box-shadow: var(--brillo-acento);
}

.opcion-rol input {
  margin-top: 3px;
  accent-color: var(--acento);
}

.opcion-rol-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opcion-rol-nombre {
  font-size: var(--t-m);
  color: var(--texto);
}

.opcion-rol-nota {
  font-size: var(--t-xs);
  color: var(--texto-3);
}

.paleta-color {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.muestra-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--r-redondo);
  border: 1px solid var(--borde-fuerte);
  background: var(--tono, var(--acento));
  cursor: pointer;
  transition: transform var(--v-rapida) var(--curva), box-shadow var(--v-rapida) var(--curva);
}

.muestra-color:hover {
  transform: scale(1.08);
}

.muestra-color.elegida {
  box-shadow: 0 0 0 2px var(--fondo-1), 0 0 0 4px var(--texto-2);
}

.muestra-color:focus-visible {
  outline: none;
  box-shadow: var(--brillo-acento);
}

.clave-aviso {
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-s);
  border: 1px solid var(--alerta);
  background: var(--alerta-tenue);
  font-size: var(--t-s);
  color: var(--texto);
}

.clave-caja {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--r-s);
  border: 1px solid var(--borde-fuerte);
  background: var(--cristal-hondo);
}

.clave-valor {
  flex: 1;
  min-width: 0;
  font-family: var(--fuente-mono);
  font-size: var(--t-l);
  letter-spacing: .06em;
  color: var(--oro);
  overflow-wrap: anywhere;
  user-select: all;
}

/* Datos de la contrasena recien generada */
.clave-datos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.clave-usuario {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--texto-3);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ adaptaciones */

@media (max-width: 1180px) {
  .equipo-envoltorio {
    grid-template-columns: minmax(0, 1fr);
  }

  .equipo-permisos {
    position: static;
  }
}

@media (max-width: 640px) {
  .equipo-rejilla {
    grid-template-columns: minmax(0, 1fr);
  }

  .persona {
    padding: var(--e-4);
  }

  .equipo-permisos {
    padding: var(--e-5);
  }

  .equipo-hueco {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .persona,
  .muestra-color {
    transition: none;
  }

  .persona:hover {
    transform: none;
  }
}