/* ============================================================================
   RetroChiclana — Estilos del módulo de Torneos (admin + público)
   Ruta: public_html/assets/css/torneos.css
   Se apoya en las variables ya definidas en styles.css (colores neón, etc.)
   ============================================================================ */

.admin-nav { display:flex; gap:1rem; flex-wrap:wrap; font-size:.85rem; }
.admin-nav a { padding:.4rem .6rem; border-radius:6px; color: var(--text-color, #e0e0e0); text-decoration:none; }
.admin-nav a:hover { background: rgba(255,255,255,.08); }
.admin-main { padding-block: 2rem 4rem; }

.admin-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-table { width:100%; border-collapse:collapse; margin-top:1rem; }
.admin-table th, .admin-table td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid rgba(255,255,255,.12); font-size:.9rem; }

.badge {
  display:inline-block; padding:.15rem .6rem; border-radius:999px;
  background: rgba(255,255,255,.08); font-size:.75rem; margin-right:.25rem;
}
.badge-aprobada, .badge-validada { color: var(--neon-cyan, #00f0ff); }
.badge-pendiente { color: #ffcc66; }
.badge-rechazada { color: #ff2e88; }

.alerta { padding:.75rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.9rem; }
.alerta-ok { background: rgba(0,240,255,.1); border:1px solid var(--neon-cyan, #00f0ff); }
.alerta-error { background: rgba(255,46,136,.1); border:1px solid #ff2e88; }

.form-card { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:1.5rem; }
.field { margin-bottom: 1rem; }
.field label { display:block; margin-bottom:.35rem; font-size:.85rem; color: var(--text-muted, #9a9a9a); }
.field input, .field textarea, .field select, select {
  width:100%; padding:.6rem .7rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.3); color:#fff; font-family:inherit;
}

.grid { display:grid; gap:1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }

.card {
  display:block; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:1.25rem; text-decoration:none; color:inherit; transition: transform .15s, border-color .15s;
}
.card:hover { transform: translateY(-3px); border-color: var(--neon-cyan, #00f0ff); }

.bracket { display:flex; gap:2rem; overflow-x:auto; padding-bottom:1rem; }
.bracket-ronda { min-width:220px; display:flex; flex-direction:column; gap:1.5rem; justify-content:space-around; }
.bracket-partido { background: rgba(255,255,255,.05); border-radius:8px; padding:.6rem; border:1px solid rgba(255,255,255,.12); }
.bracket-jugador { padding:.3rem .4rem; border-radius:4px; }
.bracket-jugador.ganador { color: var(--neon-cyan, #00f0ff); font-weight:700; }

/* Botón flotante del reproductor de música */
.rc-music-toggle {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 999;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--neon-cyan, #00f0ff); color:#0a0118; border:none;
  font-size: 1.4rem; cursor:pointer; box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: transform .15s;
}
.rc-music-toggle:hover { transform: scale(1.08); }

/* ============================================================================
   RESPONSIVE / MÓVIL
   ============================================================================ */

/* Tarjetas de formulario centradas cuando la pantalla es ancha, a todo lo
   ancho del contenedor en móvil (el propio .container ya aporta el margen). */
.form-card-centrado { max-width: 560px; margin-inline: auto; }

/* Botón de acción destructiva (eliminar torneo, etc.) */
.btn-peligro { border-color: #ff2e88; color: #ff2e88; }
.btn-peligro:hover, .btn-peligro:focus-visible {
  background: rgba(255,46,136,.12);
  box-shadow: 0 0 18px rgba(255,46,136,.3);
}

/* Tablas: contenedor con scroll horizontal en pantallas estrechas, en vez
   de romper el layout o hacer el texto ilegible. Lo añade ui.js en tiempo
   de ejecución alrededor de cada table.admin-table. */
.tabla-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1rem; }
.tabla-scroll table.admin-table { margin-top: 0; min-width: 480px; }

/* El botón hamburguesa comparte estilo con el de la web principal
   (.nav-toggle ya definido en styles.css); aquí solo lo alineamos dentro
   del panel de admin, que no usaba antes ese patrón. */
.admin-body .nav-toggle { margin-left: auto; }

@media (max-width: 720px) {
  /* Títulos y etiquetas de sección, centrados en móvil */
  h1.h1, h1.h2, .admin-main > h1, .admin-main > h2,
  main.container > h1, main.container > h2 { text-align: center; }

  /* Filas de botones de acción (guardar/cancelar, aprobar/rechazar…) se
     centran y quedan cómodas para el dedo pulgar */
  .admin-card form[style*="display:inline"],
  .admin-table td form { display: inline-block; }

  /* Bloques que ya son de una sola columna (cards, formularios, tarjetas de
     logros) quedan centrados horizontalmente en vez de pegados al borde */
  .admin-card, .form-card, .card { margin-inline: auto; }

  /* Cabeceras de tarjetas de torneo/juego: apiladas y centradas en vez de
     "space-between", que en pantallas estrechas dejaba el botón suelto */
  .admin-card > div[style*="justify-content:space-between"] {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
  }
  .admin-card > div[style*="justify-content:space-between"] > div { text-align: center; }

  /* Botón flotante de música, algo más pequeño para no tapar contenido */
  .rc-music-toggle { width: 46px; height: 46px; font-size: 1.2rem; }

  /* Árbol de eliminatorias: columnas algo más estrechas para que quepan
     más rondas visibles antes de tener que desplazar */
  .bracket-ronda { min-width: 180px; }
}

@media (max-width: 480px) {
  .h1 { font-size: clamp(1.4rem, 8vw, 2rem); }
  .admin-table th, .admin-table td { font-size: .82rem; padding: .5rem .4rem; }
  .btn { padding: 0.75em 1.2em; font-size: .82rem; }
}

/* Iniciales estilo tabla de puntuaciones arcade clásica */
.badge-iniciales {
  display: inline-block; font-family: 'Press Start 2P', cursive; font-size: .65rem;
  letter-spacing: 1px; color: var(--neon-amber, #ffcc66);
  background: rgba(255,204,102,.1); border: 1px solid rgba(255,204,102,.4);
  padding: .25rem .4rem; border-radius: 4px;
}

/* ============================================================================
   MINIJUEGO "INSERT COIN" (portada)
   ============================================================================ */
.arcade-modal {
  position: fixed; inset: 0; background: rgba(5,0,15,.88); z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.arcade-modal[hidden] { display: none; }
.arcade-modal-caja {
  background: #0a0118; border: 2px solid var(--neon-cyan, #00f0ff); border-radius: 16px;
  padding: 1.5rem; max-width: 560px; width: 100%; max-height: 94vh; overflow-y: auto;
  position: relative; text-align: center; box-shadow: 0 0 40px rgba(0,240,255,.25);
}
.arcade-cerrar {
  position: absolute; top: .6rem; right: .6rem; background: none; border: none;
  color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.arcade-titulo { font-family: 'Press Start 2P', cursive; color: var(--neon-cyan, #00f0ff); font-size: 1.3rem; margin: 0 0 .25rem; }
.arcade-subtitulo { color: var(--neon-amber, #ffcc66); font-size: .85rem; margin: 0 0 1rem; }
.arcade-hud {
  display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  font-family: 'Press Start 2P', cursive; font-size: .6rem; color: #fff; margin-bottom: .6rem;
}
.arcade-pantalla-juego { position: relative; max-width: 480px; margin: 0 auto; }
#arcade-canvas {
  width: 100%; height: auto; aspect-ratio: 480 / 360; display: block;
  background: #0a0118; border: 2px solid rgba(255,255,255,.15); border-radius: 8px; touch-action: none;
}
.arcade-overlay {
  position: absolute; inset: 0; background: rgba(5,0,15,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; padding: 1rem; border-radius: 8px; text-align: center;
}
.arcade-overlay[hidden] { display: none; }
.arcade-overlay h3 { font-family: 'Press Start 2P', cursive; color: var(--neon-magenta, #ff2e88); margin: 0; }
.arcade-overlay .form-card { width: 100%; max-width: 320px; padding: 1rem; }
.arcade-instrucciones { font-size: .75rem; color: var(--text-muted); margin: .6rem 0 0; }
.arcade-ranking-titulo { margin: 1.5rem 0 .5rem; font-size: 1rem; }
.arcade-ranking { text-align: left; max-width: 320px; margin: 0 auto; padding-left: 1.4rem; font-size: .85rem; }
.arcade-ranking li { margin-bottom: .25rem; }
.arcade-aviso { margin-top: .6rem; font-weight: 700; font-size: .85rem; }

@media (max-width: 480px) {
  .arcade-modal-caja { padding: 1rem; }
  .arcade-titulo { font-size: 1.05rem; }
}

/* Selector de idioma ES/EN en el menú */
.nav-idioma { font-family: 'Courier New', monospace; font-size: .8rem; letter-spacing: 1px; }
.nav-idioma a[aria-current="page"] { color: var(--neon-cyan, #00f0ff); font-weight: 700; }

/* ============================================================================
   GALERÍA DE EDICIONES ANTERIORES (portada)
   ============================================================================ */

/* Cuadrícula de carteles (siempre visible) */
.ediciones-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.edicion-tarjeta {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: .75rem; cursor: pointer; text-align: center; color: inherit; font: inherit;
  display: flex; flex-direction: column; gap: .6rem; transition: transform .15s, border-color .15s;
}
.edicion-tarjeta:hover, .edicion-tarjeta[aria-expanded="true"] { transform: translateY(-4px); border-color: var(--neon-cyan, #00f0ff); }
.edicion-tarjeta-cartel {
  display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.35);
}
/* object-fit + aspect-ratio fijo: el cartel SIEMPRE guarda su proporción,
   nunca se estira (esto es lo que corrige el problema en escritorio). */
.edicion-tarjeta-cartel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edicion-tarjeta-sin-cartel { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; }
.edicion-tarjeta-titulo { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.edicion-anio { color: var(--neon-cyan, #00f0ff); font-weight: 400; font-size: .85em; }

/* Ficha de detalle (oculta hasta tocar un cartel) */
.edicion-detalle {
  margin-top: 2rem; background: rgba(255,255,255,.04); border: 1px solid var(--neon-cyan, #00f0ff);
  border-radius: 14px; padding: 1.5rem; position: relative;
}
.edicion-detalle[hidden] { display: none; }
.edicion-cerrar {
  position: absolute; top: .75rem; right: .75rem; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 6px;
  padding: .35rem .7rem; font-size: .8rem; cursor: pointer;
}
.edicion-cerrar:hover { border-color: var(--neon-magenta, #ff2e88); }

.edicion-detalle-cabecera { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-right: 5rem; }
.edicion-detalle-cartel {
  width: 160px; max-width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px;
  flex-shrink: 0; align-self: flex-start; box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.edicion-detalle-texto { flex: 1; min-width: 240px; }
.edicion-detalle-texto h3 { margin: 0 0 .5rem; }

.galeria-carrusel { position: relative; max-width: 100%; border-radius: 10px; overflow: hidden; background: #000; }
.galeria-carrusel-fotos { position: relative; aspect-ratio: 16 / 9; }
.galeria-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.galeria-slide.is-activa { opacity: 1; pointer-events: auto; }
.galeria-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.galeria-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(10,1,24,.55); color: #fff; border: 1px solid rgba(255,255,255,.3);
  width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.4rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.galeria-flecha-prev { left: .6rem; }
.galeria-flecha-next { right: .6rem; }
.galeria-flecha:hover { background: rgba(0,240,255,.35); }

.galeria-puntos { position: absolute; bottom: .6rem; left: 0; right: 0; display: flex; justify-content: center; gap: .4rem; }
.galeria-punto { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255,255,255,.4); border: none; padding: 0; cursor: pointer; }
.galeria-punto.is-activo { background: var(--neon-cyan, #00f0ff); }

@media (max-width: 640px) {
  .edicion-detalle-cabecera { flex-direction: column; align-items: center; text-align: center; padding-right: 0; }
  .edicion-detalle-cartel { width: 130px; }
  .edicion-cerrar { position: static; display: block; margin: 0 auto 1rem; }
}

/* ============================================================================
   EDITOR DEL BLOG (tipo Word) — admin
   ============================================================================ */
.rc-editor-wrap { border: 1px solid rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.25); }
.rc-editor-toolbar {
  display: flex; flex-wrap: wrap; gap: .25rem; align-items: center;
  padding: .5rem; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.15);
}
.rc-editor-toolbar button {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: #fff;
  border-radius: 5px; padding: .35rem .55rem; font-size: .85rem; cursor: pointer; min-width: 2.1rem;
}
.rc-editor-toolbar button:hover { background: rgba(0,240,255,.18); border-color: var(--neon-cyan, #00f0ff); }
.rc-editor-separador { width: 1px; height: 1.4rem; background: rgba(255,255,255,.18); margin: 0 .25rem; }
.rc-editor-area {
  min-height: 320px; padding: 1rem 1.1rem; color: #fff; line-height: 1.6; outline: none;
}
.rc-editor-area img, .rc-editor-area video, .rc-editor-area iframe { max-width: 100%; border-radius: 6px; margin: .5rem 0; }
.rc-editor-area blockquote { border-left: 3px solid var(--neon-magenta, #ff2e88); margin: .75rem 0; padding-left: 1rem; color: var(--text-muted); }
.rc-editor-area h2, .rc-editor-area h3 { color: var(--neon-cyan, #00f0ff); }

/* ============================================================================
   CONTENIDO DEL BLOG — público
   ============================================================================ */
.blog-contenido { line-height: 1.75; font-size: 1.05rem; }
.blog-contenido p { margin: 0 0 1.1rem; }
.blog-contenido h2, .blog-contenido h3, .blog-contenido h4 { color: var(--neon-cyan, #00f0ff); margin: 1.75rem 0 .75rem; }
.blog-contenido blockquote {
  border-left: 3px solid var(--neon-magenta, #ff2e88); margin: 1.25rem 0; padding: .25rem 0 .25rem 1.25rem;
  color: var(--text-muted); font-style: italic;
}
.blog-contenido ul, .blog-contenido ol { margin: 0 0 1.1rem 1.4rem; }
.blog-contenido img, .blog-contenido video { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; display: block; }
.blog-contenido iframe { max-width: 100%; border-radius: 8px; margin: 1rem 0; aspect-ratio: 16/9; width: 100%; height: auto; }
.blog-contenido a { color: var(--neon-cyan, #00f0ff); text-decoration: underline; }

.blog-tarjeta {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform .15s, border-color .15s;
}
.blog-tarjeta:hover { transform: translateY(-3px); border-color: var(--neon-cyan, #00f0ff); }
.blog-tarjeta img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-tarjeta-cuerpo { padding: 1rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.blog-tarjeta-cuerpo h3 { margin: 0 0 .4rem; }
.blog-tarjeta-cuerpo p { color: var(--text-muted); font-size: .9rem; flex: 1; }

/* ============================================================================
   ASISTENTE VIRTUAL (widget de chat flotante)
   ============================================================================ */
.asistente-widget { position: fixed; left: 1rem; bottom: 1rem; z-index: 1999; }
.asistente-toggle {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--neon-magenta, #ff2e88); color: #0a0118; font-size: 1.4rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); transition: transform .15s;
}
.asistente-toggle:hover { transform: scale(1.08); }

.asistente-panel {
  position: absolute; left: 0; bottom: 4rem; width: min(340px, 88vw); height: min(460px, 70vh);
  background: #0a0118; border: 2px solid var(--neon-magenta, #ff2e88); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.asistente-panel[hidden] { display: none; }

.asistente-cabecera {
  display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem;
  background: rgba(255,46,136,.12); border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: 'Press Start 2P', cursive; font-size: .7rem; color: #fff;
}
.asistente-cabecera button { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; }

.asistente-mensajes { flex: 1; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.asistente-burbuja { max-width: 85%; padding: .5rem .75rem; border-radius: 10px; font-size: .88rem; line-height: 1.4; white-space: pre-wrap; }
.asistente-burbuja-asistente { align-self: flex-start; background: rgba(255,255,255,.08); color: #fff; }
.asistente-burbuja-usuario { align-self: flex-end; background: var(--neon-cyan, #00f0ff); color: #0a0118; }

.asistente-sugerencias { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .75rem .5rem; }
.asistente-chip {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff;
  border-radius: 999px; padding: .3rem .65rem; font-size: .75rem; cursor: pointer; text-align: left;
}
.asistente-chip:hover { border-color: var(--neon-cyan, #00f0ff); background: rgba(0,240,255,.12); }

.asistente-form { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid rgba(255,255,255,.12); }
.asistente-form input {
  flex: 1; padding: .5rem .7rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.3); color: #fff;
}
.asistente-form button {
  background: var(--neon-magenta, #ff2e88); color: #0a0118; border: none; border-radius: 8px;
  padding: 0 .9rem; font-size: 1.1rem; cursor: pointer;
}

@media (max-width: 480px) {
  .asistente-widget { left: .6rem; bottom: .6rem; }
  .asistente-panel { width: 92vw; height: 65vh; }
}
/* ============================================================================
   ACTIVIDADES Y TORNEOS (portada) — carteles de esta edición
   ============================================================================ */
.actividades-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
.actividad-tarjeta-sin-enlace { cursor: default; }
.actividad-tarjeta-sin-enlace:hover { transform: none; border-color: rgba(255,255,255,.12); }
.actividad-tarjeta-info { font-size: .78rem; color: var(--text-muted); text-align: center; }
}
.actividad-tarjeta {
  display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: .75rem; transition: transform .15s, border-color .15s;
}
.actividad-tarjeta:hover { transform: translateY(-4px); border-color: var(--neon-magenta, #ff2e88); }
.actividad-tarjeta-cartel {
  display: flex; align-items: center; justify-content: center; width: 100%;
  aspect-ratio: 210 / 297; /* proporción A4, como tus carteles */
  border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.4);
}
/* object-fit: contain (no "cover"): tus carteles llevan texto hasta los
   bordes, así que preferimos verlos completos antes que recortados. */
.actividad-tarjeta-cartel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.actividad-tarjeta-sin-cartel { font-size: 2.5rem; }
.actividad-tarjeta-titulo { font-size: .92rem; font-weight: 600; text-align: center; line-height: 1.3; }

/* ============================================================================
   CONVOCATORIA / ANUNCIO DESTACADO (ej. Callejón de Artesanos)
   ============================================================================ */
.convocatoria-banner {
  background: linear-gradient(135deg, rgba(255,46,136,.12), rgba(0,240,255,.08));
  border: 1px solid var(--neon-magenta, #ff2e88);
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
}
.convocatoria-badge {
  display: inline-block;
  background: var(--neon-magenta, #ff2e88);
  color: #0a0118;
  font-family: 'Press Start 2P', cursive;
  font-size: .7rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  animation: convocatoria-parpadeo 2s ease-in-out infinite;
}
@keyframes convocatoria-parpadeo {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}
.convocatoria-lista {
  list-style: none; padding: 0; margin: 1.5rem auto; max-width: 480px;
  text-align: left; display: flex; flex-direction: column; gap: .6rem;
}
.convocatoria-lista li { font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .convocatoria-badge { animation: none; }
}