/* ═══════════════════════════════════════════════════════════
   AIRSOFT CLUB — TACTICAL ENHANCE v1
   Overlay que refuerza la estética "sala de guerra" sobre
   style.css. Se carga DESPUÉS de style.css.
   ═══════════════════════════════════════════════════════════ */

/* ─── 1-2. Fondo HUD + scanlines ─────────────────────────────
   MIGRADO A skins.css. Las reglas body y body::after ahora
   viven allí, interpoladas con var(--grid-hue) y
   var(--scanline-alpha) para que cada skin pinte su propio
   color. MK1 (tactical) conserva los valores originales.
   ─────────────────────────────────────────────────────────── */

/* ─── 3. Números en mono tabular siempre ─────────────────── */
time, .badge, .counter, .stat-number, .stat-value,
.role-tag, .nav-badge, .num-operador, .fecha, .hora,
table td, table th,
[data-mono], .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ─── 4. Bracket corners reutilizables ───────────────────── */
.tactical-frame {
  position: relative;
}
.tactical-frame::before,
.tactical-frame::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--accent, #6abf7b);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  transition: all 200ms ease;
}
.tactical-frame::before {
  top: -2px; left: -2px;
  border-top-width: 2px; border-left-width: 2px;
}
.tactical-frame::after {
  bottom: -2px; right: -2px;
  border-bottom-width: 2px; border-right-width: 2px;
}
.tactical-frame:hover::before,
.tactical-frame:hover::after {
  width: 18px; height: 18px;
  border-color: var(--accent-bright, #84d693);
}

/* Aplicar brackets automáticamente a tarjetas principales */
.card,
.convocatoria-card,
.partida-card,
.galeria-item,
.anuncio-card {
  position: relative;
}
.card::before, .card::after,
.convocatoria-card::before, .convocatoria-card::after,
.partida-card::before, .partida-card::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--accent-dim, #3a7a47);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  opacity: 0.7;
  transition: all 180ms ease;
}
.card::before,
.convocatoria-card::before,
.partida-card::before {
  top: -1px; left: -1px;
  border-top-width: 2px; border-left-width: 2px;
}
.card::after,
.convocatoria-card::after,
.partida-card::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 2px; border-right-width: 2px;
}
.card:hover::before, .card:hover::after,
.convocatoria-card:hover::before, .convocatoria-card:hover::after,
.partida-card:hover::before, .partida-card:hover::after {
  opacity: 1;
  width: 16px; height: 16px;
  border-color: var(--accent, #6abf7b);
}

/* ─── 5. Indicadores "LIVE" con punto pulsante ───────────── */
@keyframes cac-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.85); }
}
.badge-live,
.status-activo,
.nav-badge {
  position: relative;
  padding-left: 16px !important;
}
.badge-live::before,
.status-activo::before,
.nav-badge::before {
  content: '';
  position: absolute;
  left: 5px; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  animation: cac-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 6px currentColor;
}

/* ─── 6. Separadores con chevrons tácticos ───────────────── */
hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border-base) 20%,
    var(--accent-dim) 50%,
    var(--border-base) 80%,
    transparent 100%
  );
  position: relative;
  margin: 24px 0;
}
hr::before {
  content: '▸▸▸';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-base);
  padding: 0 12px;
  color: var(--accent-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
}

/* ─── 7. Prefijo tipo HUD en títulos de sección ──────────── */
.section-title::before,
h2.tactical-title::before {
  content: '// ';
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: normal;
  opacity: 0.7;
}

/* ─── 8. Decrypt reveal en aparición de cards ────────────── */
@keyframes cac-decrypt {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  60%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
.card, .convocatoria-card, .partida-card, .anuncio-card {
  animation: cac-decrypt 480ms ease-out both;
}

/* ─── 9. Botones primarios con borde doble + letter-spacing  */
.btn-primary {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px var(--accent-dim),
    0 2px 8px rgba(106, 191, 123, 0.15);
  transition: all 150ms ease;
}
.btn-primary:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 1px var(--accent),
    0 0 16px rgba(106, 191, 123, 0.35);
}

/* ─── 10. Badge de número de operador con tratamiento HUD ── */
.num-operador,
.patch-num {
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--accent-bright);
  text-shadow: 0 0 8px var(--accent-glow);
  letter-spacing: 0.08em;
}

