/* ─── TRACKBET web-app — vestido de PC (Carlos, 2026-09-30, MANUAL 29) ─────────
   "Quiero que la web-app se vea como TRACKBET, no como un teléfono grande." En
   pantalla ANGOSTA (teléfono) no cambia nada: todo lo de aquí vive dentro de
   @media (min-width: 900px), así que solo se aplica en la PC o una tableta
   apaisada. El cambio es automático por el ancho (Carlos: "AUTO"), sin botón.
   Va DESPUÉS de app.css para ganarle a las reglas del teléfono.

   Qué cambia en la PC, siguiendo la pestaña CRUCES de TRACKBET:
     - la cabecera se vuelve la barra de arriba (TRACKBET · En vivo · ES | EN ·
       cuenta · Salir · ⚙), sin la lupa: el buscador queda siempre a la vista;
     - las zonas (ACTIVOS · PASADOS · JUGADOS · HISTORIAL) suben del pie a una
       barra debajo de la cabecera, como la cr-bar de TRACKBET, sin emojis;
     - las tarjetas van en CUADRÍCULA de varias columnas (una cada 330 px, igual
       que TRACKBET), con los botones del pie del tamaño de TRACKBET;
     - la ⚙ Config deja de ser hoja de abajo y sale como ventana centrada (solo
       lo de hoy: nombre, cuenta, avisos, registro, usuarios; no se edita más);
     - no hay "tarjeta en grande" al hacer clic (app.js lo apaga en la PC).
   Los elementos que solo existen en la PC llevan la clase pc-solo. */

.pc-solo { display: none; }

@media (min-width: 900px) {
  body { font-size: 12.5px; }

  /* ── Cabecera = barra de pestañas de TRACKBET ── */
  .header { background: #141414; border-bottom: 1px solid #2a2a2a; padding: 0 10px; min-height: 36px; gap: 10px; }
  .header-left { gap: 12px; }
  .header-title { font-size: 12.5px; letter-spacing: .6px; padding: 8px 4px; }
  .pc-solo { display: flex; align-items: center; }
  .header-actions { display: flex; align-items: center; gap: 12px; }
  #btn-buscar { display: none; }
  .icon-btn { width: 30px; height: 30px; }
  .pc-cuenta { font-family: 'Lexend', sans-serif; font-size: 11px; color: #888; white-space: nowrap; }
  .pc-cuenta b { color: var(--verde); font-weight: 600; }
  .pc-salir { font: 600 10.5px 'Lexend', sans-serif; letter-spacing: .3px; color: #e05545; background: none;
              border: 1px solid rgba(224,85,69,.5); border-radius: 4px; padding: 3px 9px; cursor: pointer; }
  .pc-salir:hover { background: rgba(224,85,69,.12); }
  #idioma-pc { margin: 0; }

  /* ── Zonas arriba (la cr-bar de TRACKBET), en el orden de TRACKBET ── */
  .tabbar { order: 1; background: #141414; border-top: 0; border-bottom: 1px solid #2a2a2a; padding: 0 10px;
            gap: 2px; justify-content: flex-start; }
  .tabbar .zona { flex: none; flex-direction: row; gap: 6px; padding: 8px 14px; font-size: 11px; letter-spacing: .8px;
                  border-top: 0; border-bottom: 2px solid transparent; }
  .tabbar .zona.active { border-bottom-color: var(--zc); }
  .tabbar .zona .ico { display: none; }
  .tabbar .zona-n { position: static; font-family: 'Roboto Mono', monospace; font-size: 10px; }
  .toolbar { order: 2; display: flex !important; padding: 6px 12px !important; border-bottom: 0.5px solid var(--border); background: var(--surface); }
  .busca { width: 360px; height: 30px; }
  .busca .search-input { font-size: 13px !important; }
  .subtabs { order: 3; }
  .acciones-zona { order: 4; }
  #hf { order: 5; }

  /* ── Tarjetas en cuadrícula, como TRACKBET ── */
  .cards-container { order: 6; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px;
                     padding: 12px; align-content: start; align-items: start; }
  .cards-container > .bloque, .cards-container > .no-results, .cards-container > .hf-vacio { grid-column: 1 / -1; }
  .cr-acts .tb-btn, .cr-acts .tb-link { min-width: 0; min-height: 22px; font-size: 10px; }

  /* ── ⚙ Config como ventana centrada (no hoja de abajo) ── */
  .cfg { left: 50%; right: auto; top: 50%; bottom: auto; width: 540px; max-height: 86vh; border-radius: 14px;
         padding: 14px 18px 18px; transform: translate(-50%, -50%) scale(.97); opacity: 0; pointer-events: none;
         transition: transform .18s, opacity .18s; }
  .cfg.show { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
  .toast { bottom: 28px; }
}