/* ═══════════════════════════════════════════════════════════
   hub.css — Estilos del Hub de Juegos
   EAN Elemental v0.8
   Importado desde juegos/hub.html (extraído en v0.7).
   Requiere: ../css/main.css (variables :root)
═══════════════════════════════════════════════════════════ */

/* ── Layout Hub ──────────────────────────────────────── */
body { min-height: 100vh; display: flex; flex-direction: column; }

body.ew-ui {
  color: var(--ew-color-text);
  font-family: var(--ew-font-body);
  background-color: var(--ew-color-paper);
  background-image:
    linear-gradient(var(--ew-color-paper-grid) var(--ew-paper-grid-line), transparent var(--ew-paper-grid-line)),
    linear-gradient(90deg, var(--ew-color-paper-grid) var(--ew-paper-grid-line), transparent var(--ew-paper-grid-line));
  background-size: var(--ew-paper-grid-size) var(--ew-paper-grid-size);
}

.ew-ui .hub-card--tabla { --hub-card-accent: #2b8ca3; }
.ew-ui .hub-card--quimica { --hub-card-accent: #7651a8; }
.ew-ui .hub-card--fisica { --hub-card-accent: #b9573c; }

.ew-ui .hub-card--tabla .hub-card__tag,
.ew-ui .hub-card--tabla .hub-card__banner-icon,
.ew-ui .hub-card--tabla .hub-stat__val,
.ew-ui .hub-card--tabla .hub-card__cta-simple {
  color: var(--hub-card-accent);
}

.ew-ui .hub-card--quimica .hub-card__tag,
.ew-ui .hub-card--quimica .hub-card__banner-icon,
.ew-ui .hub-card--quimica .hub-stat__val,
.ew-ui .hub-card--quimica .hub-btn {
  color: var(--hub-card-accent);
}

.ew-ui .hub-card--fisica .hub-card__tag,
.ew-ui .hub-card--fisica .hub-card__banner-icon,
.ew-ui .hub-card--fisica .hub-stat__val,
.ew-ui .hub-card--fisica .hub-card__cta-simple {
  color: var(--hub-card-accent);
}

.ew-ui .hub-card--tabla .hub-card__cta-simple,
.ew-ui .hub-card--quimica .hub-btn,
.ew-ui .hub-card--fisica .hub-card__cta-simple {
  background: color-mix(in srgb, var(--hub-card-accent) 12%, white);
  border-color: color-mix(in srgb, var(--hub-card-accent) 30%, transparent);
}

.hub-header {
  border-bottom: 2px solid color-mix(in srgb, var(--ew-theme-accent) 32%, transparent);
  background: color-mix(in srgb, var(--ew-color-paper) 88%, var(--ew-theme-background));
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 100;
}
.hub-header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
}
.hub-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ew-space-3);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-display);
  font-size: var(--ew-text-xl);
  text-decoration: none;
}
.hub-brand__logo { width: 36px; height: 36px; object-fit: contain; }
.hub-brand:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 28%, transparent);
  outline-offset: 4px;
}
.hub-header__label {
  color: var(--ew-theme-accent);
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-lg);
  font-weight: 700;
}