/* Placeholder para parches ausentes — solo si no hay imagen real cargada.
   Aplicar manualmente a contenedores con clase .patch-placeholder. */
.patch-placeholder {
  background: var(--bg-elevated);
  min-width: 80px; min-height: 80px;
  border: 1px solid var(--border-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--accent);
}

/* ─── 11. Estado de carga / skeleton con estética HUD ────── */
.loading::before {
  content: '// OBTENIENDO DATOS ';
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: 2px;
  font-size: 12px;
}

/* ─── 12. Footer más táctico ─────────────────────────────── */
.footer {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  border-top: 1px solid var(--border-dim);
  background: linear-gradient(to bottom, transparent, var(--bg-surface));
  padding: 20px 16px;
  text-align: center;
}

/* ─── 13. Focus ring más visible (accesibilidad) ─────────── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── 14. Breakpoints extremos ───────────────────────────── */

/* TV inteligente / monitor muy grande */
@media (min-width: 1920px) {
  :root { --font-base: 19px; }
  .main, .navbar-inner, .container { max-width: 1600px; margin-left: auto; margin-right: auto; }
}

/* iMac 5K / pantallas enormes */
@media (min-width: 2560px) {
  :root { --font-base: 21px; }
  .main, .navbar-inner, .container { max-width: 1800px; }
  body { background-size: 60px 60px, 60px 60px, 100% 100%; }
}

/* Móvil muy pequeño (iPhone SE antiguo, 320px) */
@media (max-width: 360px) {
  :root { --font-base: 15px; }
  .brand-text { display: none; }
}

/* Mejoras para landscape en móvil */
@media (max-height: 500px) and (orientation: landscape) {
  .navbar { position: static; }
  .auth-wrap { padding: 8px; }
}

/* Alta densidad (Retina) — reforzar bordes */
@media (min-resolution: 2dppx) {
  .tactical-frame::before,
  .tactical-frame::after,
  .card::before, .card::after {
    border-width: 1.5px;
  }
}

/* ─── 15. Container queries para tarjetas ────────────────── */
@supports (container-type: inline-size) {
  .card-list, .convocatorias-grid {
    container-type: inline-size;
  }
  @container (max-width: 500px) {
    .convocatoria-card { flex-direction: column; }
    .convocatoria-card .cartel { width: 100%; max-height: 180px; }
  }
}

/* ─── 16. Estilo específico para alerts mejorados ────────── */
.alert {
  border-left: 3px solid currentColor;
  font-family: var(--font-tactical);
  position: relative;
}
.alert-error::before    { content: '✖ '; font-weight: bold; }
.alert-success::before  { content: '✓ '; font-weight: bold; }

/* ─── 17. Mejora de legibilidad en inputs ────────────────── */
.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(106, 191, 123, 0.15);
  outline: none;
}
.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ─── 18. Suavizado de iOS ───────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  input, textarea, select { font-size: 16px; } /* evita zoom automático en iOS */
}

/* ═══════════════════════════════════════════════════════════
   HOME DASHBOARD — sala de operaciones
   Añadido en el rediseño de la página de inicio
   ═══════════════════════════════════════════════════════════ */

.home-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
  /* Cada tarjeta a su altura natural; el panel PROTOCOLO sincroniza
     altura con BIG-OP vía JS para evitar que el texto largo del
     protocolo estire la fila y deje hueco bajo el countdown. */
  align-items: start;
}

.home-grid > section { min-width: 0; }

/* ─── Disposición desktop (≥1100px) ─────────────────────── */
.home-hero      { grid-column: 1 / -1; }
.home-big-op    { grid-column: 1 / span 8; }
.home-protocolo { grid-column: 9 / -1; }
.home-intel     { grid-column: 1 / span 7; }
.home-galeria   { grid-column: 8 / -1; }
.home-quick     {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 1099px) {
  .home-big-op, .home-protocolo,
  .home-intel,  .home-galeria { grid-column: 1 / -1; }
  .home-quick { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .home-quick { grid-template-columns: 1fr; }
}

/* ─── HERO COMMAND BAR ──────────────────────────────────── */
.hero-cmd-wrap {
  position: relative;
  width: 100%;
  border: 1px solid var(--border-base);
  overflow: hidden;
  background: var(--bg-base);
  min-height: 320px;
}
.hero-cmd-img,
.hero-cmd-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.hero-cmd-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 22px;
}

