/* ============================================
   AYUDA — RESPONSIVE MÓVIL
   El header usa .ayuda-module-header SIN .module-header,
   por lo que ninguna regla global de .module-header aplica aquí.
   Los inline styles del JS ya garantizan el layout correcto;
   este CSS solo ajusta tamaños en pantallas pequeñas.
   ============================================ */

@media (max-width: 768px) {
    /* Título: reducir tamaño en móvil */
    .ayuda-module-header .ayuda-title {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .ayuda-module-header .ayuda-btn-volver {
        padding: 5px 8px !important;
    }

    .ayuda-module-header .ayuda-title {
        font-size: 0.9rem !important;
    }
}

/* ============================================
   BÚSQUEDA DENTRO DE LOS DOCUMENTOS — MÓVIL

   Los estilos base están en css/ayuda_busqueda.css, que no lleva ninguna media
   query. Aquí solo lo que cambia por debajo de 768px, que es donde el sistema
   corta el móvil.
   ============================================ */

@media (max-width: 767px) {
    .ab-caja {
        padding: 14px;
    }

    /* El campo y el botón dejan de compartir fila: en un teléfono, un botón
       "Buscar" al lado del campo deja para la pregunta un hueco de tres o cuatro
       palabras, y aquí lo que se escribe es una frase entera. */
    .ab-buscador {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .ab-input {
        flex: 1 1 100%;
        order: 2;
        padding: 6px 0;
    }

    .ab-lupa {
        order: 1;
        display: none;
    }

    .ab-boton {
        order: 3;
        width: 100%;
        margin-top: 8px;
    }

    .ab-ejemplos-label {
        flex: 1 1 100%;
        margin-bottom: 2px;
    }

    .ab-chip {
        max-width: 100%;
        text-align: left;
        white-space: normal;
    }

    /* El nombre del documento puede ser largo; en vez de recortarlo hasta dejarlo
       irreconocible, se le da la fila entera y la cita baja debajo. */
    .ab-doc {
        flex: 1 1 100%;
        white-space: normal;
        overflow: visible;
    }

    .ab-tarjeta {
        padding: 12px 13px;
    }

    .ab-tarjeta-pie {
        flex-direction: column;
        align-items: flex-start;
    }

    .ab-aviso {
        flex-wrap: wrap;
    }

    /* La franja de estado se apila: en un teléfono los cuatro datos en fila
       quedan cortados por la mitad y no se lee ninguno entero. */
    .ab-barra {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ab-barra-boton {
        width: 100%;
        padding: 9px 12px;
    }

    .ab-detalle-pie {
        flex-direction: column;
        align-items: stretch;
    }

    .ab-vacio {
        padding: 34px 14px;
    }
}

/* ============================================
   VISOR DE LA LEY — MÓVIL

   Base en css/ayuda_leyes.css. Aquí solo lo que cambia por debajo de 768px.
   ============================================ */

@media (max-width: 767px) {
    /* Sin márgenes: en un teléfono cada milímetro que se le quite al documento
       es una línea menos de texto a la vista, y el fondo oscuro alrededor no
       aporta nada cuando la ventana ya ocupa todo. */
    .al-visor {
        padding: 0;
    }

    .al-visor-panel {
        height: 100%;
        border-radius: 0;
    }

    .al-visor-cab {
        padding: 10px 12px;
    }

    .al-visor-titulo {
        font-size: 12px;
    }

    .al-visor-accion,
    .al-visor-cerrar {
        width: 36px;
        height: 36px;
    }
}