/* ============================================================
   EQUIPO (simulador de alineación)

   El modal del buscador se reutiliza tal cual de comparar.css
   (.modal, .modal__caja, .modal__rejilla, .modal__carta), así que
   este archivo debe cargarse DESPUÉS que comparar.css.
   ============================================================ */

.equipo {
  /* A todo el ancho, como Jugadores y Tier List */
  width: 100%;
}

/* DOS ZONAS: el campo a la izquierda (con el entrenador dentro) y a la
   derecha las pasivas arriba y los paneles de datos abajo.
   El campo se dimensiona solo para llenar su columna (.equipo__campo);
   por eso la primera columna es una FRACCIÓN y no max-content: con
   max-content la medida sería circular. */
.equipo__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
  gap: 20px;
  align-items: start;
}

/* Zona derecha: pasivas arriba, paneles abajo */
.equipo__derecha {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Abajo a la derecha: los buffos, a TODO el ancho de la zona.
   Los avisos ya no viven aquí: se fueron debajo del campo. */
.equipo__paneles {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---------------------------------------------------------
   SELECTOR DE ENTRENADOR (tira de retratos, como en el juego)
   --------------------------------------------------------- */

.equipo__entrenadores {
  margin-bottom: 20px;
  padding: 12px 16px 14px;
  background: rgba(22, 22, 22, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}

.entrenadores__etiqueta {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.entrenadores__tira {
  display: flex;
  gap: 12px;
  overflow-x: auto; /* si algún día hay muchos, se desplaza en horizontal */
  padding-bottom: 4px;
}

.ent-carta {
  flex: none;
  width: 108px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e8e8e8;
  cursor: pointer;
}

.ent-carta__marco {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 10px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(160deg, #2a2a2e 0%, #141416 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s,
    transform 0.15s;
}

.ent-carta:hover .ent-carta__marco {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Elegido: marco verde, como el recuadro del juego */
.ent-carta--activo .ent-carta__marco {
  border-color: #7ee06a;
  box-shadow: 0 0 0 2px rgba(126, 224, 106, 0.35);
}

/* Placeholder mientras no haya arte de entrenadores: las iniciales */
.ent-carta__inicial {
  font-size: 34px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 1px;
}

.ent-carta__retrato {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.ent-carta__formacion {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 4px;
  font-size: 10px;
  text-align: center;
  background: rgba(0, 0, 0, 0.65);
  color: #ffca28;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ent-carta__nombre {
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ent-carta--activo .ent-carta__nombre {
  color: #7ee06a;
  font-weight: 700;
}

/* --- Entrenador DENTRO del campo, esquina inferior derecha ---
   Va en position:absolute sobre .equipo__campo, así que no toca la
   rejilla ni el tamaño del campo. Mide como una casilla. */
.campo__entrenador {
  position: absolute;
  right: 16px;
  bottom: 20px;
  z-index: 5;
  width: var(--casilla-ancho);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e8e8e8;
  cursor: pointer;
}

.campo__entrenador .ent-carta__marco {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-color: #7ee06a;
  box-shadow: 0 0 0 2px rgba(126, 224, 106, 0.35);
}

.campo__entrenador:hover .ent-carta__marco {
  transform: translateY(-2px);
  border-color: #b6f5a8;
}

.campo__entrenador-nombre {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #7ee06a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Modal de elección de entrenador ---
   Reutiliza .modal / .modal__caja de comparar.css. Aquí la caja NO
   necesita el alto fijo del modal de jugadores (no hay filtros que
   cambien el contenido), así que se ajusta a lo que haya. */
.modal__caja--entrenadores {
  height: auto;
  max-height: 82vh;
  max-width: 720px;
}

.modal__titulo {
  flex: 1;
  margin: 0;
  align-self: center;
  font-size: 19px;
}

.ent-rejilla {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 4px 14px 18px;
  overflow-y: auto;
}

/* ---------------------------------------------------------
   ARRIBA DE LA ZONA DERECHA
   Las dos pasivas APILADAS (verde = formación, rojo = entrenador,
   el mismo código de color de sus buffos) y, en el hueco que queda
   al lado, el recuadro de requisitos de la formación.
   --------------------------------------------------------- */

.equipo__superior {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.equipo__pasivas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* --- Recuadro de requisitos (como el panel del juego) --- */
.req-form__fila {
  display: grid;
  grid-template-columns: 26px 24px minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.45);
}

.req-form__fila:last-child {
  border-bottom: 0;
}

/* Número de casilla, en amarillo como en el campo del juego */
.req-form__n {
  height: 26px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: #ffca28;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.req-form__icono img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.req-form__texto {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quién está puesto ahí ahora mismo */
.req-form__quien {
  font-size: 13px;
  text-align: right;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-form__fila--ok .req-form__n {
  border-color: #4ade80;
}

.req-form__fila--ok .req-form__quien {
  color: #9cf0b6;
}

.req-form__fila--mal .req-form__n {
  border-color: #ff6b6b;
}

.req-form__fila--mal .req-form__quien {
  color: #ffb3b3;
}

.pasiva-ent {
  display: flex;
  flex-direction: column;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.pasiva-ent__banda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background-image: url("../img/common/bg-pattern.png");
  background-size: 120px;
  background-blend-mode: soft-light;
}

.pasiva-ent--formacion .pasiva-ent__banda {
  background-color: #1f8f45;
}

.pasiva-ent--entrenador .pasiva-ent__banda {
  background-color: #b32c2c;
}

.pasiva-ent__nombre {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.pasiva-ent__estado {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}

/* Formación sin cumplir: banda apagada y texto atenuado */
.pasiva-ent--apagada .pasiva-ent__banda {
  background-color: #3f4a44;
}

.pasiva-ent--apagada .pasiva-ent__estado {
  background: #a52a2a;
}

.pasiva-ent--apagada .pasiva-ent__desc {
  opacity: 0.55;
}

.pasiva-ent__tipo {
  padding: 8px 12px 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.pasiva-ent__desc {
  padding: 4px 12px 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line; /* los \n de la descripción cortan línea */
  color: #dddddd;
}

/* ---------------------------------------------------------
   CAMPO
   --------------------------------------------------------- */

.equipo__campo-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  /* El campo se dimensiona con cqw sobre ESTA columna. El contenedor no
     puede consultarse a sí mismo, por eso va aquí y no en .equipo__campo. */
  container-type: inline-size;
}

/* EL CAMPO NO CAMBIA DE TAMAÑO AL LLENARSE: todo sale de --casilla-ancho
   (columnas --col y filas --casilla-alto) y cada casilla pinta siempre la
   misma estructura (marco + fila de nombre), así que el campo vacío y el
   campo lleno miden exactamente lo mismo. Lo que SÍ cambia --casilla-ancho
   es el tamaño de la ventana (ver el bloque de abajo).
   La rejilla tiene el DOBLE de columnas que posiciones lógicas y cada
   casilla ocupa dos: es lo que permite escalonar las formaciones
   (3 en fila -> 2/4/6, 4 en fila -> 1/3/5/7, pareja centrada -> 3/5). */
.equipo__campo {
  /* TAMAÑO: sigue SIN cambiar al llenarse (la casilla pinta siempre la
     misma estructura y las etiquetas van en absolute), pero ya no es un
     número fijo: se calcula para llenar el tercio central y, si eso lo
     dejase demasiado alto, manda la altura de la ventana, para que el
     campo entero se vea sin scroll ni zoom.
       ancho de la columna W = 8 * --col + 38   (padding 2*16 + borde 2*3)
       --casilla-ancho       = 2 * --col - 18   -> --col = (ancho+18)/2
         (los 18px de holgura son para las dos etiquetas que sobresalen
          7px cada una; sin ellos chocarían entre casillas vecinas)
       alto total = 6 filas * (ancho * 1.2) + 5*12 de gap + 46 = 7.2*ancho + 106
     De ahí: por ancho -> 25cqw - 27.5px ; por alto -> (100vh - 260)/7.2,
     donde los 260px son los 106 fijos más el sitio del título de la
     página y del pie del campo. Es el único número a ojo: si el campo se
     queda corto o se sale por abajo, subir o bajar ese 260. */
  --casilla-ancho: max(
    62px,
    min(calc(25cqw - 27.5px), calc((100vh - 260px) / 7.2), 170px)
  );
  /* La tarjeta original mide 130 de ancho por 156 de alto (130 del marco
     + 26 del nombre): la casilla mantiene ESA proporción, 1.2. */
  --casilla-alto: calc(var(--casilla-ancho) * 1.2);
  --col: calc((var(--casilla-ancho) + 18px) / 2);

  position: relative; /* referencia del entrenador, que va en absolute */
  /* TODAS las formaciones miden lo mismo. La altura sale de las 6 filas
     de referencia (la del Protagonista, que es la que más usa) y el JS
     reparte entre ellas las filas que tenga cada formación con 1fr. */
  height: calc(6 * var(--casilla-alto) + 5 * 12px + 46px);

  display: grid;
  grid-auto-rows: var(--casilla-alto);
  row-gap: 12px;
  column-gap: 0;
  width: max-content;
  max-width: 100%;
  margin-inline: auto; /* si manda la altura, queda centrado en su tercio */
  padding: 20px 16px;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(180deg, #0e6f74 0%, #0a5459 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}

.casilla {
  position: relative;
  grid-column-end: span 2; /* el inicio lo pone el JS */
  justify-self: center;
  align-self: center; /* la fila puede ser más alta que la casilla */
  width: var(--casilla-ancho);
  height: var(--casilla-alto);

  /* CONTENEDOR de tamaño: dentro, 1cqw = 1% del ancho de la casilla.
     Es lo que permite que la tarjeta se vea EXACTAMENTE igual mida lo
     que mida (ver el bloque de abajo). */
  container-type: inline-size;
}

/* El botón ES la tarjeta de jugador: hereda .tarjeta-jugador de
   componentes.css y solo se le quitan los estilos propios de <button>.
   OJO con el width: .tarjeta-jugador trae 130px fijos, y si esta regla
   desaparece el botón se sale de la casilla y descoloca todo. */
.casilla__boton {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  color: inherit;
  font: inherit;
}

.casilla__marco {
  /* el marco de la tarjeta ya es cuadrado (aspect-ratio 1/1) */
  position: relative;
}

/* ============================================================
   PROPORCIONES DE LA TARJETA DE JUGADOR  (referencia: NO TOCAR
   los números de la izquierda, son el diseño original)

   El diseño de referencia es .tarjeta-jugador de componentes.css:
   una tarjeta de 130px de ancho, con el marco CUADRADO de 130x130
   y la fila del nombre debajo. Todas sus medidas están en px sobre
   esos 130, así que aquí se reescriben como PORCENTAJE DEL ANCHO
   (valor / 130 * 100) usando cqw, y así la tarjeta se monta igual a
   cualquier tamaño mientras se mantengan las proporciones:

     borde del marco      5px  ->  3.85cqw
     radio del marco     12px  ->  9.23cqw
     aire sobre la imagen 10px ->  7.69cqw
     iconos: izquierda    6px  ->  4.62cqw   hueco 3px -> 2.31cqw
     icono de elemento   26px  -> 20.00cqw
     estrella            18px  -> 13.85cqw
     fila del nombre     26px  -> 20.00cqw   (de ahí --casilla-alto)
     texto del nombre    12px  ->  9.23cqw

     icono de posición   20x12  -> 15.38 x 9.23cqw

   La casilla monta la MISMA columna de iconos que TarjetaJugador
   (elemento, posición del jugador, estrellas) y en el mismo sitio: si
   allí cambia el orden o se añade algo, hay que replicarlo en
   crearCasilla(). Lo único de más es la etiqueta con la posición DEL
   HUECO (DC/MC/DF/PR), simplemente superpuesta arriba a la derecha.
   ============================================================ */

.casilla .tarjeta-jugador__marco {
  border-width: 3.85cqw;
  border-radius: 9.23cqw;
}

.casilla .tarjeta-jugador__imagen {
  padding-top: 7.69cqw;
}

.casilla .tarjeta-jugador__iconos {
  top: 4.62cqw;
  left: 4.62cqw;
  gap: 2.31cqw;
}

.casilla .tarjeta-jugador__posicion {
  width: 15.38cqw; /* 20px sobre 130 */
  height: 9.23cqw; /* 12px sobre 130 */
}

.casilla .tarjeta-jugador__icono {
  width: 20cqw;
  height: 20cqw;
}

.casilla .tarjeta-jugador__estrella {
  width: 13.85cqw;
  height: 13.85cqw;
}

.casilla .tarjeta-jugador__nombre {
  height: 20cqw; /* = los 26px de la tarjeta original */
  padding: 0 3.08cqw;
  font-size: 9.23cqw;
  line-height: 20cqw;
}

/* Casilla vacía: hueco del color de la posición, con el número grande */
.casilla__marco--vacio {
  background: rgba(17, 17, 17, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
  align-items: center; /* el número, centrado (la tarjeta alinea abajo) */
}

.casilla__numero {
  font-size: 26.15cqw; /* 34px sobre 130 */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
}

.casilla__boton:hover .casilla__marco--vacio {
  background: rgba(34, 34, 34, 0.75);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Número pequeño de la casilla, siempre visible */
.casilla__chapa {
  position: absolute;
  right: 3.08cqw;
  bottom: 2.31cqw;
  z-index: 3;
  min-width: 13.08cqw;
  padding: 0 3.08cqw;
  border-radius: 3.85cqw;
  background: rgba(0, 0, 0, 0.65);
  color: #ffca28;
  font-size: 8.46cqw;
  font-weight: 700;
  line-height: 13.08cqw;
  text-align: center;
}

/* La casilla vacía ya enseña el número grande: la chapa sobra */
.casilla__marco--vacio .casilla__chapa {
  display: none;
}

.casilla__quitar {
  position: absolute;
  left: 4px;
  bottom: 3px;
  z-index: 3;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  /* solo al pasar el ratón por la casilla, para no ensuciar el campo */
  opacity: 0;
  transition: opacity 0.12s;
}

.casilla:hover .casilla__quitar {
  opacity: 1;
}

.casilla__quitar:hover {
  background: #a52a2a;
}

/* La casilla que se está viendo en el panel de la derecha */
.casilla--elegida .casilla__marco {
  border-color: #ffca28;
  box-shadow: 0 0 0 3px rgba(255, 202, 40, 0.45);
}

.casilla__nombre--vacio {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

/* --- Etiquetas pegadas al cuadrado ---
   La de posición va pegada arriba a la DERECHA (como el campo del
   juego) y el requisito, si lo hay, pegado al otro lado. Van en
   position:absolute sobre .casilla, así que NO empujan nada: el campo
   mide igual con etiquetas o sin ellas. */
.casilla__tab {
  position: absolute;
  top: 3.08cqw;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15.38cqw;
  padding: 0 2.31cqw;
  border: max(1px, 1.54cqw) solid;
  background: #1b1b1b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.casilla__tab--pos {
  right: -5.38cqw;
  border-radius: 4px 6px 6px 4px;
}

.casilla__tab-icono {
  width: 18.46cqw;
  height: 10cqw;
  object-fit: contain;
  display: block;
}

.casilla__tab--DL {
  border-color: #ff6b6b;
}
.casilla__tab--MD {
  border-color: #9b9ba3;
}
.casilla__tab--DF {
  border-color: #4ade80;
}
.casilla__tab--PR {
  border-color: #facc15;
}

/* Requisito: al otro lado, con el borde en verde si se cumple y en
   rojo si no (neutro mientras la casilla está vacía) */
.casilla__tab--req {
  left: -5.38cqw;
  min-width: 16.92cqw;
  border-radius: 6px 4px 4px 6px;
  font-size: 6.92cqw;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.casilla__tab--req img {
  width: 11.54cqw;
  height: 11.54cqw;
  object-fit: contain;
  display: block;
}

.casilla__tab--pendiente {
  border-color: rgba(255, 255, 255, 0.65);
}
.casilla__tab--ok {
  border-color: #4ade80;
}
.casilla__tab--mal {
  border-color: #ff6b6b;
}

.equipo__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.equipo__vaciar {
  background: transparent;
  color: #ff9b9b;
  border: 1px solid rgba(255, 155, 155, 0.5);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}

.equipo__vaciar:hover {
  background: rgba(255, 107, 107, 0.15);
}

/* ---------------------------------------------------------
   COLUMNA CENTRAL: avisos y buffos
   --------------------------------------------------------- */

.equipo__resumen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.equipo__vacio {
  padding: 30px 20px;
  text-align: center;
  color: #dbdbdb;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
}

.resumen-bloque {
  background: rgba(0, 0, 0, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  padding: 14px 16px 16px;
}

.resumen-bloque--avisos {
  background: rgba(70, 30, 10, 0.35);
  border: 1px solid rgba(255, 180, 90, 0.3);
}

.resumen-bloque__titulo {
  font-size: 21px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

.resumen-bloque__vacio {
  color: #a5a5a5;
  font-size: 14px;
}

.resumen-bloque__sub {
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}

/* Condición rotulada ENCIMA del grupo de buffos que la necesitan,
   igual que en los aportes de la ficha de jugador */
.resumen-cond {
  margin: 10px 0 4px;
  font-size: 13px;
  font-style: italic;
  color: #ffd28a;
}

/* ---------------------------------------------------------
   PANEL DEL JUGADOR ELEGIDO
   --------------------------------------------------------- */

/* Desglose a la izquierda, resumen a la derecha */
.panel-jug__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 22px;
  align-items: start;
}

.panel-jug__lista,
.panel-jug__totales {
  min-width: 0;
}

/* La columna de totales lleva una línea que la separa del desglose */
.panel-jug__totales {
  padding-left: 22px;
  border-left: 2px solid rgba(255, 255, 255, 0.35);
}

.panel-jug__sub {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 6px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.panel-jug__totales .panel-jug__sub:not(:first-child) {
  margin-top: 18px;
}

/* Una línea del resumen: nombre a la izquierda, total a la derecha */
.total-jug {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.45);
}

.total-jug:last-child {
  border-bottom: 0;
}

.total-jug__nombre {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La potencia por técnica, en otro color para distinguirla de los stats */
.total-jug--tecnica .total-jug__nombre {
  color: #ffd28a;
}

.total-jug--otro .total-jug__nombre {
  color: rgba(255, 255, 255, 0.75);
}

.total-jug__valor {
  flex: none;
  font-size: 17px;
  font-weight: 700;
  color: #5fd97a;
}

/* Condicional: el buffo a la izquierda, la condición y de quién sale a
   la derecha. Importa tenerlos a la vista aunque hoy no sumen. */
.cond-jug {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 2px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.45);
  font-size: 14px;
}

.cond-jug:last-child {
  border-bottom: 0;
}

.cond-jug__buffo {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-weight: 700;
}

.cond-jug__buffo b {
  color: #5fd97a;
}

.cond-jug__cond {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
  max-width: 55%;
  text-align: right;
  font-style: italic;
  color: #ffd28a;
}

.cond-jug__de {
  font-style: normal;
  color: rgba(255, 255, 255, 0.75);
}

/* Acumulable: el valor de al lado es lo que suma CADA VEZ que salta,
   no un número fijo que ya tengas. Se marca en el mismo violeta que la
   ficha del jugador usa para las pasivas acumulativas. */
.cond-jug__acum {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(160, 130, 255, 0.2);
  color: #c9b8ff;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  white-space: nowrap;
}

.cond-jug--acum .cond-jug__buffo b {
  color: #c9b8ff;
}

.panel-jug__cabecera {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.22);
}

/* Sin recuadro y más grande: se ve mucho mejor quién es */
.panel-jug__marco {
  flex: none;
  width: 132px;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.panel-jug__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.panel-jug__nombre {
  font-size: 19px;
  font-weight: 700;
}

.panel-jug__meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.panel-jug__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.panel-jug__boton {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #e8e8e8;
  cursor: pointer;
}

.panel-jug__boton:hover {
  background: rgba(255, 255, 255, 0.12);
}

.panel-jug__boton--quitar {
  color: #ff9b9b;
  border-color: rgba(255, 155, 155, 0.5);
}

.panel-jug__boton--quitar:hover {
  background: rgba(255, 107, 107, 0.15);
}

/* --- Una línea de buffo, al estilo del juego ---
   Tres columnas: [nombre + valor] | caras de los beneficiados | caras de
   quien lo da. Las tres columnas son FIJAS a la derecha para que todas
   las filas del bloque queden alineadas sin necesidad de una tabla.
   En el panel de un jugador concreto la de beneficiados no se pinta
   (.buffo--sin-a). */
.buffo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 108px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  /* Separación BIEN marcada entre buffo y buffo: lo importante es ver de
     un vistazo dónde acaba uno y empieza el siguiente. */
  border-bottom: 2px solid rgba(255, 255, 255, 0.45);
  border-left: 4px solid transparent;
  border-radius: 0 6px 6px 0;
}

.buffo--sin-a {
  grid-template-columns: minmax(0, 1fr) 108px;
}

.buffo:last-child {
  border-bottom: 0;
}

/* Rótulos "Beneficiados" / "Fuente" encima de las columnas */
.buffos__cabecera {
  padding-top: 0;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

/* Origen del buffo, con el mismo verde/rojo de las pasivas */
.buffo--formacion {
  background: rgba(31, 143, 69, 0.16);
  border-left-color: #4ade80;
}

.buffo--entrenador {
  background: rgba(179, 44, 44, 0.16);
  border-left-color: #ff6b6b;
}

.buffo__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.buffo__nombre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
}

/* Sello FORMACIÓN / ENTRENADOR */
.buffo__sello {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 999px;
}

.buffo--formacion .buffo__sello {
  background: rgba(74, 222, 128, 0.22);
  color: #9cf0b6;
}

.buffo--entrenador .buffo__sello {
  background: rgba(255, 107, 107, 0.22);
  color: #ffb3b3;
}

.buffo__valor {
  flex: none;
  font-size: 18px;
  font-weight: 700;
  color: #5fd97a;
}

.buffo__valor--neg {
  color: #ff8f8f;
}

/* --- Columnas de caritas --- */
.buffo__gente {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  min-width: 0;
}

.buffo__nadie {
  color: rgba(255, 255, 255, 0.35);
}

/* SIN recuadro y más grandes: se busca reconocer la cara de un vistazo,
   no un icono. El color de rareza/origen se queda solo en el entrenador,
   donde sí distingue formación (verde) de entrenador (rojo). */
.buffo__cara {
  position: relative;
  width: 46px;
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

.buffo__cara img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* el retrato es de cuerpo entero: interesa la cara */
  object-position: top center;
}

/* El entrenador sí lleva marca: verde = formación, rojo = entrenador */
.buffo__cara--formacion,
.buffo__cara--entrenador {
  border: 2px solid;
  background: #0d0d0d;
}
.buffo__cara--formacion {
  border-color: #4ade80;
}
.buffo__cara--entrenador {
  border-color: #ff6b6b;
}

.buffo__cara-inicial {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.aviso {
  font-size: 14px;
  line-height: 1.45;
  padding: 7px 0 7px 12px;
  border-left: 3px solid;
  margin-bottom: 8px;
}

.aviso:last-child {
  margin-bottom: 0;
}

.aviso--aviso {
  border-color: #ffb45a;
  color: #ffe0bd;
}

.aviso--info {
  border-color: rgba(255, 255, 255, 0.35);
  color: #dbdbdb;
}

/* ------------------------- MÓVIL ------------------------- */

@media (max-width: 1500px) {
  .buffo {
    grid-template-columns: minmax(0, 1fr) 116px 100px;
  }

  .buffo--sin-a {
    grid-template-columns: minmax(0, 1fr) 100px;
  }
}

@media (max-width: 1300px) {
  /* Desglose y totales del jugador ya no caben en fila */
  .panel-jug__cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-jug__totales {
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.35);
  }
}

@media (max-width: 1100px) {
  /* Los requisitos bajan debajo de las pasivas */
  .equipo__superior {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  /* El campo pasa arriba y todo lo demás debajo */
  .equipo__cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .ent-carta,
  .ent-carta__marco {
    width: 82px;
  }

  .ent-carta__marco {
    height: 82px;
  }

  .resumen-bloque__titulo {
    font-size: 18px;
  }

  .buffo__nombre {
    font-size: 15px;
  }

  /* En móvil la página scrollea, así que el campo NO se limita por la
     altura de la ventana: solo por el ancho disponible. Todo lo de dentro
     de la casilla ya se reescala solo con --u; aquí solo se ajustan el
     alto total del campo (menos gap y menos padding) y la fila del nombre,
     que es lo único que no escala. */
  .equipo__campo {
    --casilla-ancho: max(62px, min(calc(25cqw - 23.5px), 92px));
    height: calc(6 * var(--casilla-alto) + 5 * 8px + 34px);
    row-gap: 8px;
    padding: 14px 8px;
  }
}

/* ============================================================
   CONTADOR DE ACUMULACIONES (panel del jugador)
   Las pasivas acumulativas apilan su efecto cada vez que salta su
   disparador; aquí se simula cuántas veces ha saltado y ese valor
   (valor x acumulaciones) entra en los TOTALES de arriba.
   ============================================================ */

.acum-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 176, 32, 0.08);
  border: 1px solid rgba(255, 196, 90, 0.35);
}

.acum-fila + .acum-fila {
  margin-top: 5px;
}

.acum-fila__nombre {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #ffd79a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acum-fila__ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.acum-fila__boton {
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.acum-fila__boton:hover {
  background: rgba(255, 255, 255, 0.18);
}

.acum-fila__n {
  min-width: 18px;
  text-align: center;
  font-weight: 700;
  color: #ffffff;
}