.hero-cmd-topbar,
.hero-cmd-footbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.hero-cmd-topbar .hud-cell { white-space: nowrap; }
.hero-cmd-topbar .hud-mid  { color: var(--accent-dim); flex: 1; text-align: center; }
.hero-cmd-topbar .hud-right {
  transition: opacity 220ms ease;
  text-align: right;
  min-width: 200px;
}

.hero-cmd-center { text-align: center; padding: 1.2rem 0; }
.hero-cmd-tagline {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.32em;
  margin-bottom: 0.35rem;
  opacity: 0.85;
}
.hero-cmd-headline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(240, 244, 241, 0.82);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  display: inline-block;
  transform-origin: center;
  animation: hero-lema-pulse 2.8s ease-in-out infinite;
  text-shadow:
    0 0 4px rgba(240, 244, 241, 0.25),
    0 0 10px rgba(106, 191, 123, 0.15);
}

@keyframes hero-lema-pulse {
  0%, 100% {
    opacity: 0.70;
    transform: scale(1);
    text-shadow:
      0 0 4px rgba(240, 244, 241, 0.20),
      0 0 10px rgba(106, 191, 123, 0.12);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
    text-shadow:
      0 0 6px rgba(240, 244, 241, 0.55),
      0 0 16px rgba(106, 191, 123, 0.35),
      0 0 28px rgba(106, 191, 123, 0.18);
  }
}

/* Decisión de proyecto: NO respetar prefers-reduced-motion para los efectos
   visuales del CAC — el branding táctico se mantiene siempre activo. */

.hero-cmd-footbar {
  border-top: 1px solid rgba(106, 191, 123, 0.2);
  padding-top: 10px;
  font-size: 0.7rem;
}
.hud-link {
  color: var(--accent-bright);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-dim);
  padding-bottom: 1px;
}
.hud-link:hover { color: var(--text-bright); border-color: var(--accent); }

@media (max-width: 700px) {
  /* Móvil vertical/estrecho — Opción C completa:
     · El wrap usa aspect-ratio del SVG (16:5) para mostrarlo entero
     · object-fit:contain garantiza que escudo (izq) y radar (der) se ven
     · El overlay (topbar, lema, footbar) se reduce proporcionalmente
       para no tapar las zonas laterales del SVG
     · overflow:visible + margin-bottom hacen hueco para los iconos
       sociales, que en móvil se colocan absolute debajo del banner
       (estilo definido inline en views/index.ejs) */
  .hero-cmd-wrap {
    min-height: auto;
    aspect-ratio: 16 / 5;
    overflow: visible;
    margin-bottom: 60px;
  }
  .hero-cmd-img,
  .hero-cmd-svg {
    min-height: auto;
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
  }
  .hero-cmd-overlay {
    padding: 4px 6px;
  }
  .hero-cmd-topbar,
  .hero-cmd-footbar {
    font-size: 0.5rem;
    gap: 0.4rem;
  }
  .hero-cmd-topbar .hud-mid { display: none; }
  .hero-cmd-topbar .hud-right { min-width: auto; }
  .hero-cmd-center {
    padding: 0.2rem 0;
  }
  .hero-cmd-tagline {
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.1rem;
  }
  .hero-cmd-headline {
    font-size: 0.5rem;
    letter-spacing: 0.10em;
  }
}

/* ─── PANEL HEADER común ────────────────────────────────── */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-dim);
}
.panel-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.panel-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 150ms;
}
.panel-link:hover { color: var(--accent); }

/* ─── BIG OP ────────────────────────────────────────────── */
.big-op-body {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 1.2rem;
  align-items: start;
}
@media (max-width: 700px) {
  .big-op-body { grid-template-columns: 1fr; }
}
.big-op-cartel-link { display: block; }
.big-op-cartel {
  width: 100%;
  display: block;
  border: 1px solid var(--border-base);
  background: var(--bg-elevated);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: border-color 200ms;
}
.big-op-cartel-link:hover .big-op-cartel { border-color: var(--accent); }
.big-op-cartel-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-base);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
}
.big-op-info { min-width: 0; }
.big-op-fecha-box {
  display: inline-block;
  border: 1px solid var(--accent-dim);
  padding: 6px 14px;
  margin-bottom: 12px;
  text-align: center;
  background: var(--accent-glow);
}
.bo-fecha-day {
  font-family: var(--font-tactical);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-bright);
  line-height: 1;
}
.bo-fecha-mes {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.15em;
  margin-top: 2px;
}
.big-op-titulo {
  font-family: var(--font-tactical);
  font-size: 1.45rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-bright);
  margin: 0 0 0.6rem;
  line-height: 1.2;
}
.big-op-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 18px;
  margin-bottom: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
}
.bo-label {
  display: inline-block;
  width: 44px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-dim);
  letter-spacing: 0.12em;
}
.bo-val { font-size: 0.92rem; color: var(--text-primary); }
.bo-val.mono { font-family: var(--font-mono); }

