/* =========================================================================
   Futbol Manager - pantalla del estadio

   El estadio se maneja mirando: un plano aereo que se dibuja con el nivel
   real de cada instalacion, puntos calientes sobre el plano y tarjetas de
   obra abajo. Usa los tokens de styles.css.

   Orden del archivo:
     1. Cabecera y estrellas
     2. Plano del recinto
     3. Puntos calientes
     4. Marcadores del dia de partido
     5. Obras en curso
     6. Instalaciones
     7. Puntos de quiebre
   ========================================================================= */

/* =========================================================================
   1. Cabecera
   ========================================================================= */

.estadio__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e3);
    margin-bottom: var(--e4);
}

.estadio__estrellas {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--borde);
    border-radius: var(--r4);
    background: var(--panel-hueco);
    font-size: 1.15rem;
}

.estadio__estrellas-nota {
    margin-left: var(--e2);
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--texto-suave);
}

.estadio__vista {
    display: grid;
    gap: var(--e4);
    grid-template-columns: 1fr;
    margin-bottom: var(--e5);
}

/* =========================================================================
   2. Plano del recinto
   ========================================================================= */

.plano {
    position: relative;
    margin: 0;
    padding: var(--e2) var(--e2) 0;
    border: 1px solid var(--borde);
    border-radius: var(--r3);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(47, 167, 104, 0.16), transparent 60%),
        var(--fondo-alto);
    box-shadow: var(--sombra2);
}

/*
 * Los puntos calientes se ubican en porcentaje sobre el lienzo, no sobre la
 * figura: si tomaran la figura entera, el pie de foto les correria la
 * referencia y los de abajo caerian fuera del recinto.
 */
.plano__lienzo {
    position: relative;
}

