/* ═══════════════════════════════════════════════════════════
   AIRSOFT CLUB — RESPONSIVE HOT FIXES v1
   Correcciones globales para prevenir desbordamientos.
   Cargar DESPUÉS de tactical-enhance.css y modal-system.css.
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. CINTURÓN DE SEGURIDAD: nada se sale del viewport ─── */
html, body {
  max-width: 100%;
  overflow-x: hidden;            /* impide scroll horizontal por error en cualquier hijo */
}

/* ─── 2. Word-wrap defensivo en contenido largo ───────────── */
.card,
.alert,
.empty-state,
.page-header,
.content-section,
.page-content {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* URLs, emails, hashes largos: cortar antes de desbordar */
.page-content a,
.alert a,
.card a,
td a,
.content-section a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ─── 3. Imágenes y media siempre responsive ──────────────── */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* SVG inline: que escale dentro del contenedor padre */
svg:not([width]):not([height]) {
  max-width: 100%;
  height: auto;
}

/* SVG infografías con viewBox: forzar a que sean responsive aunque
   tengan width fijo, manteniendo el aspect-ratio del viewBox */
svg[viewBox] {
  max-width: 100%;
  height: auto;
}

/* ─── 4. Tablas: wrapper automático si están sueltas ──────── */
/* Ya tienes .table-wrap pero hay tablas sin wrapper.
   Esto fuerza scroll horizontal en CUALQUIER tabla, por si acaso. */
.card > table,
.content-section > table,
main > table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── 5. Inputs nunca se salen ────────────────────────────── */
input, textarea, select, .form-control {
  max-width: 100%;
  box-sizing: border-box;
}
/* Forzar que un input con width fijo en px (legacy) respete el padre */
input[style*="width:"], textarea[style*="width:"], select[style*="width:"] {
  max-width: 100%;
}

/* ─── 6. Pre/code: scroll en lugar de desbordar ───────────── */
pre, code, kbd, samp {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: normal;            /* en código no queremos romper palabras */
  white-space: pre;
}
pre {
  -webkit-overflow-scrolling: touch;
  padding: 0.6rem 0.8rem;
  background: var(--bg-elevated, #1c211e);
  border: 1px solid var(--border-dim, rgba(120,140,128,0.12));
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ─── 7. Flex/Grid items: min-width:0 para que no exploten ── */
.btn-group > *,
.form-row > *,
.stats-grid > *,
.page-header > *,
.card-header > * {
  min-width: 0;
}

/* ─── 8. Texto largo en tablas — wrap por defecto ─────────── */
tbody td {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  /* Excepción: columnas con clase .nowrap o .col-narrow */
}
tbody td.nowrap,
thead th.nowrap {
  white-space: nowrap;
}

/* ─── 9. Banners de cabecera (header.ejs) — móvil ─────────── */
/* Los 4 banners (sancionado, justificaciones, ficha, histórico)
   tenían min-width:200px en el contenido, lo que en 320px provoca
   que el botón se corte. Aseguramos wrap correcto. */
nav + div[style*="border-top"] > div {
  min-width: 0 !important;
}
nav + div[style*="border-top"] {
  /* En 320px, los textos largos como motivos de baneo deben envolverse */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ─── 10. Brand text — añadimos breakpoint para móvil pequeño  */
@media (max-width: 360px) {
  .brand-text-line2 { display: none; }   /* "AIRSOFT CLUB" se quita */
  .navbar { padding: 0 0.5rem; }
  .navbar-inner { gap: 0.3rem; }
}

/* ─── 11. nav-icons-row: si NO caben los 3 iconos, wrap ───── */
.nav-icons-row {
  flex-wrap: wrap;
  min-width: 0;
}

/* ─── 12. Search input nunca rompe el navbar ──────────────── */
.search-input {
  min-width: 0;
  max-width: 100%;
}
/* En <900px (rango hamburguesa) tanto el buscador como los botones de
   sesión para visitantes ya están duplicados como entradas
   .nav-user-mobile dentro del propio menú. Ocultarlos en el navbar
   evita que .nav-user (con flex-shrink:0) desborde el viewport y deje
   "Registro" cortado mostrando solo la "R". El badge del usuario
   logueado (.nav-user sin --guest) se mantiene visible. */
@media (max-width: 899px) {
  .navbar-inner > .nav-search,
  .navbar-inner > .nav-user--guest {
    display: none;
  }
}

/* ─── 13. user-badge: limita longitud del display_name ────── */
.user-badge span:not(.role-tag) {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* ─── 13-bis. <900px (hamburguesa): .nav-user logueado debe poder
     truncar el nick si el viewport es muy estrecho (320px iPhone SE
     con directiva logueado = ●N + nick + role-tag + Salir desbordan).
     Permitimos que el contenedor se comprima y el nick recorte con
     ellipsis en lugar de empujar "Salir" fuera del viewport. */
@media (max-width: 899px) {
  .nav-user {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }
  .nav-user .user-badge {
    min-width: 0;
  }
  .nav-user .user-badge > span:not(.role-tag) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* ─── 14. Botones que son claramente "acción única" ────────── */
.btn-block {
  width: 100%;
  max-width: 100%;
}

/* ─── 15. Submenú dropdown — nunca se sale del viewport ───── */
@media (min-width: 900px) {
  .nav-submenu {
    /* Si el dropdown se posiciona cerca del borde derecho del viewport,
       este max-width evita que se desborde. */
    max-width: calc(100vw - 2rem);
  }
}

/* ─── 16. Galería — slide proporcional con max ────────────── */
.gallery-slide {
  min-width: 0;
}
.gallery-slide .caption {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ─── 17. Page-header título largo no rompe ──────────────── */
.page-header h1,
.page-header p {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  min-width: 0;
}

/* ─── 18. Card-header: nombres largos no rompen ──────────── */
.card-header h2 {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
}

/* ─── 19. SMART TV / pantallas grandes — más respiro ───────  */
@media (min-width: 1920px) {
  /* Aumentamos áreas táctiles para mando a distancia */
  :root {
    --touch-min: 56px;
  }
  .btn { padding: 0.8rem 1.6rem; font-size: 1rem; }
  .btn-sm { min-height: 44px; padding: 0.4rem 0.95rem; font-size: 0.85rem; }
  .nav-links a { font-size: 0.95rem; padding: 0.7rem 1rem; }
  .form-control { font-size: 1rem; padding: 0.85rem 1rem; }
  .card { padding: 2rem; }
  table { font-size: 1rem; }
  thead th { font-size: 0.78rem; padding: 0.85rem; }
  tbody td { padding: 0.85rem; }

  /* Focus muy visible para mandos sin puntero (Smart TV) */
  *:focus-visible {
    outline: 2px solid var(--accent, #6abf7b);
    outline-offset: 3px;
  }
}
@media (min-width: 2560px) {
  :root { --touch-min: 64px; }
  .btn { padding: 1rem 2rem; font-size: 1.15rem; }
  .form-control { font-size: 1.15rem; padding: 1rem 1.2rem; }
  .card { padding: 2.5rem; }
}

/* ─── 20. Equivalencia hover↔focus para Smart TV (sin ratón)  */
@media (hover: none) {
  /* En dispositivos sin hover (Smart TV con mando, móvil táctil),
     activamos los estados :hover también con :focus-within
     para que los dropdowns funcionen con focus. */
  .nav-dropdown:focus-within > .nav-submenu {
    display: flex;
  }
}