/**
 * Modal propio del juego y pantallas de negociacion.
 *
 * Reemplaza a los cuadros del navegador: mismo lenguaje visual que el resto
 * del sistema y, en movil, una hoja que sube desde abajo.
 */

/* --- Contenedor ----------------------------------------------------------- */

.modal-juego {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.modal-juego[hidden] { display: none; }

body.con-modal { overflow: hidden; }

.modal-juego__fondo {
    position: absolute;
    inset: 0;
    background: rgba(3, 16, 12, 0.72);
    backdrop-filter: blur(2px);
}

.modal-juego__caja {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 92vh;
    background: var(--panel);
    border: 1px solid var(--borde-fuerte);
    border-bottom: 0;
    border-radius: var(--r2) var(--r2) 0 0;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.5);
    animation: modal-sube 0.18s ease-out;
}

@keyframes modal-sube {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

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

.modal-juego__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e4);
    border-bottom: 1px solid var(--borde);
}

.modal-juego__titulo {
    margin: 0;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dorado);
}

.modal-juego__cerrar {
    display: inline-flex;
    padding: var(--e1);
    color: var(--texto-suave);
    background: none;
    border: 0;
    cursor: pointer;
}

.modal-juego__cerrar:hover { color: var(--dorado); }

.modal-juego__cuerpo {
    flex: 1 1 auto;
    padding: var(--e4);
    overflow-y: auto;
}

/*
 * Foto ampliada dentro del modal: entera, sin recortar, limitada por el
 * alto de la ventana para que una foto vertical no obligue a hacer scroll.
 */
.foto-ampliada {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 70vh;
    margin-inline: auto;
    border-radius: var(--r2);
}

.modal-juego__texto { margin: 0; color: var(--texto-suave); }
.modal-juego__cargando { margin: 0; color: var(--texto-tenue); font-style: italic; }

.modal-juego__pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--e2);
    padding: var(--e4);
    border-top: 1px solid var(--borde);
}

.modal-juego__pie .boton { flex: 1 1 auto; }

@media (min-width: 576px) {
    .modal-juego { align-items: center; }

    .modal-juego__caja {
        max-width: 520px;
        border-bottom: 1px solid var(--borde-fuerte);
        border-radius: var(--r2);
    }

    .modal-juego__pie .boton { flex: 0 0 auto; }
}

/* --- Negociaciones --------------------------------------------------------- */

.negociacion {
    display: flex;
    flex-direction: column;
    gap: var(--e4);
}

.negociacion__ficha {
    padding: var(--e3);
    background: var(--panel-hueco);
    border: 1px solid var(--borde);
    border-radius: var(--r2);
}

.negociacion__nombre {
    margin: 0 0 var(--e2);
    font-weight: 700;
    color: var(--texto);
}

.negociacion__datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e1) var(--e3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.negociacion__dato {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e2);
    font-size: 0.82rem;
}

.negociacion__etiqueta { color: var(--texto-tenue); }
.negociacion__valor { font-family: var(--mono); color: var(--texto); }

.negociacion__nota {
    margin: 0;
    font-size: 0.82rem;
    color: var(--texto-suave);
}

.negociacion__aviso {
    margin: 0;
    padding: var(--e3);
    font-size: 0.82rem;
    color: var(--texto);
    background: rgba(232, 178, 63, 0.12);
    border-left: 3px solid var(--dorado);
    border-radius: var(--r1);
}

.negociacion__campo {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
}

.negociacion__campo-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e2);
}

.negociacion__campo-titulo {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texto-tenue);
}

.negociacion__campo-valor {
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--dorado);
}

.negociacion__rango {
    width: 100%;
    accent-color: var(--dorado);
}

.negociacion__rango-limites {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--texto-tenue);
}

.negociacion__lectura {
    margin: 0;
    font-size: 0.8rem;
    color: var(--texto-suave);
}

.negociacion__lectura.es-favor { color: var(--exito); }
.negociacion__lectura.es-justo { color: var(--dorado); }
.negociacion__lectura.es-contra { color: var(--peligro); }

.negociacion__opciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
}

/*
 * El animo del jugador en la mesa de un fichaje: una chapa con la palabra
 * -entusiasmado, dispuesto, dudoso, reacio- y al lado el informe del
 * ojeador sobre por que vendria o por que no.
 */
.negociacion__animo {
    display: flex;
    align-items: baseline;
    gap: var(--e2);
    margin: 0;
    font-size: 0.82rem;
    color: var(--texto-suave);
}

