/*
========================================================
EMPIR.IA — SUPERVISOR V1 · B.3.3

Complemento de styles.css, no sustituto.

El arnes del asesor ya define el lenguaje visual del
producto: colores, tipografia, .panel, .btn, .lista,
.pastilla, .vacio y .oculto. Esta hoja anade UNICAMENTE lo
que el supervisor necesita y el asesor no: dos columnas y
las filas seleccionables.

Duplicar los tokens aqui habria creado dos productos que se
parecen hasta que uno de los dos cambia.
========================================================
*/

.cabecera-sup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cabecera-derecha {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quien-sup {
  margin: 0;
  color: var(--tenue);
  font-size: 13px;
}

/* ------------------------------------------------
 * Dos columnas
 * ------------------------------------------------
 *
 * A partir de 860 px, asesores a la izquierda y practicas a
 * la derecha. Por debajo se apilan: la lista de asesores
 * primero, que es por donde se empieza.
 */

/*
 * styles.css limita .paso a 640 px, que es el ancho de una
 * columna de lectura y el que necesita el asesor. Supervision
 * es la unica pantalla del producto con dos columnas, asi que
 * levanta ese techo para si misma en lugar de bajarselo a
 * todos.
 */
#paso-supervision {
  max-width: 1100px;
}

.dos-paneles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

@media (min-width: 860px) {
  .dos-paneles {
    grid-template-columns: minmax(240px, 320px) 1fr;
  }
}

/* ------------------------------------------------
 * Asesores
 * ------------------------------------------------ */

/*
 * `.lista li` de styles.css es flex, con borde propio y cursor
 * de pulsable. Le sirve a las listas del asesor y no a estas:
 * aqui el borde y lo pulsable los lleva el BOTON de cada fila,
 * y una practica no se pulsa todavia —abrir su resultado es
 * B.3.5—, asi que un cursor de mano prometeria algo que no
 * ocurre.
 *
 * Se neutraliza para estas dos listas y cada fila vuelve a
 * declarar lo suyo, en lugar de heredar por casualidad.
 */
.lista-asesores li,
.lista-asignables li,
.lista-practicas li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: default;
}

.lista-asesores li:hover,
.lista-asignables li:hover,
.lista-practicas li:hover {
  border-color: transparent;
}

.lista-asesores {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-asesores li + li {
  margin-top: 6px;
}

.asesor-boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: transparent;
  color: var(--texto);

  font: inherit;
  text-align: left;
  cursor: pointer;
}

.asesor-boton:hover {
  border-color: var(--acento);
}

.fila-asesor.elegida .asesor-boton {
  border-color: var(--acento);
  background: rgba(78, 161, 255, 0.10);
}

.asesor-nombre {
  font-weight: 600;
}

/*
 * El inactivo se atenua en vez de esconderse: sigue formando
 * parte del equipo y su historial existe. Lo que cambia es
 * que no puede recibir practicas nuevas.
 */
.pastilla.apagada {
  opacity: 0.55;
}

.pastilla.realizada {
  border-color: var(--verde);
  color: var(--verde);
}

/* ------------------------------------------------
 * Prácticas
 * ------------------------------------------------ */

.asesor-elegido {
  display: flex;
  align-items: center;
  gap: 10px;

  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--borde);
}

.asesor-elegido-nombre {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

/* ------------------------------------------------
 * Asignar práctica  ·  B.3.4
 * ------------------------------------------------ */

.asignar {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--borde);
}

.asignar-titulo {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tenue);
}

.lista-asignables {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.lista-asignables li + li {
  margin-top: 6px;
}

.asignable-boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: transparent;
  color: var(--texto);

  font: inherit;
  text-align: left;
  cursor: pointer;
}

.asignable-boton:hover {
  border-color: var(--acento);
}

.fila-asignable.elegida .asignable-boton {
  border-color: var(--acento);
  background: rgba(78, 161, 255, 0.10);
}

.asignable-ejercicio {
  font-weight: 600;
}

/*
 * El boton deshabilitado se ve deshabilitado. Un boton que
 * parece pulsable y no hace nada al pulsarlo se lee como una
 * aplicacion rota, no como una eleccion pendiente.
 */
