/* =================================================================
   Patina - Identidad Neo-Arcade & TCG Club
   Estética táctil inspirada en juegos de cartas coleccionables, 
   recreativas retro y fanzines pop.
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Paleta Base - Noche Pizarra & Imprenta */
  --bg-main:    #0a0d16;
  --bg-surface: #141824;
  --bg-surface-elevated: #1a2030;
  --bg-card:    #131722;
  --bg-hover:   #202638;

  --ink:        #05070a;
  --cream:      #f6f4ee;
  --white:      #ffffff;
  --muted:      #8c97ab;
  --muted-dark: #505c73;

  --border:          rgba(255, 255, 255, 0.12);
  --border-strong:   rgba(255, 255, 255, 0.25);
  --border-hard:     #000000;

  /* Colores de Actividad & Categorías (con pegada pop/arcade) */
  --pink:       #ff4d8d;  /* Bingo / Pop */
  --purple:     #9d4edd;  /* Gacha / Habilidades arcanas */
  --blue:       #00d2ff;  /* Cartones / Info / TCG */
  --cyan:       #00d2ff;
  --indigo:     #6366f1;  /* Tienda */
  --green:      #05df72;  /* Equipos / Éxito */
  --mint:       #05df72;
  --yellow:     #ffd000;  /* Trivial / Puntos */
  --gold:       #ffd000;
  --red:        #ff4757;  /* Admin / Alerta / Peligro */
  --coral:      #ff4757;
  --dark:       var(--bg-main);
  --card-bg:    var(--bg-card);

  /* Sombras Sólidas Táctiles (Hard-Offset) */
  --shadow-sm:  2px 2px 0px #000000;
  --shadow-md:  4px 4px 0px #000000;
  --shadow-lg:  6px 6px 0px #000000;
  --shadow-xl:  8px 8px 0px #000000;

  /* Tipografías */
  --font-display: 'Fredoka One', cursive;
  --font-ui:      'Space Grotesk', 'Nunito', sans-serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px),
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(157, 78, 221, 0.12), transparent 70%);
  background-size: 24px 24px, 100% 100%;
  background-attachment: fixed;
  color: var(--cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem 4rem;
  position: relative;
  overflow-x: hidden;
}

/* ---------- Orbes de fondo (atmósfera sutil de iluminación perimetral) ---------- */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.orb-1 { width: 500px; height: 500px; background: var(--purple); top: -140px; left: -140px; }
.orb-2 { width: 420px; height: 420px; background: var(--pink);   bottom: -100px; right: -100px; }
.orb-3 { width: 340px; height: 340px; background: var(--blue);   top: 35%; left: 50%; transform: translate(-50%,-50%); }

/* ---------- Header & Logo ---------- */
header.principal {
  text-align: center;
  margin-bottom: 2.8rem;
  position: relative;
  z-index: 1;
}

.logo {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 5.6rem);
  line-height: 1;
  color: #ffffff;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 
    3px 3px 0px var(--purple),
    6px 6px 0px var(--pink),
    9px 9px 0px rgba(0, 0, 0, 0.85);
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), text-shadow 0.2s ease;
}

.logo:hover {
  transform: translateY(-2px) rotate(-1deg);
  text-shadow: 
    4px 4px 0px var(--purple),
    8px 8px 0px var(--pink),
    12px 12px 0px rgba(0, 0, 0, 0.95);
}

.subtitle {
  margin-top: 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.3rem 0.85rem;
  background: rgba(255, 208, 0, 0.08);
  border: 1.5px dashed rgba(255, 208, 0, 0.4);
  border-radius: 6px;
}

