/* --- SOLO MÓVIL --- */

.nav-toggle {
    display: none !important;
}


@media (max-width: 800px) {
    #page-content section {
        padding: 0px !important;
    }
}

@media (max-width: 991px) {

    body.nav-collapsed .nav-white .me-nav > li {
        margin-left: 20px !important;
    }

.nav-toggle {
  display: flex;
  align-items: center;
  gap: 6px;          /* separación entre flecha y menú */
}

.nav-toggle .icon-arrow {
  font-size: 24px;
}

.nav-toggle .icon-menu {
  font-size: 22px;
}

/* Botón hamburguesa REUBICADO */
.nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 2000;
    }

  /* Opcional: sombra suave para que se vea mejor sobre cualquier fondo */
  .nav-toggle:hover {
    background: rgba(255,255,255,1);
  }

  /* Ajustamos el header para que el logo no quede tapado */
  #nav-content .my-logo {
    margin-top: 10px; /* baja un poco el logo en móvil */
  }

  /* Tamaños del menú en móvil - estado ABIERTO (por defecto) */
  #nav-content {
    width: 80px;
    transition: width 0.3s ease;
  }

  #page-content {
    margin-left: 80px;
    transition: margin-left 0.3s ease;
  }


  /* ===== ESTADO ABIERTO (solo TEXTO, SIN iconos) ===== */

  /* Texto visible */
  #nav-content .menu span {
    display: inline-block !important;
  }

  /* Iconos ocultos */
  #nav-content .menu i {
    display: none !important;
  }


  /* ===== ESTADO COLAPSADO (solo ICONOS, SIN texto) ===== */

  body.nav-collapsed #nav-content {
    width: 50px;
  }

  body.nav-collapsed #page-content {
    margin-left: 50px;
  }

  /* Ocultamos el texto al plegar */
  body.nav-collapsed #nav-content .menu span {
    display: none !important;
  }

  /* Mostramos los iconos al plegar */
  body.nav-collapsed #nav-content .menu i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 16px !important;
    margin: 0 auto !important;
  }

  /* Centramos el enlace cuando está plegado para que el icono quede en medio */
  body.nav-collapsed #nav-content .menu a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-indent: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  /* Logo reducido al colapsar */
  body.nav-collapsed .my-logo img {
    max-width: 40px;
    margin: 10px auto !important;
    display: block;
  }




/* Estado ABIERTO (normal) */
.nav-toggle i {
    color: #777;             /* un gris clarito */
    transition: color 0.3s ease;
}

/* Estado PLEGADO → icono más oscuro */
body.nav-collapsed .nav-toggle i {
    color: #539db4 !important;  /* gris mucho más oscuro */
}

  



  /* Asegura que el contenido quede siempre por encima */
  .page-title .content {
      position: relative;
      z-index: 2;
      padding: 15px;
  }
}





/* MOBILE VERSION — full-size, soft transparent background image */
@media (max-width: 768px) {

  .page-title .page-title-bg {
      position: absolute;
      top: 0;
      left: 0;                    /* override right:0 */
      width: 100% !important;     /* override width:50% */
      height: 100%;
      z-index: 1;
      opacity: 0.20;              /* soft transparency */
      overflow: hidden;
  }

  .page-title .page-title-bg img,
  .imgBlog {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.55;              /* extra transparency on the image */
      filter: brightness(0.85);   /* softens image so text pops */
  }

  /* ensures text stays above image */
  .page-title .content {
      position: relative;
      z-index: 2;
  }
}