/* ============================================================================
   PROYECTO: Eslabón Digital
   ARCHIVO: assets/css/views/cookies/cookies-responsive.css
   MÓDULO: Aviso de Cookies — Media queries

   Breakpoints canónicos:
     - hasta 480px  : móviles pequeños
     - hasta 820px  : móviles grandes / tablet vertical
     - hasta 1280px : tablet apaisada / portátil
     - hasta 1600px : monitor mediano
     - +1600px      : monitor grande (definido en principal.css)

   Cargar DESPUÉS de cookies.css
   ============================================================================ */

/* ==========================================
   RESPONSIVE (Móviles)
   ========================================== */
@media screen and (max-width: 820px) {
    .cookie-container {
        padding: 15px;
    }
    
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .cookie-text {
        flex-direction: column;
        gap: 10px;
    }

    .cookie-icono {
        margin-right: 0;
        font-size: 1.5rem;
    }

    .cookie-container button {
        margin-left: 0;
        width: 100%; /* Botón ancho completo para tocar fácil con el dedo */
    }
}