/* ---------- Barra de usuario ---------- */
.barra-usuario {
  width: 100%;
  max-width: 960px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.8rem;
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.barra-usuario .saludo {
  font-family: var(--font-ui);
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 2px 2px 0px #000;
  transition: transform 0.1s ease, border-color 0.15s ease, color 0.15s ease;
}
.barra-usuario .saludo:hover {
  border-color: var(--purple);
  color: #e9d5ff;
  transform: translateY(-1px);
}

.barra-usuario .badge-rol {
  font-family: var(--font-ui);
  background: rgba(157, 78, 221, 0.18);
  color: #c084fc;
  border: 1.5px solid rgba(157, 78, 221, 0.45);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  box-shadow: 2px 2px 0px #000;
}
.barra-usuario .badge-rol.admin { 
  background: rgba(255, 208, 0, 0.16); 
  border-color: var(--gold);
  color: var(--gold); 
}

.barra-usuario form { margin: 0; }

.btn-logout {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: var(--bg-surface);
  color: #fff;
  border-radius: 6px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-logout:hover { 
  background: var(--bg-hover); 
  border-color: var(--coral);
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #000;
}
.btn-logout:active {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0px #000;
}

/* ---------- Grid de cards (Estilo TCG Booster / Arcade Token) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
  width: 100%;
  max-width: 960px;
  position: relative;
  z-index: 1;
}

.card {
  background: var(--bg-card);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 2.2rem 1.8rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.8);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), 
              border-color 0.15s ease,
              background 0.15s ease;
  overflow: hidden;
}

/* Borde superior de color que identifica cada actividad como una carta coleccionable */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: rgba(255, 255, 255, 0.2);
  transition: height 0.15s ease;
}

.card:hover {
  transform: translate(-3px, -3px);
  background: var(--bg-surface-elevated);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 7px 7px 0px rgba(0, 0, 0, 0.95);
}

.card:hover::before {
  height: 7px;
}

.card:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.95);
}

