/* apaisado.css - Optimizado para orientación horizontal en móviles (elnacionalista.net) */

/* Oculta sidebar por default en móviles (pantallas pequeñas, vertical u horizontal) */
@media screen and (max-width: 767px) {
  #sidebar {
    display: none; /* Oculta sidebar en móvil */
  }
  /* Ajustes para layout móvil: contenido full-width */
  #main {
    width: 100%;
    margin: 0;
  }
}

/* Muestra sidebar y layout escritorio en orientación horizontal (landscape) en móviles */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  #sidebar {
    display: block !important; /* Fuerza visibilidad, sobreescribe hides */
    position: relative !important; /* Cambia fixed a relative para adaptación */
    width: calc(30vw * 0.95) !important; /* Reduce un 5% para dar aire al left y evitar clip */
    min-width: 75px !important;
    max-width: 190px !important;
    float: left !important;
    overflow: visible !important; /* Previene recortes */
    height: auto !important; /* Evita height: 100% que causa overflows */
  }
  #sidebar.inactive {
    display: block !important; /* Sobreescribe .inactive */
    margin-left: 0 !important;
  }
  .sidebar-scaled {
    transform: scale(0.85) translateX(6%) !important; /* Positivo para mover a derecha y rellenar gap */
    transform-origin: left top;
    width: 110% !important; /* Compensa para rellenar sin shifts ni huecos */
    height: auto;
  }
  #main {
    width: calc(100vw - (30vw * 0.95)) !important; /* Ajusta main al ancho efectivo de sidebar */
    margin-left: calc(30vw * 0.95) !important;
    float: right !important;
  }
  #menu {
    position: relative !important; /* Previene interferencias de menú */
    width: auto !important;
  }
  body {
    transform: none !important; /* Cancela escala global si existía */
    width: 100vw !important;
    overflow-x: hidden !important; /* Evita scroll horizontal o cortes */
  }
}

/* Para desktops (pantallas grandes), siempre muestra todo */
@media screen and (min-width: 768px) {
  #sidebar {
    display: block;
  }
  /* Tu layout normal de escritorio */
}

/* ====== Sidebar Menu (elnacionalista.net) ====== */
/* Mostrar/ocultar submenú con .active en el opener */
#menu .opener + ul {
  display: none;
}
#menu .opener.active + ul {
  display: block;
}

/* Opener como fila flexible con chevron a la derecha */
#menu .opener {
  display: flex;
  align-items: center;
  justify-content: space-between; /* texto a la izquierda, chevron a la derecha */
  gap: .75rem;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  position: relative;
  padding: .2rem 0; /* altura del item; ajusta si quieres */
}

/* Chevron a la derecha, centrado y sin pisar el texto */
#menu .opener::after {
  content: "";
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); /* derecha (cerrado) */
  transition: transform 160ms ease;
  opacity: .9;
  margin-left: .25rem; /* separa del texto */
}

/* Chevron rotado cuando está abierto */
#menu .opener.active::after {
  transform: rotate(45deg); /* abajo (abierto) */
}

/* Foco accesible para teclado */
#menu .opener:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Espaciado y sangría del submenú */
#menu .opener + ul {
  margin-top: .35rem;
  margin-bottom: .5rem;
  padding-left: 1.25rem; /* sangría del subnivel */
}

/* Evitar recortes inesperados */
#menu ul {
  overflow: visible;
}

/* Enlaces del menú: interacción básica coherente con la plantilla */
#menu a {
  text-decoration: none;
}
#menu a:hover,
#menu a:focus {
  text-decoration: underline;
}

/* Responsive mínimo */
@media (max-width: 980px) {
  #menu { width: 100%; }
}

/* Refuerzo por si hay estilos globales más fuertes */
#sidebar #menu .opener + ul { display: none; }
#sidebar #menu .opener.active + ul { display: block; }
/* Color del texto del opener cuando está abierto */
#menu .opener.active { color: inherit; }
/* Fix gap between fixed sidebar and main content in mobile landscape */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 30vw !important;
    min-width: 80px;
    max-width: 200px;
    overflow-y: auto !important;
    height: 100vh !important;
    z-index: 1000 !important;
  }
  #main {
    margin-left: 30vw !important;
    width: calc(100vw - 30vw) !important;
    overflow-y: auto !important;
    height: 100vh !important;
  }
}