.plano__dibujo {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * El estadio es un render visto desde arriba (includes/images/estadio/
 * estadio-plano.webp). Encima, dos capas que siguen al club: el publico
 * enciende la tribuna segun la ocupacion y las torres brillan segun el
 * nivel de las luces, que ademas aviva todo el render.
 */
.plano__render { filter: brightness(0.92) saturate(0.95); }

.plano[data-luces="3"] .plano__render { filter: none; }
.plano[data-luces="4"] .plano__render { filter: brightness(1.06) saturate(1.05); }
.plano[data-luces="5"] .plano__render { filter: brightness(1.12) saturate(1.1); }

/* El publico: cuanto mas llena la cancha, mas encendida la tribuna */
.plano__publico {
    fill: var(--dorado);
    opacity: 0;
    mix-blend-mode: soft-light;
    transition: opacity 0.4s ease;
}

.plano[data-ocupacion="10"] .plano__publico  { opacity: 0.08; }
.plano[data-ocupacion="20"] .plano__publico  { opacity: 0.14; }
.plano[data-ocupacion="30"] .plano__publico  { opacity: 0.2; }
.plano[data-ocupacion="40"] .plano__publico  { opacity: 0.26; }
.plano[data-ocupacion="50"] .plano__publico  { opacity: 0.32; }
.plano[data-ocupacion="60"] .plano__publico  { opacity: 0.38; }
.plano[data-ocupacion="70"] .plano__publico  { opacity: 0.45; }
.plano[data-ocupacion="80"] .plano__publico  { opacity: 0.52; }
.plano[data-ocupacion="90"] .plano__publico  { opacity: 0.6; }
.plano[data-ocupacion="100"] .plano__publico { opacity: 0.68; }

/* Torres de iluminacion --------------------------------------------------- */

.plano__halo {
    fill: var(--dorado);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.plano[data-luces="2"] .plano__halo { opacity: 0.10; }
.plano[data-luces="3"] .plano__halo { opacity: 0.18; }
.plano[data-luces="4"] .plano__halo { opacity: 0.26; }
.plano[data-luces="5"] .plano__halo { opacity: 0.34; }

/* Con las luces viejas, dos de las torres casi no alumbran. */
.plano[data-luces="1"] .plano__torre--2,
.plano[data-luces="1"] .plano__torre--3 {
    opacity: 0;
}

/* =========================================================================
   3. Puntos calientes
   ========================================================================= */

.plano__punto {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    background: var(--panel);
    color: var(--texto-suave);
    cursor: pointer;
    box-shadow: var(--sombra2);
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.plano__punto:hover,
.plano__punto:focus-visible {
    transform: translate(-50%, -50%) scale(1.14);
    border-color: var(--dorado);
    background: var(--panel-alto);
    color: var(--dorado-claro);
}

.plano__punto.es-elegido {
    border-color: var(--dorado);
    color: var(--dorado);
}

.plano__punto-icono { display: flex; }

/* Chapita con el nivel, siempre visible */
.plano__punto-nivel {
    position: absolute;
    right: -0.35rem;
    bottom: -0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--panel-hueco);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
}

.plano__punto[data-nivel="1"] .plano__punto-nivel { background: #6b6257; color: #f2ead8; }
.plano__punto[data-nivel="2"] .plano__punto-nivel { background: #8a6a2f; color: #fff6e2; }
.plano__punto[data-nivel="3"] .plano__punto-nivel { background: var(--dorado-oscuro); color: #fff6e2; }
.plano__punto[data-nivel="4"] .plano__punto-nivel { background: var(--dorado); color: var(--tinta); }
.plano__punto[data-nivel="5"] .plano__punto-nivel { background: var(--exito); color: var(--tinta); }

/* El nombre aparece al pasar por encima o al llegar con el teclado. */
.plano__punto-nombre {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.15rem 0.5rem;
    border-radius: var(--r1);
    background: var(--tinta);
    color: var(--texto);
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.plano__punto:hover .plano__punto-nombre,
.plano__punto:focus-visible .plano__punto-nombre,
.plano__punto.es-elegido .plano__punto-nombre {
    opacity: 1;
}

/* La obra en marcha late sobre el plano. */
.plano__punto.es-en-obra {
    border-color: var(--aviso);
    color: var(--aviso);
    animation: obra-latido 1.8s ease-in-out infinite;
}

@keyframes obra-latido {
    0%, 100% { box-shadow: var(--sombra2); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 185, 90, 0.18); }
}

/* Ubicacion de cada instalacion sobre el recinto ------------------------- */

.plano__punto--accesos       { top: 13%; left: 27%; }
.plano__punto--capacidad     { top: 13%; left: 45%; }
.plano__punto--luces         { top: 13%; left: 63%; }
.plano__punto--palcos-prensa { top: 13%; left: 79%; }

.plano__punto--asientos      { top: 33%; left: 12%; }
.plano__punto--banos         { top: 50%; left: 9%; }
.plano__punto--climatizacion { top: 67%; left: 12%; }

.plano__punto--palcos-vip    { top: 33%; left: 88%; }
.plano__punto--restaurantes  { top: 50%; left: 91%; }
.plano__punto--cafeterias    { top: 67%; left: 88%; }

.plano__punto--parking       { top: 87%; left: 27%; }
.plano__punto--tiendas       { top: 87%; left: 45%; }
.plano__punto--vestuarios    { top: 87%; left: 63%; }
.plano__punto--enfermeria    { top: 87%; left: 79%; }

/* =========================================================================
   4. Marcadores del dia de partido
   ========================================================================= */

/*
 * Los marcadores del dia de partido van debajo del precio, los tres en una
 * fila desde tablet; en el telefono se apilan.
 */
.estadio__marcadores {
    display: grid;
    gap: var(--e3);
    align-content: start;
}

@media (min-width: 768px) {
    .estadio__marcadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.marcador {
    padding: var(--e3) var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--r3);
    background: var(--panel);
}

.marcador__titulo {
    margin: 0 0 var(--e1);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.marcador__valor {
    margin: 0 0 var(--e2);
    font-family: var(--mono);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--dorado);
}

.marcador__unidad {
    font-size: 0.9rem;
    color: var(--texto-tenue);
}

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

.barra--gruesa { width: 100%; height: 12px; border-radius: 6px; }
.barra--obra { width: 100%; height: 10px; }

.marcador__cifras {
    display: grid;
    gap: var(--e2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.cifra__rotulo {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.cifra__valor {
    font-family: var(--mono);
    font-size: 0.95rem;
    color: var(--texto);
}

.cifra__valor--gasto { color: var(--peligro); }

/* =========================================================================
   5. Obras en curso
   ========================================================================= */

.obras { margin-bottom: var(--e5); }

.obras__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    margin-bottom: var(--e3);
}

.obras__cabecera .panel__titulo {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    margin: 0;
}

.obras__lista {
    display: grid;
    gap: var(--e3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.obra {
    display: flex;
    gap: var(--e3);
    padding: var(--e3);
    border: 1px solid var(--aviso);
    border-radius: var(--r2);
    background: rgba(239, 185, 90, 0.07);
}

.obra__datos { flex: 1 1 auto; min-width: 0; }

.obra__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    margin: 0 0 var(--e1);
    font-size: 0.98rem;
}

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

.obra__semanas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2) var(--e3);
    margin: var(--e2) 0 0;
    font-size: 0.78rem;
}

.obra__marca {
    font-family: var(--mono);
    color: var(--texto-suave);
}

.obra__marca--resta { color: var(--aviso); font-weight: 700; }
.obra__marca--tenue { color: var(--texto-tenue); }

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

/* La barra de obra se distingue de las de nivel: es de albanileria. */
.barra--obra .barra__relleno {
    background: repeating-linear-gradient(
        45deg,
        var(--aviso) 0 6px,
        var(--dorado-oscuro) 6px 12px
    );
}

/* =========================================================================
   6. Instalaciones
   ========================================================================= */

/*
 * La rejilla de instalaciones no es un panel: es una seccion suelta. Sin
 * este margen quedaba pegada al panel del precio de la entrada.
 */
/* Va en un panel, como las obras en curso: el mismo fondo que las engloba. */
.instalaciones {
    display: block;
    margin-bottom: var(--e6);
}

.instalaciones__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    margin-bottom: var(--e4);
}

.instalaciones__cabecera .panel__titulo { margin: 0; }

/*
 * Los filtros son chapas sueltas, no el bloque de formulario que styles.css
 * le da por defecto a .filtros: se le saca el fondo, el borde y el relleno.
 */
.instalaciones__cabecera .filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.filtro {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r4);
    background: transparent;
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filtro:hover { border-color: var(--dorado); color: var(--dorado-claro); }

.filtro.es-activo {
    background: var(--dorado);
    border-color: var(--dorado);
    color: var(--tinta);
}

.instalaciones__rejilla {
    display: grid;
    gap: var(--e4);
    grid-template-columns: 1fr;
}

.instalacion {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e3) var(--e3) var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r3);
    background: var(--panel);
    scroll-margin-top: calc(var(--barra-alto) + var(--e5));
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* El nivel lo cuenta la escalera; la tarjeta solo se levanta al pasar. */
.instalacion:hover { border-color: var(--borde-fuerte); }

/*
 * Foto de fondo de la instalacion. Va detras de todo y bastante tapada por
 * un degradado del color de la tarjeta: se ve arriba, detras del nombre, y
 * casi nada abajo, donde estan los datos chicos y el precio. Apagada de
 * color, para que ninguna le gane a las otras catorce.
 */
/* El fondo con foto es el de styles.css (.con-foto, .foto-fondo). */
.instalacion.con-foto .instalacion__titulo,
.instalacion.con-foto .instalacion__resumen,
.instalacion.con-foto .instalacion__obra-titulo {
    text-shadow: 0 1px 6px rgba(6, 22, 17, 0.95), 0 0 2px rgba(6, 22, 17, 0.8);
}

.instalacion.es-en-obra { border-color: var(--aviso); }
.instalacion.es-tope { background: linear-gradient(180deg, rgba(111, 216, 152, 0.07), var(--panel)); }

.instalacion.es-destacada {
    border-color: var(--dorado);
    box-shadow: 0 0 0 3px rgba(232, 178, 63, 0.22);
    transform: translateY(-2px);
}

.instalacion__cabecera {
    display: flex;
    justify-content: center;
    text-align: center;
}

.instalacion__titulo { margin: 0; font-size: 1.05rem; }

/* Escalera de niveles: cinco escalones que se van encendiendo. */
.escalera {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.escalera__paso {
    flex: 1 1 0;
    height: 10px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.25s ease;
}

.escalera__paso.es-hecho {
    background: linear-gradient(90deg, var(--cesped-claro), var(--dorado));
}

.escalera__paso.es-obra {
    background: repeating-linear-gradient(
        45deg,
        var(--aviso) 0 5px,
        var(--dorado-oscuro) 5px 10px
    );
}

.instalacion__salto,
.instalacion__obra {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--e2);
    text-align: center;
}

/* En obra no hay boton: el avance se centra en todo el alto libre. */
.instalacion__obra { justify-content: center; }

/*
 * La proxima mejora, lo que suma y plazo con mantenimiento: ocupan el alto
 * que queda entre la escalera y el boton, y se centran en el.
 */
.instalacion__resumen {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    max-width: 100%;
}

/* La barra de avance y el boton van a lo ancho aunque el bloque centre. */
.instalacion__obra .barra,
.instalacion__salto form { align-self: stretch; }

.instalacion__obra-titulo {
    margin: 0;
    font-size: 0.84rem;
    color: var(--texto);
}

/* La proxima mejora: una flecha y su nombre, sin rotulos. */
.instalacion__proximo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e1);
    max-width: 100%;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--texto);
}

.instalacion__proximo .icono { flex: none; color: var(--dorado); }

.instalacion__proximo span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Plazo y mantenimiento: dos datos chicos con su icono. */
.instalacion__datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e1) var(--e3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--texto-suave);
}

