/* =========================================================
   1. VARIABLES Y TEMA
========================================================= */
:root { --card-bg: #ffffff; --card-border: #ebe9f1; --card-text-title: #5e5873; --card-text-desc: #6e6b7b; --card-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1); --input-bg: #f3f2f7; --input-text: #5e5873; }
.force-dark-mode { --card-bg: #283046 !important; --card-border: #3b4253 !important; --card-text-title: #d0d2d6 !important; --card-text-desc: #b4b7bd !important; --card-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.24) !important; --input-bg: #161d31 !important; --input-text: #d0d2d6 !important; }

/* =========================================================
   2. LISTA DE MISIONES (GRID)
========================================================= */
#universal-storage { opacity: 0; transition: opacity 0.5s ease-in-out; }
#universal-storage.content-ready { opacity: 1; }
#universal-storage.list-mode { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 25px !important; perspective: 1000px; }
#universal-storage.list-mode .eTitle, #universal-storage.list-mode .eMessage, #universal-storage.list-mode br { display: none !important; }

/* =========================================================
   3. TARJETAS (ACADEMY CARD)
========================================================= */
.academy-card { background-color: var(--card-bg) !important; border: 1px solid var(--card-border) !important; color: var(--card-text-title) !important; transition: transform 0.1s ease, box-shadow 0.3s ease, background-color 0.3s ease; position: relative; overflow: hidden; transform-style: preserve-3d; box-shadow: var(--card-shadow); border-radius: 0.428rem; display: flex; flex-direction: column; }
.academy-card:hover { border-color: #7367f0 !important; box-shadow: 0 0 20px rgba(115, 103, 240, 0.3) !important; z-index: 10; }
.academy-card .card-title { color: var(--card-text-title) !important; font-weight: 600; }
.academy-card .card-desc { color: var(--card-text-desc) !important; }
.card-img-wrapper { position: relative; height: 160px !important; width: 100% !important; overflow: hidden; border-radius: 0.428rem; transform: translateZ(20px); background-color: #000; flex-shrink: 0; }
.academy-card img { object-fit: cover !important; object-position: center top !important; height: 100% !important; width: 100% !important; transition: transform 0.5s ease; display: block; }
.academy-card:hover img { transform: scale(1.05); }
.academy-card.is-completed img { filter: blur(4px) grayscale(60%); }
.completed-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; opacity: 0; transition: opacity 0.3s; }
.academy-card.is-completed .completed-overlay { opacity: 1; }
.check-icon { font-size: 3rem; color: #28c76f; filter: drop-shadow(0 0 10px rgba(0,0,0,0.8)); animation: bounceIn 0.5s; }
.cat-badge { position: absolute; top: 10px; left: 10px; font-size: 0.7rem; font-weight: 800; padding: 6px 12px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; z-index: 5; color: #fff !important; box-shadow: 0 4px 10px rgba(0,0,0,0.4); text-shadow: 0 1px 2px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); }

/* =========================================================
   4. ESTILOS BASE DE PRUEBAS (POR DEFECTO SE VEN)
   (Antes esto requería body.mode-trivia, ahora es global)
========================================================= */
/* Inputs y Opciones visibles y bonitos */
.eVariant { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; padding: 12px 15px !important; margin-bottom: 8px !important; background-color: var(--input-bg) !important; border: 1px solid var(--card-border) !important; border-radius: 8px !important; cursor: pointer !important; }
.eVariant:hover { background-color: rgba(115, 103, 240, 0.1) !important; border-color: #7367f0 !important; }
.eVariant label { margin: 0 !important; cursor: pointer !important; line-height: 1.4 !important; display: inline-block !important; color: var(--input-text) !important; width: 100% !important; }
.eVariant input { margin: 0 15px 0 0 !important; width: 20px !important; height: 20px !important; display: inline-block !important; flex-shrink: 0 !important; cursor: pointer !important; position: static !important; opacity: 1 !important; }
/* Botón bonito y visible */
#TstSbm, .btn-victory { display: block !important; width: 100% !important; max-width: 300px !important; margin: 20px auto !important; padding: 12px 20px !important; background: linear-gradient(135deg, #7367f0 0%, #ce9ffc 100%) !important; color: white !important; font-weight: bold !important; border: none !important; border-radius: 6px !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 4px 15px rgba(115, 103, 240, 0.4) !important; }
#TstSbm:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(115, 103, 240, 0.6) !important; }
/* Contenedor de acciones visible */
.tst-actions { display: block !important; text-align: center !important; margin-top: 20px !important; }
/* Reset de tablas */
#testBlockD, #testBlockD table, #testBlockD tbody, #testBlockD tr, #testBlockD td { display: block !important; width: 100% !important; border: none !important; padding: 0 !important; margin: 0 !important; }
/* Ocultar elementos feos siempre */
.tst-progress, .tst-progress hr, #testBlockD hr { display: none !important; }

/* =========================================================
   5. MODO JUEGO (SI TIENE LA CLASE, LO OCULTA TODO)
========================================================= */
body.mode-game .eVariant { background: transparent !important; padding: 0 !important; margin: 0 !important; height: 0 !important; pointer-events: none !important; border: none !important; }
body.mode-game .eVariant input, body.mode-game #TstSbm { display: none !important; }
body.mode-game .eVariant label { font-size: 0 !important; } 
body.mode-game .eVariant label .modal { font-size: 1rem !important; pointer-events: auto !important; }