/* ── Hero ────────────────────────────────────────────── */
.hub-hero {
  text-align: center; padding: 48px 24px 32px;
}
.hub-hero__eyebrow {
  margin: 0 0 var(--ew-space-2);
  color: var(--hub-card-accent);
  font-family: var(--ew-font-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hub-hero__titulo {
  font-family: var(--ew-font-display);
  font-size: clamp(1.4rem, 5vw, 2.8rem); font-weight: 900;
  color: var(--ew-color-text);
  margin-bottom: 12px;
}
.hub-hero__sub {
  color: var(--ew-color-text-muted); font-size: 0.95rem; max-width: 480px; margin: 0 auto;
}

/* ── Grid de juegos ──────────────────────────────────── */
.hub-grid {
  display: grid;
  /* 3 columnas en escritorio, colapsa en tablet/móvil */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 24px 64px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* 2 columnas en tablet */
@media (max-width: 860px) {
  .hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 columna en móvil */
@media (max-width: 560px) {
  .hub-grid {
    grid-template-columns: 1fr;
  }

  .hub-header__label,
  .hub-brand,
  .hub-hero__titulo {
    font-synthesis: weight;
  }
}

/* ── Banner icon SVG ─────────────────────────────────── */
.hub-card__banner-icon {
  width: 64px;
  height: 64px;
  position: relative;
  z-index: 1;
}
.hub-card--tabla   .hub-card__banner-icon { color: var(--cian); }
.hub-card--quimica .hub-card__banner-icon { color: #a78bfa; }
.hub-card--fisica   .hub-card__banner-icon { color: #e8935f; }

/* ── Card base ───────────────────────────────────────── */
.hub-card {
  display: flex; flex-direction: column;
  background: var(--fondo-panel); border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden; color: inherit;
  transition: border-color 0.25s ease;
  position: relative;
}
@media (hover: hover) {
  .hub-card--tabla:hover   { border-color: rgba(34,211,238,0.25); }
  .hub-card--quimica:hover { border-color: rgba(139,92,246,0.25); }
  .hub-card--fisica:hover   { border-color: rgba(207,95,63,0.25); }
}

.hub-card__banner {
  height: 130px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.hub-card--tabla .hub-card__banner {
  background: linear-gradient(135deg, rgba(34,211,238,0.15), rgba(59,130,246,0.1));
}
.hub-card--quimica .hub-card__banner {
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(239,68,68,0.1));
}
.hub-card--fisica .hub-card__banner {
  background: linear-gradient(135deg, rgba(207,95,63,0.18), rgba(245,198,147,0.12));
}
.hub-card__banner-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 60%, currentColor 0%, transparent 70%);
  opacity: 0.08;
}
.hub-card--tabla   .hub-card__banner-glow { color: var(--cian); }
.hub-card--quimica .hub-card__banner-glow { color: #a78bfa; }
.hub-card--fisica   .hub-card__banner-glow { color: #e8935f; }

.hub-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.hub-card__tag {
  font-family: 'Orbitron', sans-serif; font-size: 0.6rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; display: inline-flex; width: fit-content;
}
.hub-card--tabla .hub-card__tag {
  color: var(--cian); background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.2);
}
.hub-card--quimica .hub-card__tag {
  color: #a78bfa; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.2);
}
.hub-card--fisica .hub-card__tag {
  color: #e8935f; background: rgba(207,95,63,0.12); border: 1px solid rgba(207,95,63,0.25);
}

.hub-card__nombre {
  font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700;
}
.hub-card__desc { color: var(--texto-2); font-size: 0.82rem; line-height: 1.6; flex: 1; }

/* ── Stats mini ──────────────────────────────────────── */
.hub-stats {
  display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap;
}
.hub-stat {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-sm); padding: 7px 10px; flex: 1; min-width: 52px;
}
.hub-stat__val {
  font-family: 'Orbitron', sans-serif; font-size: 0.95rem; font-weight: 700;
}
.hub-card--tabla   .hub-stat__val { color: var(--cian); }
.hub-card--quimica .hub-stat__val { color: #a78bfa; }
.hub-card--fisica   .hub-stat__val { color: #e8935f; }
.hub-stat__label { font-size: 0.6rem; color: var(--texto-3); margin-top: 2px; }

/* ══════════════════════════════════════════════════════
   ZONA DE ACCIÓN
══════════════════════════════════════════════════════ */
.hub-card__actions {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}

/* Fila de botones */
.hub-card__action-row {
  display: flex; gap: 8px;
}

/* Fila "limpia" — los wraps se comportan como botones simples (sin franja ⚙) */
.hub-card__action-row--clean .hub-btn-wrap {
  flex-direction: row;
  align-items: stretch;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.hub-card__action-row--clean .hub-btn-wrap .hub-btn {
  border-radius: var(--r-sm);
  min-height: 44px;
  border: none;
}
/* Refuerza el borde exterior en el wrap, no en el botón */
.hub-card__action-row--clean .hub-btn-wrap--entren {
  border: 1px solid rgba(74,222,128,0.35);
}
.hub-card__action-row--clean .hub-btn-wrap--casual {
  border: 1px solid rgba(139,92,246,0.35);
}

/* ── Ocultar franjas ⚙ visualmente ──────────────────── */
.hub-btn-wrap__popup--hidden {
  display: none !important;
}

.hub-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Orbitron', sans-serif; font-size: 0.65rem;
  font-weight: 700; letter-spacing: 0.08em;
  padding: 11px 12px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; color: inherit;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.hub-btn:active { transform: scale(0.97); }

/* Casual — Juego 1 */
.hub-btn--casual-tabla {
  background: rgba(34,211,238,0.1);
  border-color: rgba(34,211,238,0.25);
  color: var(--cian);
}
@media (hover: hover) {
  .hub-btn--casual-tabla:hover {
    background: rgba(34,211,238,0.18);
    border-color: rgba(34,211,238,0.5);
  }
}

/* Casual — Juego 2 */
.hub-btn--casual-quimica {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.25);
  color: #a78bfa;
}
@media (hover: hover) {
  .hub-btn--casual-quimica:hover {
    background: rgba(139,92,246,0.18);
    border-color: rgba(139,92,246,0.5);
  }
}

/* Entrenamiento */
.hub-btn--entrenamiento {
  background: rgba(74,222,128,0.08);
  border-color: rgba(74,222,128,0.25);
  color: #4ade80;
}
@media (hover: hover) {
  .hub-btn--entrenamiento:hover {
    background: rgba(74,222,128,0.16);
    border-color: rgba(74,222,128,0.5);
  }
}

/* ── Wrap genérico ────────────────────────────────────── */
.hub-btn-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.hub-btn-wrap--entren  { border: 1px solid rgba(74,222,128,0.35); }
.hub-btn-wrap--casual  { border: 1px solid rgba(139,92,246,0.35); }

.hub-btn-wrap .hub-btn {
  flex: 1;
  border: none;
  border-radius: 0;
  min-width: 0;
  min-height: 44px;
}

/* Botón ⚙ */
.hub-btn-wrap__popup {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  flex-shrink: 0;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  border: none;
  background: transparent;
  padding: 0;
  letter-spacing: 0.05em;
}

.hub-btn-wrap--entren .hub-btn-wrap__popup {
  color: #4ade80;
  border-top: 1px solid rgba(74,222,128,0.25);
  background: rgba(74,222,128,0.04);
}
@media (hover: hover) {
  .hub-btn-wrap--entren .hub-btn-wrap__popup:hover { background: rgba(74,222,128,0.12); }
}

.hub-btn-wrap--casual .hub-btn-wrap__popup {
  color: #a78bfa;
  border-top: 1px solid rgba(139,92,246,0.25);
  background: rgba(139,92,246,0.04);
}

/* Superficies actualizadas para el hub: conserva las clases y acciones
   existentes, pero usa el sistema visual compartido de la página inicial. */
.ew-ui .hub-card {
  background: var(--ew-color-surface);
  border-color: var(--ew-color-border);
  border-radius: var(--ew-radius-lg);
  box-shadow: var(--ew-shadow-md);
}

.ew-ui .hub-card:hover {
  border-color: var(--hub-card-accent);
  box-shadow: var(--ew-shadow-lg);
}

.ew-ui .hub-card__banner {
  background: color-mix(in srgb, var(--ew-theme-surface) 44%, white);
}

.ew-ui .hub-card--tabla .hub-card__banner,
.ew-ui .hub-card--quimica .hub-card__banner,
.ew-ui .hub-card--fisica .hub-card__banner {
  background: color-mix(in srgb, var(--hub-card-accent) 22%, white);
}

.ew-ui .hub-card__body {
  padding: var(--ew-space-5);
}

.ew-ui .hub-card__nombre {
  color: var(--ew-color-text);
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-xl);
}

.ew-ui .hub-card__desc,
.ew-ui .hub-stat__label {
  color: var(--ew-color-text-muted);
}

.ew-ui .hub-card__tag,
.ew-ui .hub-card--tabla .hub-card__tag,
.ew-ui .hub-card--quimica .hub-card__tag,
.ew-ui .hub-card--fisica .hub-card__tag {
  color: var(--hub-card-accent);
  background: color-mix(in srgb, var(--hub-card-accent) 12%, white);
  border-color: color-mix(in srgb, var(--hub-card-accent) 28%, transparent);
}

.ew-ui .hub-card--tabla .hub-card__banner-icon,
.ew-ui .hub-card--quimica .hub-card__banner-icon,
.ew-ui .hub-card--fisica .hub-card__banner-icon,
.ew-ui .hub-card--tabla .hub-stat__val,
.ew-ui .hub-card--quimica .hub-stat__val,
.ew-ui .hub-card--fisica .hub-stat__val {
  color: var(--ew-color-danger);
}

.ew-ui .hub-stat {
  background: var(--ew-color-surface-soft);
  border-color: var(--ew-color-border);
}

.ew-ui .hub-card__actions {
  border-top-color: var(--ew-color-border);
}

.ew-ui .hub-btn,
.ew-ui .hub-card__cta-simple {
  font-family: var(--ew-font-body);
  color: var(--ew-color-danger);
  background: var(--ew-color-danger-soft);
  border-color: color-mix(in srgb, var(--ew-color-danger) 30%, transparent);
}

.ew-ui .hub-btn:hover,
.ew-ui .hub-card__cta-simple:hover {
  background: color-mix(in srgb, var(--ew-color-danger) 16%, white);
  border-color: var(--ew-color-danger);
}

@media (max-width: 560px) {
  .hub-header__content { min-height: 64px; }
  .hub-brand { font-size: var(--ew-text-lg); }
  .hub-header__label { font-size: var(--ew-text-base); }
}
@media (hover: hover) {
  .hub-btn-wrap--casual .hub-btn-wrap__popup:hover { background: rgba(139,92,246,0.12); }
}

.hub-btn-wrap__popup--placeholder {
  height: 26px;
  flex-shrink: 0;
  border-top: 1px solid rgba(139,92,246,0.15);
  background: rgba(139,92,246,0.03);
  pointer-events: none;
}

.hub-btn--disabled {
  opacity: 0.38; cursor: not-allowed; pointer-events: none;
}

/* Badge "Pronto" dentro del botón Desafío */
.hub-badge-pronto {
  font-family: 'Orbitron', sans-serif; font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.1em; padding: 2px 6px; border-radius: 4px;
  background: rgba(139,92,246,0.25); color: #c4b5fd;
  border: 1px solid rgba(139,92,246,0.35);
  text-transform: uppercase; white-space: nowrap;
}

/* ── Sub-modos ───────────────────────────────────────── */
.hub-submodos-label {
  font-size: 0.6rem; color: var(--texto-3); letter-spacing: 0.08em;
  font-family: 'Orbitron', sans-serif; margin-bottom: 6px;
  text-transform: uppercase;
}
.hub-submodos-hint {
  font-family: 'Inter', sans-serif; letter-spacing: 0; font-weight: 400;
  font-size: 0.65rem; color: var(--texto-3); text-transform: none;
}
.hub-card__submodos {
  display: flex; gap: 6px; flex-wrap: wrap;
}

.hub-submodo {
  font-size: 0.7rem; padding: 5px 11px; border-radius: 20px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: var(--texto-3); font-family: 'Inter', sans-serif;
  white-space: nowrap; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
}
.hub-submodo:active { transform: scale(0.95); }

.hub-submodo--activo {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.4);
  color: #a78bfa;
}
@media (hover: hover) {
  .hub-submodo--toggle:hover {
    border-color: rgba(139,92,246,0.3);
    color: var(--texto-2);
  }
  .hub-submodo--toggle.hub-submodo--activo:hover {
    background: rgba(139,92,246,0.18);
    border-color: rgba(139,92,246,0.6);
  }
}

.hub-btn--casual-quimica.hub-btn--sin-modos {
  opacity: 0.38; pointer-events: none; cursor: not-allowed;
}

/* ── CTA simple (Tabla Periódica y Física) ───────────── */
.hub-card__cta-simple {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-top: 1px solid rgba(255,255,255,0.06);
  font-family: 'Orbitron', sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-decoration: none; color: var(--cian);
  min-height: 48px;
  transition: background 0.18s;
}
@media (hover: hover) {
  .hub-card__cta-simple:hover { background: rgba(34,211,238,0.05); }
}
.hub-card__cta-simple--fisica {
  color: #e8935f;
}

/* Override final para que las acciones conserven la paleta coral aunque
   existan reglas históricas por modalidad más arriba. */
.ew-ui .hub-card__cta-simple,
.ew-ui .hub-card__cta-simple--fisica,
.ew-ui .hub-btn--casual-tabla,
.ew-ui .hub-btn--casual-quimica,
.ew-ui .hub-btn--entrenamiento {
  color: var(--ew-color-danger);
  background: var(--ew-color-danger-soft);
  border-color: color-mix(in srgb, var(--ew-color-danger) 30%, transparent);
}

.ew-ui .hub-card__cta-simple:hover,
.ew-ui .hub-card__cta-simple--fisica:hover,
.ew-ui .hub-btn--casual-tabla:hover,
.ew-ui .hub-btn--casual-quimica:hover,
.ew-ui .hub-btn--entrenamiento:hover {
  color: var(--ew-color-danger);
  background: color-mix(in srgb, var(--ew-color-danger) 16%, white);
  border-color: var(--ew-color-danger);
}

/* Cada tarjeta conserva su identidad cromática en iconos, datos y CTA.
   La superficie permanece clara para que el acento funcione como guía visual. */
.ew-ui .hub-hero__eyebrow {
  color: var(--ew-theme-accent);
}

.ew-ui .hub-card--tabla .hub-card__banner-icon,
.ew-ui .hub-card--quimica .hub-card__banner-icon,
.ew-ui .hub-card--fisica .hub-card__banner-icon,
.ew-ui .hub-card--tabla .hub-stat__val,
.ew-ui .hub-card--quimica .hub-stat__val,
.ew-ui .hub-card--fisica .hub-stat__val {
  color: var(--hub-card-accent);
}

.ew-ui .hub-card--tabla .hub-card__tag,
.ew-ui .hub-card--quimica .hub-card__tag,
.ew-ui .hub-card--fisica .hub-card__tag {
  color: var(--hub-card-accent);
  background: color-mix(in srgb, var(--hub-card-accent) 12%, white);
  border-color: color-mix(in srgb, var(--hub-card-accent) 30%, transparent);
}

.ew-ui .hub-card--tabla .hub-stat,
.ew-ui .hub-card--quimica .hub-stat,
.ew-ui .hub-card--fisica .hub-stat {
  border-color: color-mix(in srgb, var(--hub-card-accent) 22%, white);
  background: color-mix(in srgb, var(--hub-card-accent) 5%, white);
}

.ew-ui .hub-card--tabla .hub-card__cta-simple,
.ew-ui .hub-card--quimica .hub-card__cta-simple,
.ew-ui .hub-card--fisica .hub-card__cta-simple {
  color: var(--hub-card-accent);
  background: color-mix(in srgb, var(--hub-card-accent) 12%, white);
  border-color: color-mix(in srgb, var(--hub-card-accent) 30%, transparent);
}

.ew-ui .hub-card--tabla .hub-card__cta-simple:hover,
.ew-ui .hub-card--quimica .hub-card__cta-simple:hover,
.ew-ui .hub-card--fisica .hub-card__cta-simple:hover {
  color: var(--hub-card-accent);
  background: color-mix(in srgb, var(--hub-card-accent) 20%, white);
  border-color: var(--hub-card-accent);
}

.ew-ui .hub-card--tabla .hub-card__banner-glow,
.ew-ui .hub-card--quimica .hub-card__banner-glow,
.ew-ui .hub-card--fisica .hub-card__banner-glow {
  color: var(--hub-card-accent);
}
@media (hover: hover) {
  .hub-card__cta-simple--fisica:hover { background: rgba(207,95,63,0.06); }
}
.hub-card__cta-arrow { font-size: 1.1rem; }

/* ── Badge "Nuevo" (reservado, sin uso activo) ───────── */
.hub-badge-nuevo {
  position: absolute; top: 12px; right: 12px;
  font-family: 'Orbitron', sans-serif; font-size: 0.55rem; font-weight: 900;
  letter-spacing: 0.15em; padding: 4px 8px; border-radius: 4px;
  background: linear-gradient(135deg, #a78bfa, #ef4444);
  color: #fff; text-transform: uppercase;
  animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(0.97); }
}