.big-op-countdown,
.big-op-recent-note {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
}
.cd-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent);
  letter-spacing: 0.15em;
}
.cd-val {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--text-bright);
  font-weight: 600;
}

.big-op-standby {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-secondary);
}
.standby-icon {
  font-size: 2rem;
  color: var(--accent-dim);
  margin-bottom: 12px;
  animation: cac-pulse 2.4s ease-in-out infinite;
}
.standby-text {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 18px;
  letter-spacing: 0.05em;
}

/* ─── PROTOCOLO ─────────────────────────────────────────── */
/* La tarjeta es un flex column: header fijo arriba, scroll abajo.
   Su altura se sincroniza vía JS con .home-big-op en desktop.
   El scroll usa indicador HUD lateral custom (no scrollbar nativo). */
.home-protocolo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; /* ya lo era por bg-operator, lo reafirmo */
}
.home-protocolo .panel-header {
  flex: 0 0 auto;
}
.protocolo-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Espacio a la derecha para el HUD bar custom */
  padding-right: 22px;
  /* Fade en el borde inferior para indicar contenido scrolleable */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
  /* Ocultar scrollbar nativo en todos los navegadores */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge legacy */
}
.protocolo-scroll::-webkit-scrollbar { /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
  display: none;
}

/* ─── HUD bar lateral custom (B) ─────────────────────────── */
.protocolo-hud-bar {
  position: absolute;
  right: 10px;
  top: 56px;     /* bajo el panel-header */
  bottom: 14px;
  width: 12px;
  z-index: 3;
  pointer-events: none;
  display: none; /* JS lo activa solo si hay overflow */
}
.phb-track {
  position: absolute;
  inset: 0;
  background: rgba(106, 191, 123, 0.06);
  border: 1px solid var(--border-base);
  border-radius: 1px;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}
.phb-tick {
  width: 100%;
  height: 1px;
  background: rgba(106, 191, 123, 0.25);
}
.phb-thumb {
  position: absolute;
  left: 1px;
  right: 1px;
  background: var(--accent);
  box-shadow:
    0 0 6px rgba(106, 191, 123, 0.6),
    inset 0 0 0 1px var(--accent-bright);
  border-radius: 0;
  transition: background 0.15s ease;
  pointer-events: none;
  /* Pequeñas marcas de "garra" arriba y abajo del thumb */
  background-image:
    linear-gradient(to bottom,
      var(--accent-bright) 0%, var(--accent-bright) 2px,
      var(--accent) 2px, var(--accent) calc(100% - 2px),
      var(--accent-bright) calc(100% - 2px), var(--accent-bright) 100%);
}
.phb-track:hover .phb-thumb {
  background: var(--accent-bright);
  box-shadow:
    0 0 10px rgba(132, 214, 147, 0.8),
    inset 0 0 0 1px #fff;
}

/* ─── Hint "▼ DESPLAZAR" parpadeante (C) ─────────────────── */
.protocolo-scroll-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: none; /* JS lo activa solo si hay overflow */
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(10, 12, 11, 0.85);
  border: 1px solid var(--accent-dim);
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  pointer-events: none;
  animation: pshPulse 1.6s ease-in-out infinite;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.protocolo-scroll-hint.dismissed {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}
.psh-arrow {
  display: inline-block;
  animation: pshArrow 1.6s ease-in-out infinite;
}
@keyframes pshPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(106,191,123,0); }
  50%      { box-shadow: 0 0 12px rgba(106,191,123,0.5); }
}
@keyframes pshArrow {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(3px); opacity: 0.6; }
}

/* En móvil/tablet (apilado) se libera la restricción flex y se
   ocultan los elementos HUD (que solo tienen sentido en desktop). */
