/* ═══════════════════════════════════════════════════════════ AIRSOFT CLUB — UNIFIED MODAL SYSTEM v1 Sistema unificado de modales / overlays / lightboxes. Reemplaza los estilos inline diseminados en EJS. Cargar DESPUÉS de tactical-enhance.css. ═══════════════════════════════════════════════════════════ */ /* ─── Bloqueo de scroll en cuando hay modal abierto ─ */ body.modal-open { overflow: hidden; /* Compensa la barra de scroll para evitar "salto" del layout */ padding-right: var(--scrollbar-width, 0px); } /* ─── Overlay base ──────────────────────────────────────── */ .modal { display: none; /* Por defecto oculto. La clase .is-open lo muestra */ position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.78); /* Padding seguro: respeta notches y barra de estado en móvil */ padding: max(env(safe-area-inset-top, 0px), 1rem) max(env(safe-area-inset-right, 0px), 1rem) max(env(safe-area-inset-bottom, 0px), 1rem) max(env(safe-area-inset-left, 0px), 1rem); align-items: center; justify-content: center; -webkit-overflow-scrolling: touch; overflow-y: auto; /* Animación entrada */ animation: modalFadeIn 160ms ease-out; } .modal.is-open { display: flex; } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalDialogIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .modal, .modal__dialog { animation: none; } } /* ─── Diálogo (caja interior del modal) ──────────────────── */ .modal__dialog { position: relative; background: var(--bg-card, #161a18); border: 1px solid var(--border-base, rgba(120, 140, 128, 0.2)); border-top: 2px solid var(--accent, #6abf7b); /* Anchura responsive: nunca más ancha que el viewport menos paddings */ width: 100%; max-width: min(560px, 100%); /* Altura: nunca más alta que el viewport */ max-height: calc(100dvh - 2rem); max-height: calc(100vh - 2rem); /* fallback */ display: flex; flex-direction: column; overflow: hidden; /* el scroll va en .modal__body */ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); animation: modalDialogIn 180ms ease-out; } /* Variantes de tamaño */ .modal__dialog--sm { max-width: min(420px, 100%); } .modal__dialog--md { max-width: min(560px, 100%); } /* default */ .modal__dialog--lg { max-width: min(760px, 100%); } .modal__dialog--xl { max-width: min(1040px, 100%); } .modal__dialog--danger { border-top-color: var(--danger, #d4534a); } .modal__dialog--warning { border-top-color: var(--warning, #d4a94a); } /* ─── Cabecera ───────────────────────────────────────────── */ .modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; padding: 1rem 1.2rem 0.7rem; border-bottom: 1px solid var(--border-dim, rgba(120, 140, 128, 0.12)); flex-shrink: 0; } .modal__title { font-family: var(--font-tactical, sans-serif); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-bright, #f0f4f1); margin: 0; /* Truncar título largo sin desbordar */ min-width: 0; word-break: break-word; hyphens: auto; } .modal__title--danger { color: var(--danger, #d4534a); } .modal__title--warning { color: var(--warning, #d4a94a); } .modal__close { flex-shrink: 0; width: var(--touch-min, 44px); height: var(--touch-min, 44px); background: transparent; border: 1px solid transparent; color: var(--text-dim, #6b7d6e); font-size: 1.4rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all var(--transition, 120ms); display: inline-flex; align-items: center; justify-content: center; } .modal__close:hover, .modal__close:focus-visible { border-color: var(--border-base, rgba(120, 140, 128, 0.2)); color: var(--text-bright, #f0f4f1); outline: none; } /* ─── Cuerpo (con scroll si hace falta) ──────────────────── */ .modal__body { padding: 1rem 1.2rem; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; /* Importante para que strings largos (URLs, emails) no rompan layout */ word-wrap: break-word; overflow-wrap: anywhere; } .modal__body p, .modal__body label { word-wrap: break-word; overflow-wrap: anywhere; } /* Padding más estrecho en móvil para aprovechar espacio */ @media (max-width: 480px) { .modal__header { padding: 0.8rem 0.9rem 0.6rem; } .modal__body { padding: 0.8rem 0.9rem; } .modal__footer { padding: 0.7rem 0.9rem; } .modal__title { font-size: 0.95rem; letter-spacing: 0.8px; } } /* ─── Footer / botonera ──────────────────────────────────── */ .modal__footer { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; padding: 0.85rem 1.2rem; border-top: 1px solid var(--border-dim, rgba(120, 140, 128, 0.12)); background: var(--bg-surface, #111413); flex-shrink: 0; } .modal__footer .btn { flex: 1 1 auto; /* botones ocupan todo el ancho disponible */ min-width: 120px; } @media (min-width: 481px) { .modal__footer .btn { flex: 0 1 auto; } /* en pantallas mayores, tamaño natural */ } /* ─── Lightbox (variante full-screen para imágenes) ───────── */ .modal--lightbox { background: rgba(0, 0, 0, 0.92); padding: 0.5rem; } .modal--lightbox .modal__dialog { background: transparent; border: none; box-shadow: none; max-width: min(95vw, 1200px); max-height: calc(100dvh - 1rem); align-items: center; justify-content: center; } .modal--lightbox img { max-width: 100%; max-height: calc(100dvh - 5rem); width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; } .modal--lightbox .modal__close { position: absolute; top: max(env(safe-area-inset-top, 0px), 0.5rem); right: max(env(safe-area-inset-right, 0px), 0.5rem); background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; z-index: 10; } /* ─── Smart TV / pantallas muy grandes ───────────────────── */ @media (min-width: 1920px) { .modal__dialog--md { max-width: 720px; } .modal__dialog--lg { max-width: 960px; } .modal__dialog--xl { max-width: 1280px; } .modal__title { font-size: 1.25rem; } .modal__close { width: 56px; height: 56px; font-size: 1.7rem; } } @media (min-width: 2560px) { .modal__title { font-size: 1.45rem; } .modal__close { width: 64px; height: 64px; font-size: 2rem; } } /* ─── Móvil landscape muy bajo (≤500px alto) ─────────────── */ @media (max-height: 500px) and (orientation: landscape) { .modal { padding: 0.5rem; align-items: flex-start; } .modal__dialog { max-height: calc(100dvh - 1rem); } }