#asignar-boton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.confirmacion {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--acento);
  border-radius: 8px;
}

.confirmacion-pregunta {
  margin: 0 0 10px;
  font-weight: 600;
}

.confirmacion-acciones {
  display: flex;
  gap: 8px;
}

.nota.bueno {
  color: var(--verde);
}

.nota.malo {
  color: var(--rojo);
}

.lista-practicas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-practicas li.fila-practica {
  padding: 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
}

.lista-practicas li + li {
  margin-top: 8px;
}

.practica-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.practica-ejercicio {
  font-weight: 600;
}

.practica-detalle {
  margin: 6px 0 0;
  color: var(--tenue);
  font-size: 13px;
}

/* ------------------------------------------------
 * Resultado  ·  B.3.5
 * ------------------------------------------------ */

.ver-resultado {
  margin-top: 10px;
}

/*
 * La vuelta va ARRIBA, no al final.
 *
 * Un resultado es largo: si la unica salida estuviera debajo de
 * las recomendaciones, volver exigiria recorrer la pantalla
 * entera. Se queda donde se entra.
 */
#volver-practicas {
  margin-bottom: 16px;
}

/*
 * La rejilla del resultado la define styles.css desde B.3.7 y
 * es la MISMA para el asesor y para el supervisor. La regla
 * que habia aqui —id + clase— ganaba por especificidad y
 * habria dejado al supervisor en una sola columna mientras el
 * asesor pasaba a dashboard. Dos pantallas del mismo producto
 * componiendo distinto no es una decision, es un descuido.
 */

/* ------------------------------------------------
 * COMPOSICION DE ESCRITORIO — B.3.7 (pulido)
 * ------------------------------------------------
 *
 * EL PROBLEMA, MEDIDO
 *
 * A 1440 px el bloque de resultado quedaba correctamente
 * centrado —112 px a un lado, 128 al otro— y aun asi la
 * pantalla se leia descolgada hacia la izquierda.
 *
 * La causa no estaba en el bloque sino en la CABECERA. Vive
 * fuera de .flujo y es de borde a borde, asi que "EMPIR.IA"
 * arrancaba en x=24 mientras las tarjetas empezaban en x=112.
 * El ojo toma el borde de la cabecera como el margen de la
 * pagina, y desde ahi el contenido parece flotar. En un
 * monitor de 1920 el desfase pasa de 88 px a mas de 300.
 *
 * LA CORRECCION
 *
 * Dos cambios, ninguno estructural.
 */

/*
 * El ancho de la columna de supervision, en un solo sitio: lo
 * usan la cabecera y el resultado, y tienen que coincidir
 * exactamente o vuelve el desfase que esto corrige.
 */
:root {
  --ancho-supervision: 1320px;
}

/*
 * 1 · La cabecera comparte linea con el contenido.
 *
 * Se ajusta el PADDING, no el ancho: asi el filete inferior
 * sigue cruzando la pantalla entera —es un elemento de diseno,
 * no un accidente— y solo se mueve el texto.
 *
 * La formula centra el contenido de la cabecera sobre la misma
 * columna que .flujo centra debajo. Cuando la ventana es mas
 * estrecha que esa columna, max() devuelve los 24 px de
 * siempre: por debajo de ~1370 px no cambia absolutamente
 * nada, y a 420 px se comporta igual que antes.
 */
.cabecera-sup {
  padding-inline: max(24px, calc((100% - var(--ancho-supervision)) / 2));
}

/*
 * 2 · Un techo algo mas alto para el resultado.
 *
 * De 1200 a 1320. Es un 10 % mas, no una interfaz a pantalla
 * completa: cada mitad de la rejilla 6+6 pasa de 592 a 652 px,
 * que sigue siendo una linea comoda de leer para vinetas
 * cortas. Estirar las tarjetas hasta el borde habria resuelto
 * el hueco a costa de la legibilidad.
 *
 * Se levanta el techo AQUI y no en styles.css, igual que hizo
 * #paso-supervision con sus 1100: supervision se sube el suyo
 * en lugar de bajarselo —o subirselo— a todos. El resultado
 * del asesor conserva sus 1200.
 */
#paso-resultado {
  max-width: var(--ancho-supervision);
}