@media (max-width: 1099px) {
  .home-protocolo {
    display: block;
    overflow: visible;
    height: auto !important;
  }
  .protocolo-scroll {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    padding-right: 0;
  }
  .protocolo-hud-bar,
  .protocolo-scroll-hint {
    display: none !important;
  }
}

.protocolo-marker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  padding: 3px 8px;
  margin-bottom: 14px;
}
.protocolo-text {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 10px;
}
.protocolo-text strong { color: var(--accent-bright); font-weight: 600; }
.protocolo-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-dim);
  font-size: 0.66rem;
  color: var(--text-dim);
  letter-spacing: 0.12em;
}

/* ─── INTEL FEED ────────────────────────────────────────── */
.intel-anuncios { display: flex; flex-direction: column; gap: 10px; }
.intel-anuncio {
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
}
.intel-anuncio-titulo {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-bright);
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.intel-anuncio-contenido {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
  line-height: 1.5;
}
.intel-anuncio-meta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-dim);
}

.intel-divider {
  margin: 16px 0 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.15em;
}
.intel-ops-list { display: flex; flex-direction: column; gap: 6px; }
.intel-op-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-elevated);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 150ms;
}
.intel-op-item:hover {
  border-left-color: var(--accent);
  background: var(--bg-hover);
}
.intel-op-date {
  flex-shrink: 0;
  width: 42px;
  text-align: center;
  border: 1px solid var(--border-base);
  padding: 4px 0;
}
.iod-day {
  display: block;
  font-family: var(--font-tactical);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.iod-mes {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.intel-op-info { min-width: 0; flex: 1; }
.intel-op-titulo {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.intel-op-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.intel-empty,
.intel-empty-full,
.galeria-empty {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  padding: 14px 0;
  text-align: center;
  line-height: 1.8;
}
.intel-empty-full { padding: 30px 0; }

/* ─── GALERÍA mosaico ───────────────────────────────────── */
.galeria-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  aspect-ratio: 1 / 1;
  max-height: 320px;
}
.mosaic-cell {
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-base);
  position: relative;
}
.mosaic-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease, filter 200ms;
  filter: saturate(0.85);
}
.galeria-mosaic:hover .mosaic-cell img {
  filter: saturate(1.1);
}
.mosaic-cell:hover img { transform: scale(1.08); }
.mosaic-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 1.5rem;
  opacity: 0.4;
}

/* ─── QUICK ACCESS ──────────────────────────────────────── */
.quick-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 16px 18px;
  transition: all 200ms;
}
.quick-card:hover {
  background: var(--bg-hover);
  transform: translateY(-2px);
}
.quick-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.quick-title {
  font-family: var(--font-tactical);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.quick-desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   Decoración: silueta de operador como fondo de tarjeta.
   Usa un elemento real <div class="bg-operator-img"></div>
   dentro del contenedor .bg-operator (NO un pseudo-elemento,
   para no colisionar con tactical-frame::before/::after que
   dibujan los brackets de las esquinas).
   ═══════════════════════════════════════════════════════════ */
.bg-operator {
  position: relative;
  overflow: hidden;
}
.bg-operator > * {
  position: relative;
  z-index: 1;
}
.bg-operator-img {
  position: absolute;
  right: -6%;
  bottom: -8%;
  width: 78%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  background-color: var(--accent);
  -webkit-mask-image: url('/img/operator-line.svg');
          mask-image: url('/img/operator-line.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

/* Variante más visible para tarjetas grandes */
.bg-operator-strong .bg-operator-img {
  opacity: 0.22;
  width: 92%;
  max-width: 500px;
}

/* En pantallas muy estrechas, atenuar */
@media (max-width: 600px) {
  .bg-operator-img {
    opacity: 0.10;
    width: 100%;
    right: -12%;
  }
}

/* ═══════════════════════════════════════════════════════════
   Navbar dropdown (Votaciones → Encuestas / Oficiales)
   Solo se activa en desktop (≥900px). En móvil, los hijos
   se muestran como entradas planas y el padre se oculta.
   ═══════════════════════════════════════════════════════════ */

/* Reset común a todas las pantallas */
.nav-dropdown {
  position: relative;
  list-style: none;
}
.nav-dropdown .nav-parent {
  cursor: default;
  user-select: none;
}
.nav-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-submenu li { list-style: none; }

/* ─── Móvil (<900px): plano, padre oculto ─────────────── */
@media (max-width: 899px) {
  .nav-dropdown > .nav-parent {
    display: none !important;
  }
  .nav-submenu {
    display: flex;
    flex-direction: column;
  }
  .nav-submenu a {
    display: flex;
    align-items: center;
    min-height: var(--touch-min, 44px);
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none;
  }
  .nav-submenu a:hover { color: var(--text-bright); background: var(--bg-hover); }
  .nav-submenu a.active { color: var(--accent); }
}

/* ─── Desktop (≥900px): hover dropdown ────────────────── */
@media (min-width: 900px) {
  .nav-dropdown > .nav-parent::after {
    content: ' ▾';
    font-size: 0.65em;
    margin-left: 4px;
    opacity: 0.55;
    color: var(--accent-dim);
  }
  .nav-dropdown:hover > .nav-parent,
  .nav-dropdown.active > .nav-parent {
    color: var(--accent);
  }

  .nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-top: 2px solid var(--accent);
    z-index: 200;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    flex-direction: column;
  }
  .nav-dropdown:hover > .nav-submenu,
  .nav-dropdown:focus-within > .nav-submenu {
    display: flex;
  }
  .nav-submenu a {
    display: block;
    padding: 0.7rem 1.1rem;
    font-family: var(--font-tactical);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-dim);
    text-align: left;
    white-space: nowrap;
    transition: all var(--transition, 120ms);
  }
  .nav-submenu li:last-child a { border-bottom: none; }
  .nav-submenu a:hover {
    color: var(--accent-bright);
    background: var(--bg-hover);
    padding-left: 1.4rem;
  }
  .nav-submenu a.active {
    color: var(--accent);
    background: var(--accent-glow);
    border-left: 2px solid var(--accent);
  }

  /* Pequeño bracket en el dropdown */
  .nav-submenu::before {
    content: '';
    position: absolute;
    top: -8px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--accent);
  }
}

