/* ============================================================
   mobile.css — Facultad de la Fuerza Aérea
   Responsive para mobile (max-width: 768px)
   ============================================================ */

@media screen and (max-width: 768px) {

  /* =============================================
     NAVBAR / MENÚ DESPLEGABLE FLOTANTE
  ============================================= */

  .navbar {
    background-color: #0097D7 !important;
    min-height: 55px !important; /* Mantiene la barra azul delgada */
    border: none !important;
  }

  .navbar-header {
    min-height: 55px;
    display: flex;
    justify-content: flex-end;
  }

  /* Hamburguesa visible y posicionada */
  .navbar-toggle {
    display: block !important;
    margin-top: 10px !important;
    margin-right: 15px !important;
    border: 1px solid #fff;
    background-color: transparent;
  }

  .navbar-toggle .icon-bar {
    background-color: #fff;
  }

  /* El Menú Desplegable (absoluto para no empujar la web) */
  .navbar-collapse {
    position: absolute !important;
    top: 100%; /* Inicia justo debajo de la barra azul */
    left: 0;
    width: 100%;
    background-color: #0097D7; /* Mismo fondo azul */
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0px 8px 15px rgba(0,0,0,0.2); /* Sombra para diferenciar del fondo */
    padding: 0 !important;
    z-index: 1050;
  }

  /* =============================================
     ENLACES DEL MENÚ (APILAMIENTO VERTICAL ESTRICTO)
  ============================================= */

  #menu-mobile-ffa .nav.nav-tabs {
    display: block !important;
    border-bottom: none;
    margin: 0;
    padding: 0;
  }

  #menu-mobile-ffa .nav > li {
    display: block !important;
    float: none !important; /* Anula el float nativo de Bootstrap 3 */
    width: 100%;
  }

  #menu-mobile-ffa .nav > li > a {
    display: block;
    width: 100%;
    color: #fff;
    text-align: center;
    padding: 15px;
    font-size: 15px;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    margin: 0;
    white-space: normal; /* Permite que textos largos bajen a otra línea */
  }

  /* Quitar borde inferior al último enlace */
  #menu-mobile-ffa .nav > li:last-child > a {
    border-bottom: none !important;
  }

  /* Feedback visual al interactuar con el menú */
  #menu-mobile-ffa .nav > li > a:hover,
  #menu-mobile-ffa .nav > li > a:focus,
  #menu-mobile-ffa .nav > li.active > a {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #fff !important;
  }

  /* =============================================
     CONTENIDO PRINCIPAL — separación del navbar
  ============================================= */

  .titular {
    margin-top: 80px !important;
  }

  .content {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0 10px;
  }

  .slider {
    margin-top: 80px;
  }

  /* =============================================
     TEXTOS Y TIPOGRAFÍA
  ============================================= */

  h2 {
    font-size: 1.4em;
  }

  h3 {
    font-size: 1.2em;
  }

  h4 {
    font-size: 1em;
  }

  p {
    font-size: 14px;
  }

  /* =============================================
     SEDES — grilla de imágenes de institutos
  ============================================= */

  .services .col-md-4 {
    width: 100%;
    float: none;
    text-align: center;
    margin-bottom: 20px;
  }

  .services .col-md-4 img {
    max-width: 80%;
    height: 120px !important;
  }

  /* =============================================
     LINKS DE INTERÉS (contenedor-imagenes en index.html)
  ============================================= */

  .contenedor-imagenes {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
    margin-top: 30px;
  }

  .contenedor-imagenes img {
    height: 60px;
    width: auto;
  }

  /* =============================================
     BOTONES (btn, btn1)
  ============================================= */

  .btn,
  .btn1 {
    white-space: normal !important;  /* Permite que el texto envuelva */
    width: 90%;
    max-width: 400px;
    display: block;
    margin: 10px auto;
    font-size: 14px;
    padding: 10px 15px;
  }

  /* =============================================
     NORMATIVA — lista de links de documentos
  ============================================= */

  .content > p > a,
  .content p a {
    word-break: break-word;
  }

  /* =============================================
     MODAL (CV de autoridades en index.html)
  ============================================= */

  .modal-content {
    width: 95% !important;
    margin: 0 auto;
  }

  .modal-dialog {
    width: 95%;
    margin: 10px auto;
  }

  /* =============================================
     FOOTER
  ============================================= */

  .content2 {
    margin-left: 4% !important;
    margin-right: 4% !important;
  }

  /* Las dos columnas del footer (contacto + mapa) se apilan */
  .col-md-6.f-contact {
    width: 100%;
    float: none;
  }

  .widgetheading {
    margin-top: 30px;
    margin-left: 0 !important;
    text-align: center;
    font-size: 16px;
  }

  .widgetheading h4 {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Mapa iframe: ancho fijo de 500px rompe el layout en mobile */
  .map {
    margin-right: 0 !important;
    margin-top: 20px;
    text-align: center;
  }

  .map iframe {
    width: 100% !important;
    max-width: 100%;
    height: 250px !important;
  }

  /* Barra inferior del footer */
  .last-div {
    padding: 15px 10px;
  }

  ul.social-network {
    float: none !important;
    justify-content: center;
    margin-left: 0 !important;
    gap: 15px;
  }

  .copyright {
    float: none !important;
    text-align: center;
    margin-top: 15px !important;
    font-size: 13px;
  }

  /* Botón scrollup — que no tape contenido en mobile */
  a.scrollup {
    right: 15px;
    bottom: 15px;
    height: 44px;
    width: 44px;
    font-size: 18px;
    line-height: 44px;
  }

  /* =============================================
     OFERTA ACADÉMICA — columnas de cards/detalles
  ============================================= */

  .col-md-10.col-md-offset-1 {
    width: 100%;
    margin-left: 0;
    padding: 0 15px;
  }

  /* Grilla general Bootstrap col-md-* → apilado en mobile */
  [class*="col-md-"] {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  .row {
    margin-left: 0;
    margin-right: 0;
  }

  /* =============================================
     IMÁGENES GENERALES
  ============================================= */

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

  /* Imagen de ícono de archivo (file-arrow-up-solid.png) */
  img[src*="file-arrow-up"] {
    height: 70px !important;
  }

} /* fin @media 768px */

/* =============================================
   EXTRA: pantallas muy pequeñas (max-width: 480px)
============================================= */

@media screen and (max-width: 480px) {

  #contenedorSvg1 {
    height: 50px !important;
  }

  .titular {
    margin-top: 150px !important;
  }

  h2 {
    font-size: 1.2em;
  }

  h3 {
    font-size: 1.05em;
  }

  .nav > li > a {
    padding: 10px 12px;
    font-size: 13px;
  }

  .btn {
    font-size: 13px;
    width: 25%;
  }

 .btn1 {
    font-size: 13px;
    width: 95%;
  }

  .widgetheading h4 {
    font-size: 13px;
  }

  .map iframe {
    height: 200px !important;
  }

  .contenedor-imagenes img {
    height: 45px !important;
  }

}