.instalacion__datos li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.instalacion__datos .icono { color: var(--texto-tenue); }

/* Lo principal que suma la mejora va primero, en su propia linea y en verde. */
.instalacion__gana {
    flex-basis: 100%;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--exito);
}

/* El boton lleva el precio: se lee que se hace y cuanto sale. */
.instalacion__boton {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: var(--e2);
}

.instalacion__precio {
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 0;
}

.instalacion__obra-nota {
    margin: var(--e2) 0 0;
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--aviso);
}

.instalacion__tope {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--exito);
}

.chapas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    margin: 0 0 var(--e2);
    padding: 0;
    list-style: none;
}

.chapas .chapa {
    min-width: 0;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
}

.instalaciones__vacio {
    margin: var(--e4) 0 0;
    padding: var(--e4);
    border: 1px dashed var(--borde);
    border-radius: var(--r2);
    text-align: center;
    color: var(--texto-tenue);
}

/* =========================================================================
   7. Puntos de quiebre
   ========================================================================= */

@media (min-width: 600px) {
    /* Con las tarjetas una al lado de la otra hace falta mas aire entre ellas. */
    /*
     * Tarjetas mas anchas y altas: tres por fila en escritorio y dos en
     * tablet, asi la foto de fondo tiene lugar para verse.
     */
    .instalaciones__rejilla {
        gap: var(--e4);
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

    .instalacion {
        min-height: 300px;
        padding: var(--e4);
    }

    .marcador__cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    /* El plano va solo: centrado y sin crecer mas de lo que se lee bien. */
    .estadio__vista {
        grid-template-columns: minmax(0, 860px);
        justify-content: center;
    }

    .marcador__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .plano__punto { width: 2.9rem; height: 2.9rem; }
}

/* En pantallas chicas el plano se achica: los puntos tambien. */
@media (max-width: 480px) {
    .plano__punto { width: 2.1rem; height: 2.1rem; }
    .plano__punto-nivel { width: 1rem; height: 1rem; font-size: 0.6rem; }
    .plano__punto .icono { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .plano__punto,
    .plano__punto.es-en-obra,
    .instalacion,
    .escalera__paso {
        animation: none;
        transition: none;
    }
}

/*
 * Cifras del dia de partido: van debajo del plano y a todo el ancho, para
 * no apilarse en la columna lateral dejando el resto vacio.
 */
.cifras-estadio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e2);
    /*
     * Arriba van cerca del plano, del que son la lectura numerica; abajo
     * llevan la separacion normal entre paneles para no quedar pegadas a
     * las obras, que son otro tema.
     */
    margin-top: var(--e3);
    margin-bottom: var(--e5);
}

@media (min-width: 600px) {
    .cifras-estadio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .cifras-estadio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}