/* ═══════════════════════════════════════════════════════════
   Compactación progresiva del navbar (evita desbordamiento)
   Aplica ajustes por rangos de ancho para que el navbar
   nunca empuje contenido fuera del viewport cuando están
   todas las alertas activas.
   ═══════════════════════════════════════════════════════════ */

/* ─── ≥1500px: todo visible, tal cual ─────────────────── */

/* ─── 1200–1499px: compactación media ─────────────────── */
@media (min-width: 900px) and (max-width: 1499px) {
  /* Ocultar el INPUT de búsqueda — hay poco espacio. Pero los iconos
     de notificaciones (firmas/avisos/menciones) siguen visibles porque
     ahora están dentro del mismo contenedor .nav-search pero apilados. */
  .nav-search-form {
    display: none !important;
  }
  /* Reducir padding de las entradas del menú principal */
  .nav-links > li > a,
  .nav-links > li > .nav-parent {
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.3px !important;
  }
  /* Compactar el user-badge: ocultar display_name, mantener role-tag */
  .nav-user .user-badge > span:not(.role-tag):not(.nav-badge) {
    display: none !important;
  }
  .nav-user .user-badge {
    padding: 0.35rem 0.5rem !important;
  }
  /* Iconos @ y ✉ más apretados */
  .nav-user .nav-avisos,
  .nav-user .nav-mentions {
    padding: 0.3rem 0.4rem !important;
  }
}

/* ─── 1100–1299px: compactación agresiva ──────────────── */
@media (min-width: 900px) and (max-width: 1299px) {
  /* Brand: ocultar el texto, dejar solo el logo */
  .brand-text {
    display: none !important;
  }
  /* Gap más pequeño entre elementos */
  .navbar-inner {
    gap: 0.4rem !important;
  }
  .nav-links {
    gap: 0.1rem !important;
  }
  /* Botón "Salir" más pequeño */
  .nav-user .btn-sm {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.7rem !important;
  }
}

/* ─── <1100px pero ≥900px: rango problemático ─────────── */
/* A partir de aquí tampoco caben los elementos con todas las
   alertas. Ocultamos los iconos decorativos atenuados, dejando
   solo los que tengan badge real (no leídos). Esto evita el
   desbordamiento cuando un usuario sin notificaciones usa una
   pantalla mediana. */