/* Acentos de color temáticos por actividad */
.card--bingo::before   { background: var(--pink); }
.card--gacha::before   { background: var(--purple); }
.card--carton::before  { background: var(--blue); }
.card--trivial::before { background: var(--gold); }
.card--equipo::before  { background: var(--mint); }
.card--tienda::before  { background: var(--indigo); }
.card--ranking::before { background: #38bdf8; }
.card--admin::before   { background: var(--coral); }

.card--bingo:hover   { border-color: var(--pink);   box-shadow: 6px 6px 0px var(--pink), 8px 8px 0px #000; }
.card--gacha:hover   { border-color: var(--purple); box-shadow: 6px 6px 0px var(--purple), 8px 8px 0px #000; }
.card--carton:hover  { border-color: var(--blue);   box-shadow: 6px 6px 0px var(--blue), 8px 8px 0px #000; }
.card--trivial:hover { border-color: var(--gold);   box-shadow: 6px 6px 0px var(--gold), 8px 8px 0px #000; }
.card--equipo:hover  { border-color: var(--mint);   box-shadow: 6px 6px 0px var(--mint), 8px 8px 0px #000; }
.card--tienda:hover  { border-color: var(--indigo); box-shadow: 6px 6px 0px var(--indigo), 8px 8px 0px #000; }
.card--ranking:hover { border-color: #38bdf8;       box-shadow: 6px 6px 0px #38bdf8, 8px 8px 0px #000; }
.card--admin:hover   { border-color: var(--coral);  box-shadow: 6px 6px 0px var(--coral), 8px 8px 0px #000; }

.card.deshabilitada { opacity: 0.45; pointer-events: none; filter: grayscale(0.8); }

.card__icon { font-size: 3rem; line-height: 1; }

.card__icon--img {
  width: calc(100% + 3.6rem);
  margin: -2.2rem -1.8rem 0.6rem;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

/* Badge estilo estampilla/ticket */
.card__badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  border: 1.5px solid currentColor;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
  width: fit-content;
}

.card--bingo   .card__badge { background: rgba(255, 77, 141, 0.12); color: var(--pink); }
.card--gacha   .card__badge { background: rgba(157, 78, 221, 0.15); color: #c084fc; }
.card--carton  .card__badge { background: rgba(0, 210, 255, 0.12);   color: var(--blue); }
.card--trivial .card__badge { background: rgba(255, 208, 0, 0.12);   color: var(--gold); }
.card--equipo  .card__badge { background: rgba(5, 223, 114, 0.12);   color: var(--mint); }
.card--tienda  .card__badge { background: rgba(99, 102, 241, 0.15);  color: #818cf8; }
.card--ranking .card__badge { background: rgba(56, 189, 248, 0.15);  color: #38bdf8; }
.card--admin   .card__badge { background: rgba(255, 71, 87, 0.15);   color: var(--coral); }

.card__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.15;
}

.card--bingo   .card__title { color: var(--pink); }
.card--gacha   .card__title { color: #c084fc; }
.card--carton  .card__title { color: var(--blue); }
.card--trivial .card__title { color: var(--gold); }
.card--equipo  .card__title { color: var(--mint); }
.card--tienda  .card__title { color: #818cf8; }
.card--ranking .card__title { color: #38bdf8; }
.card--admin   .card__title { color: var(--coral); }

.card__desc {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: 2px 2px 0px #000;
  width: fit-content;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.card:hover .card__cta {
  transform: translateX(4px);
  background: var(--bg-hover);
}

.card--bingo   .card__cta { color: var(--pink);   border-color: rgba(255, 77, 141, 0.4); }
.card--gacha   .card__cta { color: #c084fc;       border-color: rgba(157, 78, 221, 0.4); }
.card--carton  .card__cta { color: var(--blue);   border-color: rgba(0, 210, 255, 0.4); }
.card--trivial .card__cta { color: var(--gold);   border-color: rgba(255, 208, 0, 0.4); }
.card--equipo  .card__cta { color: var(--mint);   border-color: rgba(5, 223, 114, 0.4); }
.card--tienda  .card__cta { color: #818cf8;       border-color: rgba(99, 102, 241, 0.4); }
.card--ranking .card__cta { color: #38bdf8;       border-color: rgba(56, 189, 248, 0.4); }
.card--admin   .card__cta { color: var(--coral);  border-color: rgba(255, 71, 87, 0.4); }

/* ---------- Botón flotante "Volver al inicio" (Arcade Push Button) ---------- */
.btn-volver {
  position: fixed;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: var(--bg-surface);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid var(--purple);
  box-shadow: 3px 3px 0px #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.btn-volver:hover {
  background: var(--purple);
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px #000;
}

.btn-volver:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #000;
}

.btn-volver__flecha {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.btn-volver:hover .btn-volver__flecha { transform: translateX(-3px); }

@media (max-width: 600px) {
  .btn-volver { padding: 0.5rem 0.75rem; }
  .btn-volver__texto { display: none; }
}

/* ---------- Botón flotante de cartones ---------- */
.btn-cartones {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 3px 3px 0px #000;
  transition: transform 0.1s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-cartones:hover {
  color: #fff;
  border-color: var(--blue);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px #000;
}
.btn-cartones:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #000;
}

footer {
  margin-top: 4rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted-dark);
  position: relative;
  z-index: 1;
}

/* =================================================================
   Formularios de autenticación (login y registro)
   ================================================================= */

.tarjeta-form {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 2px solid var(--border-strong);
  border-radius: 18px;
  padding: 2.5rem 2.2rem;
  box-shadow: 6px 6px 0px #000;
  position: relative;
  z-index: 1;
}

.tarjeta-form h1 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  margin-bottom: 0.4rem;
  color: #fff;
  text-shadow: 2px 2px 0px var(--purple);
}

.tarjeta-form .subtitulo-form {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 1.8rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.3rem;
}

.campo label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.campo input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: #fff;
  outline: none;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.campo input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.25), 2px 2px 0px #000;
}

.btn-primario {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--purple);
  color: #fff;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  margin-top: 0.8rem;
  box-shadow: 4px 4px 0px #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.btn-primario:hover {
  background: #b366f9;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0px #000;
}

.btn-primario:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #000;
}

.enlace-secundario {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}
.enlace-secundario a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.15s;
}
.enlace-secundario a:hover { border-bottom-color: var(--gold); }

/* =================================================================
   Mensajes flash (Estilo sticker troquelado)
   ================================================================= */

.flash-list {
  width: 100%;
  max-width: 960px;
  list-style: none;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.flash {
  border-radius: 8px;
  padding: 0.8rem 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 700;
  border: 2px solid #000;
  box-shadow: 4px 4px 0px #000;
}
.flash.success { background: #05df72; color: #052e16; }
.flash.error   { background: #ff4757; color: #ffffff; }
.flash.warning { background: #ffd000; color: #3f2a00; }
.flash.info    { background: #00d2ff; color: #042738; }

/* =================================================================
   Panel de administración
   ================================================================= */

.admin-wrap {
  width: 100%;
  max-width: 960px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.admin-bloque {
  background: var(--bg-card);
  border: 2px solid var(--border-strong);
  border-radius: 16px;
  padding: 1.8rem 2rem;
  box-shadow: 6px 6px 0px #000;
  position: relative;
}

.admin-bloque__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

.admin-bloque h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
}

.admin-bloque__nota {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--muted);
}

.admin-bloque__nota code {
  background: #000;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--gold);
}

.admin-vacio {
  color: var(--muted);
  font-style: italic;
  font-size: 0.95rem;
  padding: 1rem 0;
}

.admin-volver {
  text-align: center;
  font-size: 0.9rem;
}
.admin-volver a {
  font-family: var(--font-ui);
  font-weight: 800;
  color: var(--gold);
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  box-shadow: 2px 2px 0px #000;
  transition: transform 0.1s ease;
}
.admin-volver a:hover { 
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #000;
}

/* ---- Tarjeta de equipo (Admin) ---- */
.equipo-card {
  background: var(--bg-surface);
  border: 2px solid var(--tc, var(--border-strong));
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  box-shadow: 4px 4px 0px #000;
}

.equipo-card__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.equipo-card__nombre {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--tc, #fff);
  text-shadow: 2px 2px 0px #000;
}

.form-renombrar { display: inline-flex; }

.equipo-card__nombre-input {
  font-family: var(--font-display);
  font-size: 1.4rem;
  background: transparent;
  border: none;
  border-bottom: 2px dashed transparent;
  outline: none;
  padding: 0.1rem 0.3rem;
  color: var(--tc, #fff);
  cursor: text;
  transition: border-color 0.15s, background 0.15s;
  max-width: 18rem;
}
.equipo-card__nombre-input:hover {
  border-bottom-color: rgba(255,255,255,0.3);
}
.equipo-card__nombre-input:focus {
  border-bottom-color: currentColor;
  background: rgba(0,0,0,0.3);
  border-radius: 4px 4px 0 0;
}

.equipo-card__stats {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
}

.stat-puntos {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-weight: 800;
  color: var(--gold);
}
.stat-miembros {
  padding: 0.25rem 0.65rem;
  color: var(--muted);
  font-weight: 700;
}
.stat-lider {
  background: rgba(5, 223, 114, 0.15);
  border: 1px solid var(--mint);
  color: var(--mint);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-weight: 800;
}
.stat-lider--vacio { 
  background: rgba(255,255,255,0.06); 
  border: 1px solid var(--border);
  color: var(--muted); 
}

/* ---- Botones rápidos +/- de puntos (Arcade Buttons) ---- */
.quick-puntos {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-quick {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 800;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 0.45rem 0.95rem;
  min-width: 3.4rem;
  cursor: pointer;
  box-shadow: 3px 3px 0px #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-quick:hover  { transform: translate(-1px, -1px); box-shadow: 4px 4px 0px #000; }
.btn-quick:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px #000; }

.btn-quick--pos {
  background: var(--mint);
  color: #052e16;
}

.btn-quick--neg {
  background: var(--coral);
  color: #ffffff;
}

/* ---- Formularios inline del panel ---- */
.form-puntos,
.form-lider,
.form-mover {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.88rem;
}

.form-puntos input,
.form-lider select,
.form-mover select {
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 0.45rem 0.8rem;
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  color: #fff;
  outline: none;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
  transition: border-color 0.15s;
}

.form-puntos input:focus,
.form-lider select:focus,
.form-mover select:focus { border-color: var(--tc, var(--purple)); }

.form-puntos input[name="cantidad"] { width: 7.5rem; }
.form-puntos input[name="motivo"]   { flex: 1; min-width: 12rem; }

.form-lider label { color: var(--muted); font-weight: 800; font-family: var(--font-ui); font-size: 0.78rem; text-transform: uppercase; }

.btn-mini {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-surface-elevated);
  color: #fff;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  transition: background 0.15s, transform 0.1s, box-shadow 0.1s;
}
.btn-mini:hover { 
  background: var(--bg-hover); 
  transform: translate(-1px, -1px); 
  box-shadow: 3px 3px 0px #000; 
}
.btn-mini:active {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0px #000;
}

.btn-mini--primario {
  background: var(--purple);
  border-color: #000;
  color: #fff;
}
.btn-mini--primario:hover { background: #b366f9; }

.btn-mini--peligro {
  background: var(--coral);
  border-color: #000;
  color: #fff;
}
.btn-mini--peligro:hover { background: #ff6b7d; }

/* ---- Lista de miembros ---- */
.miembros h4 {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 0.7rem;
  font-weight: 800;
}

.miembros__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.miembro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.95rem;
  box-shadow: 2px 2px 0px #000;
}

.miembro__nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-family: var(--font-ui);
}

.badge-mini {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  font-weight: 800;
  border: 1px solid currentColor;
}
.badge-lider   { background: rgba(5, 223, 114, 0.15);  color: var(--mint); }
.badge-admin   { background: rgba(255, 208, 0, 0.15);  color: var(--gold); }
.badge-tiradas { background: rgba(157, 78, 221, 0.2);   color: #d8b4fe; }

.miembro__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.form-mini-inline { display: inline-flex; }

.form-crear-equipo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--bg-surface);
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
}

.form-crear-equipo input[type="text"] {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.5rem 0.85rem;
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: #fff;
  outline: none;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
  transition: border-color 0.15s;
}

.form-crear-equipo input[type="text"]:focus { border-color: var(--purple); }

.form-crear-equipo input[name="nombre"]      { width: 12rem; }
.form-crear-equipo input[name="descripcion"] { flex: 1; min-width: 12rem; }

.form-crear-equipo input[type="color"] {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 2px solid #000;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
}

.tabla-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Tabla de movimientos (Scoreboard Style) ---- */
.tabla-movs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.tabla-movs th,
.tabla-movs td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tabla-movs th {
  font-family: var(--font-ui);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: var(--muted);
  font-weight: 800;
  border-bottom: 2px solid var(--border-strong);
}
.cantidad { font-family: var(--font-ui); font-weight: 800; }
.cantidad--pos { color: var(--mint); }
.cantidad--neg { color: var(--coral); }

/* =================================================================
   Pantalla "Elige tu equipo" (primer login)
   ================================================================= */

.elegir-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.elegir-aviso {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--cream);
  margin-bottom: 1.6rem;
  padding: 0.8rem 1.2rem;
  background: var(--bg-surface);
  border: 2px dashed var(--purple);
  border-radius: 10px;
  box-shadow: 4px 4px 0px #000;
}
.elegir-aviso strong { color: var(--gold); }

.elegir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.card-eleccion {
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  width: 100%;

  background: var(--bg-card);
  border: 2px solid var(--border-strong);
  border-radius: 16px;
  padding: 1.8rem 1.6rem 1.4rem;
  color: #fff;

  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  overflow: hidden;
  box-shadow: 5px 5px 0px #000;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), 
              border-color 0.15s ease, 
              box-shadow 0.15s ease;
}

.card-eleccion:hover {
  transform: translate(-3px, -3px);
  border-color: var(--tc);
  box-shadow: 7px 7px 0px var(--tc), 9px 9px 0px #000;
}

.card-eleccion:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000;
}

.card-eleccion:focus-visible {
  outline: 3px solid var(--tc);
  outline-offset: 3px;
}

.card-eleccion__chip {
  width: 48px;
  height: 6px;
  border-radius: 3px;
  background: var(--tc);
  box-shadow: 2px 2px 0px #000;
}

.card-eleccion__nombre {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--tc);
  text-shadow: 1px 1px 0px #000;
}

.card-eleccion__meta {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 800;
}

.card-eleccion__desc {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}

.card-eleccion__cta {
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--tc);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: transform 0.15s;
}
.card-eleccion:hover .card-eleccion__cta {
  transform: translateX(4px);
}

/* =================================================================
   Tienda (Item Tokens)
   ================================================================= */

.tienda-items {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.tienda-item {
  background: var(--bg-surface);
  border: 2px solid var(--border-strong);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  box-shadow: 4px 4px 0px #000;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.tienda-item:hover {
  transform: translate(-2px, -2px);
  border-color: var(--indigo);
  box-shadow: 5px 5px 0px #000;
}

.tienda-item__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.tienda-item__cabecera h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #fff;
}

.tienda-item__precio {
  background: var(--gold);
  color: #000;
  font-family: var(--font-ui);
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  border: 1.5px solid #000;
  box-shadow: 2px 2px 0px #000;
  font-size: 0.85rem;
  white-space: nowrap;
}

.tienda-item__desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

.form-comprar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.form-comprar label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.form-comprar select {
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 0.45rem 0.8rem;
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: #fff;
  outline: none;
}

.form-comprar select:focus { border-color: var(--purple); }

.form-comprar button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

/* =================================================================
   Tablón de puntos (Arcade Scoreboard)
   ================================================================= */

.tabla-ranking {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tabla-ranking th,
.tabla-ranking td {
  text-align: left;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.tabla-ranking th {
  font-family: var(--font-ui);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: var(--gold);
  font-weight: 800;
  border-bottom: 2px solid var(--border-strong);
}

.tabla-ranking .puesto {
  width: 2.8rem;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.25rem;
  text-shadow: 1px 1px 0px #000;
}

.tabla-ranking .ranking-puntos {
  font-family: var(--font-ui);
  white-space: nowrap;
  font-size: 0.95rem;
}

.tabla-ranking .ranking-puntos strong {
  font-size: 1.15rem;
  color: #fff;
  font-weight: 800;
}

.ranking-oculto {
  color: var(--muted-dark);
  font-style: italic;
}

.ranking-timer {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 800;
  color: #000;
  background: var(--blue);
  border: 1px solid #000;
  box-shadow: 1px 1px 0px #000;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
}

.tabla-ranking .fila--propia {
  background: rgba(5, 223, 114, 0.08);
  border-left: 4px solid var(--mint);
}

/* =================================================================
   Perfil de usuario
   ================================================================= */

.perfil-datos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem 1.2rem;
}
.perfil-datos li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.8rem 1rem;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 3px 3px 0px #000;
}
.perfil-datos__clave {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  font-weight: 800;
}
.perfil-datos__valor {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
}
.perfil-nota {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}

.perfil-cartas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.perfil-carta {
  display: flex;
  gap: 1rem;
  padding: 1.1rem;
  background: var(--bg-surface);
  border: 2px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 4px 4px 0px #000;
}
.perfil-carta__visual {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  overflow: hidden;
}
.perfil-carta__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.perfil-carta__icono { font-size: 3rem; }

.perfil-carta__info { flex: 1; min-width: 0; }
.perfil-carta__info h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
  color: #fff;
}
.perfil-carta__desc {
  margin: 0.45rem 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}
.perfil-carta__hab {
  font-size: 0.82rem;
  color: var(--cream);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}
.perfil-carta__fecha {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--muted-dark);
}

/* ---- Carta única en grande (perfil) ---- */
.carta-grande {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.8rem;
  align-items: start;
}

.carta-grande__imagen {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
  cursor: zoom-in;

  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #000;
  border: 2px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 6px 0px #000;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.carta-grande__imagen:hover {
  transform: translate(-2px, -3px) scale(1.02);
  border-color: var(--purple);
  box-shadow: 8px 8px 0px #000, 0 0 16px rgba(157, 78, 221, 0.4);
}

.carta-grande__imagen:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

.carta-grande__lupa {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.carta-grande__imagen:hover .carta-grande__lupa,
.carta-grande__imagen:focus-visible .carta-grande__lupa {
  opacity: 1;
  transform: scale(1);
}

.carta-grande__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carta-grande__icono {
  font-size: 7rem;
  line-height: 1;
}

.carta-grande__rareza {
  position: absolute;
  bottom: 0.7rem;
  left: 0.7rem;
}

.carta-grande__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.carta-grande__nombre {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.05;
  color: #fff;
  text-shadow: 2px 2px 0px #000;
  margin-bottom: 0.2rem;
}

.carta-grande__seccion h4 {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.carta-grande__seccion p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cream);
}

/* ---- Bloques renderizados desde markdown ---- */
.md {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cream);
}
.md p { margin-bottom: 0.6rem; }
.md p:last-child { margin-bottom: 0; }

.md ul, .md ol {
  margin: 0.5rem 0 0.7rem;
  padding-left: 1.4rem;
}
.md li { margin-bottom: 0.3rem; }
.md li::marker { color: var(--gold); }

.md strong { color: #fff; font-weight: 800; }
.md em     { color: rgba(255,255,255,0.95); font-style: italic; }

.md code {
  background: #000;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--gold);
}

.md h5, .md h6 {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--blue);
  margin: 0.6rem 0 0.3rem;
}

.md a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.md hr {
  border: none;
  border-top: 1.5px dashed rgba(255,255,255,0.15);
  margin: 0.8rem 0;
}

.carta-grande__seccion--vacia {
  color: var(--muted) !important;
  font-style: italic;
}

.carta-grande__fecha {
  margin-top: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--muted-dark);
}

@media (max-width: 600px) {
  .carta-grande { grid-template-columns: 1fr; }
  .carta-grande__imagen { max-width: 240px; margin: 0 auto; }
  .carta-grande__nombre { font-size: 1.7rem; }
}

/* ---- Modal con la carta a tamaño completo (Showcase Frame) ---- */
dialog.carta-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 3px solid #000;
  border-radius: 16px;
  background: var(--bg-card);
  color: #fff;
  font-family: var(--font-body);
  max-width: min(900px, 95vw);
  max-height: 95vh;
  overflow: auto;
  box-shadow: 10px 10px 0px #000;
  animation: modal-aparecer 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-aparecer {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

dialog.carta-modal::backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
}

.carta-modal__cerrar {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 6px;
  border: 2px solid #000;
  background: var(--bg-surface);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  box-shadow: 2px 2px 0px #000;
  transition: background 0.15s, transform 0.1s;
}
.carta-modal__cerrar:hover { 
  background: var(--coral); 
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #000;
}
.carta-modal__cerrar:active {
  transform: translate(1px, 1px);
  box-shadow: 0px 0px 0px #000;
}

.carta-modal__contenido {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 2.2rem;
  padding: 2.2rem;
  align-items: start;
}

.carta-modal__visual {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #000;
  border: 2px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 5px 5px 0px #000;
}
.carta-modal__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.carta-modal__icono { font-size: 8rem; line-height: 1; }

/* ── Ficha de carta en la galería (Binder Frame) ── */
.ficha-carta {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #000;
  box-shadow: 6px 6px 0px #000;
  background: var(--bg-surface);
}
.ficha-carta__visual {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  border-bottom: 2px solid #000;
}
.ficha-carta__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ficha-carta__visual .carta-modal__icono { font-size: 6.5rem; }
.ficha-carta__pie {
  padding: 1rem 1.1rem;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ficha-carta__nombre {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

.carta-modal__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.carta-modal__info h3 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1.1;
  color: #fff;
  text-shadow: 2px 2px 0px #000;
}

@media (max-width: 700px) {
  .carta-modal__contenido {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.2rem;
    gap: 1.4rem;
  }
  .carta-modal__visual { max-width: 280px; margin: 0 auto; width: 100%; }
  .carta-modal__info h3 { font-size: 1.8rem; }
}

/* Estilos de rareza (Token Stickers con Foil Effect) */
.rarity {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0.22rem 0.65rem;
  border-radius: 6px;
  border: 1.5px solid currentColor;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
}
.rarity--comun { 
  background: rgba(148, 163, 184, 0.15); 
  border-color: #94a3b8; 
  color: #cbd5e1; 
}
.rarity--rara { 
  background: rgba(0, 210, 255, 0.15);  
  border-color: var(--blue); 
  color: var(--blue); 
}
.rarity--epica { 
  background: rgba(157, 78, 221, 0.2);  
  border-color: var(--purple); 
  color: #d8b4fe; 
}
.rarity--legendaria { 
  background: linear-gradient(135deg, #ffd000 0%, #ff8c00 100%);  
  color: #000; 
  border-color: #ffd000;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(255, 208, 0, 0.4), 2px 2px 0px #000;
}

/* =================================================================
   Banner header (tablón de puntos y otras páginas con imagen)
   ================================================================= */

.principal--con-imagen { 
  padding-top: 0; 
  overflow: hidden; 
}

.principal__banner {
  width: calc(100% + 4rem);
  margin: 0 -2rem 1.4rem;
  max-height: 220px;
  object-fit: cover;
  display: block;
  border-bottom: 3px solid #000;
  box-shadow: 0 6px 0px rgba(0, 0, 0, 0.7);
}

/* =================================================================
   Galería de cartas (Estilo Archivador TCG)
   ================================================================= */

.galeria-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.galeria-filtros--sub {
  margin-top: -0.4rem;
  margin-bottom: 1.2rem;
}

.galeria-filtro,
.galeria-filtro-cat {
  font-family: var(--font-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0.4rem 0.95rem;
  border-radius: 8px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.galeria-filtro:hover,
.galeria-filtro-cat:hover { 
  background: var(--bg-hover); 
  color: #fff;
  border-color: var(--purple);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #000;
}

.galeria-filtro--activo {
  background: var(--purple) !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: 3px 3px 0px #000 !important;
}

.galeria-contador {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--gold);
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.2rem;
  padding: 0.5rem 0;
}

.galeria-carta {
  background: var(--bg-card);
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: 4px 4px 0px #000;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), 
              border-color 0.15s ease,
              box-shadow 0.15s ease;
  text-align: left;
}

.galeria-carta:hover {
  transform: translate(-3px, -4px) rotate(-0.5deg);
  border-color: var(--purple);
  box-shadow: 6px 7px 0px #000, 0 0 16px rgba(157, 78, 221, 0.35);
}

.galeria-carta:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #000;
}

.galeria-carta__visual {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #000;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.galeria-carta__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.galeria-carta:hover .galeria-carta__img {
  transform: scale(1.04);
}

.galeria-carta__icono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}

.galeria-carta__rareza {
  position: absolute;
  bottom: 0.45rem;
  left: 0.45rem;
  z-index: 1;
}

.galeria-carta__info {
  padding: 0.7rem 0.8rem;
  background: var(--bg-card);
}

.galeria-carta__nombre {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.2rem;
  line-height: 1.25;
}

.galeria-carta__categoria {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}

/* =================================================================
   Responsive
   ================================================================= */

@media (max-width: 600px) {
  body { padding: 3.5rem 1rem 3rem; }
  .grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .tarjeta-form { padding: 2rem 1.5rem; }

  .barra-usuario {
    padding-left: 3.2rem;
    justify-content: flex-end;
    font-size: 0.85rem;
  }

  .equipo-card__cabecera {
    flex-direction: column;
    align-items: flex-start;
  }
  .form-renombrar { width: 100%; }
  .equipo-card__nombre-input { max-width: 100%; width: 100%; }

  .form-puntos input[name="cantidad"] { flex: 1; min-width: 6rem; }
  .form-puntos input[name="motivo"]   { flex-basis: 100%; min-width: 0; }

  .form-crear-equipo { flex-direction: column; align-items: stretch; }
  .form-crear-equipo input[name="nombre"],
  .form-crear-equipo input[name="descripcion"] { width: 100%; }

  .miembro__acciones { width: 100%; }
  .form-mover, .form-mini-inline { flex: 1; }

  .equipo-card__stats { gap: 0.4rem; font-size: 0.78rem; }
  .tabla-responsive { padding-bottom: 0.4rem; }

  .galeria-grid { 
    grid-template-columns: repeat(3, 1fr); 
    gap: 0.5rem; 
  }
  .galeria-carta__info {
    padding: 0.45rem 0.5rem;
  }
  .galeria-carta__nombre {
    font-size: 0.75rem;
  }
  .galeria-carta__categoria {
    font-size: 0.65rem;
  }
}