.negociacion__animo-chapa {
    flex: none;
    padding: 0.1rem 0.45rem;
    border-radius: var(--r1);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta);
    background: var(--texto-suave);
}

.negociacion__animo--entusiasmado .negociacion__animo-chapa { background: var(--exito); }
.negociacion__animo--dispuesto .negociacion__animo-chapa { background: var(--dorado); }
.negociacion__animo--dudoso .negociacion__animo-chapa { background: #d8913f; }
.negociacion__animo--reacio .negociacion__animo-chapa { background: var(--peligro); }

/* Lo que pidieron la ultima vez que se habló por este jugador. */
.negociacion__exigencia {
    padding: var(--e3);
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--borde-fuerte);
    border-radius: var(--r1);
}

.negociacion__exigencia-titulo {
    margin: 0 0 var(--e1);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texto-tenue);
}

.negociacion__exigencia-texto {
    margin: 0;
    font-size: 0.85rem;
    color: var(--texto);
}

.negociacion__opcion {
    flex: 1 1 auto;
    padding: var(--e2) var(--e3);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--texto-suave);
    background: var(--panel-hueco);
    border: 1px solid var(--borde);
    border-radius: var(--r1);
    cursor: pointer;
}

.negociacion__opcion:hover { border-color: var(--borde-fuerte); color: var(--texto); }

.negociacion__opcion.es-activa {
    color: var(--tinta);
    background: var(--dorado);
    border-color: var(--dorado);
}

/* --- Ofertas de cesion ------------------------------------------------------ */

.oferta-cesion {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    padding: var(--e3);
    background: var(--panel-hueco);
    border: 1px solid var(--borde);
    border-radius: var(--r2);
}

.oferta-cesion__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e2);
}

.oferta-cesion__club { color: var(--texto); }

.oferta-cesion__canon {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--dorado);
}

.oferta-cesion__detalle {
    margin: 0;
    font-size: 0.78rem;
    color: var(--texto-tenue);
}

.oferta-cesion .boton { align-self: flex-start; }

/* --- Banco de suplentes en vivo --------------------------------------------- */

.banco-vivo { display: flex; flex-direction: column; gap: var(--e3); }

.banco-vivo__nota { margin: 0; font-size: 0.8rem; color: var(--texto-suave); }

.banco-vivo__aviso {
    margin: 0;
    padding: var(--e2) var(--e3);
    font-size: 0.82rem;
    border-radius: var(--r1);
    background: var(--panel-hueco);
}

.banco-vivo__aviso.es-favor { color: var(--exito); border-left: 3px solid var(--exito); }
.banco-vivo__aviso.es-contra { color: var(--peligro); border-left: 3px solid var(--peligro); }

.banco-vivo__columnas {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
}

.banco-vivo__titulo {
    margin: 0 0 var(--e2);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dorado);
}

.banco-vivo__lista {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    max-height: 40vh;
    overflow-y: auto;
}

.banco-vivo__vacio { margin: 0; font-size: 0.8rem; font-style: italic; color: var(--texto-tenue); }

.banco-vivo__hechos {
    margin: 0;
    padding-left: var(--e4);
    font-size: 0.78rem;
    color: var(--texto-tenue);
}

.ficha-vivo {
    display: flex;
    align-items: center;
    gap: var(--e2);
    width: 100%;
    padding: var(--e2);
    text-align: left;
    color: var(--texto);
    background: var(--panel-hueco);
    border: 1px solid var(--borde);
    border-radius: var(--r1);
    cursor: pointer;
}

.ficha-vivo:hover { border-color: var(--borde-fuerte); }

.ficha-vivo.es-elegida {
    border-color: var(--dorado);
    background: rgba(232, 178, 63, 0.14);
}

.ficha-vivo__dorsal {
    flex: none;
    width: 2rem;
    font-family: var(--mono);
    font-weight: 700;
    text-align: center;
    color: var(--dorado);
}

.ficha-vivo__datos { display: flex; flex-direction: column; min-width: 0; }
.ficha-vivo__nombre { font-size: 0.85rem; }
.ficha-vivo__detalle { font-size: 0.72rem; color: var(--texto-tenue); }

@media (min-width: 576px) {
    .banco-vivo__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Tactica desde el banco -------------------------------------------------- */

.planteo-vivo { display: flex; flex-direction: column; gap: var(--e3); }

.planteo-vivo__grupo { display: flex; flex-direction: column; gap: var(--e2); }

.planteo-vivo__ayuda {
    margin: 0;
    font-size: 0.76rem;
    color: var(--texto-tenue);
}

.planteo-vivo__opciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
}