@media (min-width: 900px) and (max-width: 1099px) {
  /* Ocultar iconos @/✉ cuando están atenuados (sin notificaciones) */
  .nav-user .nav-avisos[style*="opacity:0.45"],
  .nav-user .nav-mentions[style*="opacity:0.45"] {
    display: none !important;
  }
  /* Entradas del menú aún más compactas */
  .nav-links > li > a,
  .nav-links > li > .nav-parent {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
    font-size: 0.68rem !important;
  }
}

/* ─── <900px: hamburguesa (ya existente, sin cambios) ── */

/* ═══════════════════════════════════════════════════════════
   FIX FORZADO: animación del lema del hero
   Override de máxima especificidad para garantizar la
   pulsación incluso si hay caché u otra regla en medio.
   ═══════════════════════════════════════════════════════════ */

.hero-cmd-overlay .hero-cmd-headline,
.hero .hero-cmd-headline,
div.hero-cmd-headline,
.hero-cmd-headline {
  animation: cac-lema-breath 2.8s ease-in-out infinite !important;
  display: inline-block !important;
  transform-origin: center center !important;
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: rgba(240, 244, 241, 0.85) !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 4px rgba(240, 244, 241, 0.30),
    0 0 12px rgba(106, 191, 123, 0.20) !important;
  will-change: opacity, transform, text-shadow;
}

@keyframes cac-lema-breath {
  0%, 100% {
    opacity: 0.62;
    transform: scale(1);
    text-shadow:
      0 0 3px rgba(240, 244, 241, 0.18),
      0 0 8px rgba(106, 191, 123, 0.10);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
    text-shadow:
      0 0 8px rgba(240, 244, 241, 0.75),
      0 0 20px rgba(106, 191, 123, 0.50),
      0 0 36px rgba(106, 191, 123, 0.25);
  }
}

/* ═══════════════════════════════════════════════════════════
   NAV ALERT · animación pulsante roja en pestañas con pendientes
   ═══════════════════════════════════════════════════════════
   El texto entero de la pestaña pasa a rojo táctico y respira
   cuando hay alertas. Sustituye al sistema de badges numéricos
   junto al texto, que añadía ancho horizontal innecesario.
   Aplicado a:
   · pestañas principales (Votaciones, Admin)
   · entradas de submenú (Encuestas, Oficiales)
   · entradas del menú móvil hamburguesa
   · iconos de la zona user (✍ ✉ @) cuando tienen pendientes
*/

@keyframes nav-alert-pulse {
  0%, 100% {
    opacity: 0.78;
    text-shadow:
      0 0 4px rgba(192, 57, 43, 0.45),
      0 0 8px rgba(192, 57, 43, 0.20);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 8px rgba(192, 57, 43, 0.85),
      0 0 16px rgba(192, 57, 43, 0.55),
      0 0 28px rgba(192, 57, 43, 0.25);
  }
}

/* Pestañas de navegación con alerta */
.nav-links a.nav-alert,
.nav-links .nav-parent.nav-alert,
.nav-submenu a.nav-alert {
  color: #e74c3c !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  animation: nav-alert-pulse 1.9s ease-in-out infinite;
}
.nav-links a.nav-alert:hover,
.nav-links .nav-parent.nav-alert:hover,
.nav-submenu a.nav-alert:hover {
  color: #ff6b5b !important;
}

/* Iconos pequeños zona user (✍ ✉ @) con alerta */
.nav-user .user-alert .user-icon-glyph {
  color: #e74c3c !important;
  animation: nav-alert-pulse 1.9s ease-in-out infinite;
}
.nav-user .user-alert .user-icon-num {
  color: #e74c3c !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   NAV USER COMPACT · zona user-actions más estrecha
   ═══════════════════════════════════════════════════════════
   Eliminado el badge ●N de online. Quedan 3 iconos pequeños
   (firmas/avisos/menciones) + nombre + botón salir.
   Compactamos al máximo los iconos y reducimos gap.
*/

.nav-user.nav-user-compact {
  gap: 0.45rem;
  align-items: center;
}

.nav-user .user-icon-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.18rem 0.32rem;
  text-decoration: none;
  border-radius: 3px;
  transition: background 150ms ease;
  opacity: 0.55;
}
.nav-user .user-icon-mini.user-alert {
  opacity: 1;
}
.nav-user .user-icon-mini:hover {
  background: rgba(106, 191, 123, 0.10);
  opacity: 1;
}
.nav-user .user-icon-mini .user-icon-glyph {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--accent);
  font-weight: bold;
  line-height: 1;
}
.nav-user .user-icon-mini .user-icon-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* En anchos medios, ocultar el role-tag para no añadir ancho */
@media (max-width: 1180px) {
  .nav-user .user-badge .role-tag {
    display: none;
  }
}

