/* Panel de administración: Bootstrap 5 en modo oscuro con los tokens de docs/mockups/README.md.
   Los colores de marca llegan como variables desde el layout (presentacion.* de ConfigJuego). */

@font-face { font-family: 'Orbitron'; font-weight: 800; font-display: swap; src: url('../fonts/orbitron-800.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 400; font-display: swap; src: url('../fonts/chakra-petch-400.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url('../fonts/chakra-petch-600.woff2') format('woff2'); }

:root {
    --mm-primario: #FFB547;
    --mm-secundario: #5CE1E6;
    --mm-fondo: #070B1F;
    --mm-panel: #111842;
    --mm-panel-oscuro: #0D1338;
    --mm-borde: #26306B;
    --mm-texto: #E8ECFF;
    --mm-texto-suave: #A9B3E0;
    --mm-sobre-primario: #1A1204;
}

[data-bs-theme=dark] {
    --bs-body-bg: var(--mm-fondo);
    --bs-body-color: var(--mm-texto);
    --bs-body-font-family: 'Chakra Petch', system-ui, sans-serif;
    --bs-border-color: var(--mm-borde);
    --bs-secondary-color: var(--mm-texto-suave);
    --bs-link-color-rgb: 92, 225, 230;
    --bs-link-hover-color-rgb: 255, 181, 71;
}

body {
    background:
        radial-gradient(1px 1px at 20% 30%, #ffffff55, transparent),
        radial-gradient(1px 1px at 70% 60%, #ffffff44, transparent),
        radial-gradient(1.5px 1.5px at 40% 80%, #ffffff33, transparent),
        var(--mm-fondo);
    background-attachment: fixed;
    min-height: 100vh;
}

.font-marca { font-family: 'Orbitron', 'Chakra Petch', sans-serif; letter-spacing: .04em; }

.navbar-mm { background: var(--mm-panel-oscuro); border-bottom: 1px solid var(--mm-borde); }
.navbar-mm .navbar-brand { color: var(--mm-primario); font-size: 1.05rem; }
.navbar-mm .nav-link { color: var(--mm-texto-suave); }
.navbar-mm .nav-link:hover, .navbar-mm .nav-link.active { color: var(--mm-primario); }
.navbar-mm .nav-link.disabled { opacity: .45; }

.card, .list-group-item, .modal-content { background: var(--mm-panel); border-color: var(--mm-borde); }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--mm-borde); --bs-table-hover-bg: #ffffff08; }
.form-control, .form-select { background-color: var(--mm-panel-oscuro); border-color: var(--mm-borde); color: var(--mm-texto); }
.form-control:focus, .form-select:focus { background-color: var(--mm-panel-oscuro); border-color: var(--mm-secundario); box-shadow: 0 0 0 .2rem #5CE1E633; color: var(--mm-texto); }
.form-text, .text-secondary { color: var(--mm-texto-suave) !important; }

.btn-primary {
    --bs-btn-bg: var(--mm-primario); --bs-btn-border-color: var(--mm-primario); --bs-btn-color: var(--mm-sobre-primario);
    --bs-btn-hover-bg: #ffc56b; --bs-btn-hover-border-color: #ffc56b; --bs-btn-hover-color: var(--mm-sobre-primario);
    --bs-btn-active-bg: #e6a13c; --bs-btn-active-border-color: #e6a13c; --bs-btn-active-color: var(--mm-sobre-primario);
    --bs-btn-focus-shadow-rgb: 255, 181, 71; font-weight: 600;
}
.btn-outline-info { --bs-btn-color: var(--mm-secundario); --bs-btn-border-color: var(--mm-secundario); --bs-btn-hover-bg: var(--mm-secundario); --bs-btn-hover-border-color: var(--mm-secundario); --bs-btn-hover-color: #04202a; }

.estadistica { display: flex; align-items: center; gap: 1rem; }
.estadistica .icono { font-size: 1.6rem; color: var(--mm-secundario); background: var(--mm-panel-oscuro); border: 1px solid var(--mm-borde); border-radius: .75rem; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; }
.estadistica .cifra { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; line-height: 1; color: var(--mm-primario); }

.pantalla-login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.pantalla-login .card { width: min(26rem, 100%); box-shadow: 0 1.5rem 4rem #00000066; }
.pantalla-login h1 { font-size: 1.35rem; color: var(--mm-primario); }

.insignia-activo { color: #3DDC97; }
.insignia-inactivo { color: #FF8A8A; }

/* Niveles de dificultad (1 a 5): siempre llevan el número, no dependen solo del color */
.dificultad { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; border-radius: .4rem; font-size: .8rem; font-weight: 600; color: #04121a; }
.dif-1 { background: #3DDC97; }
.dif-2 { background: #9BE15D; }
.dif-3 { background: #FFD24A; }
.dif-4 { background: #FF9F43; }
.dif-5 { background: #FF6B6B; }

/* Vista previa del proyector (16:9 reducido) */
.vista-proyector { background: radial-gradient(1px 1px at 15% 25%, #ffffff66, transparent), radial-gradient(1px 1px at 80% 70%, #ffffff44, transparent), var(--mm-fondo); border: 1px solid var(--mm-borde); border-radius: .75rem; padding: 1.25rem; }
.vp-enunciado { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 1.15rem; line-height: 1.35; text-align: center; margin: 0 0 1rem; overflow-wrap: anywhere; white-space: pre-line; }
.vp-enunciado.vacio, .vp-texto.vacio { color: var(--mm-texto-suave); opacity: .6; font-weight: 400; }
#vpImagen { display: block; max-width: 100%; max-height: 11rem; margin: 0 auto .9rem; border-radius: .5rem; border: 1px solid var(--mm-borde); }
.vp-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.vp-opcion { display: flex; align-items: center; gap: .6rem; background: var(--mm-panel); border: 1px solid var(--mm-borde); border-radius: .6rem; padding: .55rem .7rem; min-height: 2.9rem; }
.vp-letra { font-family: 'Orbitron', sans-serif; color: var(--mm-primario); font-size: .95rem; }
.vp-texto { overflow-wrap: anywhere; font-size: .92rem; flex: 1; }
.vp-marca { display: none; color: #3DDC97; }
.vp-opcion.es-correcta { border-color: #3DDC97; box-shadow: inset 0 0 0 1px #3DDC9755; }
.vp-opcion.es-correcta .vp-marca { display: inline; }
@media (max-width: 575.98px) { .vp-opciones { grid-template-columns: 1fr; } }

/* Configuración global */
.campo-config .restaurar { color: var(--mm-secundario); text-decoration: none; font-size: .8rem; }
.campo-config .restaurar:hover { color: var(--mm-primario); }
.form-control-color { width: 4rem; height: 2.4rem; padding: .25rem; }
.barra-guardar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; background: var(--mm-panel-oscuro); border: 1px solid var(--mm-borde); border-radius: .75rem; box-shadow: 0 -.5rem 1.5rem #00000066; }
.nav-tabs { --bs-nav-tabs-border-color: var(--mm-borde); --bs-nav-tabs-link-active-bg: var(--mm-panel); --bs-nav-tabs-link-active-border-color: var(--mm-borde) var(--mm-borde) var(--mm-panel); --bs-nav-tabs-link-active-color: var(--mm-primario); --bs-nav-link-color: var(--mm-texto-suave); --bs-nav-link-hover-color: var(--mm-primario); }

.vista-config { --vp-fondo: #070B1F; --vp-primario: #FFB547; --vp-secundario: #5CE1E6; background: radial-gradient(1px 1px at 15% 25%, #ffffff66, transparent), radial-gradient(1px 1px at 80% 70%, #ffffff44, transparent), var(--vp-fondo); border: 1px solid var(--mm-borde); border-radius: .75rem; padding: 1.25rem; text-align: center; color: #E8ECFF; }
.vista-config #vcLogo { display: block; max-width: 8rem; max-height: 4rem; margin: 0 auto .6rem; }
.vc-juego { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; color: var(--vp-primario); margin-bottom: .6rem; overflow-wrap: anywhere; }
.vc-linea { color: var(--vp-secundario); font-size: .9rem; margin-bottom: .3rem; text-transform: capitalize; }
.vc-puntos { font-size: .9rem; margin-bottom: .9rem; }
.vc-puntos strong { color: var(--vp-primario); font-family: 'Orbitron', sans-serif; }
.vc-opcion { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--vp-primario); border-radius: .6rem; padding: .45rem .8rem; background: #ffffff0d; margin-bottom: .6rem; }
.vc-letra { font-family: 'Orbitron', sans-serif; color: var(--vp-primario); }
.vc-ultima { color: var(--vp-primario); font-weight: 600; margin-bottom: .9rem; }
.vc-consigna { border: 1px dashed var(--vp-secundario); border-radius: .6rem; padding: .5rem .7rem; font-size: .82rem; color: var(--vp-secundario); text-align: left; overflow-wrap: anywhere; }
.vc-consigna span:first-child { text-transform: capitalize; font-weight: 600; }

/* Sesiones */
.pin-grande { font-size: 2.4rem; letter-spacing: .25em; color: var(--mm-primario); line-height: 1; }
.dispositivo { padding: .85rem 0; border-bottom: 1px solid var(--mm-borde); }
.dispositivo:first-of-type { padding-top: 0; }
.dispositivo:last-of-type { border-bottom: 0; }
.qr-caja { width: min(18rem, 100%); background: #fff; border-radius: .5rem; padding: .25rem; }
.qr-caja svg { display: block; width: 100%; height: auto; }