/* =====================================================
   ATC.CSS — VISUALIZACIÓN AERONÁUTICA / FRACTAL
   Uso en pantalla (NO impresión)
===================================================== */

/* ===============================
   BASE GLOBAL
================================ */
html,
body {
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* ===============================
   MAPA FRACTAL
================================ */
.cf-map {
  position: relative;
  max-width: 402px;
  margin: 20px auto;
  overflow: hidden;
}

.cf-map img {
  width: 100%;
  display: block;
  border: 1px solid #555;
}

.cf-fractal-lines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,255,200,0.12) 0px,
      rgba(0,255,200,0.12) 1px,
      transparent 1px,
      transparent 16px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,215,0,0.10) 0px,
      rgba(255,215,0,0.10) 1px,
      transparent 1px,
      transparent 22px
    );
  animation: cfPulse 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cfPulse {
  0%   { opacity: 0.25; }
  50%  { opacity: 0.8; }
  100% { opacity: 0.25; }
}

/* ===============================
   RUTAS AÉREAS DINÁMICAS
================================ */
.cf-air-routes {
  position: relative;
  max-width: 402px;
  height: 120px;
  margin: 25px auto;
  overflow: hidden;
}

.cf-route {
  position: absolute;
  width: 110%;
  height: 2px;
  left: -110%;
  background: linear-gradient(
    90deg,
    transparent,
    #7fffd4,
    transparent
  );
  animation: cfRoute 5s linear infinite;
}

.cf-route.r1 { top: 30%; animation-delay: 0s; }
.cf-route.r2 { top: 55%; animation-delay: 1.5s; }
.cf-route.r3 { top: 75%; animation-delay: 3s; }

@keyframes cfRoute {
  from { left: -120%; }
  to   { left: 120%; }
}

/* ===============================
   SAR / EFECTO SATÉLITE
================================ */
.cf-sar {
  position: relative;
  max-width: 402px;
  margin: 25px auto;
  overflow: hidden;
}

.cf-sar img {
  width: 100%;
  display: block;
}

.cf-scan {
  position: absolute;
  top: -50%;
  width: 100%;
  height: 40%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0,255,200,0.35),
    transparent
  );
  animation: cfSar 4s linear infinite;
}

@keyframes cfSar {
  from { top: -40%; }
  to   { top: 120%; }
}


.centrado {
  display: flex;
  justify-content: center;
  margin: 20px 0; /* superior e inferior */
}

.recuadro-luminoso {
  display: inline-block;
  margin: 20px 0;
  padding: 10px;
  border-radius: 8px;
  background: #030;
  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.7),
    0 0 20px rgba(0, 255, 255, 0.6),
    0 0 30px rgba(0, 255, 255, 0.5);
}



/* ===============================
   SIDEBAR CYBERFRACTAL
================================ */
.sidebar-cf {
  width: 170px;
  padding: 10px;
  border: 1px solid #555;
  background: #262626;
  box-sizing: border-box;
}

/* ===============================
   CONTENEDOR GENERAL
================================ */
.wrapper,
main {
  max-width: 600px;
  margin: 0 auto;
}

/* ===============================
   FIGURE / FIGCAPTION (SISTEMA)
================================ */
figure {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

figure img {
  display: block;
  width: 100%;
}

figcaption {
  margin-top: 0;
  padding: 12px 16px;
  font-size: 0.95em;
  line-height: 1.5;
  color: #eaeaea;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  display: inline-block;
  max-width: 90%;
  text-align: left;
}

/* Ritmo entre figura y texto */
figure + .p-fractal {
  margin-top: 0.3rem;
}

/* ===============================
   TEXTO FIGCAPTION
================================ */
.fig-title {
  font-weight: 600;
  color: #ffffff;
}

.fig-credit {
  margin-top: 4px;
  font-size: 0.85em;
  color: #bdbdbd;
}

.fig-text {
  margin-top: 6px;
  font-style: italic;
  color: #cccccc;
}

/* ===============================
   TEXTO FRACTAL
================================ */
.p-fractal {
  margin-top: 0;
}

/* ===============================
   TABLAS LEGACY / NAVEGACIÓN
================================ */
table {
  table-layout: fixed;
}

td {
  overflow: visible;
  vertical-align: top;
}

td[width="402"] {
  max-width: 402px;
  overflow-x: hidden;
}

.nav-footer {
  display: flex;
  flex-direction: row;        /* eje horizontal */
  justify-content: center;    /* centra horizontalmente */
  align-items: center;        /* centra verticalmente */

  flex-wrap: nowrap;          /* ❗ NO permite saltos de línea */
  gap: 6px;                   /* espacio entre íconos */

  width: 100%;                /* ocupa el ancho del td */
  max-width: none;            /* ❗ elimina la restricción */
  margin: 0 auto;
}

/* imágenes */
.nav-footer a {
  display: inline-flex;
  align-items: center;
}

.nav-footer a img {
  display: block;
  height: auto;
  max-width: none;            /* mantiene tamaño original */
}


.right-links {
  text-align: left;
}

.fecha {
  text-align: right;
}

/* ===============================
   HEADER
================================ */
.header {
  position: relative;
}

.header ul.nav {
  max-width: 100%;
}

/* ===============================
   BRAVE / CHROMIUM
================================ */
.is-brave * {
  animation: none !important;
  transition: none !important;
}

/* ===============================
   IMPRESIÓN (NEUTRALIZACIÓN)
================================ */
@media print {

  * {
    animation: none !important;
    transition: none !important;
  }

  .cf-fractal-lines,
  .cf-air-routes,
  .cf-scan,
  .sidebar-cf {
    display: none !important;
  }

  html,
  body,
  .wrapper,
  main,
  table,
  tr,
  td,
  div {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
  }
}
/* === RESTAURAR FONDO CLÁSICO === */
html, body {
  background: #2f2f2f !important;
  background-image: none !important;
}
/* === APAGAR CAPAS FRACTALES GLOBALES === */
html::before,
html::after,
body::before,
body::after {
  content: none !important;
  display: none !important;
}