/* En anchos estrechos (pero todavía desktop), ocultar el nombre del usuario */
@media (max-width: 1080px) {
  .nav-user .user-badge > span:not(.role-tag) {
    display: none;
  }
}

/* Móvil: el menú hamburguesa ya tiene los iconos como entradas. Ocultamos
   los iconos de la zona user para no duplicar. El nombre y el "Salir"
   también van al menú móvil ya. */
@media (max-width: 899px) {
  .nav-user.nav-user-compact .user-icon-mini {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   NAV SEARCH STACK · iconos arriba, búsqueda abajo
   ═══════════════════════════════════════════════════════════
   La columna que antes era solo el buscador ahora apila:
   · arriba: iconos de notificaciones (firmas/avisos/menciones)
   · abajo: el input de búsqueda
   En anchos medios (900-1499) solo el input se oculta;
   los iconos siguen visibles.
*/

.nav-search-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.35rem !important;
  justify-content: center;
}

.nav-search-stack .nav-search-icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.5rem;
}

.nav-search-stack .nav-search-form {
  display: flex;
}

.nav-search-stack .nav-search-form .search-input {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   MENU TOGGLE ALERT · botón hamburguesa pulsante
   ═══════════════════════════════════════════════════════════
   Cuando hay cualquier alerta acumulada (votaciones, encuestas,
   admin, firmas, avisos, menciones) y la pantalla está en modo
   móvil con la hamburguesa visible, el icono ☰ pasa a rojo y
   pulsa para llamar la atención antes incluso de abrir el menú.
*/

.menu-toggle.menu-toggle-alert {
  color: #e74c3c !important;
  text-shadow:
    0 0 4px rgba(192, 57, 43, 0.45),
    0 0 12px rgba(192, 57, 43, 0.30);
  animation: nav-alert-pulse 1.9s ease-in-out infinite;
  border-color: rgba(231, 76, 60, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════
   USER BADGE COMPACTO · nick arriba, rol debajo
   ═══════════════════════════════════════════════════════════
   El enlace "Mi perfil" de la zona user contiene:
     · nombre del usuario
     · role-tag (socio/aspirante/directiva…)
   Antes iban en una sola fila horizontal, ocupando mucho ancho.
   Ahora se apilan en 2 filas verticales: nick arriba, rol debajo.
   Esto libera ~50-80px de ancho en el navbar.

   Afecta SOLO al badge del perfil (no a los iconos user-icon-mini
   que son elementos distintos aunque compartan la clase user-badge).
*/

.nav-user .user-badge:not(.user-icon-mini) {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.1;
  /* Reset de los estilos heredados del .user-badge genérico para que el
     recuadro/borde no aparezca y el badge del perfil quede limpio. Solo
     el role-tag interior mantiene su propio recuadro. */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.nav-user .user-badge:not(.user-icon-mini) > span:not(.role-tag) {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 500;
}

.nav-user .user-badge:not(.user-icon-mini) .role-tag {
  font-size: 0.62rem;
  padding: 0.05rem 0.4rem;
  line-height: 1.2;
  letter-spacing: 0.8px;
}

/* ═══════════════════════════════════════════════════════════
   FIX ESPECIFICIDAD · iconos zona user con alerta
   ═══════════════════════════════════════════════════════════
   Override defensivo al final del fichero: asegura que cuando
   un icono ✍/✉/@ tiene la clase user-alert, el texto se ve en
   rojo pulsante por encima de cualquier otra regla del sistema.
   Selector compuesto (user-icon-mini.user-alert) para aumentar
   la especificidad por encima del color verde del user-icon-mini.
*/
.nav-user .user-icon-mini.user-alert .user-icon-glyph,
.nav-user a.user-icon-mini.user-alert .user-icon-glyph {
  color: #e74c3c !important;
  animation: nav-alert-pulse 1.9s ease-in-out infinite !important;
}
.nav-user .user-icon-mini.user-alert .user-icon-num,
.nav-user a.user-icon-mini.user-alert .user-icon-num {
  color: #e74c3c !important;
  font-weight: 700 !important;
}