/* ═══════════════════════════════════════════════════════════════
   iossa-seccion.css — selector de sección "Stats | Gran DT" + transición

   ARCHIVO COMPARTIDO: es idéntico en las dos webs
     pagina-mms → public/css/iossa-seccion.css
     Gran DT    → static/iossa-seccion.css
   Si se cambia uno, copiar el otro y subir el ?v= en las dos.

   El selector (<nav class="iossa-sw">) va dentro del menú propio de cada web:
     pagina-mms → arriba del menú lateral y en la barra de celular
     Gran DT    → en la barra verde, al lado del logo
   ═══════════════════════════════════════════════════════════════ */

.iossa-sw {
  --sw-stats: #ff7800;
  --sw-stats-hi: #ff9433;
  --sw-dt: #00e05a;
  --sw-dt-hi: #3dfa86;

  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid #232b35;
  font-family: 'DM Sans', system-ui, sans-serif;
  line-height: 1;
}

.iossa-sw-op {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 30px;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: #7f8b98;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.iossa-sw-op svg { width: 15px; height: 15px; flex: none; }
.iossa-sw-op:hover { background: rgba(255, 255, 255, 0.05); }
.iossa-sw-op.es-stats:not(.activa):hover { color: var(--sw-stats-hi); }
.iossa-sw-op.es-dt:not(.activa):hover    { color: var(--sw-dt-hi); }
.iossa-sw-op:focus-visible { outline: 2px solid #f2f5f7; outline-offset: 1px; }

/* La sección en la que estás, pintada con su color */
.iossa-sw-op.activa.es-stats {
  color: var(--sw-stats-hi);
  background: rgba(255, 120, 0, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 0, 0.5);
}
.iossa-sw-op.activa.es-dt {
  color: var(--sw-dt-hi);
  background: rgba(0, 224, 90, 0.13);
  box-shadow: inset 0 0 0 1px rgba(0, 224, 90, 0.5);
}

/* "Nuevo": aparece en la OTRA sección hasta que la visitás una vez
   (lo maneja iossa-seccion.js con localStorage). */
.iossa-sw-nuevo {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #07090c;
  animation: iossa-sw-latido 2.2s ease-in-out infinite;
}
.iossa-sw-nuevo[hidden] { display: none; }
.es-stats .iossa-sw-nuevo { background: var(--sw-stats); --sw-glow: rgba(255, 120, 0, 0.55); }
.es-dt    .iossa-sw-nuevo { background: var(--sw-dt);    --sw-glow: rgba(0, 224, 90, 0.55); }
@keyframes iossa-sw-latido {
  0%, 100% { box-shadow: 0 0 0 0 var(--sw-glow); }
  50%      { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0); }
}

/* En lugares angostos el "Nuevo" flota sobre la esquina del botón, como el
   globito de una notificación, en vez de ocupar ancho. */
.sidebar .iossa-sw-nuevo,
.iossa-sw-nuevo.flota {
  position: absolute;
  top: -12px;
  right: -3px;
  height: 14px;
  padding: 0 4px;
  font-size: 0.52rem;
  border: 2px solid #0d1014;
  box-sizing: content-box;
}

/* ── Ubicación: pagina-mms, menú lateral ───────────────────────── */
.sidebar .iossa-sw {
  display: flex;
  margin: 0.15rem 0.85rem 0.9rem;
}
.sidebar .iossa-sw-op { flex: 1; padding: 0 0.5rem; }

/* Notebooks: el menú lateral es un riel de íconos (ver sidebar.css). El
   selector se apila en dos íconos y vuelve a su forma al pasar el mouse. */
@media (min-width: 769px) and (max-width: 1400px) {
  .sidebar .iossa-sw {
    flex-direction: column;
    gap: 3px;
    margin: 0.15rem 0.5rem 0.9rem;
    border-radius: 12px;
  }
  /* flex: none — en columna, el flex: 1 de arriba le ganaría al alto y los aplastaría */
  .sidebar .iossa-sw-op { flex: none; width: 100%; height: 36px; padding: 0; font-size: 0; gap: 0; border-radius: 9px; }
  .sidebar .iossa-sw-op svg { width: 18px; height: 18px; }
  .sidebar .iossa-sw-nuevo {
    position: absolute; top: 4px; right: 8px;
    width: 7px; height: 7px; padding: 0; font-size: 0;
  }
  .sidebar:hover .iossa-sw { flex-direction: row; gap: 2px; margin: 0.15rem 0.85rem 0.9rem; border-radius: 999px; }
  .sidebar:hover .iossa-sw-op { flex: 1; width: auto; height: 30px; padding: 0 0.5rem; font-size: 0.8rem; gap: 0.4rem; border-radius: 999px; }
  .sidebar:hover .iossa-sw-op svg { width: 15px; height: 15px; }
  .sidebar:hover .iossa-sw-nuevo {
    top: -12px; right: -3px; width: auto; height: 14px; padding: 0 4px; font-size: 0.52rem;
  }
}

/* ── Ubicación: pagina-mms, barra de celular ───────────────────── */
.mobile-topbar .iossa-sw { margin-left: auto; }
.mobile-topbar .iossa-sw-op { height: 28px; padding: 0 0.7rem; }
@media (max-width: 768px) {
  .sidebar .iossa-sw { display: none; }        /* en celular va en la barra de arriba */
}
@media (max-width: 430px) {
  .mobile-topbar:has(.iossa-sw) .mobile-topbar-brand { display: none; }
}

/* ── Ubicación: Gran DT, barra verde ───────────────────────────── */
.navbar .iossa-sw { margin-left: -0.25rem; }
@media (max-width: 560px) {
  .navbar:has(.iossa-sw) .nav-brand-text { display: none; }
  .navbar .iossa-sw { margin-left: 0; }
  .navbar .iossa-sw-op { height: 28px; padding: 0 0.6rem; gap: 0.3rem; font-size: 0.76rem; }
  .navbar .iossa-sw-nuevo {
    position: absolute; top: -12px; right: -3px;
    height: 14px; padding: 0 4px; font-size: 0.52rem;
    border: 2px solid #0d1014; box-sizing: content-box;
  }
}
@media (max-width: 400px) {
  .navbar .iossa-sw-op { padding: 0 0.5rem; }
  .navbar .iossa-sw-op svg { display: none; }   /* solo texto: "Stats" | "Gran DT" */
}

/* ═══════════════════════════════════════════════════════════════
   Transición al cambiar de sección
   Salida: la página se desvanece (0,2 s) y aparece una línea de carga
   arriba. Llegada: la nueva sección entra con un fundido (0,35 s).
   Corto a propósito: una animación no acelera la carga, solo se nota.
   ═══════════════════════════════════════════════════════════════ */
html.iossa-saliendo,
html.iossa-llegando { background-color: #07090c; }

html.iossa-saliendo body {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
html.iossa-llegando body { animation: iossa-aparecer 0.35s ease-out both; }
@keyframes iossa-aparecer { from { opacity: 0; } to { opacity: 1; } }

.iossa-progreso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2147483647;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #ff7800, #00e05a);
  box-shadow: 0 0 12px rgba(0, 224, 90, 0.45);
  animation: iossa-progreso 2.6s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
  pointer-events: none;
}
.iossa-progreso.hacia-stats {
  background: linear-gradient(90deg, #00e05a, #ff7800);
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.45);
}
@keyframes iossa-progreso {
  0%   { transform: scaleX(0); }
  12%  { transform: scaleX(0.3); }
  100% { transform: scaleX(0.92); }
}

/* Sin bloque prefers-reduced-motion a propósito: todo es fundido o brillo, nada
   se desplaza. Windows con "Efectos de animación" apagado activa esa preferencia
   solo y dejaba la transición plana en casi todas las PC (ver iossa-seccion.js). */