/* ✅ Espacio para  que aparezca inicio  de  contenido delspues del titulo  h1  y no quede  tapada la informacion*/

#espaciador-h1-1 {
  height: 0px;
}

@media only screen and (max-width: 767px) {
  #espaciador-h1-1 {
    height: 10px !important;
  }
}

  /* ✅ Espacio para  que aparezca informacion despues del  scroll */  
[id^="id"] {
  scroll-margin-top: 70px;
}

@media screen and (max-width: 768px) {
  [id^="id"] {
    scroll-margin-top: 70px;
  }
}


/* Estilo global para todos los h5 */
h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.8rem 0 0.4rem 0;
    line-height: 1.4;
}

/* Modo oscuro para todos los h5 */
body.oscuro h5 {
    color: #e0e0e0;
}


/* ========== EVITAR DESBORDE HORIZONTAL GLOBAL ========== */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}

* {
    max-width: 100%;
    box-sizing: border-box;
}

/* Asegurar que todos los elementos respeten el ancho del viewport */
img, iframe, video, table, pre, code, .articulo, .bloque-articulo, #indice, .custom-container {
    max-width: 100%;
    height: auto;
    overflow-x: auto; /* solo si necesitas scroll interno en tablas/código, pero no rompen layout */
}

/* Para tablas muy anchas: permitir scroll interno pero sin romper el contenedor */
table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

/* Ajustar padding del body en escritorio para que no genere desborde */
@media screen and (min-width: 769px) {
    body {
        padding: 2rem 5rem 2rem 5rem; /* simétrico y más seguro */
    }
}

/* Móvil: padding más pequeño */
@media screen and (max-width: 768px) {
    body {
        padding: 1rem !important;
        margin-top: 70px; /* compensa header flotante */
    }
}

/* Forzar que el contenedor flotante del título nunca se desborde */
.h1-flotante, 
.h1-flotante * {
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box;
}

/* Evitar que el buscador o botones flotantes generen scroll */
#buscador-flotante, #btn-modo-oscuro, #btn-articulos-modal, #scrollTopBtn {
    max-width: 90px; /* opcional, evita que se expandan más de la cuenta */
}

/* En móvil, asegurar que el input del buscador no desborde */
@media (max-width: 600px) {
    #buscador-flotante.abierto input {
        width: calc(100% - 50px) !important;
    }
}