/* ═══════════════════════════════════════════════════════════════
   OposicionesBot · Mobile Premium 2026
   Diseño profesional y cómodo para dispositivos móviles
   Solo se activa en pantallas ≤ 768px
   TEMA OSCURO UNIFICADO — QA MASTER FIX
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens de diseño — TEMA OSCURO ──────────────────────────── */
:root {
  --mob-bg:       #0a0e1a;
  --mob-surface:  #111827;
  --mob-card:     #1e2536;
  --mob-text:     #f1f5f9;
  --mob-text-sec: #cbd5e1;
  --mob-muted:    #94a3b8;
  --mob-gold:     #fbbf24;
  --mob-gold-lt:  #fcd34d;
  --mob-accent:   #6366f1;
  --mob-border:   rgba(255,255,255,0.08);
  --mob-shadow:   0 4px 24px rgba(0,0,0,0.3);
  --mob-r:        16px;
  --mob-r-sm:     10px;
  --mob-font:     'Inter', sans-serif;
  --mob-bottom-h: 68px;
}

/* ── BASE ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  html { scroll-behavior: smooth; }

  body {
    background: var(--mob-bg) !important;
    color: var(--mob-text) !important;
    font-family: var(--mob-font) !important;
    padding-bottom: calc(var(--mob-bottom-h) + 8px) !important;
    -webkit-font-smoothing: antialiased;
  }

  /* ── ANIQUILAR FONDOS CLAROS DE TAILWIND ─────────── */
  /* html y body: fondo oscuro sólido SIEMPRE */
  html { background: #050710 !important; }
  body { background: var(--mob-bg) !important; }
  
  /* Wildcard: TODOS los demás elementos son transparentes */
  *:not(html):not(body):not(#mob-bottom-nav):not(#tutor-window):not(#tutor-fab):not(#mobile-menu-panel):not(#mobile-menu):not(.tutor-msg):not(.mob-badge):not(button):not(a):not(input):not(select):not(textarea):not(svg):not(path):not(img):not(video) {
    background-color: transparent !important;
  }
  /* Re-aplicar fondos sólidos donde se necesitan */
  #dynamic-test-grid > div { background: var(--mob-card) !important; }
  nav:not(#mob-bottom-nav) { background: var(--mob-surface) !important; }
  #mob-bottom-nav { background: rgba(17, 24, 39, 0.95) !important; }
  #mobile-menu-panel, #mobile-menu { background: #0a0e1a !important; }
  .glass { background: var(--mob-card) !important; }

  /* ── TEXTOS: 100% LEGIBILIDAD SOBRE FONDO OSCURO ── */
  h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    font-weight: 800 !important;
  }
  p, span, label, strong, b, li, td, th,
  .text-gray-600, .text-gray-500, .text-gray-700,
  .text-gray-800, .text-gray-900,
  .text-slate-600, .text-slate-700, .text-slate-800,
  .text-slate-900, .text-black {
    color: var(--mob-text-sec) !important;
  }

  /* ── NAV: barra superior oscura ─────────────────── */
  nav:not(#mob-bottom-nav) {
    background: var(--mob-surface) !important;
    border-bottom: 1px solid var(--mob-border) !important;
    padding: 0.6rem 1rem !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
  }

  nav .max-w-7xl {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Logo */
  nav .flex.items-center.gap-2 span {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }
  nav .flex.items-center.gap-2 span .text-indigo-500,
  nav span.text-indigo-500 {
    color: var(--mob-gold) !important;
  }

  /* Icono O */
  nav .w-8.h-8.bg-indigo-600 {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  /* Ocultar links extra */
  #nav-login-btn, #nav-premium-btn, #nav-register-btn,
  #nav-profile-btn, #theme-toggle {
    display: none !important;
  }

  /* Hamburguesa */
  #hamburger-btn {
    order: -1 !important;
    margin-right: 0.5rem !important;
    background: none !important;
    border: none !important;
    padding: 6px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
  }
  #hamburger-btn:active { background: rgba(255,255,255,0.08) !important; }
  #ham-icon {
    font-size: 1.3rem !important;
    color: #ffffff !important;
  }

  /* ── HERO BADGE ─────────────────────────────────── */
  #banner-exam-real {
    background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
    border-radius: var(--mob-r) !important;
    padding: 1rem 1.1rem !important;
    margin: 0.75rem 0 1rem !important;
    color: white !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  #banner-exam-real * { color: white !important; }
  #banner-exam-real::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(249,200,66,0.25) 0%, transparent 70%);
    pointer-events: none;
  }
  #autopiloto-text {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--mob-gold-lt) !important;
    letter-spacing: 0.02em !important;
  }

  /* ── MAIN ───────────────────────────────────────── */
  main {
    padding: 0 0.75rem calc(var(--mob-bottom-h) + 1rem) !important;
  }

  /* ── TABS: chips scrollables ────────────────────── */
  .flex.overflow-x-auto,
  .overflow-x-auto {
    gap: 0.4rem !important;
    padding: 0 0 8px !important;
    scroll-snap-type: x mandatory !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  .flex.overflow-x-auto::-webkit-scrollbar,
  .overflow-x-auto::-webkit-scrollbar { display: none !important; }

  .category-tab {
    scroll-snap-align: start !important;
    white-space: nowrap !important;
    border-radius: 20px !important;
    padding: 0.4rem 0.9rem !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    background: var(--mob-surface) !important;
    color: var(--mob-muted) !important;
    border: 1px solid var(--mob-border) !important;
    transition: all 0.15s !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .category-tab.active,
  .category-tab:active {
    background: var(--mob-accent) !important;
    color: white !important;
    border-color: var(--mob-accent) !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.3) !important;
  }

  /* ── GRID 2 COL — CARDS OSCURAS ─────────────────── */
  #dynamic-test-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
    margin-top: 0.75rem !important;
  }

  #dynamic-test-grid > div {
    background: var(--mob-card) !important;
    border: 1px solid var(--mob-border) !important;
    border-radius: var(--mob-r) !important;
    box-shadow: var(--mob-shadow) !important;
    overflow: hidden !important;
    position: relative !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
    min-width: 0 !important;
  }
  #dynamic-test-grid > div:active {
    transform: scale(0.97) !important;
  }

  /* Barra de color superior */
  #dynamic-test-grid > div[data-category="justicia"]  { border-top: 3px solid #8b5cf6 !important; }
  #dynamic-test-grid > div[data-category="age"]       { border-top: 3px solid #3b82f6 !important; }
  #dynamic-test-grid > div[data-category="policia"]   { border-top: 3px solid #2563eb !important; }
  #dynamic-test-grid > div[data-category="guardia"]   { border-top: 3px solid #1d4ed8 !important; }
  #dynamic-test-grid > div[data-category="hacienda"]  { border-top: 3px solid #c9a01a !important; }
  #dynamic-test-grid > div[data-category="sanidad"]   { border-top: 3px solid #10b981 !important; }
  #dynamic-test-grid > div[data-category="prisiones"] { border-top: 3px solid #6366f1 !important; }
  #dynamic-test-grid > div[data-category="correos"]   { border-top: 3px solid #f59e0b !important; }

  /* Tipografía en cards */
  #dynamic-test-grid h2, #dynamic-test-grid h3 {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 0.25rem !important;
  }
  #dynamic-test-grid p, #dynamic-test-grid span {
    font-size: 0.62rem !important;
    color: var(--mob-muted) !important;
  }
  #dynamic-test-grid > div > div,
  #dynamic-test-grid > div > * { padding: 0.6rem !important; }

  /* Botón ENTRAR */
  #dynamic-test-grid a,
  #dynamic-test-grid button {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 0.3rem 0.6rem !important;
    -webkit-tap-highlight-color: transparent !important;
    color: var(--mob-gold) !important;
  }

  /* ── SECCIONES OCULTAS EN MÓVIL ─────────────────── */
  #how-it-works { display: none !important; }

  /* ── HERO STATS ─────────────────────────────────── */
  .grid.grid-cols-3.gap-4,
  .stats-row {
    background: var(--mob-surface) !important;
    border-radius: var(--mob-r) !important;
    box-shadow: var(--mob-shadow) !important;
    padding: 1rem !important;
    margin: 0.75rem 0 !important;
  }

  /* ── BOTTOM NAV ─────────────────────────────────── */
  #mob-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mob-bottom-h) !important;
    background: rgba(17, 24, 39, 0.95) !important;
    border-top: 1px solid var(--mob-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    z-index: 9990 !important;
    padding: 0 0.5rem env(safe-area-inset-bottom, 0) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
  }

  .mob-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 0.4rem 0.6rem !important;
    border-radius: var(--mob-r-sm) !important;
    text-decoration: none !important;
    color: var(--mob-muted) !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    transition: all 0.15s !important;
    min-width: 52px !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  .mob-nav-item.active {
    color: #ffffff !important;
    background: rgba(99,102,241,0.15) !important;
  }
  .mob-nav-item:active { transform: scale(0.92) !important; }
  .mob-nav-icon { font-size: 1.4rem !important; line-height: 1 !important; }

  /* Botón central Premium */
  .mob-nav-premium {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: white !important;
    border-radius: 14px !important;
    padding: 0.5rem 0.7rem !important;
    box-shadow: 0 4px 12px rgba(99,102,241,0.4) !important;
    transform: translateY(-8px) !important;
    gap: 2px !important;
  }
  .mob-nav-premium:active { transform: translateY(-8px) scale(0.92) !important; }
  .mob-nav-premium .mob-nav-icon { font-size: 1.2rem !important; }

  /* Badge NUEVO */
  .mob-nav-badge {
    position: absolute !important;
    top: 2px; right: 4px;
    background: #dc2626 !important;
    color: white !important;
    font-size: 0.45rem !important;
    font-weight: 900 !important;
    padding: 1px 4px !important;
    border-radius: 6px !important;
  }
  .mob-nav-item { position: relative !important; }

  /* ── INPUTS ─────────────────────────────────────── */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"] {
    font-size: 16px !important;
    border-radius: var(--mob-r-sm) !important;
    background: var(--mob-surface) !important;
    color: #ffffff !important;
    border: 1px solid var(--mob-border) !important;
  }
  input::placeholder { color: var(--mob-muted) !important; }

  /* ── GLASS PANELS ───────────────────────────────── */
  .glass {
    background: var(--mob-card) !important;
    border: 1px solid var(--mob-border) !important;
    border-radius: var(--mob-r) !important;
    box-shadow: var(--mob-shadow) !important;
  }

  /* ── ANIMACIONES ────────────────────────────────── */
  @keyframes mob-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #dynamic-test-grid > div { animation: mob-fade-up 0.3s ease both !important; }
  #dynamic-test-grid > div:nth-child(2) { animation-delay: 0.04s !important; }
  #dynamic-test-grid > div:nth-child(3) { animation-delay: 0.08s !important; }
  #dynamic-test-grid > div:nth-child(4) { animation-delay: 0.12s !important; }
  #dynamic-test-grid > div:nth-child(5) { animation-delay: 0.16s !important; }
  #dynamic-test-grid > div:nth-child(6) { animation-delay: 0.20s !important; }

  /* ── FOOTER ─────────────────────────────────────── */
  .footer-global { display: none !important; }

  /* ── MENTOR BOT ─────────────────────────────────── */
  #tutor-window {
    background: rgba(17, 24, 39, 0.95) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  #tutor-window.active { opacity: 1 !important; visibility: visible !important; }
  .tutor-msg.bot { background: rgba(255,255,255,0.05) !important; color: #e2e8f0 !important; }
  .tutor-msg.user { background: #6366f1 !important; color: #fff !important; }

  /* ── MENÚ LATERAL ───────────────────────────────── */
  #mobile-menu-panel {
    background: var(--mob-surface) !important;
  }
  #mobile-menu-panel * { color: var(--mob-text-sec) !important; }
  .mob-link { color: #e2e8f0 !important; }

  /* ── SECCIONES INTERMEDIAS (¿Por qué?, FAQ, etc.) ── */
  .bg-white\/80, .bg-white\/60, .bg-white\/40 {
    background: var(--mob-card) !important;
  }
  .rounded-3xl, .rounded-2xl {
    background: var(--mob-card) !important;
    border: 1px solid var(--mob-border) !important;
  }

  /* ── DETALLES NAV / MOBILE MENU DROPDOWN ───────────────── */
  details summary::-webkit-details-marker {
    display: none !important;
  }
  details summary {
    list-style: none !important;
  }

  /* Backdrop blur overlay when details is open */
  details#mobile-menu-details[open]::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(5, 7, 16, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 9998 !important;
    pointer-events: auto !important;
    animation: mob-fade-in 0.25s ease forwards !important;
  }
  
  @keyframes mob-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  #mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 290px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #0a0e1a !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    padding: 1.75rem 1.25rem env(safe-area-inset-bottom, 1.25rem) !important;
    box-shadow: 20px 0 80px rgba(0,0,0,0.6) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    animation: mob-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
  
  @keyframes mob-slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  #mobile-menu .mob-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 0.75rem !important;
    color: #a1a1aa !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    background: transparent !important;
  }
  
  #mobile-menu .mob-menu-item:hover,
  #mobile-menu .mob-menu-item:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
  }

  #mobile-menu .mob-menu-item.text-emerald-400 {
    color: #34d399 !important;
  }
  #mobile-menu .mob-menu-item.text-emerald-400:hover {
    background: rgba(52, 211, 153, 0.1) !important;
    color: #34d399 !important;
  }

  #mobile-menu .mob-menu-item.text-blue-400 {
    color: #60a5fa !important;
  }
  #mobile-menu .mob-menu-item.text-blue-400:hover {
    background: rgba(96, 165, 250, 0.1) !important;
    color: #60a5fa !important;
  }

  .mob-menu-scroll::-webkit-scrollbar {
    width: 4px !important;
  }
  .mob-menu-scroll::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .mob-menu-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
  }
}

/* Hide mobile menu details on desktop */
@media (min-width: 769px) {
  #mobile-menu-details {
    display: none !important;
  }
}